用途
design-sync 用于把用户的设计系统同步到 claude.ai/design。Claude Design 是 Claude 的设计工具，用户向设计智能体提出需求后，它会用真实的 React 代码在浏览器中实时渲染出可用的界面、流程和原型。默认情况下它使用通用组件；本技能改变了这一点：它把用户的设计系统仓库转换成 Claude Design 消费的格式并上传，此后设计智能体就会使用客户真实的组件来构建，每个设计都符合品牌、由真实部件组成，并能 1:1 对应到工程师可发布的代码。
主要能力
上传的产物及其用途：
_ds_bundle.js+_vendor/：供设计智能体运行时使用，每个设计渲染这些来自window.<globalName>.*的真实编译组件。styles.css、fonts/、tokens/、_ds_bundle.css：决定每个渲染设计的外观——令牌、字体和组件样式，全部可通过 styles.css 的@import闭包访问（设计只接收该闭包）。<Name>.d.ts（<Name>Props）：设计智能体编码所依据的 API 契约。<Name>.prompt.md：设计智能体的使用参考——如何组合组件，含示例。<Name>.html预览卡片：供人在组件选择器中查看，用于找到组件并信任同步结果。_ds_sync.json：未来同步的锚点——内容哈希，使重新同步（任意机器）可以跳过未变更组件的重新验证，并精确计算需要上传/删除的内容。
转换器从仓库自身的 dist/ 确定性地构建上述所有内容。有 Storybook 时，预览来自仓库的 stories，并对照其自身的 storybook 渲染进行验证（保留为本地参考，绝不上传）。没有 Storybook 时，每个组件仍完整可用，丰富的预览则根据仓库自身的使用示例为范围内的组件编写，并按绝对评分标准评分。核心原则：交付客户已经构建的东西——包是他们的编译产物 dist/，绝不是重新实现。
该技能包含一个 DesignSync 工具，用于读写用户的 claude.ai/design 项目。如果工具调用因授权错误失败，需原样转达其指引，并在用户处理后重试。
使用方式
首次同步的预期说明
一次完成的同步总会让 .design-sync/config.json 同时持有 projectId 和 pkg。两者都存在即为重新同步。否则按首次导入处理：告知用户这是首次导入，默认会迭代构建并目视验证每个组件预览的质量，大型仓库可能耗时数小时；用户可随时打断；首次导入会创建新的 Claude Design 项目；需要用户批准的事项集中在开头（创建项目，以及一次覆盖本次运行上传的批准）；之后已验证的组件会随运行进度出现在项目中；运行过程会记录配置和笔记，使未来同步更快且基本确定性。随后确认用户是否继续（此过程可能消耗大量 token）。
选择目标项目
目标项目按优先级三种方式选定：
- 已固定：
.design-sync/config.json有projectId→ 即目标。用DesignSync(get_project)确认其仍存在且为PROJECT_TYPE_DESIGN_SYSTEM。 - 全新（首次默认）：无固定 → 创建新项目。用
DesignSync(list_projects)选一个不冲突的名称，经AskUserQuestion确认名称后再调用DesignSync(create_project)。若权限提示被拒绝，停止并询问用户，绝不未经请求重试，也绝不在无目标的情况下继续。 - 重新采用：仅在用户明确要求时。用户指定现有项目，检查类型后以平实语言警告同步可能覆盖或删除其中已有文件，仅在用户确认后继续。
目标确定后立即在 .design-sync/config.json 记录其 projectId，在任何上传之前。
上传路径路由：运行开始前已固定的 projectId 总是走原子路径；否则由远端通过无提示的 DesignSync(list_files) 决定：空（正常情况）→ 增量路径；非空（重新采用的项目）→ 原子路径。
探索并写入配置
工作流为：探索仓库 → 写入 .design-sync/config.json → 从中确定性地运行转换器。转换器的发现基于启发式；每个启发式都有配置覆盖项，不匹配默认值的仓库应写配置而非改代码。仅在最后手段才编辑 lib/*.mjs。
上传格式即契约；转换器是达到该格式的确定性路径，而非唯一路径。应用消费的内容由输出布局完全规定：_ds_bundle.js + @ds-bundle 头、styles.css、components/<group>/<Name>/{.html,.jsx,.d.ts,.prompt.md}（首行为 @dsCard）、_preview/、_vendor/、fonts/、_ds_sync.json。
一个容易遗漏的不变量：渲染的设计只接收 styles.css 的传递 @import 闭包。任何真实的组件 CSS（_ds_bundle.css）必须从 styles.css 中 @import。
对于确实超出转换器范围的仓库（非 esbuild 可打包的构建、特殊工具链），可用仓库允许的任何方式生成布局。但门槛不变：package-validate.mjs 必须干净退出，且每个 story 在上传前都必须评分。
尊重先前运行的状态
若 .design-sync/config.json 或 .design-sync/NOTES.md 已存在，先读取并遵循其中的内容。用户中途告知的问题（路径、构建标志、要跳过的组件、包管理器怪癖）应立即持久化：映射到 cfg.* 字段的值写入配置，其他写入 NOTES.md 的条目。
使用仓库自身的包管理器忠实安装
使用仓库固定的 node 版本（.nvmrc / engines.node），然后通过锁文件检测：yarn.lock → yarn install --immutable；pnpm-lock.yaml → pnpm i --frozen-lockfile；bun.lockb/bun.lock → bun install --frozen-lockfile；package-lock.json → npm ci。
确定源形态
若配置已有 shape 字段则使用之。否则 Glob 查找 **/.storybook/main.* 和 **/storybook/main.*（排除 node_modules）：
- 有匹配 →
shape = 'storybook'，匹配的祖父目录为运行所在的包。找到多个时询问哪个是设计系统的。 - 找到
*.stories.*但目标中无.storybook/→ 询问 Storybook 配置是否在仓库其他位置。 - 无
.storybook/且无*.stories.*→ 询问是否存在 Storybook。
然后读取 <skill-base-dir>/storybook/SKILL.md 或 <skill-base-dir>/non-storybook/SKILL.md 并遵循。两种形态都以 package-build.mjs 作为转换器入口，以 resync.mjs 作为唯一重新同步驱动。
增量上传序列（首次同步到空项目）
在增量路径上，用户提前一次性批准上传，然后随运行进度观看已验证组件出现在项目中。
打开上传通道——在子技能首次干净构建门槛处：先用平实语言解释批准内容，然后调用 DesignSync(finalize_plan)，指定 localDir: "./ds-bundle"、写入和删除的 glob 列表。返回的 planId 服务整个运行。若批准被拒绝，停止并询问。
适用场景
- 需要将设计令牌、Storybook 组件或 CSS 变量在设计稿与代码之间同步。
- 希望 Claude Design 使用真实设计系统组件而非通用组件来生成界面。
- 需要让设计产出与品牌一致并可直接对应到工程代码。
- 需要增量同步，跳过未变更组件并精确计算上传/删除内容。
限制
- 首次高保真导入在大型仓库上可能耗时数小时，并可能消耗大量 token。
- 需要仓库有可被 esbuild 打包的构建产物；非 esbuild 可打包的构建或特殊工具链需自行生成布局，但验证门槛不变。
- 渲染的设计只接收 styles.css 的传递
@import闭包，组件 CSS 必须从 styles.css 导入。 - 同步到已有项目可能覆盖或删除其中已有文件，仅在用户明确要求并确认后执行。
- 授权失败时需用户按工具指引处理后重试。
- 关于具体收费、价格、平台支持范围等事实，资料暂未提供。