К основному содержанию
скилл CX Codex

migrate-design-system — скилл для Claude Code: перенос дизайн-систем

Скилл сопоставляет ваши дизайн-токены с внешней системой: Material 3, Apple HIG, Fluent, Carbon, shadcn/ui. Пригодится при миграции или переходе на чужой стек.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add plugin87/ux-ui-agent-skills --skill migrate-design-system -a claude-code
Открыть на GitHub

Что делает migrate-design-system

Скилл работает через ролевой кроссволк. Он читает протокол сопоставления и готовые таблицы для Material 3, Apple HIG, Fluent 2, Carbon, shadcn/ui и Radix, а для остальных систем выводит маппинг сам — по роли и смыслу токена на шести осях: цветовые роли, типографическая шкала, шаг отступов, радиус, тени, анимация.

Направление выбираете вы. Либо тянете чужой вид в свои токены и переуказываете semantic.*, либо ставите свои компоненты на чужую основу и темизируете их примитивы. Третий путь — миграция экран за экраном: аудит, маппинг, слой алиасов, проверка.

Перед первым запуском скилл проверяет, лежат ли рядом файлы набора токенов. Если установлены только папки скиллов — а именно так делает npx skills add — он честно об этом скажет и остановится, потому что гадать о содержимом файла, который не открылся, не станет. Дальше нужен npx ux-ui-agent-skills init или установка плагина. Каждую сопоставленную пару цветов стоит прогнать через проверку контраста: маппинг легко ломает тёмную тему и состояния.

Какие задачи решает

  • сопоставить свои токены с Material Design 3
  • перевести палитру и шкалу на Apple HIG
  • построить компоненты поверх shadcn/ui или Radix
  • провести миграцию дизайн-системы экран за экраном
  • проверить контраст после переноса цветов

Примеры запросов агенту

  • сопоставь наши токены с Material Design 3 и покажи кроссволк
  • переведи нашу палитру на Apple HIG, начни с цветовых ролей
  • составь план миграции на Carbon по экранам

Как установить migrate-design-system

1Через Skills CLI (Vercel)

npx skills add plugin87/ux-ui-agent-skills --skill migrate-design-system -a claude-code

2Вручную: положить файлы

~/.claude/skills/migrate-design-system/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/migrate-design-system/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о migrate-design-system

Как установить migrate-design-system в Claude?

Выполните npx skills add plugin87/ux-ui-agent-skills --skill migrate-design-system -a claude-code. После этого скилл окажется в ~/.claude/skills/migrate-design-system/SKILL.md.

Что делает migrate-design-system?

Строит таблицу соответствия между вашими токенами и внешней дизайн-системой, а при миграции добавляет план перехода и проверенные переопределения токенов.

Что нужно, чтобы скилл заработал?

Рядом должны лежать файлы набора токенов. Если установлены только папки скиллов, скилл сообщит об этом и попросит выполнить npx ux-ui-agent-skills init или поставить плагин.

Исходный текст

SKILL.md · MIT
---
name: migrate-design-system
description: Map this token system to or from any external design system (Material Design 3, Apple HIG, Fluent, Carbon, Ant, shadcn/ui, Radix, Chakra, Mantine, Bootstrap…). Adopt their look, build on their stack, or migrate between systems. Use when the user mentions interop, migration, or a specific design-system/component-library bridge.
# `invocation:` was not a field Claude Code reads - unknown frontmatter keys are
# ignored without an error, so these six were auto-invocable the whole time they
# were marked user-only. This is the field that actually does it.
disable-model-invocation: true
---

# Skill: Migrate / Interop Design System

> **Step 0: is the kit here?** This skill reads files from the kit. Check once:
> `ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING`
> On `KIT_MISSING` only the skill folders were installed, which is what
> `npx skills add` does. Say so plainly, point the user at
> `npx ux-ui-agent-skills init` or the plugin install, and stop. Do not guess the
> contents of a file you could not open.

Bridge to or from external design systems via a role-based crosswalk.

