用 Qwen Code 做设计。

Qwen Code 究竟是什么

Qwen Code 是阿里巴巴为终端发布的开源（Apache-2.0）AI agent。它读取你的仓库、编辑文件、运行 shell 命令、上网检索——从自然语言任务出发去规划和验证工作，而不只是补全几行代码。它由 Google 的 Gemini CLI 改造而来，在解析器层面和提示词上做了调优，以释放 Qwen3-Coder 模型在 agent 化编码任务上的能力。

对设计工作来说，有两个特性格外突出。它是一个强大的 agent 化编码器，能拿着一份参考和一份清晰的需求去构建、运行并自我纠正出响应式 UI。而 Qwen3-Coder 模型自带超大上下文窗口，大到足以一次性装下你整套设计系统、组件库和参考集，而不必把它们压缩概括掉。

• 上下文文件: Qwen Code 会读取一个 QWEN.md 文件作为持久的项目上下文——这正是编写你的设计规范、tokens 和评审清单的天然位置。个人和项目级设置会层层叠加在其上。
• 内置工具 + MCP: 它开箱即带文件、shell 和 web 工具，并支持 MCP server（在 ~/.qwen/settings.json 的 mcpServers 下配置），以接入像实时 Figma 文件这样的外部上下文。
• 从 BYOK 起步: 你自带 key——一个 DashScope（阿里云百炼）API key，或任意 OpenAI 兼容端点，或 ModelScope——并在 settings.json 中配置。

• 厂商：Alibaba
• 凭证：DashScope / Qwen API key（BYOK），或 OpenAI 兼容端点 / ModelScope
• 许可：Apache-2.0，开源（由 Gemini CLI 改造而来）

为什么强编码模型和超大上下文契合设计

Qwen Code 的设计优势来自两个特性——但和每个 agent 一样，审美仍然得由你来提供。

• 强大的 agent 化编码: Qwen3-Coder 模型针对 agent 化任务做了调优，因此这个 agent 会规划、编辑、跑构建并自我纠正——把一份清晰的参考和需求变成响应式标记，而不是一锤子的瞎猜。
• 超大上下文窗口: Qwen3-Coder 的超大上下文意味着整套设计系统、tokens 和许多参考状态能一次性装下，于是 agent 会复用你真实的基础原语，而不是凭空造出一次性的样式。
• QWEN.md 里的规范: 一份 QWEN.md（加上 Figma MCP server）把 agent 指向你的 tokens、组件和真实规格，于是它是对着一个品牌干活，而不是套用一套默认外观。

这个教训和每个 agent 教给我们的一样：Qwen Code 默认并不具备审美。当你给它约束时——一套设计系统、一个审美 skill 和具体的参考——它才能产出好设计。Open Design 恰恰把这些输入打包好了，这正是两者契合的原因（下文详述）。

从零搭好用于设计工作的 Qwen Code

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

# 1. 安装 Qwen Code（Node 22+）
npm install -g @qwen-code/qwen-code@latest
# 或：brew install qwen-code

# 2. 在你的项目里启动它，首次运行时完成认证
cd your-project
qwen              # 运行 /auth，或在 ~/.qwen/settings.json 里设置一个 key

# 3. 在 settings.json 里配置一个 DashScope（OpenAI 兼容）key
#    baseUrl: https://dashscope.aliyuncs.com/compatible-mode/v1
#    model:   qwen3-coder-plus   （设置 DASHSCOPE_API_KEY）

# 4. 添加一个 QWEN.md 并接好 Figma MCP server（可选）
#    在 ~/.qwen/settings.json 的 "mcpServers" 下添加 MCP

• 写下你的设计规则: 把你的 tokens、基础原语和规范放进 QWEN.md，并让 Qwen Code 指向它们，这样产出会贴合一个品牌，而不是退回到一套通用外观。
• 加入浏览器验证: 接好一个 Playwright 或浏览器 MCP，让 Qwen Code 在真实浏览器里渲染，并跨断点检查产出，而不只是确认构建通过。

参考到 UI 的工作流

用 Qwen Code 收益最高的设计闭环，是把一份参考变成可用的响应式 UI，并反复迭代直到匹配——依靠 agent 去构建、渲染，并把产出对照参考做比较。

1. 从你手头最清晰的视觉参考开始——并描述多个状态（桌面与移动、悬停、空态、加载中），而不只是一张主视觉。
2. 提示词要具体；含糊的提示词即便用强模型也只会产出通用 UI。
3. 把你的设计系统和规范放在 QWEN.md 里，并告诉 Qwen Code tokens 和标准基础原语在哪里。
4. 跑一个 dev server，让 Qwen Code 在真实浏览器里渲染，调整到各个断点尺寸来检查结果。
5. 通过让 Qwen Code 把它的实现对照参考做比较来迭代——而不只是确认它能构建通过。

用 @ 引用一个文件把它附到提示词里，然后给出具体约束：

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

把提示词保持小而聚焦，提交好的迭代、回退坏的迭代（回退时告诉 Qwen Code），这样每一轮都在一个干净的基础上推进。

QWEN.md、MCP 和扩展

三个扩展点让 Qwen Code 能胜任持续的设计工作，而这三者都能干净地映射到一套开放的设计工作流上。

