design-system-patternsавтор Seth Hobson

Design System Patterns Skill.

Skill для Claude Code и Codex для работы с брендом и дизайн-системами: масштабируемые дизайн-системы — token, инфраструктура тем, архитектура компонентов.

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

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

wshobson/agents · plugins/ui-design/skills/design-system-patterns/SKILL.mdSKILL.md

--- name: design-system-patterns description: Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations. --- ## When to Use This Skill ## Core Capabilities ## Quick Start ## Detailed patterns and worked examples ## Best Practices

Вводная часть и заголовки разделов прочитаны из исходного файла 2026-09-14 · 4003 символа полностью

01 Что делает

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

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

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

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

Этот skill строит масштабируемые дизайн-системы с design tokens, инфраструктурой тематизации и паттернами архитектуры компонентов. Он создаёт трёхуровневую иерархию токенов — примитивные токены для необработанных значений, семантические токены для контекстного смысла и токены компонентов для конкретного использования — а затем реализует переключение тем с помощью CSS custom properties и React context providers.

Skill обрабатывает генерацию токенов для нескольких платформ — CSS, iOS и Android, выстраивает workflow от Figma к коду со Style Dictionary и проектирует библиотеки компонентов с использованием compound components, полиморфных компонентов, вариантов, слотов и headless UI-паттернов. Он определяет системные настройки, такие как prefers-color-scheme и режимы пониженной анимации.

Что он выдаёт

Файлы токенов для нескольких платформ, сгенерированные для CSS, iOS и Android
Библиотеки компонентов с системами вариантов и размеров
Документация и рекомендации по дизайн-системе

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

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

01
Определите примитивные токены
Создайте токены необработанных значений для цветов, размеров и шрифтов, которые служат базовым слоем. Это буквальные значения, такие как hex-коды и измерения в пикселях.
02
Постройте слой семантических токенов
Ссылайтесь на примитивные токены, чтобы создать контекстные токены, такие как text-primary, surface-elevated и border-default, которые несут смысл, а не визуальное описание.
03
Создайте токены, специфичные для компонентов
Определите токены для конкретного использования компонентов, такие как button-bg и card-border, которые ссылаются на семантические токены.

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

Когда использовать навык design-system-patterns

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

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

Создание дизайн-токенов для цветов, типографики, отступов и теней
Внедрение переключения светлой/тёмной темы с помощью CSS custom properties
Создание мультибрендовых систем тем
Архитектура библиотек компонентов с согласованными API
Настройка рабочих процессов дизайн-в-код с токенами Figma

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

Пробелы между платформами, когда токены есть для веба, но не для мобильных, или наоборот

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

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

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

Версионирование токенов по Semver
Относитесь к изменениям токенов как к изменениям API и используйте семантическое версионирование. Изменения токенов влияют на использующие их приложения так же, как изменения API.

04 Применение

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

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

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

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

Terminal

npx skills add https://github.com/wshobson/agents --skill design-system-patterns

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

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

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

Starter prompt

Build a design token system for [our SaaS dashboard] with light and dark themes. Create the three-tier token hierarchy (primitive, semantic, component) for colors, typography, and spacing. Implement CSS custom properties and a React theme context provider with system preference detection and persistent storage. Generate tokens for both web and React Native using Style Dictionary, and set up the compound component pattern for our Button and Card components with size and variant props.

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

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

Перед принятием результата найдите это в диалоге и файлах:

Результат предоставляется как Design system, как указано в каталоге для этого skill.
Агент называет навык design-system-patterns в своём плане или транскрипте перед созданием результата.
Ваш собственный контент, имена и числа остаются неизменными в выводе.

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

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

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

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

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

Author: Seth Hobson
Repository: github.com/wshobson/agents Ветка main
Файл skill: plugins/ui-design/skills/design-system-patterns/SKILL.md Контрольная сумма содержимого записана при верификации; коммит 4236bb9
License: MIT Из LICENSE.
Звёзды репозитория: 39 635 Снимок GitHub сделан 2026-09-14 для всего репозитория wshobson/agents, который содержит 18 навыков в этом каталоге. Не является рейтингом или счётчиком использования для design-system-patterns.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Когда использовать этот skillПеречисляет сценарии для дизайн-токенов, темизации, мультибрендовых систем, библиотек компонентов и рабочих процессов Figma
Основные возможностиПодробно описывает дизайн-токены, инфраструктуру темизации, архитектуру компонентов и возможности пайплайна токенов
Дизайн-токеныОпределяет примитивный, семантический и компонентный слои токенов с соглашениями об именовании и генерацией для нескольких платформ
Инфраструктура темизацииОхватывает CSS custom properties, React context, динамическое переключение, системные настройки и режимы доступности
Архитектура компонентовОписывает составные компоненты, полиморфные паттерны, варианты, слоты, headless UI и style props
Пайплайн токеновОбъясняет синхронизацию с Figma, настройку Style Dictionary, трансформации и интеграцию с CI/CD
Быстрый стартПриводит пример на TypeScript структуры примитивных и семантических токенов с CSS custom properties
Лучшие практикиПеречисляет семь правил: семантическое именование, иерархия, документация, версионирование, тестирование, автоматизация, миграция
Частые проблемыПредупреждает о разрастании токенов, несогласованности именования, отсутствии тёмной темы, жёстко заданных значениях, циклических ссылках, пробелах между платформами

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

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

Описание из front-matter файла SKILL.md. Полный файл составляет около 4 003 символов. Прочитайте полный файл на GitHub.

Design System Patterns

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

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

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

Терминал

npx skills add https://github.com/wshobson/agents --skill design-system-patterns