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

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

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

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

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

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

• Авторский визуальный дизайн фронтенда — frontend-design — это скилл для Claude Code, который помогает создавать отличительный, намеренно выстроенный визуальный дизайн при разработке нового интерфейса или переработке существующего. Скилл задаёт роль дизайн-лидера небольшой студии: требует сделать один оправданный эстетический риск, выбрать палитру из 4–6 именованных hex-значений, осознанно подобрать типографику с чёткой шкалой и намеренными весами. Встроенный двухэтапный процесс — сначала компактный дизайн-план с цветом, типографикой, раскладкой и сигнатурным элементом, затем самокритика плана перед написанием кода — помогает избежать шаблонных решений, которые алгоритмы воспроизводят по умолчанию. Подходит разработчикам и дизайнерам, которым нужен уникальный фронтенд-дизайн без типовых клише: кремовый фон с засечками, кислотный акцент на тёмном фоне или газетная вёрстка.
• Генерация лендинга через брендовое интервью — brand-landingpage — это скилл для Claude Code, который проводит структурированное брендовое интервью (продукт, ощущения, визуальный стиль), затем генерирует и итерирует лендинг через Stitch, выдавая готовый к развёртыванию HTML. Рабочий процесс состоит из четырёх фаз: настройка Stitch SDK и проверка API-ключа, интервью из трёх частей, создание дизайн-системы в Stitch и цикл генерации с правками. Состояние проекта сохраняется в `.stitch/metadata.json` — если файл уже существует, скилл возобновляет работу с нужной фазы без повторного интервью. Подходит разработчикам, которым нужна маркетинговая страница, лендинг или сайт-визитка без готового визуального направления. Не предназначен для дашбордов, многостраничных приложений и работы на уровне компонентов — для таких задач используется скилл frontend-design.
• Фирменные диаграммы 39 типов в HTML и SVG — Создавайте 41 тип диаграмм — от архитектурных схем и блок-схем до диаграмм Ганта, UML, карт Wardley и канban-досок — в виде самодостаточных HTML-файлов с встроенным SVG и поддержкой импорта из .drawio и .excalidraw с редакционной системой дизайна.
• Проектирование 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
• Генерация CAD-моделей по тексту для ИИ-агентов — earthtojake/text-to-cad — это открытая библиотека навыков для ИИ-агентов, которая позволяет им создавать, редактировать, проверять, нарезать и передавать CAD-модели и описания роботов из локальных проектных файлов. Берут, когда деталь нужно получить по текстовому описанию или картинке, а не рисовать вручную; когда модель надо проверить на печатаемость перед отправкой на 3D-принтер или лазерную резку; когда агент должен сам собрать URDF/SRDF для роботизированного манипулятора или подготовить G-code для FDM-печати. Написан на Python 3.11+, распространяется по лицензии MIT, устанавливается как набор навыков и вызывается агентом так же, как любой другой инструмент. Навыки охватывают: генерацию CAD (STEP, STL, 3MF, GLB), 2D-чертежи DXF, браузерный просмотр моделей, поиск готовых STEP-деталей через step.parts, описания роботов URDF / SRDF / SDF, проверку DfAM-printability, нарезку в G-code и валидацию файлов перед отправкой на SendCutSend. Направление — машинная генерация и обработка геометрии агентом, а не интерактивный CAD-редактор для человека. Инженерную ответственность инструмент не снимает: модель, идущую в производство, проверяет специалист. Не подходит для прямой работы с проприетарными форматами вроде SolidWorks .sldprt без конвертации.
• CadQuery — генерация 3D-моделей для печати — cad-skill — это навык для Claude Code, который генерирует параметрические 3D-модели для печати с помощью библиотеки CadQuery. Берут, когда нужно получить деталь под 3D-принтер по описанию словами, быстро подогнать размеры готового предмета под свою задачу, сделать крепление, корпус или переходник без опыта в CAD-программах, или когда нужно итерировать модель вместе с агентом. Пользователь описывает физический объект, Claude пишет параметрический скрипт на CadQuery, экспортирует STL, создаёт предпросмотры (6-вид PNG через trimesh + pyrender) и уточняет модель. В составе: генератор Gridfinity-корзин, pipeline трассировки контура из 3D-скана (outline_from_scan.py), конвертер STL→3MF для Bambu Studio и PrusaSlicer, чеклист проверки печатаемости (design-review.md). Написан на Python 3.10–3.12; устанавливается через git clone в ~/.claude/skills, зависимости ставятся через pip. Активируется автоматически по ключевым словам («3D print», «STL», «enclosure» и др.) или явной командой /parametric-3d-printing. Направление — генерация функциональных деталей с точными размерами, а не художественных органических форм. Параметрический код отличает подход от генераторов по картинке: размеры задаются числами и модель пересобирается без перерисовки. Требует Claude Code и Python 3.10–3.12; лицензия PolyForm Noncommercial — только для некоммерческого использования.
• Аудит дизайна по принципам Дитера Рамса — design-is — это скилл для Claude Code, который проводит аудит дизайна по десяти принципам «Хороший дизайн — это…» Дитера Рамса, выставляет оценки с доказательствами и передаёт результат в /make-plan для выбора одного из трёх исходов: новый дизайн, доработка или переделка. Скилл работает как оркестратор: параллельно разворачивает четыре субагента — структурный, визуальный, «копирайтинг и честность» и «вес и трение» — каждый обязан вернуть конкретные факты с цитатами (file:line, px-массивы, hex-токены, байты), а итоговую оценку 0–3 по каждому принципу выставляет только оркестратор. Результаты сохраняются в папку DESIGN-IS-<YYYY-MM-DD>/: файлы scope, evidence, scorecard, verdict и готовый prompt для /make-plan. Подходит командам и соло-разработчикам, когда нужно обосновать решение «переделать», «улучшить» или «начать с нуля» вместо субъективной дискуссии.
• Редактор скриншотов для App Store и Google Play — App Store & Google Play Screenshots Generator — это навык (skill) для ИИ-кодинг-агентов, который разворачивает готовый Next.js-редактор маркетинговых скриншотов для App Store и Google Play. Берут, когда нужно оформить красивые витринные скриншоты приложения для сторов: получить полноценный редактор с холстом, реальными рамками устройств, панелью настроек (inspector), сохранением состояния проекта и экспортом наборов картинок в нужных для сторов размерах — одним нажатием. Не статичная одноразовая страница, а полноценный редактор, который агент собирает под вас. Направление — генерация и редактирование маркетинговых скриншотов приложений под требования сторов, а не общий графический редактор и не генератор логотипов: ценность — быстро оформить презентабельные скриншоты для публикации приложения. Подойдёт мобильным разработчикам и маркетологам, готовящим страницы приложений в App Store/Google Play.
• 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 покрывает только статическую векторизацию без анимации. Хорошо работает с геометричными логотипами; логотипы с фотографическими текстурами и сложными градиентами векторизуются хуже.
• daisyUI — скиллы и MCP для компонентов Tailwind — daisyUI — это плагин для Claude Code со скиллом по библиотеке компонентов daisyUI для Tailwind CSS. Он помогает собирать интерфейсы из готовых компонентов, не выдумывая названия классов. Второй плагин, daisyui-blueprint, — это MCP-сервер, для которого по описанию нужна платная лицензия. Команда установки и список возможностей скилла в README не приведены, так что подробностей больше нет. Сама daisyUI 5 — бесплатная open-source библиотека компонентов для Tailwind CSS; документация, список компонентов и инструкция по установке находятся на daisyui.com.
• Стилизация 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
• Дизайн-токены 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.
• Дизайн-токены Netflix для стилизации UI — designlang — это скилл для Claude Code, который помогает стилизовать UI для netflix.com, используя извлечённую систему дизайн-токенов вместо самостоятельного подбора цветов, отступов и типографики. Внутри содержатся семантические токены, полученные с помощью designlang v7.0.0: основной акцентный цвет (#e50914), фон (#000000), радиус контролов (2px) и шрифт Netflix Sans. Скилл охватывает ключевые регионы страницы — nav, footer, content — и требует использовать семантические пути вроде `semantic.color.action.primary` без создания новых значений. Если нужный токен отсутствует, инструкция предписы
• Дизайн-токены 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-значения, а при отсутствии нужного токена — выбирать
• Дизайн-токены 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` — и семантические ва
• 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. Правило использования строгое: приоритет семанти
• Дизайн-токены 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
• Дизайн-токены 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 — и предписывает
• Конвертация CSS в утилиты Tailwind v4 — css-to-tailwind — это скилл для Claude Code, который конвертирует ванильный CSS, CSS-модули, SCSS или styled-components в утилиты Tailwind v4 с использованием @theme-backed токенов и семантических утилит. При миграции соблюдаются правила сохранения поведения и читаемости стилей, что позволяет переносить существующие стили без потери логики каскада. Подходит разработчикам и дизайн-системным командам, которым нужно перевести legacy-стили или целую кодовую базу на Tailwind v4 с поддержкой тематизации.
• HTML-прототипирование и motion-дизайн — HTML-прототипирование и motion-дизайн — это скилл для Claude Code, который создаёт высокофиделитные HTML-прототипы, слайд-презентации формата 1920×1080, motion-анимации и интерактивные демонстрации, ориентируясь на стандарт студийной дизайн-работы, а не на типовые AI-шаблоны. Берут, когда нужно быстро показать три разных направления дизайна до финальной реализации, когда надо собрать кликабельный прототип без Figma, когда нужна анимированная презентация или motion-демо для продуктового питча, или когда хочется получить слайды в HTML, которые можно открыть в браузере как PPT.
• Извлечение дизайн-системы из сайта — extract-design — это скилл для Claude Code, который извлекает полную дизайн-систему с любого веб-сайта по URL и генерирует 8 готовых файлов. Под капотом работает утилита designlang (запускается через npx без установки): она собирает цвета, типографику, отступы, тени, компоненты, брейкпоинты и анимации, после чего оценивает доступность по стандарту WCAG. На выходе получаются AI-оптимизированный markdown, визуальный HTML-отчёт с образцами, Tailwind config, React-тема, CSS-переменные, shadcn/ui-тема, Figma Variables и W3C Design Tokens. Поддерживается обход нескольких страниц сайта (--depth), изв
• Дизайн-токены 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-значения и предписывает при отсутствии нужного токена

FAQ

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

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

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

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

Все Skills для Claude Code