延伸阅读
Aider 延伸阅读
已发布指南中列出的、关于使用 Aider 进行设计的教程、文档和演练。
Aider 
OpenDesign 用 Aider
在 OpenDesign
做设计。
如何在 OpenDesign 中用 Aider 设计界面：每次修订对应一次提交，以 CONVENTIONS.md 作为规则手册，一个从 brief 到审核完成文件的变更日志页面任务，以及开始前需了解的局限。
从 brief 到界面01 / Aider
您带来想法↗
“一个更新日志页面，每次修订
对应一次提交，易于回退。”
一个完整的 Aider 设计任务
一次 Aider 设计任务：从 brief 到界面
一次完整呈现的任务：你交付的 brief 与约束条件、返回的产物，以及在完成前仍需运行的检查。下方界面是为本页构建的示例说明，并非记录下来的 Aider 实际运行。
1设计 Brief 与约束条件
Brief为一个 CLI 工具设计更新日志与发布说明页面：版本列表、一个带分组变更的高亮发布，以及一条升级命令。每次修订各自作为一次提交。桌面端与手机端。
- 设计系统OpenDesign 纸感画布：Albert Sans，单一绿色强调色
- 断点1440px 桌面端与 390px 移动端，无横向滚动
- 交互版本列表、复制升级命令、每个发布对应一个锚点
- 输出一个自包含的 HTML 文件，带有稳定的
data-od-id挂钩
2分工：你、Aider 与 OpenDesign
- 你
撰写 brief，选择设计系统并定义验收标准。
- Aider
规划布局，编写 HTML、CSS 和 JavaScript，并按要求进行修改。
- OpenDesign
提供设计系统与 skill，渲染预览，并将每个版本作为文件存储在项目中。
- 审查
在交付前，检查视觉层级、8px 网格上的间距、两个断点以及每一项交互。
3Aider 产物：1440px 与 390px 下的更新日志页面
4交付前审查
Layout
网格与间距
版本列表、说明与侧栏基于 8px 网格；发布标题与列表对齐。
Hierarchy
视觉层级
版本号与日期在前，其后是破坏性变更提示；强调色仅标记当前版本。
Responsive
移动端布局
版本列表变为下拉选择；说明占据全部宽度。
Interaction
交互检查
复制升级命令、跳转至更早的发布、打开破坏性变更提示中的链接。
Fit
Aider 适合什么任务，不适合什么任务
Aider 适合的场景
- 模型无关，BYOK。使用你自己的密钥连接几乎任何 LLM，并使用具备视觉能力的模型，将参考图像转换为响应式标记。
- 原生 Git 迭代。自动提交让每一次设计迭代都成为可审阅、可撤销的 diff，从而保持输出的整洁与可追溯。
- CONVENTIONS.md 上下文。一个只读的约定文件会将你的 token、基础组件和设计规则带入每一次运行。
- 开源。采用 Apache-2.0 许可，本地优先，直接在你自己仓库中的代码上运行。
选择其他工作流的场景
- 你需要可编辑的矢量文件。 产物是 HTML，而非可编辑的设计文档。请查看其他矢量工作流以获取所需的资源格式。
- 没有参考图也没有约束条件。 缺少设计系统或示例时，输出往往趋于千篇一律；请先写好 brief。
- 你没有该 Agent 所需的凭证。必需：你自己的提供商 API 密钥——BYOK（OpenAI、Anthropic、DeepSeek、Gemini 或本地模型）。OpenDesign 不提供也不代理凭证。
- 你的团队使用 OpenCode 或 Kilo 工作。这些 Agent 都有各自的页面；工作区相同，设置不同。参见相关 Agent。
兼容性
开始使用 Aider 前的要求
本指南介绍通过 OpenDesign 桌面应用连接的 Aider。已核实的公开参考资料截至 2026 年 9 月 6 日。
工具范围Aider，由 Aider 提供
Aider 是一款开源（Apache-2.0）AI 配对编程工具，运行在您的终端中。它会映射您的代码库，就地编辑文件，并为每次更改自动提交一条合理的说明信息。本页介绍如何通过 OpenDesign 使用 Aider 设计界面，而不是介绍 Aider 自身的界面。OpenDesign 的设置说明列出了可用的 Agent。
账户与身份验证您自己的提供商 API 密钥 — BYOK（OpenAI，
您自己的提供商 API 密钥 — BYOK（OpenAI、Anthropic、DeepSeek、Gemini 或本地模型）。使用您自己的提供商 API 密钥（BYOK）进行身份验证 — 凭据保留在您的计算机上。本页不承诺任何配额或价格。
系统与版本桌面应用或源码
请查看下载页面以获取桌面版本。源码快速入门中提到的 Node.js 和 pnpm 要求适用于从源码运行的情况，不适用于安装桌面版软件包。最低兼容的 Aider 版本：此处未验证。
连接检查成功的标志
按照您已安装版本中显示的连接说明操作，然后运行一个小任务。确认 Aider 已处理该任务，且产物可以打开。仅完成下载并不代表已建立可用的连接。
从桌面应用开始
三步完成 Aider 设置
首先下载，完成适用于您已安装版本的 Aider 设置，然后检查一个小结果。您无需从源码构建 OpenDesign 即可遵循此流程。
- 1
下载 OpenDesign 桌面应用
选择适合您电脑的软件包，安装并打开该应用。
下载 OpenDesign检查点桌面应用会打开。已经安装过？请进入下一步；无需再次下载。 - 2
准备您的 Aider 连接
按照您已安装版本中的 Aider 说明操作。使用您自己的提供商 API 密钥（BYOK）进行身份验证 — 凭据保留在您的计算机上。
Aider——在你的终端中进行 AI 结对编程# 1. Install Aider (recommended installer; Python 3.8–3.13) python -m pip install aider-install aider-install # or with pipx: pipx install aider-chat # 2. Start it in your git project and bring your own key cd your-project aider --model sonnet --api-key anthropic=<your-key> # or: aider --api-key openai=<your-key> (also deepseek=, gemini=)摘自已发布指南中的 Aider 设置说明；请查阅供应商文档以获取当前命令。
检查点确认目标 Agent 与账户。如果不可用，请在尝试更大任务之前先检查兼容性。 - 3
运行一个小型 Aider 任务
使用一个小 brief，以便您评估整个流程，包括一次修改。
入门 brief构建一个设置页面，包含个人资料表单和保存确认提示。使用我的设计规则。在桌面和移动端宽度下进行检查。
检查点打开结果，测试保存状态，并提出一个具体的修改请求。生成的文件是评审的开始，而不是结束。
若要从源代码运行 OpenDesign，请参阅技术快速入门。
Aider 设计工作流
五步完成 Aider 设计工作流
同一个更新日志页面任务，从 brief 到验证文件全程跟踪。每一步都列出您提供的内容、Aider 执行的操作、OpenDesign 贡献的内容以及您需要检查的内容。
- 1
设计 Brief
用简明语言写三到六行，说明目标受众、该界面要完成的任务，以及适用的平台。
- 您撰写 brief；如有参考截图，请附上。
- Aider读取 brief 和项目的指令文件；遇到模糊之处会主动询问。
- OpenDesign提供项目、prompt 界面，以及对应产物类型的 skill。
- 检查确认 brief 中已写明验收标准。现在补充比生成之后再补充成本更低。
- 2
设计约束
一套设计系统加几条硬性规则。正是这些将符合品牌调性的产出与千篇一律的效果区分开来。
- 您选择一个设计系统；说明断点及必须使用的组件。
- Aider在编写任何一行代码之前，先将 DESIGN.md 中的 token 和风格规则加载到上下文中。
- OpenDesign提供设计系统库，并将所选设计系统绑定到 skill 模板中。
- 检查确认 token 与您的品牌相符：单一强调色、正确的字体、正确的圆角。
- 3
生成界面
Aider 编写一个自包含的 HTML 文件：布局、样式、交互和稳定的钩子。
- 您等待即可，或回答澄清性问题。无需进行任何配置。
- Aider规划各个部分，编写 HTML、CSS 和 JavaScript，运行文件并修复失败之处。
- OpenDesign将产物保存到项目文件夹中，并为预览建立索引。
- 检查此步骤暂无需检查。请在文件渲染后进行判断，而非查看源代码。
- 4
预览
文件会以你要求的宽度在 OpenDesign 中渲染。设计的好坏就在这里被检验。
- 你切换宽度，点击交互，在元素上留下评论。
- Aider阅读您对预览的评论，并准备下一版修订。
- OpenDesign渲染预览，暴露
data-od-id目标以供评论和编辑。 - 检查层级结构、对比度、390px 下的溢出、焦点状态，以及强调色是否使用得克制。
- 5
修订与验证
通过在预览中指向元素来请求修改。每次修订都是一个新文件，绝不会被静默覆盖。
- 你把评论转化为请求；决定任务何时完成。
- Aider就地应用更改并重新运行文件。
- OpenDesign将各版本并排保留；完成后导出图片或 HTML。
- 检查只重新检查发生变化的区域，然后在每个断点上完整检查一次整页。
资源
Aider 设计资源
限制
Aider 的局限性、人工检查与备用方案
- 范围本页介绍 Aider 作为连接到 OpenDesign 的 Agent，而非 Aider 的全部功能。
- 使用限制使用限制和费用取决于您使用的凭据（您自己的服务商 API key — BYOK（OpenAI、Anthropic、DeepSeek、Gemini 或本地模型））。本页不对免费额度作出任何说明。
- 网络本地项目文件并不代表离线推理。在分享敏感输入之前，请检查你的 Agent 供应商设置和数据政策。
- 输出为 HTML产物是 HTML 文件，而非矢量设计文件。
- 人工审查可访问性、真实内容、品牌契合度和交互正确性均由你在预览中审查。将 Agent 的任何自检视为初步检查。
- 后备方案如果 Agent 不可用或任务失败，请检查所安装版本的连接说明和身份验证。在更改配置前，请保留错误信息和最后一个可用的产物。
常见问题
关于 Aider 与 OpenDesign 的常见问题
Aider 真的能完成设计工作吗？
可以——在上下文中提供审美 skill、设计系统和真实的参考图片后，Aider 能够生成可用于生产的响应式 UI；在支持视觉输入的模型上，它还会读取截图并与参考图对照验证输出。如果没有这些上下文，它往往会默认呈现通用外观，这正是 OpenDesign 所填补的空缺。
在设计中可以为 Aider 使用哪些模型？
Aider 不限定模型。您可以带上自己的 API key，连接几乎任何 LLM——Claude、GPT-4o、DeepSeek、Gemini 或本地模型。对于基于图像的设计工作，请使用支持视觉输入的模型，例如 GPT-4o 或 Claude。OpenDesign 从不代理您的凭据。
Aider 在设计方面具体有哪些优势？
有两点：一是不限定模型，您可以为自己的任务选择设计效果最好的模型；二是原生支持 git，会为每次改动提交记录，使每一次设计迭代都可审查、可撤销。这两点都有帮助——但审美品味仍来自您提供的设计系统、skill 和参考资料。
Aider 会编辑我的文件并提交到 Git 吗？
会。Aider 会直接在您的仓库中编辑文件，并为每次改动自动提交合理的说明信息，因此您可以使用已经在用的 git 工具对 AI 的工作进行对比查看、管理和撤销。
我该如何把设计规范提供给 Aider？
创建一个包含您的 token、基础组件和规则的 CONVENTIONS.md，然后通过 /read CONVENTIONS.md 或 aider --read CONVENTIONS.md 以只读方式加载它（或者在 .aider.conf.yml 中设置 read: CONVENTIONS.md，以便每次运行都自动加载）。这样 Aider 就会依照您的品牌规范工作，而不是采用默认外观。
用 Aider 开始第一个设计任务
从一个小任务开始，评估往返效果，然后再提交真实的 brief。请选择与您的环境相符的选项；本页不会自动检测。