28 lines
2.6 KiB
Markdown
28 lines
2.6 KiB
Markdown
# 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](../frontend/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/spec/frontend/` 前端规范翻译成 Vue SFC + Naive UI themeOverrides,token 一一对应。
|