Дизайн-скиллы для Claude Code

Дизайн-скиллы для Claude Code описывают визуальные правила проекта так, чтобы модель им следовала: какая шкала отступов принята, какие цвета допустимы, как устроены состояния компонентов. Без этого Claude каждый раз изобретает оформление заново, и интерфейс расползается на глазах — особенно когда компоненты пишут разные люди. Ключ к работающему дизайн-скиллу — токены вместо прилагательных. «Сделай аккуратно и современно» ничего не значит для модели и приводит к случайному результату. «Отступы только из шкалы 4/8/12/16/24, цвета только из перечисленных переменных, радиус скругления один на весь проект» — воспроизводимо и проверяемо. По той же причине в дизайн-скилл имеет смысл класть и состояния: как выглядит наведение, фокус, отключённая кнопка и загрузка. Именно их модель придумывает сама чаще всего, и именно на них разъезжается интерфейс.

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

В подборке — скиллы для дизайн-систем, вёрстки интерфейсов и лендингов.

Скиллы в подборке

В подборке 137 скиллов, ниже перечислены 24 с наивысшей оценкой.

• Генератор интерактивных HTML-площадок — playground создаёт в Claude Code самодостаточные интерактивные HTML-площадки: один файл с панелью управления, живым предпросмотром и блоком вывода промпта с кнопкой копирования. Скилл подбирает нужный шаблон из шести встроенных: design-playground, data-explorer, concept-map, document-critique, diff-review и code-map — и строит по нему playground под конкретную задачу. Весь CSS и JS инлайнятся, внешние зависимости не используются; состояние хранится в едином объекте, и каждое изменение контрола мгновенно обновляет и предпросмотр, и промпт. Промпт формируется как естественная инструкция — только нестандартные значения, с контекстом, достаточным для действия без самого playground. Подходит для проектирования UI, исследования данных, ревью кода и обучения — везде, где входное пространство визуально или структурно сложно выразить обычным текстом.
• Авторский визуальный дизайн фронтенда — При разработке нового интерфейса или переработке существующего frontend-design помогает Claude Code выстроить отличительный, намеренно продуманный визуальный дизайн. Скилл задаёт роль дизайн-лидера небольшой студии: требует сделать один оправданный эстетический риск, выбрать палитру из 4–6 именованных hex-значений, осознанно подобрать типографику с чёткой шкалой и намеренными весами. Встроенный двухэтапный процесс — сначала компактный дизайн-план с цветом, типографикой, раскладкой и сигнатурным элементом, затем самокритика плана перед написанием кода — помогает избежать шаблонных решений, которые алгоритмы воспроизводят по умолчанию. Подходит разработчикам и дизайнерам, которым нужен уникальный фронтенд-дизайн без типовых клише: кремовый фон с засечками, кислотный акцент на тёмном фоне или газетная вёрстка.
• Генерация лендинга через брендовое интервью — В Claude Code brand-landingpage проводит структурированное брендовое интервью (продукт, ощущения, визуальный стиль), затем генерирует и итерирует лендинг через Stitch, выдавая готовый к развёртыванию HTML. Рабочий процесс состоит из четырёх фаз: настройка Stitch SDK и проверка API-ключа, интервью из трёх частей, создание дизайн-системы в Stitch и цикл генерации с правками. Состояние проекта сохраняется в `.stitch/metadata.json` — если файл уже существует, скилл возобновляет работу с нужной фазы без повторного интервью. Подходит разработчикам, которым нужна маркетинговая страница, лендинг или сайт-визитка без готового визуального направления. Не предназначен для дашбордов, многостраничных приложений и работы на уровне компонентов — для таких задач используется скилл frontend-design.
• GPT Image 2 Style Library — стили и шаблоны промптов — С GPT Image 2 Style Library Claude Code выбирает стиль, шаблон, категорию и сценарий для генерации картинок моделью GPT Image 2 и собирает структурированный промпт. Основа скилла — библиотека из более чем 530 разобранных кейсов и более 20 шаблонов: интерфейсы, инфографика, плакаты, товарные карточки, бренд и логотипы, фотореализм, иллюстрации, персонажи, архитектура, документы. Идея проекта: вместо длинного текста разбирать промпт на части, такие как объект, свет, материалы и композиция, чтобы результат был предсказуемым и повторяемым. Установка: npx skills add freestylefly/awesome-gpt-image-2 --skill gpt-image-2-style-library --agent claude-code --global --yes --copy, либо /plugin marketplace add freestylefly/awesome-gpt-image-2 и /plugin install gpt-image-2-style-library@awesome-gpt-image-2. Скилл только подбирает стили и промпты, сам картинки не генерирует. Лицензия MIT; основной язык материалов английский и китайский.
• pixel2motion — анимация логотипа из растра в SVG — pixel2motion — это открытый инструмент для Claude Code и Codex, который превращает растровый логотип (PNG, JPG, WebP или снимок экрана) в чистый векторный SVG и анимирует его: на выходе готовая HTML-страница с анимацией, GIF- или видео-превью, QA-оверлеи с доказательствами точности трассировки и файл motion_spec.md с описанием хореографии. Берут, когда нужна анимированная заставка для ролика или презентации, а исходник логотипа остался только в растре; когда векторную версию потеряли и надо восстановить её перед любой доработкой; когда хочется получить анимацию сразу в виде редактируемого кода, а не видеофайла. Написан на Python, подключается как скилл через SKILL.md — отдельного редактора не требуется. Пайплайн: итерационная QA-верификация статического SVG (IoU-диагностика, контроль гладкости форм и структуры), затем CSS-анимация поверх семантически размеченных частей логотипа. Выходной HTML не имеет зависимостей и содержит управление скоростью и покадровый просмотр. Направление — из растра в анимированный вектор, а не генерация видео нейросетью и не обратное преобразование. Сопутствующий проект Pixel2SVG-HTML покрывает только статическую векторизацию без анимации. Хорошо работает с геометричными логотипами; логотипы с фотографическими текстурами и сложными градиентами векторизуются хуже.
• Аудит дизайна по принципам Дитера Рамса — design-is учит Claude Code проводить аудит дизайна по десяти принципам «Хороший дизайн — это…» Дитера Рамса: выставляет оценки с доказательствами и передаёт результат в /make-plan для выбора одного из трёх исходов — новый дизайн, доработка или переделка. Скилл работает как оркестратор: параллельно разворачивает четыре субагента — структурный, визуальный, «копирайтинг и честность» и «вес и трение» — каждый обязан вернуть конкретные факты с цитатами (file:line, px-массивы, hex-токены, байты), а итоговую оценку 0–3 по каждому принципу выставляет только оркестратор. Результаты сохраняются в папку DESIGN-IS-<YYYY-MM-DD>/: файлы scope, evidence, scorecard, verdict и готовый prompt для /make-plan. Подходит командам и соло-разработчикам, когда нужно обосновать решение «переделать», «улучшить» или «начать с нуля» вместо субъективной дискуссии.
• Дизайн-токены Netflix для стилизации UI — Скилл designlang помогает Claude Code стилизовать UI для netflix.com по извлечённой системе дизайн-токенов, а не подбирать цвета, отступы и типографику самостоятельно. Внутри содержатся семантические токены, полученные с помощью designlang v7.0.0: основной акцентный цвет (#e50914), фон (#000000), радиус контролов (2px) и шрифт Netflix Sans. Скилл охватывает ключевые регионы страницы — nav, footer, content — и требует использовать семантические пути вроде `semantic.color.action.primary` без создания новых значений. Если нужный токен отсутствует, инструкция предписы
• PostHog UI — токены дизайн-системы для стилизации — Для стилизации UI posthog.com Claude Code берёт извлечённые токены дизайн-системы из designlang, а не изобретает произвольные цвета, отступы и типографику. Скилл содержит семантические токены сайта PostHog, актуальные на момент извлечения designlang v7.0.0: цвета (`color.action.primary`, `color.surface.default`, `color.text.body`), радиус контролов (`radius.control: 2px`) и шрифт (`typography.body.fontFamily: IBM Plex Sans Variable`). Охватывает ключевые регионы интерфейса — sidebar, nav, pricing, footer. Правило использования строгое: приоритет семанти
• Редактор визуальных аспектов MPS — mps-aspect-editor помогает Claude Code создавать и редактировать определения редакторов MPS: от `ConceptEditorDeclaration` и `EditorComponentDeclaration` до настройки моделей ячеек, макетов и стилевых листов. Скилл охватывает полный рабочий цикл: скаффолдинг через `mps_mcp_scaffold_editor`, компонентизацию повторяющихся групп ячеек, выбор правильных типов (`CellModel_RefNode`, `CellModel_RefNodeList`, `CellModel_Property`, `CellModel_Constant`, `CellModel_RefCell`), подключение smart-references, инспекцию через `print_node_json` и валидацию через `check_root_node_problems`. Отдельно описаны node cell layout и inspected cell layout — основной и вторичный разделы редактора. Предназначен для разработчиков языков на JetBrains MPS, которым нужно спроектировать визуальное представление элементов языка в проекционном редакторе; для action maps, keymaps и меню трансформации используется смежный скилл `mps-aspect-editor-menus-and-keymaps`.
• Стилизация UI через семантические токены дизайн-системы — designlang помогает Claude Code стилизовать UI для render.com: вместо произвольных значений цветов, отступов и типографики используются извлечённые семантические токены дизайн-системы. Скилл содержит токены, извлечённые designlang v7.0.0: цвета (`color.action.primary: #8a05ff`, `color.surface.default: #ffffff`, `color.text.body: #000000`), радиус контролов (`radius.control: 2px`) и шрифт (`typography.body.fontFamily: PPNeueMontreal`). Токены охватывают ключевые регионы страницы — nav, pricing, testimonials, footer — и используются по точечной нотации, например `semantic.c
• Дизайн-токены Coinbase для стилизации UI — Claude Code стилизует UI по извлечённым дизайн-токенам coinbase.com: designlang обязывает применять именно их, а не придуманные значения. Внутри — семантические токены: цвет основного действия (`color.action.primary: #0000ee`), фон (`color.surface.default: #ffffff`), цвет текста (`color.text.body: #313141`), скругление контролов (`radius.control: 50px`) и шрифт (`typography.body.fontFamily: Arial`), извлечённые с помощью designlang v7.0.0. Токены обращаются по точечному пути — например, `semantic.color.action.primary` — и семантические ва
• Дизайн-токены cal.com для стилизации UI — Скилл «designlang» даёт Claude Code извлечённые дизайн-токены cal.com и задаёт правила их применения при стилизации UI. Внутри — семантические токены: цвет действия `color.action.primary: #0000ee`, фон `color.surface.default: #f4f4f4`, цвет текста `color.text.body: #000000`, скругление `radius.control: 2px` и типографика `typography.body.fontFamily: Inter`, извлечённые designlang v7.0.0. Скилл требует использовать семантические токены по dotted-path (`semantic.color.action.primary`), запрещает изобретать новые hex-значения и предписывает при отсутствии нужного токена
• Стилизация UI по дизайн-токенам Postman — С designlang Claude Code стилизует UI для postman.com, опираясь на извлечённые дизайн-токены вместо произвольного подбора цветов, отступов и типографики. Внутри — семантические токены, полученные designlang v7.0.0: цвета (`color.action.primary: #e05320`, `color.surface.default`, `color.text.body`), скругления (`radius.control: 3px`) и шрифт (`typography.body.fontFamily: inter`). Токены охватывают ключевые регионы интерфейса — nav, content, sidebar, pricing, testimonials, footer. Скилл предписывает использовать семантические пути вида `semantic.color.action.pri
• Дизайн-токены clerk.com для верстки — designlang даёт Claude Code справочник извлечённых дизайн-токенов clerk.com и запрещает придумывать новые значения цветов, отступов или типографики. Токены извлечены инструментом designlang v7.0.0 и охватывают семантические переменные: цвет действия `color.action.primary` (#6c47ff), фон `color.surface.default`, цвет текста, скругления `radius.control` (2px) и шрифт `typography.body.fontFamily` (geistNumbers). Скилл предписывает обращаться к токенам по пути в точечной нотации (например, `semantic.color.action.primary`), выбирать семантические токены вмест
• Стилизация Retool через токены дизайн-системы — UI на retool.com Claude Code стилизует с designlang по извлечённым токенам дизайн-системы, а не по произвольным значениям цветов, отступов и типографики. Внутри скилла хранятся семантические токены: цвета (`color.action.primary`, `color.surface.default`, `color.text.body`), радиус контролов (`radius.control: 4px`) и шрифт (`typography.body.fontFamily: saansFont`), извлечённые designlang v7.0.0 с сайта retool.com. Скилл предписывает использовать семантические токены через dotted path и запрещает изобретать новые hex-значения — если токен отсутствует, нужно
• Дизайн-токены Ramp для стилизации UI — Чтобы стилизовать UI для ramp.com, Claude Code использует designlang и извлечённые токены дизайн-системы вместо произвольного подбора цветов, отступов или типографики. Внутри содержатся семантические токены: цвета (color.action.primary: #000000, color.surface.default: #ffffff, color.text.body: #000000), радиус контролов (radius.control: 0px) и типографика (typography.body.fontFamily: Times), извлечённые designlang v7.0.0. Скилл предписывает всегда предпочитать семантические токены примитивным, не изобретать новые hex-значения, а при отсутствии нужного токена — выбирать
• Framer.com — дизайн-токены для стилизации UI — При стилизации UI в Claude Code designlang подставляет извлечённые дизайн-токены сайта framer.com, так что цвета, отступы и типографику не приходится подбирать вручную. Токены включают семантические переменные: например, color.action.primary (#0066ff), color.surface.default (#000000), radius.control (1px) и typography.body.fontFamily (Inter). Скилл охватывает ключевые регионы страниц — nav, hero, pricing, testimonials, content, footer — и предписывает обращаться к токенам по точечному пути (semantic.color.action.primary), никогда не изобретая новые hex-значения. Если ну
• Дизайн-токены PlanetScale для стилизации UI — designlang применяет в Claude Code извлечённые дизайн-токены PlanetScale при стилизации UI, вместо того чтобы изобретать цвета, отступы или типографику. Внутри содержатся семантические токены: цвета действий (`color.action.primary: #f2b600`), поверхностей, текста, радиус контролов (`radius.control: 9999px`) и шрифтовой стек (`typography.body.fontFamily: system-ui`) — извлечённые designlang v7.0.0 с planetscale.com. Скилл предписывает использовать семантические токены по точечному пути (например, `semantic.color.action.primary`), не создавать новые hex-значения и при отсу
• Дизайн-токены Resend для стилизации UI — Для стилизации UI под resend.com Claude Code берёт готовые токены дизайн-системы из designlang, а не произвольные значения цветов, отступов и типографики. Внутри скилла — семантические токены, извлечённые designlang v7.0.0: цвет действия (`color.action.primary: #d6ebfd`), фон (`color.surface.default: #000000`), цвет текста (`color.text.body: #ffffff`), радиус элементов управления (`radius.control: 4px`) и шрифт (`typography.body.fontFamily: inter`). Скилл покрывает ключевые регионы страниц: nav, hero, cta, content, pricing, sidebar, features, testimonials и fo
• Дизайн-токены Duolingo для стилизации UI — designlang подсказывает Claude Code извлечённые дизайн-токены сайта duolingo.com, чтобы интерфейс опирался на реальные значения системы, а не на заново придуманные цвета, отступы и типографику. Токены извлечены инструментом designlang v7.0.0 и включают семантические переменные: цвета действий и поверхностей (`color.action.primary`, `color.surface.default`), цвет текста, скругления (`radius.control: 2px`) и шрифт (`typography.body.fontFamily: duolingo-sans`). Скилл охватывает ключевые регионы страницы — nav, pricing, content, cta, footer — и предписывает
• Дизайн-токены loom.com для стилизации UI — Для точной стилизации UI без изобретения значений Claude Code берёт извлечённые дизайн-токены сайта loom.com из скилла designlang. Токены извлечены инструментом designlang v7.0.0 и включают семантические переменные: цвета (`color.action.primary: #1868db`, `color.surface.default: #ffffff`, `color.text.body: #000000`), скругления (`radius.control: 1px`) и типографику (`typography.body.fontFamily: Charlie Text`). Скилл охватывает регионы страниц loom.com: nav, hero, pricing, features, testimonials, content, sidebar и footer. Рабочий процесс строится на приоритете `semantic.
• Извлечение дизайн-системы из сайта — extract-design извлекает в Claude Code полную дизайн-систему с любого веб-сайта по URL и генерирует 8 готовых файлов. Под капотом работает утилита designlang (запускается через npx без установки): она собирает цвета, типографику, отступы, тени, компоненты, брейкпоинты и анимации, после чего оценивает доступность по стандарту WCAG. На выходе получаются AI-оптимизированный markdown, визуальный HTML-отчёт с образцами, Tailwind config, React-тема, CSS-переменные, shadcn/ui-тема, Figma Variables и W3C Design Tokens. Поддерживается обход нескольких страниц сайта (--depth), изв
• Дизайн-токены Discord для стилизации UI — При стилизации UI для discord.com Claude Code берёт из designlang извлечённые дизайн-токены и не изобретает новые значения цветов, отступов или типографики. Токены извлечены инструментом designlang v7.0.0 и включают семантические переменные: цвета (например, `color.action.primary: #5865f2`, `color.surface.default: #1a2081`), скругления (`radius.control: 12px`) и типографику (`typography.body.fontFamily: Ggsans`). Скилл требует использовать именно семантические токены по пунктирному пути (`semantic.color.action.primary`), а не примитивные hex-значения
• Стилизация Mintlify по дизайн-токенам — designlang помогает Claude Code стилизовать UI Mintlify на основе извлечённых дизайн-токенов вместо самостоятельного подбора цветов, отступов и типографики. Внутри — семантические токены: цвета (`color.action.primary: #faf8f5`, `color.text.body: #000000`), радиус контролов (`radius.control: 2px`) и шрифт (`typography.body.fontFamily: inter`), извлечённые designlang v7.0.0 с сайта mintlify.com. Скилл запрещает выдумывать новые значения: если токен отсутствует, нужно выбрать ближайший существующий и зафиксировать пробел. Токены используются по точечному пути — например

FAQ

Может ли Claude Code сверстать интерфейс по макету из Figma?

Да, если подключён доступ к Figma через соответствующий MCP-сервер — тогда модель читает структуру макета, переменные и токены. Скилл в этой связке отвечает за то, во что макет превращается: в какие компоненты, с какими именами классов и по каким правилам адаптивности.

Как не дать модели каждый раз придумывать новое оформление?

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

Все Skills для Claude Code