用 Copilot
在 OpenDesign
做设计。

launch-landing.html · 1440pxshipctl · previewshipctl · preview

4交付前审查

1. 1

   下载 OpenDesign 桌面应用

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

   下载 OpenDesign

   检查点

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

   准备你的 Copilot 连接

   按照你安装版本中的 Copilot 说明操作。使用你的 GitHub Copilot 订阅进行身份验证——凭证保留在你的本机上。

   使用 GitHub Copilot CLI

   # 1. Install Copilot CLI (Node.js required)
   npm install -g @github/copilot
   
   # 2. Start it in your project and authenticate on first run
   cd your-project
   copilot           # run /login and follow the prompts to sign in

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

   检查点

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

   运行一个小型 Copilot 任务

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

   入门 brief 复制

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

   检查点

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

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

1. 1

   设计 Brief

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

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

   New project · PromptCopilot

   You

   Build our launch page from this screenshot: hero with install command, three features, proof points. Reuse our components.

   Copilot

   Understood. The screenshot uses a dark hero. Keep our light canvas and use the accent on the install button only?
2. 2

   设计约束

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

   • 您选择一个设计系统；说明断点及必须使用的组件。
   • Copilot在写下第一行之前，将 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

   生成界面

   Copilot 编写一个独立的 HTML 文件：布局、样式、交互以及稳定的挂载点（hook）。

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

   Project files3 files

   • launch-landing.htmlnew
   • copilot-instructions.mdbound
   • DESIGN.mdread
4. 4

   预览

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

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

   Preview · 390pxComment mode

   Comment on · hero

   Install command needs a copy affordance, not just a code style.

   Comment on · features

   Three blocks, no icons that need explaining; a small square is enough.
5. 5

   修订与验证

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

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

   Verification · v23 of 4

   • ✓Copy affordance on the install command
   • ✓Accent on one button only
   • ✓No horizontal scroll at 390px
   • Anchor navigation — checked by you