用 Claude Code
在 OpenDesign
做设计。

workspace-settings.html · 1440px

4交付前审查

1. 1

   下载 OpenDesign 桌面应用

   选择适合您电脑的软件包，安装并打开该应用。

   下载 OpenDesign

   检查点

   桌面应用会打开。已经安装过？请进入下一步；无需再次下载。
2. 2

   准备你的 Claude Code 连接

   按照你所安装版本中的 Claude Code 说明操作。使用你的 Anthropic API key（BYOK）或 Claude 订阅进行身份验证——我们不代理任何内容。

   anthropics/skills — frontend-design skill

   # 1. Install Claude Code (native install, recommended)
   curl -fsSL https://claude.ai/install.sh | bash
   # or: brew install --cask claude-code
   # Windows PowerShell: irm https://claude.ai/install.ps1 | iex
   
   # 2. Start it in your project and sign in on first run
   cd your-project
   claude            # sign in with your Claude subscription or API key

   摘自已发布指南中的 Claude Code 设置说明；请查看供应商文档以获取当前命令。

   检查点

   确认目标 Agent 与账户。如果不可用，请在尝试更大任务之前先检查兼容性。
3. 3

   运行一个小型 Claude Code 任务

   使用一个小 brief，以便您评估整个流程，包括一次修改。

   入门 brief 复制

   构建一个设置页面，包含个人资料表单和保存确认提示。使用我的设计规则。在桌面和移动端宽度下进行检查。

   检查点

   打开结果，测试保存状态，并提出一个具体的修改请求。生成的文件是评审的开始，而不是结束。

若要从源代码运行 OpenDesign，请参阅技术快速入门。

1. 1

   设计 Brief

   用简明语言写三到六行，说明目标受众、该界面要完成的任务，以及适用的平台。

   • 您撰写 brief；如有参考截图，请附上。
   • Claude Code读取 brief 和项目的指令文件；遇到含糊之处会提问。
   • OpenDesign提供项目、prompt 界面，以及对应产物类型的 skill。
   • 检查确认 brief 中已写明验收标准。现在补充比生成之后再补充成本更低。

   New project · PromptClaude Code

   You

   Design the workspace settings: general, members, notifications, billing. Use the CLAUDE.md tokens. Desktop and phone.

   Claude Code

   Understood. Should billing be a separate page with its own permissions, or a section on the same page for owners only?
2. 2

   设计约束

   一套设计系统加几条硬性规则。正是这些将符合品牌调性的产出与千篇一律的效果区分开来。

   • 您选择一个设计系统；说明断点及必须使用的组件。
   • Claude Code在写下任何一行之前，将 DESIGN.md 的 token 和风格规则加载到上下文中。
   • OpenDesign提供设计系统库，并将所选设计系统绑定到 skill 模板中。
   • 检查确认 token 与您的品牌相符：单一强调色、正确的字体、正确的圆角。

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 3

   生成界面

   Claude Code 编写一个自包含的 HTML 文件：布局、样式、交互和稳定的挂钩点。

   • 您等待即可，或回答澄清性问题。无需进行任何配置。
   • Claude Code规划各个区块，编写 HTML、CSS 和 JavaScript，运行该文件并修复失败之处。
   • OpenDesign将产物保存到项目文件夹中，并为预览建立索引。
   • 检查此步骤暂无需检查。请在文件渲染后进行判断，而非查看源代码。

   Project files3 files

   • workspace-settings.htmlnew
   • CLAUDE.mdbound
   • DESIGN.mdread
4. 4

   预览

   文件会以你要求的宽度在 OpenDesign 中渲染。设计的好坏就在这里被检验。

   • 你切换宽度，点击交互，在元素上留下评论。
   • Claude Code读取你在预览上留下的评论，并准备下一版修订。
   • OpenDesign渲染预览，暴露 data-od-id 目标以供评论和编辑。
   • 检查层级结构、对比度、390px 下的溢出、焦点状态，以及强调色是否使用得克制。

   Preview · 390pxComment mode

   Comment on · form

   Labels should sit above inputs on the phone; the side-by-side layout wraps badly at 390px.

   Comment on · toggles

   Only enabled toggles carry the accent; disabled ones stay neutral.
5. 5

   修订与验证

   通过在预览中指向元素来请求修改。每次修订都是一个新文件，绝不会被静默覆盖。

   • 你把评论转化为请求；决定任务何时完成。
   • Claude Code就地应用更改并重新运行该文件。
   • OpenDesign将各版本并排保留；完成后导出图片或 HTML。
   • 检查只重新检查发生变化的区域，然后在每个断点上完整检查一次整页。

   Verification · v23 of 4

   • ✓Labels stack above inputs at 390px
   • ✓Accent only on enabled toggles
   • ✓No horizontal scroll at 390px
   • Unsaved-changes prompt — checked by you