用途:分析 Claude Design 导出的交接包(handoff bundle),让开发者快速掌握交接状态。交接包通常包含 README.md、design-tokens.json、components.json、layout-hierarchy.json、chat-history.md 及 assets/。
输入形式:ZIP 压缩包(如 ./handoff-bundle.zip)、目录(如 ./handoff-bundle/)或 Claude Design Export 提供的 URL。ZIP 需用 unzip 解压后分析,分析后保留原文件作备份。
工作流程:先校验包内文件是否齐全,缺失则报告并尽力分析;再逐文件解析——README 提取目标、范围与约束,design-tokens.json 统计颜色、排版、间距等令牌与语义映射,components.json 梳理组件树、变体与状态、与现有代码的匹配度,layout-hierarchy.json 分析页面数、响应式变体与交互元素,chat-history.md 提取设计决策、约束、被否决方案与未决问题。最后生成摘要报告:概览表、设计令牌摘要、ASCII 组件树、设计决策上下文、未决问题清单、P0-P3 实现优先级,以及一段可直接粘贴到 Claude Code 的交接指令。
适用场景:需要把设计稿转为生产代码,先梳理交接包内容并生成 Claude Code 指令;也可做设计系统与既有代码库的组件匹配评估。
限制:不替代交接流程,仍需把原包交给 Claude Code;不得擅自修改设计令牌或曲解 chat-history.md 中的决策,应保留引用原貌;缺少 chat-history.md 时设计意图只能靠代码推断,报告中会标注。营销后需走 Canva 路径时,本技能仅作参考,需在 Claude Design 画布中直接 Export → Canva;同一设计不要同时走两个路径以免不一致。
触发关键词:Claude Design 交接、handoff bundle、design-tokens 分析、components.json、Claude Code 交接。官方资料未提供收费、价格或平台细节。