Claude Code 
OpenDesign 在 OpenDesign 中使用 Claude Code 设计界面：以 CLAUDE.md 和 Frontend Design skill 作为约束条件，一项从 brief 到通过审阅的文件的工作区设置任务，以及 Figma 往返流程在何处止步。
一次 Claude Code 设计演练
本演练跟踪一个任务从交接开始的全过程：你给 Claude Code 的简报和约束、它返回的产物，以及在你签收前仍由你负责的检查。下面的界面是为本页构建的示意图，并非真实 Claude Code 会话的截图。
Brief为一个小型 SaaS 团队设计工作区设置区域：常规、成员、通知和账单。从 CLAUDE.md 中的令牌提取值；不要手工调整的例外。它必须在桌面端和手机上都能站得住脚。
data-od-id 钩子你撰写简报、选择设计系统，并设定验收标准。
Claude Code 规划布局，编写 HTML、CSS 和 JavaScript，然后按请求修订。
OpenDesign 提供设计系统和技能，渲染预览，并将每个版本保留为项目文件。
在交接前，检查视觉层级、8px 网格上的间距、两个断点以及每个交互。
子导航、表单和操作对齐到 8px 网格；粘性保存栏从不遮挡字段。
分组标题比标签更重；强调色只出现在已启用的开关上。
在移动端宽度下，子导航变为分段切换；开关保持 44px 的点击区域；保存按钮横跨整个宽度。
用 Tab 键遍历每个字段，切换一个控件，然后取消并确认未保存更改提示。
Fit
兼容性
本页将 Claude Code 视为通过 OpenDesign 桌面应用连接。已发布参考资料核查于 2026 年 9 月 6 日。
Claude Code 是 Anthropic 的智能体命令行工具：用自然语言描述任务，它就会在项目中读取、写入并运行代码，直到任务完成。它独立于 Anthropic 托管的 Claude Design 产品；Claude Design 对比 涵盖了该选择。本页讲的是通过 OpenDesign 使用 Claude Code 设计界面，而不是 Claude Code 自身的界面。OpenDesign 的 设置说明 列出了可用代理。
Anthropic API 密钥（BYOK）或 Claude 订阅。你使用自己的 Anthropic API 密钥（BYOK）或 Claude 订阅进行身份验证——没有任何内容通过我们代理。本页不承诺任何配额或价格。
可作为终端 CLI、VS Code / Cursor / JetBrains 扩展、桌面应用和 Web 使用。对于桌面版构建，请参阅下载页面。源代码快速开始中的 Node.js 和 pnpm 要求适用于从源代码运行，而不适用于安装桌面软件包。最低兼容 Claude Code 版本：此处未验证。
使用你所安装版本显示的连接说明，然后尝试一个适度的任务。确认 Claude Code 完成了该任务，并且产物可以打开。仅下载代理并不能证明连接可用。
从桌面应用开始
从下载开始，完成你所安装版本的 Claude Code 设置，然后验证一个适度结果。遵循此路径不需要从源代码构建 OpenDesign。
选择适合你机器的软件包，安装它，然后打开桌面应用。
下载 OpenDesign遵循随你所安装版本提供的 Claude Code 说明。使用你的 Anthropic API 密钥（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 设置说明；请在供应商文档中核实当前命令。
让第一个简报保持适度，以便你评判完整循环，包括一次修订。
构建一个带有个人资料表单和保存确认的设置屏幕。遵循我的设计规则。在桌面端和移动端宽度下检查它。
若要从源代码运行 OpenDesign，请改用 技术快速开始。
Claude Code 设计工作流
一个工作区设置任务，从简报追踪到已验证文件。每一步都展示你交付什么、Claude Code 做什么、OpenDesign 贡献什么，以及你检查什么。
用平实语言，三到六行。说明受众、屏幕的用途以及平台。
一个设计系统和几条硬性规则。这种组合正是将符合品牌的产品与通用外观区分开来的关键。
Claude Code 生成一个自包含的 HTML 文件：布局、样式、交互和稳定的钩子。
该文件在你指定的宽度下在 OpenDesign 内渲染。设计就是在这里接受评判。
data-od-id 目标以供评论和编辑。通过在预览中指向元素来请求更改。每次修订都会生成一个新文件；任何内容都不会被静默覆盖。
资源
使用 Claude Code 进行设计的教程、文档与实操讲解，均取自已发布的指南。
限制
常见问题
# 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
# 3. Generate project context
/init # creates a CLAUDE.md for this project
# 4. Add the official Frontend Design skill
claude plugin install frontend-design@claude-plugins-official
# 5. Wire the Figma MCP server (optional, for design handoff)
claude plugin install figma@claude-plugins-officialclaude "Implement reference-desktop.png and reference-mobile.png in
React + Vite + Tailwind + TypeScript.
Reuse the design-system components and tokens described in CLAUDE.md.
Match spacing, layout, and hierarchy; make it responsive.
Render it in the browser, verify it matches the references across
breakpoints, and iterate until it does."