用 Aider 做设计。

Aider 究竟是什么

Aider 是一个开源（Apache-2.0）的 AI 结对编程工具，运行在你的终端里。它读取你已有的代码库，为上下文映射整个仓库，就地编辑文件，并自动为每次改动配上一条合理的提交信息 —— 于是你可以用早已熟悉的 git 工具来 diff、管理和撤销 AI 的工作。它支持 100 多种编程语言，既能开新项目，也能在已有项目上继续构建。

对设计工作而言，有两个特性格外突出。Aider 是模型无关的：你自带 key，把它接到几乎任何 LLM —— Claude、GPT-4o、DeepSeek、Gemini 或本地模型 —— 所以你永远不会被锁死在某一家供应商上。而在 GPT-4o、Claude 这类支持视觉的模型上，它能读取图像文件，把一张参考截图变成提示词的一部分。

• 规范文件: Aider 会读取一个 CONVENTIONS.md 文件，你用 /read CONVENTIONS.md（或 aider --read CONVENTIONS.md）加载它 —— 这是把你的设计规范、tokens 和评审清单编码为只读上下文的天然之处。
• git 原生的改动: 每次改动都会应用到你仓库里的文件上并自动提交，于是每一轮设计迭代都能用熟悉的 git 工具来审阅和回退。
• 自带你的模型: 用你自己的 API key 接入 OpenAI、Anthropic、DeepSeek、Gemini 或本地模型；Aider 不绑定单一厂商，也不绑定某个托管后端。

• 供应商：Aider（Aider-AI，开源）—— 模型无关
• 凭证：你自己的供应商 API key —— BYOK（OpenAI、Anthropic、DeepSeek、Gemini 或本地模型）
• 许可证：Apache-2.0，开源

为什么一个模型无关、git 原生的工具适合做设计

Aider 在设计上的优势，来自它与你的仓库以及你所选模型协作的方式 —— 但与所有 agent 一样，品味仍然得由你来提供。

• 模型无关，BYOK: 挑一个最适合你任务和预算的、设计表现最好的模型 —— Claude、GPT-4o、DeepSeek、Gemini —— 并随意切换而不必改动你的工作流，全程用你自己的 key。
• git 原生的迭代: 自动提交让每一轮设计都成为一段可回退、可审阅的 diff，于是你总是在一个干净的基线上迭代，而不是面对一堆未追踪的散乱改动。
• 把规范放进 CONVENTIONS.md: 一个 CONVENTIONS.md（以只读方式加载）把 agent 指向你的 tokens、组件和规则，于是它对照的是一套品牌，而不是某种默认观感。

这个教训和每个 agent 教给我们的一样：Aider 默认并没有品味。只有当你给它约束 —— 一套设计系统、一个审美 skill 和具体的参考 —— 它才会产出好设计。Open Design 恰恰把这些输入打包了起来，这正是二者契合的原因（下文详述）。

从零搭建用于设计的 Aider

下面是从一台干净的机器，到一个能构建并验证 UI 的 Aider 的完整路径。

# 1. 安装 Aider（推荐的安装器；Python 3.8–3.13）
python -m pip install aider-install
aider-install
# 或用 pipx：pipx install aider-chat

# 2. 在你的 git 项目里启动它，并自带你的 key
cd your-project
aider --model sonnet --api-key anthropic=<your-key>
# 或：aider --api-key openai=<your-key>   （也支持 deepseek=、gemini=）

# 3. 把你的设计规范作为只读上下文加载进来
aider --read CONVENTIONS.md

# 4. 添加一张参考图（在支持视觉的模型上）
#    在对话里：/add reference-desktop.png

• 把你的设计规则编码下来: 把你的 tokens、基础元件和规范放进 CONVENTIONS.md 并以只读方式加载，于是产出贴合一套品牌，而不是退回某种千篇一律的观感。
• 加上浏览器验证: 跑一个开发服务器，让 Aider 在真实浏览器里渲染，并跨断点检查它的产出，而不是只确认构建通过。

