Три skill'а вкуса плюс глаза через MCP вместо веб-дизайнера

Что показано

Автор (nateherkai, судя по нашивке на толстовке - AIS) обещает, что Claude с правильной сборкой инструментов заменяет веб-дизайнера. В кадре - профиль Impeccable с командой установки, профиль Эмиля Ковальски в X, и в конце иконки Figma и Playwright с общей фразой "connect Claude to tools like...". Ни одной реальной консоли с настройкой Figma или Playwright в ролике нет, вся эта часть просто продекларирована.

Почему это работает

LLM не испытывает проблем с самим кодом, проблема с дизайнерским вкусом: Claude одинаково легко сверстает и продуманный лендинг, и generic-шаблон с закруглёнными карточками и лорем-ипсумом, потому что в обучающих данных того и другого поровну. Skill - это не плагин и не код, а текстовый SKILL.md с правилами и антипаттернами ("не бери side-stripe border", "не бери системный CSS-easing, бери кастомную кривую"), который Claude читает перед тем как писать вёрстку. Три skill'а закрывают разные дыры: Impeccable даёт общий словарь (spacing, типографика, layout), emil-design-eng - конкретно про анимации и микро-детали, taste-skill - про то, чтобы не съезжать в одинаковый "AI slop". Figma и Playwright MCP решают вторую половину проблемы: без них у модели нет обратной связи, она не видит, что сама нарисовала. Figma MCP отдаёт реальный референс с готовыми отступами и переменными, Playwright даёт Claude открыть получившийся сайт в браузере и посмотреть на него, прежде чем сказать "готово".

Skill не программирует Claude на конкретный стиль, он даёт словарь, чтобы модель могла сама раскритиковать свою вёрстку раньше, чем покажет её вам.

Как повторить

1. Поставьте три skill'а (нужен Node/npx):

npx skills add pbakaus/impeccable
npx skills add emilkowalski/skills
npx skills add leonxlnx/taste-skill

Первая команда ставит только Impeccable. Вторая тянет весь пакет Эмиля Ковальски, десять skill'ов сразу, включая emil-design-eng - для одного этого skill'а нужен флаг --skill emil-design-eng.

2. Подключите Playwright MCP, это официальный пакет Microsoft:

claude mcp add playwright -- npx @playwright/mcp@latest

Без двойного дефиса -- перед npx (в ролике его нет) Claude Code попытается разобрать npx @playwright/mcp@latest как свои собственные флаги и упадёт с ошибкой - это разделитель между опциями CLI и командой сервера, обязателен по документации.

3. Подключите Figma через официальный плагин:

claude plugin install figma@claude-plugins-official

Дальше откроется окно авторизации, а в самой Figma нужно включить MCP-тумблер в сайдбаре Dev Mode. Без открытого файла с включённым Dev Mode этот сервер ничего не отдаст - если готового макета в Figma у вас нет, этот пункт можно смело пропустить. Важно: Dev Mode нет на бесплатном тарифе Figma - нужен платный Dev-seat (от 12 $/мес на Professional при годовой оплате) или Full-seat, иначе тумблер включать не в чем.

4. Перезапустите Claude Code, чтобы skill'ы и MCP подхватились.
5. Опишите сайт текстом - референсы, тон, структуру страниц - и попросите Claude собрать сайт и сразу открыть его через Playwright, чтобы свериться визуально.

Проверочный прогон

Спросите у Claude, какие skill'ы сейчас активны - должны быть impeccable, emil-design-eng, taste-skill. claude mcp list покажет playwright и figma со статусом connected (если Figma не connected, значит не включили тумблер в Dev Mode). Дайте задачу собрать простую секцию лендинга и попросите открыть её через Playwright и снять скриншот. Если Claude реально открывает страницу и правит вёрстку по тому, что увидел, связка работает. Если просто пишет код и пишет "готово" без скриншота, MCP не подключился, возвращайтесь к шагу 4.

Где это пригодится

Если у вас свой сайт или лендинг, где вёрстку правят руками раз в квартал, и держать дизайнера на подхвате смысла нет, эта связка снимает самую скучную часть работы: не "куда поставить блок", а "почему это выглядит как шаблон с конструктора". Особенно заходит, если вы и так работаете в Claude Code как в основном инструменте и не хотите переключаться в Figma руками ради каждой мелочи. У себя эту тройку skill'ов пока не ставил и связку с Playwright/Figma MCP руками не гонял - сначала хочется понять, не переспорит ли Impeccable вкус, который уже зашит в собственных дизайн-skill'ах.

Ссылки и ресурсы

Все репозитории и пакеты рабочие и бесплатны в установке; платить придётся только за Figma Dev Mode, если его ещё нет.

• pbakaus/impeccable: https://github.com/pbakaus/impeccable - словарь дизайна для AI-агентов, 24 команды и 61 детерминированное правило проверки, Apache 2.0, бесплатно. Ставится npx skills add pbakaus/impeccable.
• emilkowalski/skills: https://github.com/emilkowalski/skills - пакет из десяти skill'ов от дизайн-инженера Linear (ex-Vercel) Эмиля Ковальски, включая нужный emil-design-eng, MIT, бесплатно.
• Leonxlnx/taste-skill: https://github.com/Leonxlnx/taste-skill - "анти-slop фреймворк" для фронтенда, несколько пресетов (soft, minimalist, brutalist и т.д.), MIT, бесплатно.
• @playwright/mcp: https://github.com/microsoft/playwright-mcp - официальный MCP-сервер Microsoft поверх Playwright, бесплатный, без ключей и подписок.
• Плагин Figma: https://claude.com/plugins/figma - официальный плагин Anthropic, сам бесплатный, но требует открытый файл в Figma с включённым Dev Mode, а Dev Mode есть только на платных тарифах Figma (Dev-seat от 12 $/мес на Professional, годовая оплата).
• animations.dev: https://animations.dev - платный курс Эмиля Ковальски по веб-анимациям (открывается на 10 дней несколько раз в год), упомянут в его профиле X в кадре ролика - не часть сетапа, просто контекст, кто он такой.

Оговорки

• Все три skill'а и оба MCP реальны, я проверил их по официальным репозиториям и докам (GitHub pbakaus/impeccable, emilkowalski/skills, Leonxlnx/taste-skill, playwright.dev, help.figma.com). Это не выдумка автора, в отличие от истории с несуществующим "Council" у Anthropic, на которую я уже как-то попадался.
• Цифры популярности (installs, звёзды), которые всплывали в поиске, я брал с агрегаторов вроде skills.sh и skillsllm.com, а не напрямую с GitHub API, за их точность не ручаюсь и в карточку их не выносил.
• Ролик обрублен намеренно: ни одной реальной команды для Figma или Playwright в кадре нет, только логотипы. Часть "полный сетап" продаётся через комментарий "DIE" в директ, это стандартный growth-хак под алгоритм Instagram, комментарии поднимают охваты роликам. Гарантии, что в директе пришлют что-то ценнее уже найденного в открытых источниках, никакой нет.
• Заголовок "Claude just killed web designers" - рекламное преувеличение. Skill'ы дают язык и дисциплину самопроверки, но не гарантируют результат уровня студии за один промпт. У самого Impeccable в skill'е отдельные команды craft, audit, polish, harden, то есть авторы сами закладывают несколько проходов, а не один запрос.
• Figma MCP работает только с открытым файлом и включённым Dev Mode, то есть нужен готовый макет. Без макета этот кусок связки просто не нужен, сайт можно собирать по одному текстовому промпту и без Figma.