claude design skill: как сделать, чтобы сайт из claude code не выглядел как ии

claude design skill — это skill для claude code, который до вёрстки даёт агенту правила дизайна: что не брать по умолчанию, как выбрать шрифт и цвет, как проверить себя по скриншоту. официальный — frontend-design от anthropic, из сторонних живые taste-skill, ui ux pro max и impeccable, но сайт перестаёт выглядеть как ии только со своим skill, где записаны правила твоего бренда. ниже — приметы ии-дизайна по версии самой anthropic, установка, пример своего SKILL.md и процесс правок, всё сверено на 14 октября 2026.

почему сайты из ии выглядят одинаково

в ноябре 2025 anthropic выпустила пост о том, как skills улучшают фронтенд, и назвала причину прямо: распределительная сходимость. модель выбирает самые вероятные решения — те, что чаще всего встречались в обучающих данных. самое частое и есть самое безопасное, поэтому лендинги из ии узнаются за секунду.

в первой версии frontend-design skill приметы перечислялись поимённо: шрифты inter, roboto, arial и системные, фиолетовые градиенты на белом фоне, предсказуемые раскладки и компоненты. отдельно была просьба не сходиться на space grotesk: уходя от inter, модель начинала везде ставить его. сам skill в посте описан как компактный, около 400 токенов.

вывод простой: «сделай красиво» в промпте ничего не меняет. модель и так уверена, что делает красиво — по своей средней. ей нужно сказать, чего не делать и что выбрать вместо этого, причём под конкретный проект.

claude design skill от anthropic: что сейчас считается приметой ии

skill переписывали в июне и 3 сентября 2026 — история правок открыта на github. текущая версия выросла примерно до полутора тысяч слов, и список штампов в ней уже другой. inter и фиолетового градиента там больше нет, зато есть пять кластеров, вокруг которых, по словам anthropic, сейчас крутится ии-дизайн:

1. кремовый фон около #f4f1ea, контрастная антиква в заголовках и терракотовый акцент около #d97757. это фирменный цвет самого claude, поэтому на чужом сайте он выдаёт генерацию;
2. почти чёрный фон с одним кислотно-зелёным или киноварным акцентом;
3. «газетная» вёрстка: тонкие линейки, нулевое скругление, плотные колонки;
4. набор saas-карточек: контент порезан на одинаковые скруглённые карточки, одна и та же серая тень под каждой, градиенты для украшения;
5. шаблонная обвязка: капс-подпись над каждым заголовком, строки через точку «а · б · в», подписи через длинное тире, #0b0b0b вместо чёрного, моноширинный шрифт для мелких подписей, стрелка «→» в каждой кнопке.

ещё три типографских признака: одно слово в заголовке выделено курсивом или цветом, подписи капсом, лишние подписи над контентом. нумерация 01 / 02 / 03 уместна, только если это правда последовательность. анимации появления у каждой секции и ховеры на каждой карточке skill прямо называет тем, что читается как сгенерированное.

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

сам процесс в skill — два прохода. сначала план: 4–6 цветов в hex с названиями, шрифты и их роли, раскладка словами и ascii-схемой, принципы страницы. потом план сверяется с брифом: если какая-то часть вышла бы такой же для любой похожей страницы, её переделывают и объясняют, что поменяли. только после этого код, а в конце — самопроверка по скриншотам и совет «перед выходом сними один аксессуар».

какие дизайн-skills есть кроме официального

я нашёл и открыл три сторонних репозитория, которые чаще всего всплывают в подборках. все они живые: обновлялись в октябре 2026.

звёзды на github на 14 октября 2026: anthropics/skills — 180 927, ui-ux-pro-max-skill — 135 515, taste-skill — 95 614, impeccable — 80 776. популярность — не качество, а только знак, что проектом пользуются.

taste-skill

когда ищут «taste skill claude», имеют в виду этот репозиторий. по readme основной skill собран на разборе 247 отобранных сайтов: выбирает одно из 20 направлений, ищет идею под клиента, берёт картинки из открытых коллекций (wikimedia commons, openverse, музей метрополитен) с подписью авторства и правит страницу по своим скриншотам до трёх раундов. сборка одной страницы — 30–45 минут и несколько сотен тысяч токенов. для дашбордов и экранов приложения автор советует другие skills из того же набора: minimalist и soft.

