Этот дизайн сделал ИИ. И это видно за секунду

Шаг 0: что нужно до старта

Всё, что ниже, — это скиллы и MCP-серверы для Claude Code. Скилл — это папка с файлом SKILL.md: набор инструкций, который модель подхватывает сама, когда задача под него подходит. MCP — это провод к внешнему сервису: браузеру, Figma, базе. Ни то, ни другое не требует программирования, ставится командой в терминале.

• Claude Code ещё не стоит — поставить и оплатить из России →
• Хочется без подписки — Claude Code бесплатно →
• Не понимаешь, что такое MCP — MCP за вечер →
• Проект без каркаса — каркас и CLAUDE.md →

И ещё одно, до всякой установки. Половина ИИ-акцента лечится не скиллом, а одной фразой в брифе. «Сделай красивый лендинг» — это разрешение взять дефолты. «Лендинг для студии архитектуры, аудитория — заказчики частных домов, настроение сдержанное, никаких градиентов, только фото и типографика» — это уже рамка. Скиллы ниже нужны как раз затем, чтобы такую рамку не приходилось выписывать вручную каждый раз.

frontend-design — официальный скилл Anthropic

Это тот случай, когда решение лежит в репозитории самих разработчиков модели. Скилл frontend-design живёт в anthropics/skills — официальном наборе Anthropic, который к июлю 2026 собрал больше 162 тысяч звёзд на GitHub. Рядом в том же репозитории лежат brand-guidelines, canvas-design, theme-factory и webapp-testing — это не одинокий файл, а поддерживаемая линейка.

Работает он не как «сделай красиво», а как порядок действий, который модель обязана пройти до кода. Сначала назвать конкретный предмет, аудиторию и единственную задачу страницы. Потом придумать компактную систему токенов: палитра из четырёх-шести именованных цветов, пара шрифтов (заголовочный и текстовый) плюс утилитарный для подписей и цифр, тип раскладки, одна запоминающаяся деталь. Потом — сверить придуманное с брифом и переписать всё, что вышло неотличимым от чужого. И только после этого писать код по утверждённому плану (SKILL.md).

Финальный шаг там самый недооценённый: раскритиковать собственную работу и убрать один лишний элемент. Не добавить — убрать. Именно на этом шаге отваливается декоративный градиент, который «просто был», и анимация, которая никому ничего не сообщала.

Про моушен в скилле сказано отдельно и жёстко: движение работает, когда его мало и оно собрано в один момент; россыпь эффектов читается как признак генерации, и настройку «уменьшить движение» надо уважать (там же).

npx skills add anthropics/skills --skill frontend-design

# или весь официальный набор целиком
npx skills add anthropics/skills

taste-skill — три ручки вместо расплывчатых просьб

Главная боль в разговоре с моделью про дизайн — что просьбы нечем измерить. «Сделай посмелее» она понимает как «добавь ещё градиент». «Поспокойнее» — как «убери вообще всё». Ты крутишь результат вслепую, потому что у слова «смелее» нет шкалы.

Скилл taste-skill — почти 65 тысяч звёзд, с подзаголовком «gives your AI good taste» — решает это грубо и работающе: превращает вкус в три числовые ручки от 1 до 10 (README).

DESIGN_VARIANCE отвечает за смелость раскладки: внизу шкалы — выровненный по центру, аккуратный, предсказуемый макет; вверху — асимметрия, смещённые блоки, разломанная сетка. MOTION_INTENSITY — глубина движения: от простого ховера до скролл-анимаций и магнитных элементов. VISUAL_DENSITY — плотность: от воздушного лендинга с огромными полями до дашборда, где на экране много всего (там же).

Дальше это перестаёт быть спором о вкусах и становится разговором про числа. Ты говоришь: variance 7, motion 3, density 4 — и получаешь смелую раскладку с почти неподвижной страницей и большим количеством воздуха. Не нравится — двигаешь одну ручку, а не переписываешь бриф целиком. И, что важнее, можешь один раз записать свои значения в CLAUDE.md проекта, и они перестанут сбрасываться в новом чате.

# весь набор
npx skills add https://github.com/Leonxlnx/taste-skill

# или один нужный скилл
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Внутри репозитория лежит не один файл, а семейство: отдельный скилл под новые интерфейсы, отдельный — под редизайн уже существующего проекта (там сначала аудит того, что есть, и только потом правки), отдельный — чтобы сперва нарисовать референс картинкой и уже по ней собирать вёрстку. Ставить всё сразу смысла нет: возьми под свою задачу.

Про пятый скилл, которого нет

Тут придётся сказать неудобное. По подборкам «скиллов для дизайна» гуляет пятый пункт — скилл animate, который описывают как «моушен-курс Эмиля Ковальски, упакованный в скилл». Звучит убедительно: одна команда — и у модели появляется чувство движения.

Я пошёл искать репозиторий, чтобы дать сюда ссылку. Канонического репозитория нет. Есть россыпь мелких форков и самоделок на десяток звёзд, ни один из них не является ни официальным, ни авторским, ни просто заметным. Ссылку в никуда я не дам — тем более что это скилл, то есть чужие инструкции, которые твоя модель будет выполнять.

При этом человек, на которого ссылаются, абсолютно реальный, и это как раз самое ценное в пятом пункте. Эмиль Ковальски — дизайн-инженер, автор библиотек Sonner и Vaul, которые стоят в тысячах проектов. Его курс Animations on the Web — четыре модуля: теория движения без единой строчки кода, CSS-анимации, Motion для React и отдельный модуль про разницу между «хорошей» и «отличной» анимацией. В основе — набор из восемнадцати кривых плавности и подход, который он называет Easing Blueprint (рассказ автора о курсе).

