延伸阅读
Qwen 延伸阅读
已发布的指南链接到 Qwen 设计工作的教程、文档和分步讲解。
Qwen 
OpenDesign 用 Qwen
在 OpenDesign
做设计。
如何在 OpenDesign 中使用 Qwen Code 设计界面：以参考图片作为输入，QWEN.md 作为规则手册，一个团队日历任务从 brief 到审核后的文件，以及开始前需要了解的限制。
一个完整的 Qwen 设计任务
一个 Qwen Code 设计任务：从简报 to 界面
本演练跟踪一个任务：你作为简报和约束交付的内容、Qwen Code 返回的成品，以及签核前剩下的检查。下面的界面仅用于本页示意，并非捕获的 Qwen Code 运行结果。
1设计 Brief 与约束条件
Brief根据所附参考资料，设计一个团队日历周视图：五天、工作时间、按日历进行颜色编码，并在手机上提供日议程。覆盖桌面端和手机端。
- 设计系统OpenDesign 纸感画布：Albert Sans，单一绿色强调色
- 断点桌面端为 1440px，移动端为 390px，且无横向滚动
- 交互周导航、打开事件、日历切换，以及跳转到今天
- 输出一个单一的自包含 HTML 文件，带有稳定的
data-od-id钩子
2谁做什么：你、Qwen Code 和 OpenDesign
- 你
你撰写简报、选择设计系统，并设定验收标准。
- Qwen
Qwen Code 规划布局，编写 HTML、CSS 和 JavaScript，然后按请求修改。
- OpenDesign
OpenDesign 提供设计系统和技能，渲染预览，并将每个版本保存为项目文件。
- 审查
在移交之前，你检查视觉层级、8px 网格间距、两个断点，以及每一个交互。
3Qwen Code 成品：1440px 和 390px 下的团队日历
4交付前审查
Layout
网格与间距
小时行和日期列落在 8px 网格上；事件与小时线对齐。
Hierarchy
视觉层级
今天和聚焦事件优先；强调色只出现在该事件和今天的标题栏上。
Responsive
移动端布局
周视图折叠为一条日期条加一个议程列表；今天保持选中。
Interaction
交互检查
测试移动一周、打开事件、切换日历，以及跳转到今天。
Fit
Qwen Code 何时适用，何时不适用
Qwen 适用的场景
- 参考 → UI。强大的代理式编码能把清晰的参考和简报转化为响应式标记，然后对照该参考进行自检。
- 大上下文。完整的设计系统、组件库和参考集能一起放入，让输出复用你实际的基元。
- QWEN.md + MCP。上下文文件保存你的约定，而 Figma MCP 服务器把真实的设计上下文拉取到代码中。
- 开放且支持 BYOK。Apache-2.0，密钥方式灵活——DashScope 或 Qwen API key、OpenAI 兼容端点，或 ModelScope。
选择其他工作流的场景
- 你需要可编辑的矢量文件。输出是 HTML，而不是可编辑的设计文件。对于你所需的资产格式，请查看单独的矢量工作流。
- 你没有参考，也没有约束。没有设计系统或示例，输出会变得泛泛；先从撰写简报开始。
- 你没有此智能体所需的凭证。必需：DashScope / Qwen API key（自带密钥）。OpenDesign 既不提供也不代理凭证。
- 你的团队使用 Kimi 或 Qoder。这些智能体各自有自己的页面和自己的设置路径。请参阅相关智能体。
兼容性
开始前的 Qwen 前提条件
本页介绍通过 OpenDesign 桌面应用连接的 Qwen。已发布的参考资料已于 2026 年 9 月 6 日核对。
工具范围Qwen，由 Alibaba 提供
Qwen Code 是阿里巴巴开源（Apache-2.0）的终端 AI 智能体，改编自 Google 的 Gemini CLI。它会读取你的代码库、编辑文件、运行命令，并处理网络内容。本页重点介绍通过 OpenDesign 使用 Qwen 设计界面，而不是 Qwen 自身的界面。OpenDesign 的 设置说明 列出了可用的智能体。
账户与身份验证DashScope / Qwen API 密钥（BYOK）
DashScope / Qwen API key（BYOK）。使用你的 DashScope 或 Qwen API key（BYOK）进行认证；凭证保留在你的机器上。本页不对配额或价格作出承诺。
系统与版本桌面应用或源码
桌面版构建请查看下载页面。源码快速入门中的 Node.js 和 pnpm 要求适用于从源码运行，而不是安装桌面包时。最低兼容 Qwen 版本：此处未验证。
连接检查成功的标志
使用已安装版本显示的连接说明，然后运行一个小任务。确认 Qwen 处理了它，并且成品能够打开。仅下载本身并不能证明连接可用。
从桌面应用开始
三步完成 Qwen 设置
从下载开始，完成你已安装版本的 Qwen 设置，然后验证一个小结果。此路径不需要从源码构建 OpenDesign。
- 1
下载 OpenDesign 桌面应用
选择适合你电脑的软件包，安装它，然后打开应用。
下载 OpenDesign检查点桌面应用打开。如果已经安装，请进入下一步——无需再次下载。 - 2
准备你的 Qwen 连接
遵循已安装版本随附的 Qwen 说明。使用你的 DashScope 或 Qwen API key（BYOK）进行认证；凭证保留在你的机器上。
Qwen Code 文档# 1. Install Qwen Code (Node 22+) npm install -g @qwen-code/qwen-code@latest # or: brew install qwen-code # 2. Start it in your project and authenticate on first run cd your-project qwen # run /auth, or set a key in ~/.qwen/settings.json摘自已发布指南中的 Qwen 设置说明；请在供应商文档中确认当前命令。
检查点验证你打算使用的智能体和账户。如果任一不可用，请在尝试更大任务之前查看兼容性。 - 3
运行一个小型 Qwen 任务
把简报控制得足够小，以便判断完整循环，包括一次修改。
入门 brief构建一个带有个人资料表单和保存确认的设置界面。使用我的设计规则。在桌面和移动宽度下检查它。
检查点打开结果，测试保存状态，并要求做一处具体修改。生成的文件仍然需要你审查一遍。
如果你计划从源码运行 OpenDesign，请改为遵循 技术快速入门。
Qwen 设计工作流
Qwen 的五步设计工作流
跟随一个团队日历任务，从简报一直到经过验证的文件。每一步都区分你的输入、Qwen Code 的工作、OpenDesign 的角色，以及你执行的检查。
- 1
设计 Brief
三到六行朴素文字就够了。说明这个屏幕服务于谁、它必须做什么，以及哪些平台重要。
- 您起草简报，并在有参考截图时附上它。
- Qwen阅读简报和项目的 QWEN.md；如果仍有歧义，会提出问题。
- OpenDesign提供项目、提示界面，以及与成品类型匹配的技能。
- 检查确保简报写明其验收标准。在这里添加它们比生成之后再添加成本更低。
- 2
设计约束
一个设计系统加上几条明确规则。正是这种组合让输出保持品牌一致，而不是泛泛而谈。
- 您选择设计系统；指定断点以及必须出现的任何组件。
- Qwen在编写任何代码之前，将 DESIGN.md 的令牌和姿态规则拉入上下文。
- OpenDesign提供设计系统库，并将你的选择绑定到技能模板中。
- 检查检查令牌是否与品牌匹配：一个强调色、正确的字体、正确的圆角。
- 3
生成界面
Qwen Code 编写一个自包含的 HTML 文件：布局、样式、交互和稳定的钩子。
- 您等待，或回答一个澄清问题。这里没有需要配置的内容。
- Qwen规划各个部分，编写 HTML、CSS 和 JavaScript，运行文件，并修复失败。
- OpenDesign将成品存储在项目文件夹中，并为其建立索引以供预览。
- 检查先别急。要评判的是渲染后的文件，而不是源文件。
- 4
预览
OpenDesign 会按简报中指定的宽度渲染文件。设计就是在这里接受评判的。
- 你更改宽度，试用各项交互，并在元素上留下评论。
- Qwen阅读预览评论，并安排下一轮修订。
- OpenDesign渲染预览，并暴露
data-od-id目标，用于评论和编辑。 - 检查检查层级、对比度、390px 下的溢出、聚焦状态，以及强调色是否保持克制。
- 5
修订与验证
通过指向预览中的元素来请求修改。每次修订都会生成一个新文件；未经提示不会覆盖任何内容。
- 你将评论转化为请求，并决定任务何时完成。
- Qwen就地应用更改，并再次运行该文件。
- OpenDesign并排保留各个版本，并在你完成后导出图像或 HTML。
- 检查先仅重新检查更改过的区域，然后每个断点检查一次完整页面。
资源
Qwen 设计资源
限制
Qwen 的局限性、手动检查与回退方案
- 适用范围本页介绍的是作为连接到 OpenDesign 的智能体的 Qwen Code，而非 Qwen 的所有功能。
- 使用限额使用限制和费用取决于你提供的凭证（DashScope / Qwen API 密钥）。此处不声明有任何免费额度。
- 网络本地项目文件并不等同于离线推理。在共享敏感输入之前，请检查你的智能体的提供商设置和数据策略。
- 输出为 HTML这些工件是 HTML 文件，而不是矢量设计文件。
- 人工审查你需要在预览中审查可访问性、真实内容、品牌契合度和交互正确性。把智能体的自检视为第一轮检查。
- 后备方案当智能体不可用或任务失败时，请查阅已安装版本的连接说明和身份验证。在更改配置之前，保存错误信息和最后一个可用的工件。
常见问题
关于 Qwen 与 OpenDesign 的常见问题
Qwen Code 真的能做设计工作吗？
是的——在有美学 skill、设计系统和真实参考图作为上下文的情况下，Qwen Code 能产出生产级的响应式 UI，其 Agent 循环会根据参考图构建、渲染并校验输出。若缺少这些上下文，它往往会退回到通用外观，这正是 OpenDesign 所填补的空白。
必须付费才能用 Qwen Code 做设计吗？
Qwen Code 免费且开源，但采用 BYOK 模式——你需要自带 DashScope（阿里云百炼）API key、一个 OpenAI 兼容端点，或 ModelScope。阿里云也提供固定费用的编码套餐。无论哪种方式，OpenDesign 都不会代理你的凭据。
Qwen Code 具体在哪些方面对设计有用？
两点：Qwen3-Coder 模型针对 Agent 化编码进行了调优，因此 Agent 能够构建并自我修正响应式 UI；而且其超大上下文可以一次性容纳整个设计系统和参考集。这两点都有帮助——但审美最终仍来自你提供的设计系统、skill 和参考图。
Qwen Code 和 Gemini CLI 是同一个东西吗？
不是。Qwen Code 改编自 Google 的 Gemini CLI——属于同一开源脉络——并在解析器层面和提示词层面做了适配，以针对 Qwen3-Coder 模型进行调优。OpenDesign 同时支持两者，因此你可以切换 Agent 而无需改变设计工作流。
如何将 Qwen Code 连接到 Figma？
在 ~/.qwen/settings.json 的 mcpServers 下添加 Figma MCP server。这样 Qwen Code 就能拉取真实的设计上下文——组件、变量、布局数据——使生成的代码与源文件精确匹配，而不只是近似还原。
Qwen Code 究竟是什么
Qwen Code 是阿里巴巴为终端打造的一个开源（Apache-2.0）AI 智能体。它能读取你的代码仓库、编辑文件、运行 shell 命令，还能在网络上工作——从自然语言任务中进行规划和验证，而不仅仅是补全代码行。它改编自 Google 的 Gemini CLI，在解析器层面和提示词层面做了调整，以释放 Qwen3-Coder 模型在智能体编码任务上的能力。
对于设计工作，有两个特性尤为突出。它是一个能力出众的智能体编码器，因此可以拿着参考图和清晰的简报，构建、运行并自我修正响应式 UI。而且 Qwen3-Coder 模型拥有大上下文窗口，大到足以同时容纳你的整个设计系统、组件库和参考集，而不是将它们总结掉。
上下文文件：Qwen Code 会读取 QWEN.md 文件以获得持久的项目上下文——这是编码你的设计规范、设计令牌和审查清单的自然位置。个人设置和项目设置在其之上叠加。
内置工具 + MCP：它开箱即用提供文件、shell 和网络工具，并支持 MCP 服务器（在 ~/.qwen/settings.json 中的 mcpServers 下配置），以添加外部上下文，例如实时的 Figma 文件。
BYOK 起步：你需要自带密钥——DashScope（阿里云百炼）的 API 密钥，或任何 OpenAI 兼容的端点或 ModelScope——并在 settings.json 中配置。
凭据：DashScope / Qwen API 密钥（BYOK），或 OpenAI 兼容端点 / ModelScope
许可证：Apache-2.0，开源（改编自 Gemini CLI）
供应商：阿里巴巴
对于设计工作，有两个特性尤为突出。它是一个能力出众的智能体编码器，因此可以拿着参考图和清晰的简报，构建、运行并自我修正响应式 UI。而且 Qwen3-Coder 模型拥有大上下文窗口，大到足以同时容纳你的整个设计系统、组件库和参考集，而不是将它们总结掉。
上下文文件：Qwen Code 会读取 QWEN.md 文件以获得持久的项目上下文——这是编码你的设计规范、设计令牌和审查清单的自然位置。个人设置和项目设置在其之上叠加。
内置工具 + MCP：它开箱即用提供文件、shell 和网络工具，并支持 MCP 服务器（在 ~/.qwen/settings.json 中的 mcpServers 下配置），以添加外部上下文，例如实时的 Figma 文件。
BYOK 起步：你需要自带密钥——DashScope（阿里云百炼）的 API 密钥，或任何 OpenAI 兼容的端点或 ModelScope——并在 settings.json 中配置。
凭据：DashScope / Qwen API 密钥（BYOK），或 OpenAI 兼容端点 / ModelScope
许可证：Apache-2.0，开源（改编自 Gemini CLI）
供应商：阿里巴巴
为什么强大的编码模型和大上下文适合设计工作
Qwen Code 的设计优势来自两个特性——但与所有智能体一样，品味仍然需要你来提供。
强大的智能体编码能力：Qwen3-Coder 模型针对智能体任务进行了调优，因此智能体会规划、编辑、运行构建并进行自我修正——将清晰的参考图和简报转化为响应式标记，而不是一次性的猜测。
大上下文窗口：Qwen3-Coder 的大上下文意味着整个设计系统、令牌和许多参考状态可以同时容纳，因此智能体会复用你真正的设计原语，而不是发明一次性样式。
QWEN.md 中的规范：QWEN.md（加上 Figma MCP 服务器）将智能体指向你的令牌、组件和真实规范，使其基于品牌工作，而不是默认外观。
品味来自你提供的三个输入：设计系统、技能和真实的参考图像。
教训与每个智能体所教的一样：默认情况下，Qwen Code 没有品味。当你给它约束——设计系统、审美技能和具体参考——时，它才能产出好的设计。OpenDesign 恰好打包了这些输入，这就是两者契合的原因（更多内容见下文）。
强大的智能体编码能力：Qwen3-Coder 模型针对智能体任务进行了调优，因此智能体会规划、编辑、运行构建并进行自我修正——将清晰的参考图和简报转化为响应式标记，而不是一次性的猜测。
大上下文窗口：Qwen3-Coder 的大上下文意味着整个设计系统、令牌和许多参考状态可以同时容纳，因此智能体会复用你真正的设计原语，而不是发明一次性样式。
QWEN.md 中的规范：QWEN.md（加上 Figma MCP 服务器）将智能体指向你的令牌、组件和真实规范，使其基于品牌工作，而不是默认外观。
品味来自你提供的三个输入：设计系统、技能和真实的参考图像。
教训与每个智能体所教的一样：默认情况下，Qwen Code 没有品味。当你给它约束——设计系统、审美技能和具体参考——时，它才能产出好的设计。OpenDesign 恰好打包了这些输入，这就是两者契合的原因（更多内容见下文）。
从零开始为设计工作设置 Qwen Code
设置顺序：安装 → 身份验证 → 配置 QWEN.md → 添加技能 → 启用浏览器验证。
编码你的设计规则：将你的令牌、原语和规范放入 QWEN.md 并让 Qwen Code 指向它们，这样输出就能匹配品牌，而不是默认的通用外观。
添加浏览器验证：连接一个 Playwright 或浏览器 MCP，让 Qwen Code 在真实浏览器中渲染，并跨断点检查输出，而不仅仅是确认构建通过。
使用当前的设置部分获取命令和版本特定详细信息，这些信息可能会更改。
历史命令示例来自之前的指南；在链接的供应商文档中验证当前语法。
编码你的设计规则：将你的令牌、原语和规范放入 QWEN.md 并让 Qwen Code 指向它们，这样输出就能匹配品牌，而不是默认的通用外观。
添加浏览器验证：连接一个 Playwright 或浏览器 MCP，让 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 中设置密钥
# 3. 在 settings.json 中配置 DashScope（OpenAI 兼容）密钥
# baseUrl: https://dashscope.aliyuncs.com/compatible-mode/v1
# model: qwen3-coder-plus (设置 DASHSCOPE_API_KEY)
# 4. 添加 QWEN.md 并连接 Figma MCP 服务器（可选）
# 在 ~/.qwen/settings.json 中的 "mcpServers" 下添加 MCP历史命令示例来自之前的指南；在链接的供应商文档中验证当前语法。
从参考图到 UI 的工作流程
使用 Qwen Code 进行设计时，杠杆最高的循环是将参考图转化为可工作的响应式 UI，并迭代直到匹配——依靠智能体来构建、渲染并将其输出与参考图进行比较。
从你拥有的最清晰的视觉参考开始——并描述多种状态（桌面和移动、悬停、空状态、加载状态），而不仅仅是一张主视觉图。
在提示中要具体；即使使用强大的模型，模糊的提示也会产生通用的 UI。
将你的设计系统和规范保留在 QWEN.md 中，并告诉 Qwen Code 令牌和规范原语在哪里。
运行开发服务器，让 Qwen Code 在真实浏览器中渲染，调整到断点以检查结果。
通过让 Qwen Code 将其实现与参考图进行比较来进行迭代——而不仅仅是确认它能构建。
使用 @ 引用文件以将其附加到提示中，然后给出具体的约束：
保持提示小而聚焦，提交好的迭代并回滚坏的迭代（回滚时告诉 Qwen Code），这样每次传递都基于干净的基础。
历史命令示例来自之前的指南；在链接的供应商文档中验证当前语法。
从你拥有的最清晰的视觉参考开始——并描述多种状态（桌面和移动、悬停、空状态、加载状态），而不仅仅是一张主视觉图。
在提示中要具体；即使使用强大的模型，模糊的提示也会产生通用的 UI。
将你的设计系统和规范保留在 QWEN.md 中，并告诉 Qwen Code 令牌和规范原语在哪里。
运行开发服务器，让 Qwen Code 在真实浏览器中渲染，调整到断点以检查结果。
通过让 Qwen Code 将其实现与参考图进行比较来进行迭代——而不仅仅是确认它能构建。
使用 @ 引用文件以将其附加到提示中，然后给出具体的约束：
保持提示小而聚焦，提交好的迭代并回滚坏的迭代（回滚时告诉 Qwen Code），这样每次传递都基于干净的基础。
qwen
# 在提示中：
> @reference-desktop.png @reference-mobile.png
实现这个设计，使用 React + Vite + Tailwind + TypeScript。
复用我在 QWEN.md 中现有的设计系统组件和令牌。
匹配间距、布局和层次结构；使其具有响应性。
在浏览器中渲染，并迭代直到它与参考图匹配
在各个断点处。历史命令示例来自之前的指南；在链接的供应商文档中验证当前语法。
QWEN.md、MCP 和扩展
三个扩展点使 Qwen Code 在持续设计工作中切实可用，而且这三点都能清晰地映射到开放式设计工作流上。
QWEN.md 上下文：项目规则存放在仓库根目录下的 QWEN.md 中（包含全局层和项目层）。它是设计惯例的持久归宿，每次运行都会读取。
MCP 服务器：在 ~/.qwen/settings.json 中的 mcpServers 下配置 MCP 服务器——这是引入设计上下文和外部工具的可移植方式，最相关的是 Figma MCP 服务器，它能跨代理工作，而不仅限于 Qwen Code。
技能与内置工具：Qwen Code 的技能及其内置的文件、shell 和 Web 工具，使其无需离开终端即可收集参考资料并运行验证循环。
这些都是可移植的、多代理能力——正是 OpenDesign 旨在编排而非为每个项目重新创建的那种东西。
QWEN.md 上下文：项目规则存放在仓库根目录下的 QWEN.md 中（包含全局层和项目层）。它是设计惯例的持久归宿，每次运行都会读取。
MCP 服务器：在 ~/.qwen/settings.json 中的 mcpServers 下配置 MCP 服务器——这是引入设计上下文和外部工具的可移植方式，最相关的是 Figma MCP 服务器，它能跨代理工作，而不仅限于 Qwen Code。
技能与内置工具：Qwen Code 的技能及其内置的文件、shell 和 Web 工具，使其无需离开终端即可收集参考资料并运行验证循环。
这些都是可移植的、多代理能力——正是 OpenDesign 旨在编排而非为每个项目重新创建的那种东西。
用于设计的 Qwen Code、Codex、Claude Code、Cursor、Gemini CLI 对比
设计工作没有单一赢家——每个代理有不同的强项，经验丰富的团队会叠加使用它们。一个公正的总结如下：
Qwen Code — 基于开源 Qwen3-Coder 模型进行强大的代理式编码，拥有大上下文；开源且 BYOK — 开源、密钥灵活构建，能在上下文中容纳整个设计系统
Codex — 凭借前端技能具备强大的视觉打磨能力；沙盒化异步构建 — 委托的异步构建和可移植的 AGENTS.md 规则
Claude Code — 具体的设计决策（十六进制颜色、间距、字体）和代码库感知的 UX — 前端推理和大上下文重构
Cursor — 带实时预览和内联编辑的所见即所得的视觉构建循环 — 在 IDE 内进行紧凑的迭代观察 UI 工作
Gemini CLI — 强大的多模态图像理解和 1M 令牌上下文；是 Qwen Code 所改编自的代理 — 大量截图工作和非常大的上下文
社区反复得出的结论是，品味来自人类：如果没有技能、参考和约束，所有这些都默认为千篇一律的审美。这才是真正要解决的问题——而且它是设计工具形态的问题，而不是模型形态的问题。
代理 — 设计强项 — 最适合
Qwen Code — 基于开源 Qwen3-Coder 模型进行强大的代理式编码，拥有大上下文；开源且 BYOK — 开源、密钥灵活构建，能在上下文中容纳整个设计系统
Codex — 凭借前端技能具备强大的视觉打磨能力；沙盒化异步构建 — 委托的异步构建和可移植的 AGENTS.md 规则
Claude Code — 具体的设计决策（十六进制颜色、间距、字体）和代码库感知的 UX — 前端推理和大上下文重构
Cursor — 带实时预览和内联编辑的所见即所得的视觉构建循环 — 在 IDE 内进行紧凑的迭代观察 UI 工作
Gemini CLI — 强大的多模态图像理解和 1M 令牌上下文；是 Qwen Code 所改编自的代理 — 大量截图工作和非常大的上下文
社区反复得出的结论是，品味来自人类：如果没有技能、参考和约束，所有这些都默认为千篇一律的审美。这才是真正要解决的问题——而且它是设计工具形态的问题，而不是模型形态的问题。
代理 — 设计强项 — 最适合
陷阱，以及如何避免“AI 塑料感”外观
关于 AI 生成设计最常见的抱怨是它看起来很普通——柔和渐变、浮动面板、过大的圆角、戏剧性的阴影，以及一种“Inter 字体加紫色”的氛围，让人感觉“一眼就看出是 AI 做的”。其他报告的问题包括移动端布局损坏和指令泄漏到 UI 文案中。这些都不是 Qwen Code 独有的；当任何代理在没有经过精心设计的设计上下文下运行时，就会发生这种情况。
添加审美技能：经过精心设计的设计技能会迫使代理承诺一个真实的方向，而不是默认外观。
在真实浏览器中验证：让代理在不同断点下渲染并自检，这样布局就不会在移动端静默损坏。
提供设计令牌和参考：真实的设计令牌和参考截图是影响输出质量的最大杠杆。
在 QWEN.md 中编码规则：将“不要主视觉卡片、最多两种字体、品牌优先的层级”这类规则放在代理每次运行都会读取的地方。
请注意，每项缓解措施都是为了给代理提供一个经过精心设计的设计上下文。逐个项目手动维护这个上下文，正是 OpenDesign 所消除的辛劳。
添加审美技能：经过精心设计的设计技能会迫使代理承诺一个真实的方向，而不是默认外观。
在真实浏览器中验证：让代理在不同断点下渲染并自检，这样布局就不会在移动端静默损坏。
提供设计令牌和参考：真实的设计令牌和参考截图是影响输出质量的最大杠杆。
在 QWEN.md 中编码规则：将“不要主视觉卡片、最多两种字体、品牌优先的层级”这类规则放在代理每次运行都会读取的地方。
请注意，每项缓解措施都是为了给代理提供一个经过精心设计的设计上下文。逐个项目手动维护这个上下文，正是 OpenDesign 所消除的辛劳。
在 OpenDesign 中使用 Qwen Code 进行设计
OpenDesign 是上述工作流一直在要求的开源设计层。它将 Qwen Code 视为第一方适配器，并将其包裹在精选的技能和设计系统库、结构化的渲染管道以及本地桌面 UI 中——因此，让 Qwen Code 表现出色的设计上下文从第一次运行起就已存在，无需每次手工组装。两者都是开源且本地优先的，这使得这种搭配成为一种自然的契合。
使用你的 DashScope 或 Qwen API 密钥（BYOK）进行身份验证——凭据保留在你的机器上，绝不会通过我们进行代理。
选择一个设计系统和一个技能，然后以一致的品味生成演示文稿、原型和落地页。
每个工件和 DESIGN.md 文件都存放在你自己的仓库中，而不是托管的云端。
同样的 Qwen Code 代理，同样的密钥——外加一个真实、可移植的开源设计工作流围绕它。它是本地优先且 Apache-2.0 许可的，因此你的工作或凭据的任何内容都不会离开你的机器。
安装 OpenDesign 并选择 Qwen Code 作为你的代理。
使用你的 DashScope 或 Qwen API 密钥（BYOK）进行身份验证——凭据保留在你的机器上，绝不会通过我们进行代理。
选择一个设计系统和一个技能，然后以一致的品味生成演示文稿、原型和落地页。
每个工件和 DESIGN.md 文件都存放在你自己的仓库中，而不是托管的云端。
同样的 Qwen Code 代理，同样的密钥——外加一个真实、可移植的开源设计工作流围绕它。它是本地优先且 Apache-2.0 许可的，因此你的工作或凭据的任何内容都不会离开你的机器。
安装 OpenDesign 并选择 Qwen Code 作为你的代理。
OpenDesign 与阿里巴巴或 Qwen 有关联吗？
没有。OpenDesign 是独立的；Qwen 是阿里巴巴的商标。