截图到 UI 的工作流

用 Aider 做设计，杠杆最高的循环就是把一张参考图变成可用、响应式的 UI，并反复迭代直到匹配 —— 用一个支持视觉的模型把产出与参考图对比，每一轮都提交到 git。

1. 从你手头最清晰的视觉参考出发 —— 并且包含多种状态（桌面和移动端、悬停、空状态、加载中），而不只是一张大图。
2. 提示词要具体；含糊的提示词即便配上强模型也只会产出千篇一律的 UI。
3. 把你的设计系统和规范放进 CONVENTIONS.md，并告诉 Aider tokens 和标准基础元件在哪里。
4. 跑一个开发服务器，在真实浏览器里检查渲染结果，并缩放到各个断点。
5. 迭代的方式是让 Aider 把它的实现与截图对比 —— 而不只是确认它能构建通过。

在支持视觉的模型上，用 /add 添加一张图（或用 /paste 从剪贴板粘贴），然后给出具体的约束：

aider --model gpt-4o --read CONVENTIONS.md
# 在对话里：
> /add reference-desktop.png
> /add reference-mobile.png
> Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from CONVENTIONS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  I'll render it in the browser and tell you what to fix until it matches
  the references across breakpoints.

让提示词保持小而聚焦。因为 Aider 会为每次改动提交一次，你就能留住好的迭代，并用 git（或 /undo）回退糟糕的那些 —— 于是每一轮都建立在一个干净的基线上。

CONVENTIONS.md、图像与命令

有三项能力让 Aider 在持续的设计工作中切实可用，而这三项都能干净地映射到一套开放的设计工作流上。

• CONVENTIONS.md 上下文: 用 /read CONVENTIONS.md 或 aider --read CONVENTIONS.md 加载编码与设计规范，或在 .aider.conf.yml 里设置 read: CONVENTIONS.md 让它每次运行都加载。这是安放你 tokens、基础元件和规则的长久之所。
• 图像与网页: 在支持视觉的模型上，用 /add 添加一个图像文件，或用 /paste 从剪贴板粘贴，给 Aider 一张真实的参考；/web <url> 会把一个页面的文本抓进对话作为额外上下文。
• 对话内命令: 诸如 /add 把文件纳入上下文、/read 引入只读参考、/undo 回退上一次提交之类的命令，让它无需离开终端就能收集参考并跑完验证循环。

这些都是可移植、仓库原生的能力 —— 正是 Open Design 旨在去编排、而非每个项目重造一遍的那类东西。

做设计：Aider vs Codex vs Claude Code vs Cursor vs Gemini CLI

在设计工作上没有唯一的赢家 —— 每个 agent 各有所长，有经验的团队会把它们叠着用。一份公允的总结：

社区反复给出的结论是：品味来自人类 —— 在没有 skill、参考和约束的情况下，它们全都会退回到一种千篇一律的审美。这才是真正要解决的问题 —— 而它是设计工具形状的，不是模型形状的。

陷阱，以及如何避开那股“AI 流水货”味

对 AI 生成设计最常见的抱怨是它看起来千篇一律 —— 柔和的渐变、漂浮的面板、过大的圆角、夸张的阴影，一股“Inter 字体加紫色”的味道，“一眼就看出是 AI 做的”。其他被反映的问题还包括移动端布局错乱，以及指令泄露进 UI 文案。这些都不是 Aider 独有的；任何 agent 在缺少精选设计上下文时运行，都会出这些问题。

• 加一个审美 skill: 一个精选的设计 skill 会迫使 agent 锚定一个真正的方向，而不是那种默认观感。
• 在真实浏览器里验证: 跨断点渲染并自检，让布局不会在移动端悄悄崩掉 —— 在支持视觉的模型上，把截图再喂回去。
• 提供 tokens 和参考: 真实的设计 tokens 和参考截图，是撬动产出质量的最大单一杠杆。
• 把规则编码进 CONVENTIONS.md: 把“不要大图卡片、最多两种字体、品牌优先的层级”这类风格规则，放在 agent 每次运行都会读到的地方。

