用 DeepSeek Harness
在 OpenDesign
做设计。

admin-users.html · 1440px

4交付前审查

1. 1

   下载 OpenDesign 桌面应用

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

   下载 OpenDesign

   检查点

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

   准备您的 DeepSeek Harness 连接

   按照您已安装版本中的 DeepSeek Harness 说明操作。在 OpenDesign 中打开 Settings → Models & providers → Local CLI 并重新扫描。

   deepseek-ai/deepseek-harness

   curl -fsSL 'https://open-design.ai/install-dsh.sh?version=1' | sh

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

   检查点

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

   运行一个小型 DeepSeek Harness 任务

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

   入门 brief 复制

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

   检查点

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

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

1. 1

   设计 Brief

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

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

   New project · PromptDeepSeek Harness

   You

   Design the admin users page: searchable table with role, team, status, last active, bulk actions, pagination. Use the console profile.

   DeepSeek Harness

   Profile “console” loaded. Should suspended users stay in the default list, or move behind the Status filter?
2. 2

   设计约束

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

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

   生成界面

   DeepSeek Harness 编写一个自包含的 HTML 文件：布局、样式、交互和稳定的 hooks。

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

   Project files3 files

   • admin-users.htmlnew
   • AGENTS.mdbound
   • DESIGN.mdread
4. 4

   预览

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

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

   Preview · 390pxComment mode

   Comment on · table

   Owner role in accent; the rest neutral pills.

   Comment on · mobile

   List rows with role on the right; status as a dot.
5. 5

   修订与验证

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

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

   Verification · v23 of 4

   • ✓Accent on owner role only
   • ✓List layout at 390px
   • ✓No horizontal scroll at 390px
   • Bulk actions — checked by you