ui ux pro max

«ui ux pro max skill claude» — скорее справочник, чем арт-директор: ищет по базе стиль, палитру и шрифты под тип продукта и собирает из этого дизайн-систему. по умолчанию верстает на html + tailwind. у проекта есть платная премиум-версия на отдельном сайте, цена в readme не указана.

impeccable

ближе к инструменту проверки: детекторы ловят типовые ошибки без нейросети и без api-ключа, а команды вроде /impeccable audit дают общий словарь для правок.

как поставить claude design skill и не поставить лишнего

основы — где лежат skills и чем skill отличается от плагина — я разбирал в статье claude code skills: что такое skills и как написать свой. здесь только дизайн.

официальный frontend design skill claude ставится из маркетплейса anthropic. его claude code добавляет сам при первом запуске в терминале, поэтому в сессии достаточно одной команды:

/plugin install frontend-design@claude-plugins-official

команда открывает карточку плагина: там видно, что он добавит, и выбирается область — для тебя во всех проектах, для всех в этом репозитории или только для тебя в этом репозитории. из обычного терминала то же самое:

claude plugin install frontend-design@claude-plugins-official

если после установки написано Run /reload-plugins to apply, выполни /reload-plugins. проверка: набери / и найди /frontend-design:frontend-design. вызывать его руками не обязательно: claude подгружает skill сам, когда задача про интерфейс.

сторонние ставятся так, команды взяты из их readme:

# taste-skill, в сессии claude code
/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

# ui ux pro max, в сессии claude code
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

# impeccable, в терминале из корня проекта
npx impeccable install

проверь код перед установкой

в документации claude code сказано прямо: установленный плагин может выполнять любой код на твоём компьютере с правами твоего пользователя, а anthropic не контролирует, что лежит в сторонних плагинах. хуки и mcp-серверы работают вне песочницы claude code. перед установкой открой репозиторий и прочитай:

• SKILL.md целиком — это инструкции, которые попадут в контекст агента;
• hooks/hooks.json — какие команды запускаются сами;
• .mcp.json и папку bin/;
• скрипты внутри skill — что они качают и куда пишут.

и про обновления: у сторонних маркетплейсов автообновление по умолчанию выключено. если включишь, проверенные тобой файлы могут поменяться в фоне.

как написать свой skill под свой стиль

чужой skill знает, чего не делать. свой знает, что делать именно тебе. личный кладёшь в ~/.claude/skills/<имя>/SKILL.md — он работает во всех проектах, проектный — в .claude/skills/<имя>/SKILL.md внутри репозитория, его можно закоммитить. правки в файле claude code подхватывает в той же сессии, без перезапуска.

главное поле — description: по нему claude решает, когда подгрузить skill. пиши туда задачи, на которые он нужен, а не «делает красиво». документация советует держать SKILL.md до 500 строк, а длинные справочники выносить в соседние файлы и ссылаться на них из основного.

вот пример — правила стиля этого сайта, переписанные в skill:

---
name: arturr-style
description: стиль сайта arturr_city. использовать при любой вёрстке и правке страниц сайта, новых блоках, кнопках, карточках товаров и статей блога.
---

# стиль arturr_city

сначала прочитай правила, предложи план (цвета, шрифт, раскладка),
и только после этого пиши код.

## база
- весь текст с маленькой буквы: заголовки, меню, кнопки, подписи.
- шрифт системный эпловский:
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  другие шрифты не подключать.
- всё квадратное: border-radius: 0 у кнопок, картинок, полей, плашек.
- палитра чёрно-белая: фон #000, текст #f2f2f2, серый только
  для второстепенного. цветного акцента нет.

## нельзя
- скругления и круглые элементы.
- тёплая палитра: кремовый, бежевый, терракота.
- градиенты, тени под карточками, сетка одинаковых карточек.
- капс-подписи над заголовками, «→» в каждой кнопке,
  анимация появления у каждой секции.
- выделять одно слово в заголовке цветом или курсивом.

