Codex
使用 Codex 设计界面的工作流、插件与幻灯片。
你的编程 Agent。更好的设计工作流。
为 22 个编程 Agent 提供工作流指南、配置说明与设计资源，让你已经在用的工具把 brief 转化为经过深思熟虑的界面。
编程 Agent 设计工作流中的三个角色
设计 Agent 是什么编程 Agent 将指令转化为代码。设计工作流则加入参考、约束与评审，把这些代码变成可用的界面。
- 01你的编程 Agent
- 阅读项目、进行修改并回应反馈。继续使用你已经在用的工具。
- 02OpenDesign
- 承载 brief、设计资源与视觉评审的工作空间。每份 Agent 指南都会说明具体配置。
- 03你的判断
- 选择参考、明确必须保持一致的内容，并在真实屏幕上检查结果。
22 个编程 Agent 的设计工作流指南
从你已经在用的工具开始。每份指南都会介绍该 Agent 的角色、需要准备的内容以及下一步操作。此列表是目录，而非排名。
Claude Code
一套使用 Claude Code 的前端设计工作流，从第一份 brief 到最终评审。
DeepSeek Harness
Harness 的搭建、它在工作流中的角色，以及它可以使用的设计资源。
OpenCode
一套围绕你所选工具和模型提供方构建的设计工作流。
Grok
Grok Build
使用 Grok Build 的搭建、前提条件以及第一个视觉设计任务。
Cursor
Cursor Agent
Cursor 编辑器与设计工作流如何在同一个项目中协同运作。
DeepSeek
DeepSeek TUI
DeepSeek TUI，它的前提条件，以及它与 DeepSeek Harness 的区别。
Hermes
Hermes 工作流的设计资源、扩展选项与前提条件。
Antigravity
先完成搭建，再使用 Antigravity 展开一套前端设计与评审工作流。
Kimi
Kimi CLI
在开始 Kimi CLI 的第一个设计任务之前，需要准备的输入、上下文与搭建。
Qwen
Qwen Code
Qwen Code、模型提供方与设计工作流之间的连接方式。
Trae CLI
Trae CLI 的搭建以及界面设计的一个起点。
Qoder
Qoder CLI
Qoder CLI 的搭建及与之配合的设计工作流。
Mistral Vibe
Mistral Vibe CLI
Mistral Vibe CLI 作为一种设计工具，区别于泛义上的 vibe design。
Gemini
Gemini CLI
一套以参考为导向、使用 Gemini CLI 的 UI 工作流，从搭建到评审。
Copilot
GitHub Copilot CLI
在使用 GitHub Copilot CLI 的界面设计工作流中，仓库上下文与评审的位置。
Kilo
使用 Kilo 进行设计的配置、模式与一个实用起点。
Aider
使用 Aider 从现有代码出发，做出一次经过深思的改动并评审差异。
Pi
Pi 的搭建、扩展与设计资源。
Kiro
Kiro CLI
在 Kiro CLI 工作流中，需求与界面决策各自的位置。
Devin
Devin for Terminal
使用 Devin for Terminal 界定任务、明确交接内容，并评审界面。
Reasonix
DeepSeek Reasonix
理解项目、它的各种关系，以及使用 DeepSeek Reasonix 时该从何处入手。
下载 OpenDesign 并连接您的编程 Agent
- 01
下载 OpenDesign
选择适用于 macOS 或 Windows 的版本并打开应用。
- 02
连接您的 Agent
查看上方指南中的前提条件，并完成其中所述的设置。
- 03
开始第一个任务
从下方资源中带来一份参考资料、一份简短的 brief 或一个模板。
面向编程 Agent 的设计资源
编程 Agent、模型与 Skill 详解
此工作流不需要新的编程 Agent。以下解答涵盖相关术语和页面。
