ui-design-systemавтор Alireza Rezvani

UI Design System Skill.

Навык для Claude Code и Codex для работы с брендом и дизайн-системами: токены дизайна, документация компонентов, расчёты для адаптивности и передача разработчикам.

Бренд и дизайн-системы
Дизайн-система

Скачать OpenDesign Инструкция по использованию

alirezarezvani/claude-skills · product-team/skills/ui-design-system/SKILL.mdSKILL.md

--- name: ui-design-system description: UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use when creating design systems, generating design tokens, maintaining visual consistency, or facilitating design-dev collaboration and developer handoff. --- ## Trigger Terms ## Workflows ## Quick Reference Tables ## Knowledge Base ## Validation Checklist

Метаданные и заголовки разделов из исходного файла от 2026-09-14 · 10 759 символов полностью

01 Что делает

Что делает skill ui-design-system в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Набор инструментов дизайн-системы для превращения одного фирменного цвета в полный набор токенов. design_token_generator.py принимает hex-цвет и пресет modern, classic или playful и возвращает цвета, типографику, отступы 8pt, размеры, границы, тени, анимацию, breakpoints и слои z-index в формате json, css, scss или сводки.

Далее четыре рабочих процесса охватывают архитектуру компонентов от атомов до шаблонов, адаптивные breakpoints с гибким типом на clamp(), проверку контраста WCAG и передачу разработчикам в виде переменных React CSS, конфигурации Tailwind или styled-components, а также синхронизацию с Figma через Tokens Studio. Рассчитан на senior UI-дизайнеров, которым нужно документировать токены и компоненты для команды разработки.

Что он выдаёт

Документация API компонентов, охватывающая props, варианты, состояния и требования к доступности.
Фрагменты кода для интеграции с React через CSS-переменные, конфигурацию темы Tailwind и styled-components.
Семантические цветовые токены, несущие собственные контрастные цвета.

Смотрите пример запроса ↗

Как это работает

01
Зафиксируйте фирменный цвет
Рабочий процесс начинается с определения основного фирменного цвета, который файл требует в формате hex, так как каждая генерируемая категория производится из него.
02
Запустите генератор токенов
Один вызов скрипта создаёт всю систему: цвет, стилевой пресет и формат вывода — три аргумента, которые он принимает.
03
Привязка токенов к иерархии компонентов
Компоненты организованы как атомы, молекулы, организмы и шаблоны, и каждый из них привязан к группам токенов, которые он использует.
04
Настройка breakpoint'ов и гибкой типографики
Шесть breakpoint'ов идут от xs до 2xl, а гибкая типографика выражена формулой clamp между минимальным и максимальным размером.
05
Встраивание токенов в кодовую базу
Рабочий процесс передачи показывает файл токенов, импортируемый напрямую, тему Tailwind, собранную из JSON, и тему styled-components, считывающую ключи токенов.
06
Синхронизация с Figma и финальная проверка
Токены попадают в Figma через плагин Tokens Studio, а чек-лист передачи подтверждает, что пайплайн, библиотека компонентов и документация готовы.

02 Определите своё применение

Когда использовать skill ui-design-system

Используйте скилл ui-design-system в Claude Code или Codex, когда задача — работа над брендом и дизайн-системой такого рода. Область применения и ограничения ниже взяты из файла самого скилла.

Хорошо подходит

У вас есть один брендовый цвет, и вам нужна полная система токенов, выведенная из него.
Вы структурируете библиотеку компонентов и хотите привязать токены к атомам, молекулам, организмам и шаблонам.
Вам нужны breakpoint'ы, шкалы гибкой типографики или значения адаптивных отступов, рассчитанные автоматически.
Вы готовитесь передать готовый набор токенов команде разработки.

Знайте границы

Стилевые пресеты — это не глубокий рескин: выбор темы в основном меняет наборы шрифтов, радиус по умолчанию и характер теней, например скругление углов 8px в modern против 4px в classic.

Что предоставить

Стилевой пресетВыберите одно из трёх направлений — modern, classic или playful, так как пресет меняет семейства шрифтов, радиус углов и обработку теней во всём сгенерированном наборе.
Формат выводаУкажите, какой формат потребляет принимающий проект: json, css, scss или сводное представление, поскольку это определяет, что получится на выходе передачи.

03 Внутри скилла

Правила, которые skill ui-design-system задаёт Claude Code и Codex

7 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт агенту, — та часть файла, которая меняет результат.

