用途:把从 claude.ai/design 导出的交接包(URL 或本地文件)转换为 React 组件脚手架,并记录来源、与现有代码库去重。
主要能力:解析并校验交接包(gzipped tarball,含 README、chats、HTML 原型),计算 bundle_id;对设计 token 做差异比对与冲突处理;对每个组件做去重(优先 Storybook MCP,其次 21st.dev,最后文件系统 grep),决定复用、适配或新建;按组件委派 design-to-code 生成代码;写入来源文件 .claude/design-handoffs/<bundle_id>.json;最后输出导入清单。
使用方式:design-import https://claude.ai/design/abc123 或 design-import /tmp/handoff-bundle.json。参数无法解析为 URL 或文件时会询问用户。
适用场景:从 Claude Design 导出交接包后,需要把设计落地为项目内 React 组件时使用。
限制:不打开 PR、不运行测试、不部署、不生成 Storybook stories;这些由 design-ship 或相关 hook 负责。Claude Design 尚无公开 API,交接包为一次性导出,迭代需重新导出再导入;bundle schema 尚未稳定,可能随格式变化需要更新;资源 URL 仅引用不下载。冲突未解决时会阻止脚手架。