## перед сдачей
- сделай скриншоты на ширине 375 и 1440 px.
- пройди по списку «нельзя» и напиши, что нашёл и убрал.
- если правило мешает задаче — спроси, а не нарушай молча.

в разделе «нельзя» нет общих слов вроде «без шаблонов» — только конкретные вещи: часть из них — мои реальные правки, часть — штампы из списка anthropic. а последний раздел заставляет не только делать, но и проверять себя по скриншотам — тот же приём, что у anthropic.

процесс: референсы по духу, эскизы, правки

референсы по духу

собери живые сайты, которые нравятся и не нравятся, и отметь да или нет у каждого. бери настроение, а не вёрстку: «чёрно-белое, крупное фото, мало текста» — это направление. «сделай как у них» — копия, и она тоже будет выглядеть чужой.

эскизы

до сборки целого сайта попроси 2–3 разных первых экрана. frontend-design сам начинает с плана и ascii-схемы, и это правильный порядок: отбраковать три эскиза дешевле, чем переделывать готовый сайт. как сформулировать сам бриф — в статье промпт для создания сайта: 4 шаблона и типовые ошибки.

правки

правь короткими фразами по скриншоту и сразу переноси каждую правку в SKILL.md. правка, которая осталась в чате, умрёт вместе с сессией. правка в skill работает в каждой следующей.

как я доводил этот сайт: правки, которые стали правилами

этот сайт, arturr_city, целиком собран в claude code — страницы, фото, бот. как шла сборка — в статье вайбкодинг сайт: как я собрал этот сайт в claude code. дизайн доводился не одним промптом, а правками. вот реальные, дословно:

• «с маленькой буквы всё» — стало первым правилом: заголовки, меню, кнопки.
• «шрифт эпловский» — системный -apple-system, без подключаемых шрифтов. забавно, что первая версия frontend-design записывала системные шрифты в штампы. у меня это решение, а не умолчание.
• «квадратное всё» и «круглый не оч» — скругление 0 везде. в нынешнем списке anthropic нулевое скругление тоже есть, в связке с газетной вёрсткой. если это твой выбор, а не выбор модели, это не слоп.
• «без ии-слопа» — общая рамка. агент сам её не расшифрует, поэтому её приходится раскладывать на конкретные запреты.
• «наложение везде разное» — такие вещи видит только человек на экране, агент сам их не заметит.
• тёплая палитра не подошла — вернули чёрно-белую. тёплый кремовый с терракотой — ровно первый пункт в нынешнем списке штампов frontend-design.

ни один готовый claude design skill этих правил не знал бы. они появились только из правок. поэтому каждую правку стоит записать словами в свой skill, иначе в следующей сессии агент вернётся к своему среднему.

вопросы

какой ui ux skill claude поставить первым?

frontend-design: он официальный, это только текст инструкций без скриптов, ставится одной командой. если не хватает — добавь ui ux pro max как справочник палитр и шрифтов или taste-skill для лендингов. и сразу заведи свой skill стиля.

можно держать несколько дизайн-skills сразу?

можно, но у каждого свой вкус и свои запреты, и они спорят. я бы держал один общий и один свой, где записан бренд, и прямо написал в своём, что его правила главнее.

почему skill не срабатывает?

claude решает по description. если там «делает красиво», под задачу «сверстай блок цен» skill может не подойти. впиши в описание конкретные задачи или вызывай skill руками: /имя-skill. ещё проверь путь: папка с именем skill, внутри файл SKILL.md.

эти skills работают не только в claude code?

сторонние — да: в readme taste-skill есть установка для codex, ui ux pro max ставится в два десятка инструментов через uipro init, impeccable называет cursor, codex и gemini cli. frontend-design лежит в открытом репозитории anthropics/skills как обычная папка со SKILL.md.

источники

• frontend-design skill.md — github.com/anthropics/skills
• improving frontend design through skills — claude.com
• extend claude with skills — code.claude.com
• install and manage plugins — code.claude.com
• plugin security and trust — code.claude.com
• taste-skill — github.com/leonxlnx
• ui-ux-pro-max-skill — github.com/nextlevelbuilder
• impeccable — github.com/pbakaus