请注意，每一项对策的核心都是给 agent 一份精选的设计上下文。而手工、逐项目地维护这份上下文，正是 Open Design 替你免去的苦差。

在 Open Design 里用 Aider 做设计

Open Design 正是上面那套工作流一直在呼唤的那层开源设计层。它把 Aider 当作一等适配器，并用一套精选的 skill 与设计系统库、一条结构化的渲染管线和一个本地桌面 UI 把它包裹起来 —— 于是让 Aider 变好的那份设计上下文从第一次运行起就已就位，而不是每次都手工拼凑。二者都是开源、本地优先的，这让它们的搭配天然契合。

1. 安装 Open Design 并选择 Aider 作为你的 agent。
2. 用你自己的供应商 API key 认证（BYOK）—— OpenAI、Anthropic、DeepSeek 或 Gemini；凭证留在你的机器上，绝不经我们中转。
3. 挑一套设计系统和一个 skill，然后以一致的品味生成幻灯片、原型和落地页。
4. 每一份产物和 DESIGN.md 文件都存活在你自己的 git 仓库里，而不是某个托管云端。

同一个 Aider agent、同一把 key —— 外加一套围绕它的、真实、可移植、开源的设计工作流。它本地优先且开源，所以你的工作和凭证没有任何东西会离开你的机器。

常见问题

1. 01 Aider 真能做设计工作吗？ +

   能 —— 只要上下文里有一个审美 skill、一套设计系统和真实的参考图，Aider 就能产出生产级、响应式的 UI；在支持视觉的模型上，它会读取截图来把产出与参考对照验证。缺了这份上下文，它就容易退回到一种千篇一律的观感，而这正是 Open Design 填补的缺口。

2. 02 做设计时我能用哪些模型搭配 Aider？ +

   Aider 是模型无关的。你自带 API key，接入几乎任何 LLM —— Claude、GPT-4o、DeepSeek、Gemini 或本地模型。做基于图像的设计工作时，请用 GPT-4o 或 Claude 这类支持视觉的模型。Open Design 绝不会中转你的凭证。

3. 03 Aider 究竟好在哪里、特别适合做设计？ +

   两点：它是模型无关的，所以你能挑出最擅长你这项任务设计的模型；它是 git 原生的，会提交每一次改动，于是每一轮设计迭代都可审阅、可回退。两点都有帮助 —— 但品味仍然来自你提供的设计系统、skill 和参考。

4. 04 Aider 会编辑我的文件并提交到 git 吗？ +

   会。Aider 直接在你的仓库里编辑文件，并自动为每次改动配上一条合理的提交信息，于是你可以用早已熟悉的 git 工具来 diff、管理和撤销 AI 的工作。

5. 05 我该如何把我的设计规范交给 Aider？ +

   创建一个写有你 tokens、基础元件和规则的 CONVENTIONS.md，然后用 /read CONVENTIONS.md 或 aider --read CONVENTIONS.md 以只读方式加载它（或在 .aider.conf.yml 里设置 read: CONVENTIONS.md 让它每次运行都加载）。这样 Aider 对照的就是你的品牌，而不是某种默认观感。

6. 06 Open Design 和 Aider 有关联吗？ +

   没有。Aider 是一个独立的开源项目（Aider-AI）；Open Design 是另一个独立的开源项目，把 Aider 作为一等适配器来支持。二者并无关联。

7. 07 我的文件和凭证安全吗？ +

   安全 —— Open Design 本地优先且开源。你的文件、产物和 DESIGN.md 都留在你自己的 git 仓库里，而你的供应商 API key 由你的 agent 直接使用，绝不经 Open Design 的服务器转发。