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

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

Ключ к работающему дизайн-скиллу — токены вместо прилагательных. «Сделай аккуратно и современно» ничего не значит для модели и приводит к случайному результату. «Отступы только из шкалы 4/8/12/16/24, цвета только из перечисленных переменных, радиус скругления один на весь проект» — воспроизводимо и проверяемо.

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

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

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

• HTML-прототипирование и motion-дизайн — huashu-design — это скилл для Claude Code, который превращает Claude в HTML-дизайнера: создаёт высокофункциональные прототипы, слайд-деки (1920×1080), motion-анимации, информационные визуализации и интерактивные UI-макеты без бэкенда. На любую задачу с новым визуальным дизайном скилл обязательно выдаёт три направления-варианта на выбор — включая случаи, когда стиль или бренд уже указан. Перед работой с реальными брендами выполняется верификация фактов через WebSearch и сбор официальных ассетов (логотипы, продуктовые фото, цвета). Подходит для UX-прототипирования, дизайн-ревью, экспорта в MP4/GIF и презентаций; не предназначен для production-приложений и систем с серверной логикой.
• Разработка UI-компонентов на React и TypeScript — frontend-ui-engineering — это скилл для Claude Code, который создаёт production-качественные, доступные и адаптивные пользовательские интерфейсы на React и TypeScript. Скилл применяется при разработке новых компонентов и страниц, реализации адаптивных раскладок, управлении состоянием (useState, Context, React Query, Zustand) и выполнении требований доступности WCAG 2.1 AA. Особое внимание уделяется архитектуре компонентов: скилл применяет паттерн разделения контейнера и представления, колокацию файлов компонента и композицию вместо избыточной конфигурации. Предусмотрена защита от типичного «AI-эстетики» — шаблонных градиентов, завышенных отступов и непоследовательных радиусов скруглений — в пользу реальных дизайн-токенов и смыслового цветового кодирования. Подходит разработчикам, которым нужен UI, неотличимый от написанного дизайн-ориентированным инженером.
• Авторский визуальный дизайн фронтенда — frontend-design — это скилл для Claude Code, который помогает создавать отличительный, намеренно выстроенный визуальный дизайн при разработке нового интерфейса или переработке существующего. Скилл задаёт роль дизайн-лидера небольшой студии: требует сделать один оправданный эстетический риск, выбрать палитру из 4–6 именованных hex-значений, осознанно подобрать типографику с чёткой шкалой и намеренными весами. Встроенный двухэтапный процесс — сначала компактный дизайн-план с цветом, типографикой, раскладкой и сигнатурным элементом, затем самокритика плана перед написанием кода — помогает избежать шаблонных решений, которые алгоритмы воспроизводят по умолчанию. Подходит разработчикам и дизайнерам, которым нужен уникальный фронтенд-дизайн без типовых клише: кремовый фон с засечками, кислотный акцент на тёмном фоне или газетная вёрстка.
• Генерация лендинга через брендовое интервью — brand-landingpage — это скилл для Claude Code, который проводит структурированное брендовое интервью (продукт, ощущения, визуальный стиль), затем генерирует и итерирует лендинг через Stitch, выдавая готовый к развёртыванию HTML. Рабочий процесс состоит из четырёх фаз: настройка Stitch SDK и проверка API-ключа, интервью из трёх частей, создание дизайн-системы в Stitch и цикл генерации с правками. Состояние проекта сохраняется в `.stitch/metadata.json` — если файл уже существует, скилл возобновляет работу с нужной фазы без повторного интервью. Подходит разработчикам, которым нужна маркетинговая страница, лендинг или сайт-визитка без готового визуального направления. Не предназначен для дашбордов, многостраничных приложений и работы на уровне компонентов — для таких задач используется скилл frontend-design.
• Проектирование KPI-дашбордов для SaaS — kpi-dashboard-design — это скилл для Claude Code, который помогает проектировать эффективные KPI-дашборды: выбирать метрики, выстраивать визуализацию и организовывать мониторинг в реальном времени. Внутри — трёхуровневая иерархия (стратегический, тактический, операционный), паттерны executive-дашбордов с 4–6 заголовочными KPI, примеры SQL для расчёта MRR с нормализацией по типу подписки, когортного анализа retention и предагрегации метрик для снижения нагрузки на базу. Скилл разбирает типичные проблемы: расхождение MRR между дашбордом и финансами, алерты с постоянными ложными срабатываниями, плоские retention-когорты из-за неверной группировки по дате. Подходит командам, которые строят SaaS-метрики, операционные центры мониторинга или аналитику удержания пользователей и хотят получить согласованную методологию расчёта и практические антипаттерны визуализации.
• draw.io — генерация и экспорт диаграмм — drawio-skill — это скилл для Claude Code, который генерирует файлы `.drawio` XML и экспортирует их в PNG, SVG, PDF или JPG через нативный CLI десктопного приложения draw.io — без браузерной автоматизации. Поддерживает блок-схемы, архитектурные диаграммы, UML/ER/BPMN, SysML/MBSE, swimlane, сетевые топологии, ML/DL-схемы, диаграммы облачной инфраструктуры из Terraform и Kubernetes манифестов, карты разума и ещё десятки типов. В состав скилла входят 31 скрипт, справочники по форматам и стилям, инструмент поиска по 10 000+ фигур (AWS/Azure/GCP, Cisco, Kubernetes, UML, BPMN и др.), поддержка AI/LLM
• Аудит дизайна по принципам Дитера Рамса — 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` без создания новых значений. Если нужный токен отсутствует, инструкция предписы
• Дизайн-токены 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-значения и при отсу
• Стилизация UI Sentry через токены дизайн-системы — designlang — это скилл для Claude Code, который помогает стилизовать UI для sentry.io, используя семантические токены дизайн-системы вместо самостоятельного подбора цветов, отступов и типографики. Внутри хранятся токены, извлечённые designlang v7.0.0: цвета (`color.action.primary`, `color.surface.default`, `color.text.body`), радиус контролов (`radius.control: 2px`) и шрифт (`typography.body.fontFamily: Rubik`). Скилл запрещает придумывать новые значения — если нужного токена нет, следует выбрать ближайший существующий и пометить пробел. Токены адресуются по точечному пути (`semantic.color.act
• Дизайн-токены Discord для стилизации UI — designlang — это скилл для Claude Code, который предоставляет извлечённые дизайн-токены discord.com и используется при стилизации UI вместо изобретения новых значений цветов, отступов или типографики. Токены извлечены инструментом designlang v7.0.0 и включают семантические переменные: цвета (например, `color.action.primary: #5865f2`, `color.surface.default: #1a2081`), скругления (`radius.control: 12px`) и типографику (`typography.body.fontFamily: Ggsans`). Скилл требует использовать именно семантические токены по пунктирному пути (`semantic.color.action.primary`), а не примитивные hex-значения
• Дизайн-токены 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 — и предписывает
• Создание HTML-презентаций и конвертация PowerPoint — frontend-slides — это скилл для Claude Code, который создаёт HTML-презентации с анимациями без каких-либо внешних зависимостей или конвертирует файлы PowerPoint (.ppt/.pptx) в веб-формат. Весь результат — один самодостаточный HTML-файл с инлайновым CSS и JS, поддержкой клавиатуры, свайпов и колёсика мыши, анимациями через Intersection Observer и обязательным вписыванием каждого слайда в один viewport без скроллинга внутри. Для выбора стиля скилл генерирует три preview-слайда и предлагает выбрать или смешать варианты — это помогает тем, кто ещё не определился с дизайном. Подходит для питч-деков, конференционных докладов, воркшопов и внутренних презентаций; поддерживает `prefers-reduced-motion`, контрастность и семантическую разметку.
• PostHog UI — токены дизайн-системы для стилизации — designlang — это скилл для Claude Code, который помогает стилизовать UI для posthog.com, используя извлечённые токены дизайн-системы вместо изобретения произвольных цветов, отступов и типографики. Скилл содержит семантические токены сайта 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. Правило использования строгое: приоритет семанти
• Дизайн-токены loom.com для стилизации UI — designlang — это скилл для Claude Code, который предоставляет извлечённые дизайн-токены сайта loom.com для точной стилизации UI без изобретения значений. Токены извлечены инструментом 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.
• Стилизация 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. Скилл запрещает выдумывать новые значения: если токен отсутствует, нужно выбрать ближайший существующий и зафиксировать пробел. Токены используются по точечному пути — например
• Дизайн-токены 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-значения и предписывает при отсутствии нужного токена
• Извлечение дизайн-системы из сайта — extract-design — это скилл для Claude Code, который извлекает полную дизайн-систему с любого веб-сайта по URL и генерирует 8 готовых файлов. Под капотом работает утилита designlang (запускается через npx без установки): она собирает цвета, типографику, отступы, тени, компоненты, брейкпоинты и анимации, после чего оценивает доступность по стандарту WCAG. На выходе получаются AI-оптимизированный markdown, визуальный HTML-отчёт с образцами, Tailwind config, React-тема, CSS-переменные, shadcn/ui-тема, Figma Variables и W3C Design Tokens. Поддерживается обход нескольких страниц сайта (--depth), изв
• Дизайн-токены Ramp для стилизации UI — designlang — это скилл для Claude Code, который помогает стилизовать UI для ramp.com, используя извлечённые токены дизайн-системы вместо произвольного подбора цветов, отступов или типографики. Внутри содержатся семантические токены: цвета (color.action.primary: #000000, color.surface.default: #ffffff, color.text.body: #000000), радиус контролов (radius.control: 0px) и типографика (typography.body.fontFamily: Times), извлечённые designlang v7.0.0. Скилл предписывает всегда предпочитать семантические токены примитивным, не изобретать новые hex-значения, а при отсутствии нужного токена — выбирать
• Дизайн-токены 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`), выбирать семантические токены вмест
• Framer.com — дизайн-токены для стилизации UI — designlang — это скилл для Claude Code, который предоставляет извлечённые дизайн-токены сайта framer.com и используется при стилизации UI вместо ручного подбора цветов, отступов и типографики. Токены включают семантические переменные: например, 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-значения. Если ну
• Дизайн-токены Resend для стилизации UI — designlang — это скилл для Claude Code, который помогает стилизовать UI для resend.com, используя готовые токены дизайн-системы вместо произвольных значений цветов, отступов и типографики. Внутри скилла — семантические токены, извлечённые 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
• Дизайн-токены Coinbase для стилизации UI — designlang — это скилл для Claude Code, который предоставляет извлечённые дизайн-токены coinbase.com и обязывает использовать их при стилизации UI вместо того, чтобы придумывать новые значения. Внутри — семантические токены: цвет основного действия (`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` — и семантические ва
• Стилизация Retool через токены дизайн-системы — designlang — это скилл для Claude Code, который помогает стилизовать UI на retool.com, используя извлечённые токены дизайн-системы вместо произвольных значений цветов, отступов и типографики. Внутри скилла хранятся семантические токены: цвета (`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-значения — если токен отсутствует, нужно

FAQ

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

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

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

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

Все Skills для Claude Code