## Steps
1. Read `${CLAUDE_SKILL_DIR}/../../../design-systems/interop-protocol.md` (Crosswalk Method, the three directions, headless-vs-styled guidance, verification).
2. Use the curated tables in `${CLAUDE_SKILL_DIR}/../../../design-systems/crosswalk.md` for Material 3 / Apple HIG / Fluent 2 / Carbon / shadcn/ui / Radix. For others, derive a mapping with the Crosswalk Method (map by role/intent across 6 axes: color roles, type scale, spacing unit, radius, elevation, motion).
3. Choose the direction:
   - **FROM** external → our tokens (adopt their look): re-point `semantic.*`.
   - **TO** external stack (our components on their foundation): theme their primitives with our tokens.
   - **Migrate**: Audit → Map → Bridge (alias layer) → Verify, screen by screen.
4. **Verify** every mapped color pair for contrast (`${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py` / `a11y-audit`); confirm all 8 states + dark mode survive the mapping.

## Output
A crosswalk table (our token → their token → value note), a bridge plan if migrating, and verified token overrides. Render via `design-code`.

© plugin87 · MIT · plugin87/ux-ui-agent-skills

Похожие скиллы

Всё по теме «Дизайн» →
design-system-creation aj-geddes Скилл помогает собрать дизайн-систему: компоненты, токены, правила и документацию. Пригодится, когда интерфейсов или команд стало больше одной. CX Codex +1 537установок design-system-generator OneWave-AI Собирает дизайн-систему из токенов, базовых компонентов и документации. Пригодится, когда проект обзавёлся вторым экраном и цвета начали расползаться. CX Codex +1 300установок extract-design-system arvindrk Скилл находит базовые токены дизайна на веб-странице и создаёт начальные файлы tokens.json и tokens.css. Он полезен для быстрого старта стилизации в новом репозитории. CX Codex +1 130 700установок design-system claudekit Скилл собирает дизайн-токены, спецификации компонентов и презентационные слайды. Подойдёт, когда интерфейс и слайды должны следовать одной системе. CX Codex +1 42 700установок design-system-patterns Seth Hobson Помогает проектировать дизайн-токены, переключение тем и архитектуру библиотеки компонентов. Пригодится, когда вы закладываете общие правила интерфейса для проекта. CX Codex 15 953установок ui-design-system Alireza Rezvani Скилл собирает дизайн-токены, палитры, типографику и структуру компонентов. Пригодится для дизайн-системы и передачи макетов разработчикам. 1 076установок

Из того же набора16

design-component Создаёт спецификацию UI-компонента с анатомией, 8 состояниями, токенами и доступностью. Пригодится при проектировании контролов в дизайн-системе до написания кода. CX Codex +1 522установок ux-writing Пишет и проверяет тексты интерфейса: кнопки, ошибки, пустые состояния и уведомления. Пригодится, когда нужен единый тон без обвинений и тупиковых сообщений. CX Codex +1 517установок design-qa Настраивает проверки интерфейса перед слиянием: токены, контраст, доступность и визуальные снимки. Нужен для контроля состояний компонентов и регрессий. CX Codex +1 516установок brandkit Создаёт систему бренд-токенов и theme.css по брифу, включая светлую и тёмную темы. Нужен для новой палитры, типографики и единой основы интерфейса. CX Codex +1 510установок prototype Ведёт проектирование интерфейса по лестнице детализации от структуры контента до кода. Помогает собирать вайрфреймы, карты путей пользователей и сценарии тестов. CX Codex +1 484установок token-build Превращает DTCG-токены в артефакты для платформ: CSS-переменные, Tailwind @theme, JS/TS, iOS и Android. Нужен, когда тема задаётся один раз, а собирается под каждый стек. CX Codex +1 480установок figma-integration Синхронизирует токены и компоненты между кодом и Figma в обе стороны. Пригодится для настройки Variables, MCP-связи и проверки расхождений. CX Codex +1 478установок governance Скилл ведёт правила развития дизайн-системы: SemVer для токенов и компонентов, порядок приёма правок, депрекация и оповещение о изменениях. CX Codex +1 474установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой