用 Qoder CLI 做设计。

Qoder CLI 究竟是什么

Qoder 是阿里巴巴推出的智能体编码平台——一个 AI 开发环境，既有桌面应用也有 CLI，能理解真实的代码库并端到端地完成开发任务。Qoder CLI 把这套引擎带到了终端：它读取你的仓库、编辑文件、运行 shell 命令，并从自然语言出发完成任务，而不只是补全代码行。它用 Qoder 账户登录。

对于设计工作，有两个特性尤为突出。Qoder 会建立起对你仓库的深度上下文——架构、设计模式，以及提炼进 repository wiki 的约定——因此它把产出锚定在你真实的基础组件上。它还运行一套智能体化、规范驱动的工作流：你勾勒出想要的东西，它便规划、实现并验证这项工作，包括跨多个步骤。

• Agent 与 Quest 模式: Agent 模式是带人类介入检查点的对话式结对编程；Quest 模式则把更长的多步工作委派给一个自主智能体，由它规划、实现并自我验证——这正是交付一项规范驱动设计任务的天然落点。
• Repo wiki + MCP: Qoder 把你的代码库提炼成一份记录架构与约定的 repository wiki，并支持 MCP 服务器以引入外部上下文，比如一个实时的 Figma 文件。
• 模型档位: Qoder CLI 提供 Lite、Efficient 和 Auto 三档；Auto 让它的调度器按任务挑选模型，这样你就无需手动管理模型选择。

• 厂商：Alibaba
• 凭证：Qoder 账户（通过浏览器登录，或用 Qoder 个人访问令牌进行非交互式使用）
• 模型档位：Lite、Efficient、Auto

为什么一个智能体化、懂仓库的智能体契合设计

Qoder CLI 在设计上的优势来自两个特性——但和每个智能体一样，品味仍然得由人来提供。

• 深度的仓库理解: 因为 Qoder 会建立起对你整个代码库的上下文并提炼成一份 repo wiki，智能体会复用你已有的组件和 tokens，而不是为每个界面发明一次性的样式。
• 规范驱动、自主的 quest: Quest 模式把一份书面规范变成一个经过规划、实现并自我验证的结果，于是一项设计任务能端到端地跑完，而不是停在初稿。
• 智能体会读取的约定: 项目规则（再加上 Figma MCP 服务器）把智能体指向你的 tokens、组件和真实规范，于是它对着一个品牌工作，而不是一种默认观感。

这个教训和每个智能体教给我们的一样：Qoder CLI 默认并不具备品味。当你给它约束——一个设计系统、一个审美 skill 和具体的参考——它才产出优质的设计。Open Design 恰恰把这些输入打包好了，这也是为什么两者契合（下文细说）。

从零搭建用于设计工作的 Qoder CLI

这里是从一台干净的机器到一个能构建并验证 UI 的 Qoder CLI 的完整路径。

# 1. 安装 Qoder CLI（Node 20+）
npm install -g @qoder-ai/qodercli
# （macOS/Linux 也可通过 Homebrew 安装）

# 2. 验证安装
qodercli --version

# 3. 在你的项目里启动它，首次运行时登录
cd your-project
qodercli          # 然后 /login — 通过浏览器或 Qoder 访问令牌登录

# 4. 为本次会话挑选一个模型档位
#    Lite、Efficient 或 Auto（Auto 让调度器按任务选择）

• 把你的设计规则写下来: 把你的 tokens、基础组件和约定放在智能体会读取的地方，让产出贴合一个品牌，而不是退回到一种通用观感。Qoder 的 repo wiki 有助于让这份上下文保持最新。
• 加上浏览器验证: 接入一个 Playwright 或浏览器 MCP，让 Qoder 在真实浏览器中渲染，并跨断点检查其产出，而不只是确认构建通过。

参考图到 UI 的工作流

用 Qoder CLI 最具杠杆效应的设计闭环，是把一张参考变成可用、响应式的 UI，并不断迭代直到它匹配为止——借助智能体的仓库上下文和一个真实的验证闭环，把产出对照回参考。

1. 从你手上最清晰的视觉参考出发——并包含多种状态（桌面与移动端、悬停、空态、加载态），而不只是一张主视觉。
2. 在 prompt 里讲清楚；模糊的 prompt 即便配上能干的智能体也会产出通用的 UI。
3. 把 Qoder 指向你的设计系统和约定，并告诉它 tokens 和规范基础组件存放在哪里。
4. 跑一个 dev 服务器，让 Qoder 在真实浏览器中渲染，调整到各断点尺寸来检查结果。
5. 让 Qoder 把它的实现对照回参考来迭代——而不只是确认它能构建通过。

把任务写成一份清晰的规范，让一个 quest 把它贯穿到底，并给出具体约束：

qodercli
# 在 prompt 里：
> Implement this design from reference-desktop.png and
  reference-mobile.png in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

保持 prompt 小而聚焦，提交好的迭代、回退坏的迭代（回退时告诉 Qoder），让每一轮都建立在一个干净的基底之上。

规则、MCP 与 repo wiki

有三个扩展点让 Qoder CLI 适合持续的设计工作，而这三者都能干净利落地映射到一套开放的设计工作流上。

• 项目规则: 把你的设计约定编码为智能体每次运行都会读取的持久项目规则——这是 tokens、基础组件和评审清单的归处。
• MCP 服务器: MCP 是引入设计上下文和外部工具的可移植方式，其中最相关的是 Figma MCP 服务器，而且它跨智能体可用，不只限于 Qoder。
• repo wiki: Qoder 的 repository wiki 会自动提炼架构与约定，于是智能体能持续复用你真实的组件，而不必每个任务都重新学习一遍代码库。

这些都是可移植、跨智能体的能力——恰恰是 Open Design 生来要编排的那类东西，而不是每个项目都重新造一遍。

做设计时 Qoder CLI vs Codex vs Claude Code vs Cursor vs Gemini CLI

做设计没有单一赢家——每个智能体各有所长，有经验的团队会把它们叠加使用。一个公允的小结：

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

坑，以及如何避开“AI 味”观感

关于 AI 生成设计最常见的抱怨是它看起来千篇一律——柔和渐变、悬浮面板、过大的圆角、夸张的阴影，一种“一眼就知道是 AI 做的”的 Inter 配紫色既视感。其他被反映的问题还包括移动端布局错乱，以及指令文字泄漏进 UI 文案。这些都不是 Qoder CLI 独有的；任何智能体在没有精选设计上下文的情况下运行，都会这样。

• 加一个审美 skill: 一个精选的设计 skill 会迫使智能体承诺一个真实的方向，而不是那种默认观感。
• 在真实浏览器中验证: 跨断点渲染并自检，这样布局就不会在移动端悄无声息地崩掉。
• 提供 tokens 与参考: 真实的设计 tokens 和参考截图，是撬动产出质量的最大单一杠杆。
• 编码智能体会读取的规则: 把“不要主视觉卡片、最多两种字体、品牌优先的层级”这类规则放进项目规则和 repo wiki，智能体每次运行都会读到它们。

注意，每一项缓解措施都关乎给智能体一份精选的设计上下文。逐个项目手工维护这份上下文，正是 Open Design 替你省掉的苦活。

在 Open Design 中用 Qoder CLI 做设计

Open Design 正是上文那套工作流一再呼唤的开源设计层。它把 Qoder CLI 当作一等适配器，并用一个精选的 skill 与设计系统库、一条结构化的渲染管线，以及一个本地桌面 UI 把它包裹起来——于是让 Qoder 出色的那份设计上下文从第一次运行起就在那里，而不必每次手工拼凑。Open Design 是本地优先的，所以你的工作留在你自己的机器上。

1. 安装 Open Design 并选择 Qoder CLI 作为你的智能体。
2. 用你的 Qoder 账户认证——凭证留在你的机器上，绝不经我们代理。
3. 挑一个设计系统和一个 skill，然后以一致的品味生成演示稿、原型与落地页。
4. 每个产物和 DESIGN.md 文件都存在你自己的仓库里，而不是托管云端。

同一个 Qoder CLI 智能体、同一个账户——再加上一套围绕它的、真实、可移植、开源的设计工作流。它本地优先且采用 Apache-2.0 许可，所以你的工作或凭证没有任何东西会离开你的机器。

常见问题

1. 01 Qoder CLI 真的能做设计工作吗？ +

   能——在上下文中配上一个审美 skill、一个设计系统和真实的参考图，Qoder CLI 能产出生产级、响应式的 UI，而它深度的仓库理解能帮它复用你真实的组件。没有这份上下文，它往往会退回到一种通用观感，而这正是 Open Design 填补的差距。

2. 02 我该如何认证 Qoder CLI？ +

   运行 qodercli 并用 /login 通过浏览器以你的 Qoder 账户登录，或为非交互式环境提供一个 Qoder 个人访问令牌。Open Design 从不代理你的凭证——智能体直接使用它们。

3. 03 究竟是什么让 Qoder CLI 适合做设计？ +

   两点：它会建立起对你仓库的深度上下文——架构、约定和一份 repo wiki——所以它复用你真实的基础组件；它的规范驱动 quest 能端到端地跑完一项设计任务。两者都有帮助，但品味仍然来自你提供的设计系统、skill 和参考。

4. 04 Lite、Efficient 和 Auto 模型档位是什么？ +

   Qoder CLI 让你挑选一个模型档位：Lite、Efficient 或 Auto。Auto 让 Qoder 的调度器按任务选择模型，这样你就无需手动管理模型选择。挑选契合任务的档位；Auto 是个稳妥的默认值。

5. 05 我该如何把 Qoder CLI 连到 Figma？ +

   把 Figma MCP 服务器加进 Qoder 的 MCP 配置里。Qoder 随后就能拉取真实的设计上下文——组件、变量、布局数据——于是生成的代码贴合来源，而不是近似它。

6. 06 Open Design 与 Qoder 或 Alibaba 有关联吗？ +

   没有。Qoder 是 Alibaba 的产品；Open Design 是一个独立的开源项目，以一等适配器的方式支持它。Qoder 是其各自所有者的商标。

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

   安全——Open Design 本地优先且采用 Apache-2.0 许可。你的文件、产物和 DESIGN.md 都留在你自己的仓库里，你的 Qoder 凭证由你的智能体直接使用，绝不会经过 Open Design 的服务器中转。