Дизайн от Claude больше не похож на шаблон: 4 навыка против ИИ-дизайна

Что изменится после установки

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

Это не «магия дизайна из коробки», и это не один инструмент в четырёх обёртках — они правда разного класса. Impeccable даёт общий словарь и детерминированные проверки. Hallmark строит страницу под конкретный бриф и умеет разобрать понравившийся дизайн на составляющие. Stitch Skills — вообще не текстовые правила, а связка с сервисом Google через MCP. frontend-design меняет сам порядок мышления: сначала система, потом компоненты. Он был первым, и остальные выросли из него — это написано прямо в README Impeccable.

Когда это пригодится

• Вы делаете лендинги, дашборды или внутренние тулзы с помощью Claude — и устали удалять одни и те же фиолетовые градиенты.
• У вас нет дизайнера, но клиент или босс ждёт «нормально», а не «AI-сгенерировано».
• Вы пишете промпт на 3 страницы про «брутализм без брутализма» — и всё равно получаете Material Design.
• Вам нужно ревьюить дизайн чужого вайб-кода — и не тратить на это полдня глазами.

Если вы дизайнер с десятилетним стажем — навыки сэкономят вам 20 минут на проект. Если вы фронтенд без дизайнерского глаза — это разница между «стыдно показать» и «можно публиковать».

Что нужно и сколько стоит

• Claude Code — удобнее всего. Impeccable и Hallmark работают также в Cursor, Codex CLI, Gemini CLI, GitHub Copilot и Grok Build.
• Подписка Anthropic — навыки не приносят своей модели, они меняют то, как думает ваша.
• Node.js — установщики обоих сторонних навыков это npx.

Итого: 0 рублей сверху, если подписка уже есть. Impeccable — Apache 2.0, Hallmark — MIT, frontend-design — репозиторий навыков Anthropic. Ни один из трёх не требует API-ключа: детерминированные проверки Impeccable гоняются вообще без модели.

Impeccable: общий словарь о дизайне

Impeccable — это один навык и 23 команды к нему, то есть общий словарь с моделью: вместо абзаца объяснений вы говорите одно слово. polish, audit, critique, distill, animate, bolder, quieter и ещё шестнадцать. Под ними — 59 детерминированных правил-детекторов, которые ищут характерные признаки машинной работы и работают без модели и без ключа.

1. Поставить

   Из корня проекта — две строки, вторая уже внутри Claude Code:

   bash Copy

   npx impeccable install
   /impeccable init

   Установщик сам находит папки вашего инструмента (~/.claude, ~/.codex, .cursor и другие) и спрашивает, ставить в проект или глобально. Обновление — npx impeccable update.

2. Один вопрос на входе

   init спрашивает ровно одно: вы делаете бренд (лендинг, промо, портфолио) или продукт (интерфейс приложения, дашборд, тулза). По ответу он пишет PRODUCT.md и предлагает DESIGN.md — аудитория, регистр речи, анти-референсы, цвета, шрифты, компоненты. Дальше каждая команда читает эти файлы, поэтому и работает без длинных промптов.

3. Дальше — по команде за раз

   /impeccable critique landing — дизайн-ревью на иерархию и ясность. /impeccable audit blog — техническая проверка: доступность, отзывчивость, производительность. /impeccable polish settings — финальный проход перед выкладкой. /impeccable bolder и /impeccable quieter — если результат вышел скучным или наоборот кричит. Любую команду можно закрепить: /impeccable pin audit сделает из неё просто /audit.

Список того, чего навык не даёт делать, стоит прочитать целиком — он короткий и объясняет, почему вывод меняется: без переиспользованных шрифтов вроде Inter и системных дефолтов, без серого текста на цветном фоне, без чистого чёрного, без карточек внутри карточек, без bounce-easing.

Hallmark: четыре команды, и одна из них — главная

Hallmark сделали в Together AI, и он устроен иначе: не двадцать три узкие команды для правки готового, а четыре широкие — под четыре разные ситуации. Под капотом — двадцать одна тема и пятьдесят семь проверок на «слоп», которые прогоняются до того, как вы увидите результат. Две страницы, собранные им по двум разным брифам, выглядят как разные сайты, а не как перекрашенный шаблон.

1. Поставить

   bash Copy

   npx skills add nutlope/hallmark

   Команду можно повторять — она же обновляет. Вручную: положить SKILL.md и папку references/ в ~/.claude/skills/hallmark/, для Cursor — в .cursor/rules/hallmark.mdc, для Codex — в ~/.codex/skills/hallmark/.