Поэтому вместо несуществующего скилла — два честных пути. Первый: взять первоисточник у автора и прочитать хотя бы модуль теории, там нет кода и он короткий; после него ты сам начнёшь замечать, что не так с дефолтной анимацией модели. Второй: не искать отдельный скилл вообще, а крутить ручку MOTION_INTENSITY из предыдущего раздела и опираться на раздел про моушен в frontend-design — оба покрывают ровно тот же вопрос и оба существуют.

playwright-mcp — дать модели глаза

Даже с идеальными правилами остаётся разрыв: модель пишет код вслепую. Она не видит, что кнопка уехала за край на телефоне, что тёмно-серый текст на сером фоне не читается, что модалка открылась под шапкой. Ты видишь — и становишься тестировщиком при собственном ассистенте.

playwright-mcp от Microsoft (свыше 35 тысяч звёзд) закрывает этот разрыв: модель получает настоящий браузер и может сама открыть страницу, покликать, заполнить форму, пройтись по сценарию.

Ключевая деталь в том, как он показывает страницу. Не скриншотом. Он отдаёт дерево доступности — структурированное описание того, что на экране и как элементы связаны. В документации это объясняют прямо: подход не требует зрения у модели, работает предсказуемо и тратит заметно меньше контекста, чем разбор картинок (README playwright-mcp). Для дизайна это означает приятный побочный эффект: модель видит страницу примерно так, как её видит скринридер, и проблемы с доступностью всплывают сами.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Дальше это превращается в петлю, от которой можно отойти: «открой страницу, проверь на ширине телефона и на десктопе, найди, где текст вылезает за контейнер и где контраст слишком низкий, — почини и проверь ещё раз». Модель делает, смотрит, исправляет и снова смотрит. Ты подключаешься, когда всё сошлось, а не после каждой правки.

Figma MCP — когда дизайн уже нарисован

Последний инструмент бьёт по проблеме с другой стороны. Все предыдущие учат модель выбирать лучше. Этот убирает сам выбор: если макет уже есть, придумывать нечего, надо переносить.

Обычный сценарий переноса — кинуть скриншот макета и сказать «свёрстай так же». И начинается: цвет «примерно такой», отступ «на глаз», шрифт похожий. Модель не измеряет картинку, она её угадывает, и весь ИИ-акцент возвращается через заднюю дверь.

Figma-Context-MCP (он же Framelink, свыше 15 тысяч звёзд) даёт модели доступ к самим данным макета через API Figma. Причём не сырым ответом API — сервер вычищает лишнее и оставляет то, что нужно для вёрстки: раскладку и стили. Авторы формулируют цель прямо — реализовать дизайн в любом фреймворке с одного захода (README Framelink). Отступ становится числом, цвет — значением, а не догадкой по пикселям.

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp",
               "--figma-api-key=ТВОЙ_КЛЮЧ", "--stdio"]
    }
  }
}

На macOS и Linux то же самое без обёртки cmd /c: команда npx, дальше те же аргументы. Токен создаётся в настройках аккаунта Figma. После подключения работа выглядит так: кидаешь ссылку на фрейм и просишь собрать по нему страницу — модель читает раскладку из макета, а не пересказывает картинку своими словами.

Что ты увидишь

Это не теория. Один и тот же запрос на голом Claude Code и на Claude Code со скиллами. Модель та же — разница только в том, какие правила она читает на входе.

Чтобы не споткнуться

Три вещи, на которых спотыкаются почти все — и как пройти их сразу.

А если…

Четыре сомнения, которые ловят на входе. Отвечаю прямо.

Зачем тебе это на самом деле

Дело не в том, что градиент некрасивый. Дело в том, что дефолтный дизайн считывается как дефолтное отношение. Человек попадает на страницу, за секунду узнаёт знакомый набор — и делает вывод не про дизайн, а про тебя: сделано на отвяжись, значит и продукт такой же. Ты этого вывода даже не увидишь, он случится до первого прокрута.

Обратная сторона приятнее. Отличаться сейчас дешевле, чем когда-либо: рынок завален одинаковыми страницами, и достаточно, чтобы твоя выглядела осознанной. Не гениальной — просто сделанной под конкретный предмет и конкретных людей. Четыре инструмента выше ровно это и дают: не чувство прекрасного, а обязанность принять решение там, где раньше подставлялся дефолт.

И ещё один слой, который замечаешь не сразу. Когда правила записаны, они перестают зависеть от твоего настроения и от того, что ты помнишь в конкретный вечер. Проект выглядит одинаково хорошо в понедельник и в три часа ночи в пятницу. Для одного человека, который тянет всё сам, это важнее любого отдельного приёма.

А дальше

Скиллы закрывают вопрос «почему это выглядит как ИИ». Но остаётся вопрос побольше: что именно ты собираешься этим строить.

Дизайн — одно звено. Дальше идут тема, которая цепляет, контент, который приводит людей, воронка, которая превращает их в заявки, и продукт, за который платят. У нас это собрано в контент-завод на Claude Code: поиск трендов, карусели и рилсы пачкой, гайды-лид-магниты, воронки на кодовые слова, платёжки. Ту же логику — записать правила один раз и дальше запускать — разбираем на практикуме, под твою нишу.

По соседним темам: агентство из скиллов внутри Claude Code →, 15 скиллов, прошедших проверку →, Claude думает, GPT Image рисует →

Источники

Все репозитории проверены 19 июля 2026 года. Цифры по звёздам на эту дату: anthropics/skills — 162 429, Leonxlnx/taste-skill — 64 945, microsoft/playwright-mcp — 35 239, GLips/Figma-Context-MCP — 15 431. Скилла animate с каноническим репозиторием на эту дату не существует — вместо него ссылка на первоисточник по моушену.