• QWEN.md 上下文: 项目规则放在仓库根目录的 QWEN.md 里（带全局层和项目层）。它是你设计规范的长久归宿，每次运行都会被读取。
• MCP server: 在 ~/.qwen/settings.json 的 mcpServers 下配置 MCP server——这是引入设计上下文和外部工具的可移植方式，其中最相关的是 Figma MCP server，它们能跨 agent 通用，而不只服务于 Qwen Code。
• skill 与内置工具: Qwen Code 的 skill 以及它内置的文件、shell 和 web 工具，让它无需离开终端就能收集参考并运行验证闭环。

这些都是可移植、跨 agent 的能力——正是 Open Design 旨在编排的那类东西，而不是在每个项目里重新造一遍。

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

设计工作没有唯一赢家——每个 agent 各有所长，老练的团队会把它们叠着用。一个公允的概括：

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

坑，以及如何避开那种「AI 味」外观

对 AI 生成设计最常见的抱怨是它看起来很通用——柔和的渐变、悬浮的面板、过大的圆角、夸张的阴影，一股「Inter 字体加紫色」的味道，「一看就是 AI 做的」。其他被反映的问题还包括移动端布局崩坏、以及指令泄漏进 UI 文案里。这些都不是 Qwen Code 独有的；任何 agent 在缺少精选设计上下文时运行，都会这样。

• 加一个审美 skill: 一个精选的设计 skill 会逼着 agent 笃定一个真实的方向，而不是套用默认外观。
• 在真实浏览器里验证: 让 agent 跨断点渲染并自检，这样布局就不会在移动端悄悄崩掉。
• 提供 tokens 和参考: 真实的设计 tokens 和参考截图，是对产出质量最大的单一杠杆。
• 把规则写进 QWEN.md: 把诸如「不要 hero 卡片、最多两种字体、品牌优先的层级」这类风格规则，放在 agent 每次运行都会读到的地方。

注意到了吗，每一项缓解措施都是在给 agent 一份精选的设计上下文。逐个项目手工维护这份上下文，正是 Open Design 替你免去的苦活。

在 Open Design 中用 Qwen Code 做设计

Open Design 正是上面那套工作流一再呼唤的那个开源设计层。它把 Qwen Code 当作一等公民适配器，并用一套精选的 skill 与设计系统库、一条结构化的渲染管线，以及一个本地桌面 UI 把它包起来——于是让 Qwen Code 好用的那份设计上下文，从第一次运行就在那里，而不必每次手工拼凑。两者都开源、都本地优先，这让这对组合天然契合。

1. 安装 Open Design，并选择 Qwen Code 作为你的 agent。
2. 用你的 DashScope 或 Qwen API key 认证（BYOK）——凭证留在你自己的机器上，绝不经我们中转。
3. 选一套设计系统和一个 skill，然后以一致的审美生成演示稿、原型和落地页。
4. 每一份产物和 DESIGN.md 文件都留在你自己的仓库里，而非托管云端。

同一个 Qwen Code agent、同一个 key——外加围绕它的一套真实、可移植、开源的设计工作流。它本地优先、Apache-2.0，所以你的工作和凭证都不会离开你的机器。

常见问题

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

   能——只要上下文里有一个审美 skill、一套设计系统和真实的参考图，Qwen Code 就能产出生产级的响应式 UI，并且它的 agent 化闭环会构建、渲染，并对照参考验证产出。缺了这份上下文，它往往会退回一套通用外观，而这正是 Open Design 填补的缺口。

2. 02 用 Qwen Code 做设计需要付费吗？ +

   Qwen Code 免费且开源，但它是 BYOK——你自带一个 DashScope（阿里云百炼）API key、一个 OpenAI 兼容端点，或 ModelScope。阿里巴巴也提供一个固定费用的编码套餐。无论哪种方式，Open Design 都绝不中转你的凭证。

3. 03 Qwen Code 具体好在哪里适合做设计？ +

   两点：Qwen3-Coder 模型针对 agent 化编码做了调优，于是 agent 会构建并自我纠正出响应式 UI；它们的超大上下文能一次性装下整套设计系统和参考集。两者都有帮助——但审美仍然来自你提供的设计系统、skill 和参考。

4. 04 Qwen Code 和 Gemini CLI 是一回事吗？ +

   不是。Qwen Code 由 Google 的 Gemini CLI 改造而来——同源的开源血统——在解析器层面和提示词上做了适配，以针对 Qwen3-Coder 模型调优。Open Design 两者都支持，所以你能在不改设计工作流的前提下切换 agent。

5. 05 我怎么把 Qwen Code 连到 Figma？ +

   在 ~/.qwen/settings.json 的 mcpServers 下添加 Figma MCP server。然后 Qwen Code 就能拉取真实的设计上下文——组件、变量、布局数据——让生成的代码贴合源文件，而不是近似猜测。

6. 06 Open Design 和 Alibaba 或 Qwen 有关联吗？ +

   没有。Qwen Code 是 Alibaba 的产品；Open Design 是一个独立的开源项目，把它作为一等公民适配器来支持。Qwen 是 Alibaba 的商标。

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

   安全——Open Design 本地优先、Apache-2.0。你的文件、产物和 DESIGN.md 都留在你自己的仓库里，你的 DashScope 或 Qwen 凭证由你的 agent 直接使用，绝不经 Open Design 的服务器路由。