2. Четыре команды

   • по умолчанию — собрать новый интерфейс: выбирает макроструктуру, применяет правила, прогоняет проверку на слоп и только потом отдаёт.
   • hallmark audit <цель> — оценить то, что уже есть, против списка анти-паттернов. Список замечаний, без правок.
   • hallmark redesign <цель> — выбросить структуру, сохранить тексты, навигацию и бренд, собрать заново с другим почерком.
   • hallmark study <скриншот | ссылка> — тот самый главный.

3. study: разобрать чужой дизайн, не украв его

   Кидаете ссылку или скриншот дизайна, который вам нравится, — навык вытаскивает оттуда ДНК: макроструктуру, шрифтовую пару и опорный цвет. По желанию складывает это в переносимый design.md, который можно отдать другому инструменту.

   И отдельно стоит сказать, чего он не делает: копировать один в один отказывается, как и разбирать платные шаблоны. Это не ограничение, а смысл самой команды — вы забираете принцип, а не пиксели. Если нужен именно клон чужой страницы, Hallmark не тот инструмент.

Живое демо — usehallmark.com, там клавиша T перебирает все темы подряд. Это самый быстрый способ понять, почему «двадцать одна тема» — не то же самое, что двадцать один пресет цвета.

Stitch Skills: другой класс, от Google Labs

Здесь стоит остановиться, потому что это не то же самое, что первые два. Impeccable и Hallmark — это правила, написанные текстом: файл с инструкциями, который читает модель. Stitch Skills — библиотека навыков, работающая в связке с MCP-сервером Google Stitch. То есть навык не только объясняет агенту, как думать, а даёт ему выход на внешний сервис.

Сделано по открытому стандарту Agent Skills, поэтому живёт не только в Claude Code, но и в Codex, Cursor, Gemini CLI и Antigravity. Ставится плагином через маркетплейс вашего агента.

Брать его стоит, если вы уже пользуетесь Stitch. Если нет — начинать с него смысла мало: первые два дают результат без единой внешней зависимости.

frontend-design: тот, из которого выросли остальные

Официальный навык Anthropic, лежит в их репозитории навыков как frontend-design. Он меняет порядок мышления: не «сгенерировать компоненты и потом стилизовать», а «сначала задать систему, потом собрать из неё компоненты». Это самая база — и он был первым широко используемым дизайн-навыком для Claude. Impeccable про это пишет прямым текстом в своём README: «Impeccable started from there».

1. Поставить

   В Claude Code репозиторий навыков подключается как маркетплейс плагинов:

   bash Copy

   /plugin marketplace add anthropics/skills
   /plugin install example-skills@anthropic-agent-skills

   На платных тарифах Claude.ai примеры из этого репозитория доступны и так — ставить ничего не нужно.

2. Активация

   Навык подхватывается сам, когда вы просите Claude сделать новый интерфейс или переделать существующий — отдельной команды не нужно.

3. Что меняется на практике

   • Шрифтовые пары вместо одного Inter — на гарнитуру дисплея и body отдельные шрифты.
   • Палитра с акцентом, а не из пяти оттенков серого с фиолетовой кнопкой.
   • Реальная иерархия размеров — h1/h2/h3 различаются по модульной шкале, не по 4 px.
   • Спейсинг по сетке (4/8/16/24/32), а не по «на глаз красиво».
   • Тени и градиенты с интенцией — там, где они нужны для визуальной иерархии, а не везде.
   • Состояния hover/focus/active — продуманы, а не «дефолтный hover от Tailwind».

Как они работают вместе

Они перекрываются, и это нормально — цель у всех одна. Разница в том, с какой стороны каждый заходит. frontend-design задаёт порядок мышления и включается сам. Impeccable даёт словарь для правки уже сгенерированного: одно слово вместо абзаца. Hallmark нужен, когда есть конкретный референс или когда надо пересобрать страницу с другим почерком. Stitch Skills — когда у вас уже есть Stitch.

Порядок, который вытекает из их устройства, а не из вкуса: один раз /impeccable init в начале проекта — ответить на единственный вопрос и получить PRODUCT.md, который дальше читают все команды. Появился референс — hallmark study по ссылке. Перед выкладкой — /impeccable polish и /impeccable audit.

Чего от них ждать не стоит

Куда расти

Если четырёх мало, есть каталог: bergside/awesome-design-skills — 67 файлов SKILL.md и DESIGN.md в одном месте. Любой тянется одной командой:

npx typeui.sh pull agentic

Следующий шаг после каталога — собрать собственный навык под визуальный язык своей компании. Формат простой: папка с SKILL.md и примерами в ~/.claude/skills/your-brand/. Модель прочитает её как контекст, а DESIGN.md, который пишет Impeccable, — готовая заготовка для содержимого.

И последнее, что стоит сказать прямо: вкус эти штуки не выдают. Они дают слова, которыми можно объяснить агенту, что именно не так. Это разные вещи.