mcpField
M
migrate-design-system

migrate-design-system

github.com/plugin87Design & UI3.0k500 installsUpdated 1d ago
Repository

About migrate-design-system

migrate-design-system is a design skill for mapping between an external design system and a project's tokens or components. It supports adoption, theming, and staged migrations with contrast and state checks.

Key features

  1. 01Map design tokens by role
  2. 02Support FROM, TO, and migration paths
  3. 03Create a token bridge plan
  4. 04Check contrast, states, and dark mode

Use cases

  1. 01Adopt Material 3 or Fluent 2 styling
  2. 02Theme external primitives with project tokens
  3. 03Migrate screens in verified stages

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill migrate-design-system

After installing, type/migrate-design-systemin Claude Code to confirm it loaded.

Details

From the project README

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.

Comments

Markdown supported