用 Mistral Vibe
在 OpenDesign
做设计。

storefront-product.html · 1440px

4交付前审查

1. 1

   下载 OpenDesign 桌面应用

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

   下载 OpenDesign

   检查点

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

   准备你的 Mistral Vibe 连接

   按照你已安装版本中的 Mistral Vibe 说明操作。使用你的 Mistral API key（BYOK）或本地模型进行身份验证——凭据保留在你的设备上。

   mistral-vibe README 与设置说明（GitHub）

   # 1. Install Mistral Vibe CLI
   uv tool install mistral-vibe
   # or: pip install mistral-vibe
   
   # 2. Run the setup wizard to register your API key
   vibe --setup     # saves config to ~/.vibe/config.toml and ~/.vibe/.env
   #    or set it directly:  export MISTRAL_API_KEY=...

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

   检查点

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

   运行一个小型 Mistral Vibe 任务

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

   入门 brief 复制

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

   检查点

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

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

1. 1

   设计 Brief

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

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

   New project · PromptMistral Vibe

   You

   Design the plate product page: photo, price, glaze and quantity, add to cart, three related pieces. Local model only.

   Mistral Vibe

   Understood. Running on the local Devstral model. Should the set discount appear as a second price line or as a note under quantity?
2. 2

   设计约束

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

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

   生成界面

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

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

   Project files3 files

   • storefront-product.htmlnew
   • config.tomlbound
   • DESIGN.mdread
4. 4

   预览

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

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

   Preview · 390pxComment mode

   Comment on · price

   Set discount as a small line under the price, not a second price.

   Comment on · photo

   Keep 4:5; do not crop the rim on the phone.
5. 5

   修订与验证

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

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

   Verification · v23 of 4

   • ✓Discount as a note under price
   • ✓Photo ratio held at 390px
   • ✓No horizontal scroll at 390px
   • Quantity control — checked by you