用 Kimi
在 OpenDesign
做设计。

notification-preferences.html · 1440px

4交付前审查

1. 1

   下载 OpenDesign 桌面应用

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

   下载 OpenDesign

   检查点

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

   准备您的 Kimi 连接

   按照您已安装版本中的 Kimi 说明进行操作。使用您的 Moonshot API key（BYOK）进行身份验证——凭据保留在您的本机上。

   Kimi CLI 文档 — 快速入门

   # 1. Install Kimi CLI (uses uv; Python 3.12–3.14, 3.13 recommended)
   curl -LsSf https://code.kimi.com/install.sh | bash
   # or, if you already have uv:
   uv tool install --python 3.13 kimi-cli
   
   # 2. Start it in your project and authenticate on first run
   cd your-project
   kimi              # then run /login: OAuth via Kimi Code, or paste a Moonshot API key

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

   检查点

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

   运行一个小型 Kimi 任务

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

   入门 brief 复制

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

   检查点

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

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

1. 1

   设计 Brief

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

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

   New project · PromptKimi

   You

   Design notification preferences: channels, quiet hours, per-project overrides. Match the reference for tone. Desktop and phone.

   Kimi

   Understood. Should per-project overrides live on this page as expandable rows, or on each project’s own settings page?
2. 2

   设计约束

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

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

   生成界面

   Kimi 编写一个独立的 HTML 文件：布局、样式、交互和稳定的 hooks。

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

   Project files3 files

   • notification-preferences.htmlnew
   • AGENTS.mdbound
   • DESIGN.mdread
4. 4

   预览

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

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

   Preview · 390pxComment mode

   Comment on · rows

   One toggle per row on the phone; the helper text goes under the label.

   Comment on · quiet

   Quiet hours need an explicit “off” state, not two empty pickers.
5. 5

   修订与验证

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

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

   Verification · v23 of 4

   • ✓Single toggle per row at 390px
   • ✓Quiet hours has an off state
   • ✓No horizontal scroll at 390px
   • Per-project expand — checked by you