2.5 KiB
2.5 KiB
Claude Design 设计稿工作流
设计稿在 Claude Design(claude.ai/design)中产出与评审:云端项目制文件工作区,Claude 通过 MCP 工具直接读写项目文件,用户在网页编辑器中实时查看、点选修改、评论,双方操作同一份文件。
产物形态
- 设计稿是
.dc.html(Design Components)文件:HTML 承载视觉,<x-dc>模板 +support.js运行时(服务端下发,不手写)让用户能在 Claude Design 编辑器里点选任意元素直接改文案/样式,而不是只读预览。 - 交互原型(视图切换、筛选、hover 态)由文件内的逻辑类驱动,单文件即可承载多视图的完整面板原型。
- 设计 token 不依赖平台 design system,以 styling-design-tokens.md 的 Anthropic 风 token 直接内嵌为设计稿的样式事实源。
工作流
| 阶段 | 动作 | 说明 |
|---|---|---|
| ① 加载规范 | get_claude_design_prompt |
每次会话先加载平台设计规范(.dc.html 约定、反 AI-slop 内容准则),再动手 |
| ② 建项目 | create_project |
一个设计主题一个项目;返回 claude.ai/design 项目链接 |
| ③ 写运行时 | create_support_js |
每个含 .dc.html 的目录一次,服务端写入当前 dc-runtime |
| ④ 声明与写入 | finalize_plan → write_files |
先声明本批要写的路径拿 plan_token;写入时带 etag(if_match)防止覆盖用户在编辑器里的并发修改 |
| ⑤ 渲染验证 | render_preview + playwright-cli |
渲染循环:截图 1440×900、查 console 错误/404/空白 → 修复 → 重渲,直到干净;再以"新眼睛"逐条核对需求与反模式清单 |
| ⑥ 交付评审 | 分享 claude.ai/design 页面链接 | 用户在编辑器里直接批注/修改;?embed=1 链接可实时看 Claude 的每次写入 |
协作与边界
- 并发安全:用户可能同时在编辑器里改文件,所有写入必须带上次读到的 etag,冲突时以用户改动为基准重新套用变更,绝不无条件覆盖。
- 链接纪律:交付给人的永远是 claude.ai/design 链接;
serve_url(claudeusercontent.com)是带项目令牌的短时链接,仅供自动化浏览器验证,不得外发。 - 平台边界:Claude Design 没有本地 skill/plugin 市场与内部生成 agent,设计由当前会话直接产出;风格底座与评审职责由 token 清单(含反模式)与渲染验证循环承接。
- 导出衔接:定稿 .dc.html 即结构化 HTML/CSS,实现阶段按
.trellis/frontend/前端规范翻译成 Vue SFC + Naive UI themeOverrides,token 一一对应。