延伸阅读
Devin 延伸阅读
已发布指南中列出的、用于与 Devin 一起设计的教程、文档和演示。
Devin 
OpenDesign 用 Devin
在 OpenDesign
做设计。
如何在 OpenDesign 中用 Devin 设计界面：一个被委派再交回的多步骤构建，一个从 brief 到审阅完成文件的文档章节任务，以及开始之前需要了解的局限性。
从 brief 到界面01 / Devin
您带来想法↗
“在我审查其他内容的同时，
交付一个文档章节。”
一个完整的 Devin 设计任务
一个 Devin 设计任务：从 brief 到界面
一个完整任务的端到端展示：您交付的 brief 与约束条件、返回的产物，以及在完成之前您仍需运行的检查。下方界面是为本页面制作的示意示例，并非 Devin 实际运行记录。
1设计 Brief 与约束条件
Brief为开发者文档站点设计入门（getting-started）部分：导航、包含提示框（callout）和代码的文章，以及页内导航栏（on-this-page rail）。将整个部分作为一个可审阅的文件交付。桌面端和手机端。
- 设计系统OpenDesign 纸感画布：Albert Sans，单一绿色强调色
- 断点1440px 桌面端与 390px 移动端，无横向滚动
- 交互侧边栏导航、复制代码、页内高亮
- 输出一个自包含的 HTML 文件，带有稳定的
data-od-id挂钩
2工作分工：您、Devin 与 OpenDesign
- 你
撰写 brief，选择设计系统并定义验收标准。
- Devin
规划布局，编写 HTML、CSS 和 JavaScript，并按要求进行修改。
- OpenDesign
提供设计系统与 skill，渲染预览，并将每个版本作为文件存储在项目中。
- 审查
在交付前，检查视觉层级、8px 网格上的间距、两个断点以及每一项交互。
3Devin 产物：1440px 与 390px 下的文档页面
4交付前审查
Layout
网格与间距
三栏基于 8px 网格排布；文章行宽保持在 72 个字符以内。
Hierarchy
视觉层级
标题、提示框，然后是步骤；强调色仅用于标记当前激活的导航项。
Responsive
移动端布局
导航变为浮层（sheet）；页内导航栏折叠为跳转菜单。
Interaction
交互检查
复制代码、跳转到某个标题、打开导航浮层。
Fit
Devin 适合与不适合的场景
Devin 适合以下场景
- 自主的多步骤构建。 Devin 会规划并执行整个前端任务——脚手架搭建、组件连接、运行与测试——而不只是停留在片段层面。
- 沙盒化的云端交接。 较长的构建任务可以交接给拥有自己计算机的云端 Agent，并在您离开后继续运行。
- 项目规则 + 浏览器验证。 项目上下文承载您的约定；真实浏览器渲染会依据您的参考对照各断点检查输出。
- 基于账户，可选模型。 使用 Devin 账户登录；Devin 运行在前沿模型上，包括 Cognition 自研的 SWE-1.6。
选择其他工作流的场景
- 你需要可编辑的矢量文件。 产物是 HTML，而非可编辑的设计文档。请查看其他矢量工作流以获取所需的资源格式。
- 没有参考图也没有约束条件。 缺少设计系统或示例时，输出往往趋于千篇一律；请先写好 brief。
- 您没有此 Agent 所需的凭据。 要求：Devin（Cognition）账户——基于账户登录，非 BYOK。OpenDesign 不提供也不代理凭据。
- 您的团队使用 Codex 或 Claude Code 工作。这些 Agent 有各自的页面；工作区相同，配置不同。参见相关 Agent。
兼容性
开始之前：Devin 的要求
本指南介绍通过 OpenDesign 桌面应用连接的 Devin。已核实的公开参考资料截至 2026 年 9 月 6 日。
工具范围Devin，由 Cognition 出品
Devin for Terminal 是 Devin 的命令行版本，Devin 是 Cognition 推出的自主 AI 软件工程师。它作为本地编程 Agent 运行，可访问你的代码库、工具和环境，独立规划并执行多步骤任务。本页介绍的是通过 OpenDesign 与 Devin 一起设计界面，而非 Devin 自身的界面。OpenDesign 的设置说明列出了可用的 Agent。
账户与身份验证Devin（Cognition）账户 —— 基于账户
Devin（Cognition）账户 —— 基于账户登录，非 BYOK。使用你的 Devin（Cognition）账户进行身份验证 —— 凭据保留在你机器上的 Agent 中。本页不承诺任何配额或价格。
系统与版本桌面应用或源码
请查看下载页面获取桌面版构建。源码 quickstart 中的 Node.js 和 pnpm 要求适用于从源码运行，不适用于安装桌面软件包。此处未验证最低兼容的 Devin 版本。
连接检查成功的标志
按照你已安装版本显示的连接说明操作，然后运行一个小任务。确认 Devin 已处理该任务且产物可以打开。仅完成下载并不能确保连接正常工作。
从桌面应用开始
三步完成 Devin 设置
先下载，完成针对你所安装版本的 Devin 设置，再检查一个小结果。按此路径操作无需从源码构建 OpenDesign。
- 1
下载 OpenDesign 桌面应用
选择适合您电脑的软件包，安装并打开该应用。
下载 OpenDesign检查点桌面应用会打开。已经安装过？请进入下一步；无需再次下载。 - 2
准备你的 Devin 连接
按照你已安装版本中的 Devin 说明操作。使用你的 Devin（Cognition）账户进行身份验证 —— 凭据保留在你机器上的 Agent 中。
Devin 文档# 1. Install Devin for Terminal curl -fsSL https://cli.devin.ai/install.sh | bash # 2. Start it in your project and sign in on first run cd your-project devin # sign in with your Devin (Cognition) account来自已发布指南中的 Devin 设置说明；请查阅供应商文档以获取当前命令。
检查点确认目标 Agent 与账户。如果不可用，请在尝试更大任务之前先检查兼容性。 - 3
运行一个小的 Devin 任务
使用一个小 brief，以便您评估整个流程，包括一次修改。
入门 brief构建一个设置页面，包含个人资料表单和保存确认提示。使用我的设计规则。在桌面和移动端宽度下进行检查。
检查点打开结果，测试保存状态，并提出一个具体的修改请求。生成的文件是评审的开始，而不是结束。
若要从源代码运行 OpenDesign，请参阅技术快速入门。
Devin 设计工作流
五步完成 Devin 设计工作流
同一个文档页面任务，从 brief 到可验证文件的完整流程。每一步列出你提供的内容、Devin 完成的工作、OpenDesign 贡献的部分，以及你需要检查的内容。
- 1
设计 Brief
用简明语言写三到六行，说明目标受众、该界面要完成的任务，以及适用的平台。
- 您撰写 brief；如有参考截图，请附上。
- Devin读取 brief 和项目的说明文件；遇到不明确的地方会提问。
- OpenDesign提供项目、prompt 界面，以及对应产物类型的 skill。
- 检查确认 brief 中已写明验收标准。现在补充比生成之后再补充成本更低。
- 2
设计约束
一套设计系统加几条硬性规则。正是这些将符合品牌调性的产出与千篇一律的效果区分开来。
- 您选择一个设计系统；说明断点及必须使用的组件。
- Devin在写下第一行之前，先将 DESIGN.md 的 token 和风格规则载入上下文。
- OpenDesign提供设计系统库，并将所选设计系统绑定到 skill 模板中。
- 检查确认 token 与您的品牌相符：单一强调色、正确的字体、正确的圆角。
- 3
生成界面
Devin 编写一个自包含的 HTML 文件：布局、样式、交互以及稳定的挂钩点。
- 您等待即可，或回答澄清性问题。无需进行任何配置。
- Devin规划各个部分，编写 HTML、CSS 和 JavaScript，运行该文件并修复失败之处。
- OpenDesign将产物保存到项目文件夹中，并为预览建立索引。
- 检查此步骤暂无需检查。请在文件渲染后进行判断，而非查看源代码。
- 4
预览
文件会以你要求的宽度在 OpenDesign 中渲染。设计的好坏就在这里被检验。
- 你切换宽度，点击交互，在元素上留下评论。
- Devin阅读你在预览上的评论，并准备下一版修订。
- OpenDesign渲染预览，暴露
data-od-id目标以供评论和编辑。 - 检查层级结构、对比度、390px 下的溢出、焦点状态，以及强调色是否使用得克制。
- 5
修订与验证
通过在预览中指向元素来请求修改。每次修订都是一个新文件，绝不会被静默覆盖。
- 你把评论转化为请求；决定任务何时完成。
- Devin就地应用修改并重新运行该文件。
- OpenDesign将各版本并排保留；完成后导出图片或 HTML。
- 检查只重新检查发生变化的区域，然后在每个断点上完整检查一次整页。
资源
Devin 设计资源
限制
Devin 的局限性、人工检查与后备方案
- 适用范围它可以将会话交接给一个沙盒化的云端 Agent，使其异步继续工作，因此更长的构建任务可以在你关闭笔记本电脑后完成。本页介绍的是作为 OpenDesign 所连接 Agent 的 Devin，而非 Devin 的全部功能。
- 使用限制使用限制和费用取决于你使用的凭证（Devin (Cognition) 账户——基于账户登录，而非 BYOK）。本页不对免费额度做任何说明。
- 网络本地项目文件并不代表离线推理。在分享敏感输入之前，请检查你的 Agent 供应商设置和数据政策。
- 输出为 HTML产物是 HTML 文件，而非矢量设计文件。
- 人工审查可访问性、真实内容、品牌契合度和交互正确性均由你在预览中审查。将 Agent 的任何自检视为初步检查。
- 后备方案如果 Agent 不可用或任务失败，请检查所安装版本的连接说明和身份验证。在更改配置前，请保留错误信息和最后一个可用的产物。
常见问题
关于 Devin 与 OpenDesign 的常见问题
Devin for Terminal 真的能做设计工作吗？
可以——在上下文中提供审美 skill、设计系统和真实的参考图片后，Devin 能够生成可用于生产的响应式 UI；作为自主 Agent，它还能构建、运行并对照你的参考资料验证结果。如果缺少这些上下文，它往往会默认输出一种通用的外观，而这正是 OpenDesign 所填补的空白。
如何登录 Devin？
Devin 是基于账户的：你需要使用 Devin (Cognition) 账户登录，而不是自带模型密钥。安装 Devin for Terminal，在你的项目中运行它，并在首次运行时完成身份验证。OpenDesign 从不代理你的凭证——你的 Agent 会直接使用它们。
Devin 具体在设计方面有什么优势？
它是一位完全自主的软件工程师：能够端到端地规划并执行多步骤的前端构建，还可以将会话交接给沙盒化的云端 Agent，在你离开后继续工作。审美依旧来自你提供的设计系统、skill 和参考资料。
前端设计该选 Devin 还是 Claude Code？
两者都很出色。Claude Code 以具体、了解代码库的设计决策著称；Devin 的优势在于完全自主的端到端执行，并配有沙盒化的云端交接。许多团队会同时使用两者——OpenDesign 让你可以切换 Agent，而不必改变设计工作流。
Devin 是在沙盒中运行的吗？
Devin for Terminal 在本地运行，可以访问你的代码库和环境，并且可以将会话交接给一个在自身沙盒环境中运行的云端 Agent——这对于需要异步继续的更长构建、测试和 PR 创建很有用。
用 Devin 开始你的第一个设计任务
从一个小任务开始，评估往返效果，然后再提交真实的 brief。请选择与您的环境相符的选项；本页不会自动检测。