mcpField
M
migrate-design-system

migrate-design-system

github.com/plugin87设计与 UI3.0k500 次安装1 天前更新
代码仓库

关于 migrate-design-system

migrate-design-system 是用于在外部设计系统与项目令牌或组件之间建立映射的设计技能，支持采用外部风格、主题适配和分阶段迁移，并包含对比度与状态检查。

主要功能

  1. 01按角色映射设计令牌
  2. 02支持引入、输出和迁移路径
  3. 03制定令牌桥接方案
  4. 04检查对比度、状态和深色模式

适用场景

  1. 01采用 Material 3 或 Fluent 2 风格
  2. 02用项目令牌主题化外部基础组件
  3. 03分阶段迁移并逐屏验证

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/migrate-design-system确认已加载。

详细介绍

技能：迁移 / 互操作设计系统

步骤 0：工具包在吗？ 此技能会读取工具包中的文件。检查一次： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING 仅当结果为 KIT_MISSING 时，表示只安装了技能文件夹，这是 npx skills add 的行为。请直接说明这一点，指引用户使用 npx ux-ui-agent-skills init 或安装插件，然后停止。不要猜测无法打开的文件内容。

通过基于角色的交叉映射表，与外部设计系统互通。

步骤

  1. 阅读 ${CLAUDE_SKILL_DIR}/../../../design-systems/interop-protocol.md（交叉映射方法、三个方向、无头与带样式的指导、验证）。
  2. 使用 ${CLAUDE_SKILL_DIR}/../../../design-systems/crosswalk.md 中为 Material 3 / Apple HIG / Fluent 2 / Carbon / shadcn/ui / Radix 整理的表格。对于其他系统，使用交叉映射方法建立映射，按角色 / 意图对应 6 个维度：颜色角色、字体比例、间距单位、圆角、海拔、动效。
  3. 选择方向：
    • 从外部迁入 → 使用我们的令牌（采用对方的外观）：重新指向 semantic.*。
    • 迁移到外部技术栈（在对方的基础上使用我们的组件）：使用我们的令牌为其基础元素设定主题。
    • 迁移：逐屏执行审计 → 映射 → 桥接（别名层）→ 验证。
  4. 验证每对映射颜色的对比度（${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py / a11y-audit）；确认映射后 8 种状态和深色模式均正常。

输出

提供交叉映射表（我们的令牌 → 对方的令牌 → 值说明）、迁移时的桥接计划，以及经过验证的令牌覆盖项。通过 design-code 渲染。

评论

支持 Markdown