Дизайн-набор для Claude Code и Codex: что взять из промпта на 15 репозиториев
Интерфейсы от агента часто выглядят одинаково: фиолетовый градиент, три карточки, один и тот же шрифт. Автор поста в X собрал против этого один промпт. Мы прошли по каждому репозиторию и собрали версию, в которой скиллы не спорят друг с другом.
Что внутри
бесплатно, целикомЧто лежит внутри одного промпта
репозиториев ставит один промпт
скиллы, библиотеки компонентов и Figma MCPзвёзд у самого и наименее заметного
anthropics/skills и lucian-uxui, на 16.10.2026скиллов дают всего два репозитория
taste-skill и design-taste, если ставить целикомКто за что отвечает
Скилл это папка с инструкцией, которую агент подгружает, когда задача подходит под её описание. Промпт ставит девять таких репозиториев глобально. Девятый, lucian-uxui, тянет готовые элементы с сайта автора по сети, у него на момент проверки 7 звёзд.
Скилл Anthropic: сначала понять, для кого продукт, потом выбрать шрифт, палитру и сетку под эту тему, а не по привычке.
Один скилл и 24 команды: аудит, критика, полировка. Перед сдачей проверяет страницу на типичные приметы ИИ-вёрстки.
Анимации и переходы: какие кривые, длительности и точки опоры брать, чтобы движение не выглядело дёшево.
Арт-дирекция для лендингов и сайтов. В репозитории 12 скиллов, и команда установки по умолчанию ставит их все.
Справочник стилей, палитр и шрифтовых пар с поиском. Для поиска нужен Python 3.
Готовые дизайн-системы в духе Linear, Stripe и Vercel для shadcn/ui.
Дизайн-агент с бесконечным холстом. Работает через свой CLI и вход в аккаунт сервиса.
24 скилла против шаблонного вида: от общего до узких стилей вроде брутализма и тихой роскоши.
Что не ставить глобально
Здесь автор промпта прав: библиотеки компонентов подключаются в конкретный проект, когда он в них нуждается. Агенту достаточно знать, что они существуют.
arc-library
Компоненты и блоки для React с анимацией внутри, ставятся через shadcn CLI.
motion-primitives
Компоненты движения на Motion и Tailwind CSS. Проект в бете: компоненты и код ещё заметно меняются.
canvas-ui
Эффекты на WebGL поверх страницы: жидкость, 3D-объекты. Часть эффектов требует флаг в Chrome.
paper-design/shaders
Живые градиентные фоны на шейдерах, ставятся из npm для React или для обычной страницы. Авторы просят закрепить версию: ломающие изменения ещё будут.
ui-layouts
Творческие блоки на Tailwind и Motion, когда нужен не шаблон, а необычная секция.
Figma-Context-MCP
Даёт агенту читать макет по ссылке на Figma. Без личного токена Figma не заработает.
Где промпт спорит сам с собой
Последняя строка его маршрутизации: один скилл вкуса за раз, стили не смешивать. Но глобально он ставит как минимум пять скиллов, каждый из которых хочет сам выбрать направление дизайна. Агент видит их все в каждой сессии и решает сам, кого послушать. Поэтому мы ставим ядро из трёх скиллов с разными ролями, а остальное добавляем под задачу.
Поставь ядро и пропиши маршрутизацию
Три промпта по порядку. Работают и в Claude Code, и в Codex: агент сам определит, кто он и куда класть файлы.
01.Установка ядра
Три скилла с разными ролями: выбор направления, анимации, проверка перед сдачей.
Поставь в этого агента дизайн-набор. Сначала определи, кто ты: Claude Code (файл правил ~/.claude/CLAUDE.md) или Codex (файл правил ~/.codex/AGENTS.md).
Глобально поставь только три репозитория, каждый по его официальному README:
1. anthropics/skills, только скилл frontend-design
2. emilkowalski/skills
3. pbakaus/impeccable
Если в README есть только команда плагина для Claude Code, а ты Codex, используй npx skills add или ручное копирование в папку, которую называет README.
Не ставь ничего, что требует аккаунт, токен или вход: такие шаги перечисли отдельно и спроси меня.
В конце покажи таблицей: что встало, что нет и почему, в какую папку легли файлы.02.Раздел маршрутизации
Правило, какой скилл под какую задачу. Без него установленные скиллы спорят.
Добавь в файл правил раздел «Дизайн: какой скилл когда». Пиши только про скиллы, которые реально установлены, остальное пропусти.
- Новый интерфейс: сначала frontend-design. Выбери одно направление и назови его словами до первой строки кода.
- Интерфейс уже есть: стиль не меняй, бери цвета, шрифты и компоненты проекта.
- Анимации и переходы: скиллы emilkowalski.
- Компоненты и эффекты: только из библиотек, которые уже есть в проекте. Новую библиотеку предлагай, а не ставь.
- Дали ссылку на Figma: Figma MCP, если он подключён.
- Перед сдачей: проверка через impeccable, найденное исправь.
- Один скилл вкуса на задачу, стили не смешивай.
Покажи раздел целиком до того, как записать его в файл.03.Аудит того, что уже стоит
Если ты уже прогнал исходный промпт целиком, начни с этого.
Перечисли все установленные скиллы, которые касаются дизайна интерфейсов: имя, папка, из какого репозитория. Отметь пары, которые дают противоречащие советы про стиль, шрифты, цвета или анимации. Предложи, что удалить или отключить, чтобы на каждую задачу остался один скилл. Ничего не удаляй, ответ дай таблицей.Команды установки меняются от версии к версии: если агент пишет, что команда не найдена, попроси его заново прочитать README.
До установки и после
Подготовь заранее
- Node.js: через npx ставится большая часть скиллов
- Для taste-skill: Node 22+ и установленный Chrome, Edge или Chromium
- Для Figma MCP: личный токен Figma, иначе пропусти этот пункт
- Для superdesign: аккаунт на сайте сервиса и вход через его CLI
- В Codex у impeccable хук проектный: открой /hooks и одобри его в каждом проекте
Проверь после
- Агент показал таблицу установки, и в ней нет молчаливых ошибок
- Файлы лежат там, где их ищет твой агент: у Codex разные репозитории называют разные папки
- Раздел маршрутизации записан в файл правил, а не остался в чате
- На тестовой странице агент назвал одно направление дизайна до кода
Свой дизайн-набор за вечер
Что сделать по шагам. Как именно, решаешь ты и твой агент.
01.Старт без скиллов
Попроси агента сверстать одну страницу как есть и сохрани результат: с ним будешь сравнивать.
Где набор не поможет
- 01
Скилл даёт агенту правила, но не знает твоего продукта. Без ясного задания про аудиторию и задачу страницы вкус не появится.
- 02
Если у проекта уже есть дизайн-система, скиллы выбора стиля будут ей мешать: оставь только анимации и проверку.
- 03
Звёзды не гарантия качества: часть репозиториев промпта совсем молодые, их инструкции стоит прочитать до установки.
- 04
Библиотеки компонентов в основном под React и Tailwind. На другом стеке их придётся переносить вручную.
Мастерство Claude Code: От нуля до продвинутого пользователя
В курсе по Claude Code скиллы, файл правил, хуки и MCP разобраны на живых проектах: как их ставить, как проверять и когда убирать.
Об источнике
Исходный промпт опубликовал автор codila в X 15.10.2026, ссылка в начале страницы. Мы сверили каждый репозиторий с его README, но версии, команды установки и звёзды меняются: данные на 16.10.2026, проверяй актуальные перед установкой.
Пост с промптомПройдите путь целиком
Гайд даёт направление. В курсах вы проходите путь от первого промпта до работающего результата: агенты, автоматизация и работа в Claude Code.
Комментарии