Цвет бренда по умолчанию
Если цвет не передан, генератор использует #0066CC как основной брендовый цвет по умолчанию, поэтому вывод рендерится даже без аргумента hex.
Отступы основаны на сетке 8pt
Токены отступов следуют шкале на основе сетки 8pt, идущей от 0 до 64, с семантическими алиасами, наложенными на числовые шаги.
Никаких зашитых значений
Реализации компонентов должны ссылаться только на design tokens; буквальные значения в пикселях или hex в компонентах считаются провалом проверки.
Каждый вариант поставляется
Компоненты должны реализовывать полный набор вариантов — primary, secondary и ghost, — а не подмножество.
Размерные варианты имеют фиксированные размеры
Малый размер определён как высота 32px, горизонтальные отступы 12px и размер шрифта 14px, а md и lg масштабируются от этого значения.
Контраст должен соответствовать WCAG AA
Сгенерированные цвета проверяются на соответствие 4.5:1 для обычного текста и 3:1 для крупного, при этом семантические цвета обязаны определять значения контраста.
Области касания остаются достаточно крупными
Интерактивные элементы должны достигать минимального размера области касания 44 на 44 пикселя согласно чек-листу доступности.

04 Применение

Установите ui-design-system в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте ui-design-system в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/alirezarezvani/claude-skills --skill ui-design-system

Общая форма CLI-команды skills для product-team/skills/ui-design-system/SKILL.md; репозиторий может документировать собственный путь.

Дайте Skill первую рабочую задачу по бренду и дизайн-системе

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt

We have settled on [#0066CC] as the brand primary and I need a complete token set for our SCSS codebase, exported as variables we can import. Please generate the tokens in the classic style, document the Button, Input and Card component APIs with their variants and states, and check that the semantic colors clear WCAG AA before we hand off to the developers.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Убедитесь, что была сгенерирована каждая категория токенов, а не только часть.
Проверьте, что состояния hover, active, focus и disabled действительно работают для каждого компонента.
Проверьте, что индикаторы фокуса видимы и используются семантические HTML-элементы.
Убедитесь, что дизайн-инструмент синхронизирован, прежде чем считать передачу разработчикам завершённой.
Убедитесь, что настроен пайплайн сборки, чтобы экспортированные токены попадали в код.

В OpenDesign импортируйте ui-design-system по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Alireza Rezvani
Repository: github.com/alirezarezvani/claude-skills Ветка main
Файл skill: product-team/skills/ui-design-system/SKILL.md Контрольная сумма содержимого зафиксирована при проверке; коммит 19392f7
License: MIT Из LICENSE.
Звёзды репозитория: 25 934 Снимок GitHub сделан 14.09.2026 для всего репозитория alirezarezvani/claude-skills, который содержит 5 скиллов в этом каталоге. Не является рейтингом или счётчиком использования для ui-design-system.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Триггерные фразыФразы в кавычках, такие как generate design tokens, которые должны направлять запрос к этому skill.
Рабочие процессыЧетыре пронумерованных рабочих процесса: генерация токенов, система компонентов, адаптивный дизайн, передача разработчикам.
Справка по инструментуАргументы, значения по умолчанию и категории вывода design_token_generator.py, с примерами вызовов.
Таблицы быстрой справкиШаги цветовой шкалы, типографическая шкала 1.25, уровни WCAG и различия стилевых пресетов.
База знанийЧетыре справочных руководства: token-generation, component-architecture, responsive-calculations, developer-handoff.
Чек-лист проверкиСписки для проверки генерации токенов, системы компонентов, доступности и передачи разработчикам.

Собственное описание skill

«Инструментарий дизайн-системы UI для старшего UI-дизайнера, включая генерацию токенов, документацию компонентов, расчёты адаптивного дизайна и инструменты передачи разработчикам. Используйте при создании дизайн-систем, генерации токенов, поддержании визуальной целостности или организации совместной работы дизайнеров и разработчиков и передачи разработчикам.»

Описание из блока метаданных SKILL.md. Полный файл содержит около 10 759 символов. Читайте полный файл на GitHub.

06 Перед установкой

Вопросы о skill ui-design-system

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Что нужно для запуска генератора?

Hex-код бренд-цвета и выбор стиля, переданные прямо в командной строке вместе с форматом вывода. В файле показаны вызовы вроде классической палитры с выводом в CSS, так что предварительно ничего другого настраивать не нужно.

Какие форматы вывода я могу получить?

По умолчанию используется JSON, но тот же скрипт может выводить CSS custom properties, SCSS-переменные или сводный вид. В примерах вывод SCSS перенаправляется в partial, чтобы его можно было импортировать напрямую.

Как работает синхронизация с Figma?

Вы устанавливаете плагин Tokens Studio и импортируете сгенерированный JSON, после чего токены автоматически синхронизируются со стилями Figma. Тот же workflow передачи охватывает и интеграцию с React, Tailwind и styled-components.

На какой уровень контраста рассчитана работа?

Справочная таблица определяет уровни AA и AAA: AAA требует контраста 7:1 для обычного текста и 4,5:1 для крупного текста, тогда как AA — это более мягкая цель 4,5:1 и 3:1. Крупный текст — это минимум 18pt обычного начертания или 14pt полужирного.

UI Design System

Запустите ui-design-system для реальной задачи по бренду и дизайн-системам.

Скачайте OpenDesign, импортируйте ui-design-system по ссылке на его SKILL.md, вставьте промпт выше и прочтите план до получения результата.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/alirezarezvani/claude-skills --skill ui-design-system