延伸阅读
Kilo 延伸阅读
使用 Kilo 进行设计工作的指南、文档与演练，如已发布的指南中所列。
Kilo 
OpenDesign 用 Kilo
在 OpenDesign
做设计。
如何在 OpenDesign 中用 Kilo Code 设计界面：你选择的模型、你自己的规则与模式、一个从截图到已审阅文件的产品页任务，以及开始前需要了解的局限。
一个完整的 Kilo 设计任务
一个 Kilo 设计任务：从需求简报到界面
这个任务从你交付的需求简报和约束条件开始，经过 Kilo 返回的产物，直到你在宣布完成之前仍需执行的各项检查。下方界面是为本页制作的示例，并非真实记录的 Kilo 运行。
1设计 Brief 与约束条件
Brief使用所附截图，设计一个户外品牌的产品详情页：图库、价格、尺码和颜色选项、加入购物袋、相关产品。桌面端和手机端。
- 设计系统Albert Sans，以及在 OpenDesign 纸质画布上使用一种绿色点缀色
- 断点1440px 桌面端和 390px 移动端，无横向滚动
- 交互图库缩略图、选项选择、加入购物袋、相关产品滚动
- 输出单个自包含的 HTML 文件，带有稳定的
data-od-id钩子
2谁做什么：你、Kilo、OpenDesign
- 你
你撰写需求简报、选择设计系统并设定验收标准。
- Kilo
Kilo 规划布局，编写 HTML、CSS 和 JavaScript，然后根据要求修改。
- OpenDesign
OpenDesign 提供设计系统和技能，渲染预览，并将每个版本保存为项目文件。
- 审查
在交付之前，你检查视觉层级、8px 栅格间距、两个断点以及每个交互。
3Kilo 的产物：1440px 和 390px 下的产品页
4交付前审查
Layout
网格与间距
图库和信息与 8px 栅格对齐；在 1440 宽度下，信息列保持在图库高度范围内。
Hierarchy
视觉层级
名称和价格优先，然后是选项；点缀色仅用于加入购物袋按钮。
Responsive
移动端布局
移动端顺序：图库、名称和价格、选项、全宽按钮；相关产品滚动。
Interaction
交互检查
需要测试的交互：切换缩略图、选择尺码、加入购物袋、滚动相关商品。
Fit
Kilo 适合的场景——以及不适合的场景
Kilo 适用场景
- 为截图 → UI 选择模型。 让 Kilo 使用最能将参考图像转换为响应式标记的视觉模型，然后将结果与该图像进行对比。
- 跨提供商 BYOK。 为 Anthropic、OpenAI、Google、OpenRouter 等使用你自己的密钥，或使用 Kilo 的网关，将成本和凭据掌握在自己手中。
- 模式、自定义规则、MCP。 用于规划的 Architect 模式、用于构建的 Code 模式、用于约定的自定义规则，以及用于真实设计上下文的 Figma MCP 服务器。
- 开源。 提示词和上下文负载可检查，没有隐藏内容，Kilo 可在你的 IDE 或 CLI 中运行。
选择其他工作流的场景
- 你需要可编辑的矢量文件。 返回的是 HTML，而非可编辑的设计文档。对于你所需的资产格式，请另寻矢量工作流。
- 没有参考，也没有约束。 没有设计系统或示例，输出会流于泛泛；请先撰写需求简报。
- 缺少所需的凭据。 Kilo 需要你自己的提供商 API 密钥（BYOK）或 Kilo 的网关。OpenDesign 既不提供凭据，也不代理凭据。
- 你的团队使用 OpenCode 或 Aider。 那些代理有自己的页面；工作区可以沿用，但设置有所不同。参见 相关代理。
兼容性
开始使用 Kilo 前的要求
本页介绍通过 OpenDesign 桌面应用连接的 Kilo。参考资料核查于 2026 年 9 月 6 日。
工具范围Kilo，由 Kilo Code, Inc. 出品
Kilo Code 由 Kilo Code, Inc. 开发，是一款开源 AI 编程代理。它可在 VS Code、JetBrains IDE 和终端中运行：读取你的代码库、编辑文件并运行命令。此处讨论的是通过 OpenDesign 使用 Kilo 设计界面，而非 Kilo 自身的界面。OpenDesign 的 设置说明 列出了可用的代理。
账户与身份验证你提供的提供商 API 密钥（BYOK），或 Kilo 的
你自己的提供商 API 密钥（BYOK）或 Kilo 的网关。使用你自己的提供商密钥（BYOK）或 Kilo 的网关进行身份验证；凭据保留在你的机器上。此处不承诺任何配额或价格。
系统与版本桌面应用或源码
桌面版构建位于下载页面。源码快速入门中的 Node.js 和 pnpm 要求适用于从源码运行，而非安装桌面软件包时。最低兼容 Kilo 版本：本页未核实。
连接检查成功的标志
使用你所安装版本显示的连接说明，然后尝试一个小任务。检查 Kilo 是否完成了该任务，以及产物能否打开。仅下载并不能证明连接可用。
从桌面应用开始
三步完成 Kilo 设置
从下载开始，为你所安装的版本完成 Kilo 设置，然后测试一个小结果。遵循此路径不需要从源码构建 OpenDesign。
- 1
下载 OpenDesign 桌面应用
选择适合你机器的软件包，安装并启动应用。
下载 OpenDesign检查点桌面应用打开。如果你已经安装，请继续下一步；无需再次下载。 - 2
准备您的 Kilo 连接
使用与你所安装版本匹配的 Kilo 说明。使用你自己的提供商密钥（BYOK）或 Kilo 的网关登录；凭据保留在你的机器本地。
Kilo Code 文档# 1. Install the Kilo Code extension from the VS Code # (or JetBrains) marketplace, or install the CLI. # 2. Open your project and sign in / add a provider key cd your-project kilo # connect your provider (BYOK) or Kilo's gateway摘自已发布指南中的 Kilo 设置说明；如需当前命令，请查阅供应商文档。
检查点确认代理和账户是你预期的那一个。如果不可用，请先查看兼容性，再尝试更大的任务。 - 3
运行一个小型 Kilo 任务
从一个足够小的需求简报开始，以便判断整个循环，包括一次修改。
入门 brief构建一个设置界面，包含个人资料表单和保存确认。遵循我的设计规则。在桌面端和移动端宽度下检查。
检查点打开结果，测试保存状态，然后要求进行一项具体修改。生成的文件只是审查的开始，而不是结束。
若要从源码运行 OpenDesign，请参阅 技术快速入门。
Kilo 设计工作流
完成 Kilo 设计任务的五个步骤
一个产品页，从最初的需求简报一直跟踪到你实际验证过的文件。每个步骤都说明你的输入、Kilo 做什么、OpenDesign 贡献什么，以及收尾的检查。
- 1
设计 Brief
保持简洁明了——三到六行。说明这个界面面向谁、必须实现什么，以及哪些平台重要。
- 您你撰写需求简报，并在有参考截图时附上。
- Kilo阅读你的需求简报和项目的说明文件，当某个细节含糊不清时会询问而非猜测。
- OpenDesign提供项目、提示界面以及与产物类型匹配的技能。
- 检查检查需求简报是否明确列出了验收标准。现在写下来比之后修复文件成本更低。
- 2
设计约束
一个设计系统加上少量明确规则——这就是承载你品牌的输出与任何人都能拥有的输出之间的区别。
- 您选择一个设计系统，然后指定你的断点以及必须出现的任何组件。
- Kilo在编写任何标记之前，将 DESIGN.md 令牌和姿态规则加载到上下文中。
- OpenDesign随附设计系统库，并将你选择的系统绑定到技能模板中。
- 检查验证令牌与你的品牌一致：一种点缀色、正确的字体、正确的圆角。
- 3
生成界面
Kilo 编写一个自包含的 HTML 文件——布局、样式、交互、稳定的钩子。
- 您你在这里的任务是等待或回答澄清问题。没有什么需要配置的。
- Kilo规划各区块，编写 HTML、CSS 与 JavaScript，运行文件，修复失败之处。
- OpenDesign将产物保存到项目文件夹并为其建立索引，以便可以预览。
- 检查暂时什么都不做——要依据渲染结果来判断，而不是阅读源码。
- 4
预览
OpenDesign 按你指定的宽度渲染该文件。判断就在这里、在预览上进行。
- 你更改宽度，试用各项交互，并针对具体元素发表评论。
- Kilo读取你在预览中留下的评论，并准备下一版修订。
- OpenDesign渲染预览并暴露
data-od-id目标，使评论和编辑可以附加到这些目标上。 - 检查检查层级、对比度、390px 下的溢出情况以及焦点状态，并确认强调色是否保持克制。
- 5
修订与验证
通过在预览中指向元素来提出修改。每次修订都以新文件形式呈现；不会有任何内容被悄悄覆盖。
- 你把评论转化为需求，并决定任务何时完成。
- Kilo就地应用更改并再次运行该文件。
- OpenDesign将各版本并排保留，并在最后导出图片或 HTML。
- 检查仅重新检查改动区域，然后按每个断点检查一次整页。
资源
Kilo 设计资源
限制
Kilo 止步之处：限制、人工检查与回退方案
- 范围Kilo 不绑定特定模型，可在众多提供商中 BYOK，并具备 Architect/Code/Debug/Ask 模式和 MCP 支持，因此模型选择和凭据都由你掌握。本页讲的是接入 OpenDesign 的 Kilo 智能体，而非 Kilo 的每一项功能。
- 使用限额成本与用量限制取决于你用于身份验证的凭据——你自己的提供商 API 密钥或 Kilo 的网关。此处不声称存在免费额度。
- 网络文件位于你的项目中并不意味着推理是离线的。在共享敏感输入之前，请查看该智能体的提供商设置和数据政策。
- 输出为 HTML产物是一个 HTML 文件；它不是矢量设计文件。
- 人工审查你需要在预览中审查可访问性、真实内容、品牌契合度和交互正确性。智能体执行的任何自检都只是初步检查，而非最终确认。
- 后备方案当智能体不可用或任务失败时，请查阅你所安装版本的连接说明和身份验证。在更改配置之前，保留错误信息以及最后成功运行的产物。
常见问题
关于 Kilo 与 OpenDesign 的常见问题
Kilo Code 真的能做设计工作吗？
是的——在提供美学 skill、设计系统以及上下文中真实的参考图像时，Kilo Code 能产出可用于生产的响应式 UI，并由具备视觉能力的模型对照参考图核验输出。若缺少这些上下文，它往往会退回到通用外观，而这正是 OpenDesign 要填补的空白。
用 Kilo Code 做设计有成本吗？
Kilo Code 开源且免费安装。您可以自带服务商 API 密钥（BYOK），直接向该服务商付费，也可以按服务商成本使用 Kilo 自带的网关。无论哪种方式，OpenDesign 都不会代理您的凭证。
是什么让 Kilo Code 适合设计？
它模型无关且开源，因此您可以选用任何最擅长读取参考截图的具备视觉能力的模型来驱动它，精确查看发送的上下文内容，并将成本和凭证掌控在自己手中。品味仍然来自您提供的设计系统、skill 与参考资料。
前端设计该选 Kilo Code 还是 Claude Code？
两者都很出色。Claude Code 以做出具体、且理解代码库的设计决策著称；Kilo Code 的优势在于开源且模型无关，支持 BYOK，由您选择模型。许多团队同时使用两者——OpenDesign 让您在不改变设计工作流的情况下切换 Agent。
Kilo Code 如何连接 Figma？
从 Kilo 的 MCP 市场或 MCP 设置中添加一个 Figma MCP 服务器。之后 Kilo 便能拉取真实的设计上下文——组件、变量、布局数据——让生成的代码与源文件匹配，而非近似猜测。
Kilo Code 是什么
Kilo Code 是一个由 Kilo Code, Inc. 开发的开源 AI 编码智能体。它既可以作为 VS Code 扩展运行，也可以在 JetBrains IDE 中使用，还可以通过命令行界面运行——它能够读取你的代码仓库、编辑文件、运行命令，并根据自然语言任务规划和验证工作，而不仅仅是补全代码行。它的标志性特征是模型无关：由你选择驱动它的模型，并且自带供应商密钥。
对于设计工作，有两个特性尤为突出。由于它模型无关，你可以将其指向任何一个强大的视觉模型，只要该模型最能读懂参考截图并推理布局。而且因为它是开源的且采用 BYOK 模式，你可以准确检查发送了哪些上下文，并将凭据和成本掌控在自己手中。
智能体模式：Kilo 内置了专门的模式——Architect 用于规划，Code 用于构建，Debug 用于修复，Ask 用于提问——还支持自定义模式，因此你可以先规划设计方案，然后在各自独立的专注环节中实施。
自定义规则 + MCP：它会读取项目级自定义规则以获取持久上下文，并支持 MCP 服务器（提供 MCP 市场），因此你可以添加外部上下文，例如实时的 Figma 文件或设计工具。
自带密钥：Kilo 在许多供应商上采用 BYOK 模式——Anthropic、OpenAI、Google、OpenRouter 等——或者你也可以使用 Kilo 自己的网关，该网关以供应商成本提供 500 多种模型。
凭据：你自己的供应商 API 密钥（BYOK——Anthropic、OpenAI、Google、OpenRouter 等）或 Kilo 自己的网关
供应商：Kilo Code, Inc.（开源）
许可证：开源
对于设计工作，有两个特性尤为突出。由于它模型无关，你可以将其指向任何一个强大的视觉模型，只要该模型最能读懂参考截图并推理布局。而且因为它是开源的且采用 BYOK 模式，你可以准确检查发送了哪些上下文，并将凭据和成本掌控在自己手中。
智能体模式：Kilo 内置了专门的模式——Architect 用于规划，Code 用于构建，Debug 用于修复，Ask 用于提问——还支持自定义模式，因此你可以先规划设计方案，然后在各自独立的专注环节中实施。
自定义规则 + MCP：它会读取项目级自定义规则以获取持久上下文，并支持 MCP 服务器（提供 MCP 市场），因此你可以添加外部上下文，例如实时的 Figma 文件或设计工具。
自带密钥：Kilo 在许多供应商上采用 BYOK 模式——Anthropic、OpenAI、Google、OpenRouter 等——或者你也可以使用 Kilo 自己的网关，该网关以供应商成本提供 500 多种模型。
凭据：你自己的供应商 API 密钥（BYOK——Anthropic、OpenAI、Google、OpenRouter 等）或 Kilo 自己的网关
供应商：Kilo Code, Inc.（开源）
许可证：开源
为什么开放、不绑定模型的智能体适合设计
Kilo Code 在设计上的优势来自其开放性和模型选择——但与所有智能体一样，品味仍然需要由你提供。
设计上的模型无关：由于由你选择模型，你可以用最能读懂参考截图的视觉模型来驱动 Kilo——并且当出现更好的模型时可以随时切换，而无需改变工作流程。
开放且可检查：Kilo 是开源的，因此你可以准确查看发送了哪些上下文和提示——当你希望智能体重用你真实的设计原语而不是发明一次性样式时，这一点很有用。
在自定义规则中约定：项目自定义规则（以及用于 Figma 的 MCP 服务器）将智能体指向你的令牌、组件和真实规范，使其针对品牌而不是默认外观进行工作。
品味来自你提供的三个输入：设计系统、技能和真实参考图像。
这里传达的教训与每个智能体教给你的相同：Kilo Code 默认没有品味。只有当你为其提供约束——设计系统、美学技能和具体参考——时，它才能产生良好的设计。OpenDesign 恰好打包了这些输入，这就是两者能够配合使用的原因（详见下文）。
设计上的模型无关：由于由你选择模型，你可以用最能读懂参考截图的视觉模型来驱动 Kilo——并且当出现更好的模型时可以随时切换，而无需改变工作流程。
开放且可检查：Kilo 是开源的，因此你可以准确查看发送了哪些上下文和提示——当你希望智能体重用你真实的设计原语而不是发明一次性样式时，这一点很有用。
在自定义规则中约定：项目自定义规则（以及用于 Figma 的 MCP 服务器）将智能体指向你的令牌、组件和真实规范，使其针对品牌而不是默认外观进行工作。
品味来自你提供的三个输入：设计系统、技能和真实参考图像。
这里传达的教训与每个智能体教给你的相同：Kilo Code 默认没有品味。只有当你为其提供约束——设计系统、美学技能和具体参考——时，它才能产生良好的设计。OpenDesign 恰好打包了这些输入，这就是两者能够配合使用的原因（详见下文）。
从零开始为设计配置 Kilo Code
安装顺序：安装 → 连接供应商 → 添加自定义规则 → 添加技能 → 启用浏览器验证。
将设计规则编码：将你的令牌、原语和约定放入 Kilo 的自定义规则中，并将智能体指向它们，这样输出就会匹配某个品牌，而不是默认的通用外观。
添加浏览器验证：接入 Playwright 或浏览器 MCP，让 Kilo 在真实浏览器中渲染，并检查其在各个断点下的输出，而不仅仅是确认构建通过。
使用当前的设置部分获取命令和版本特定细节，这些内容可能会发生变化。
上一个指南中的历史命令示例；请验证链接的供应商文档中的当前语法。
将设计规则编码：将你的令牌、原语和约定放入 Kilo 的自定义规则中，并将智能体指向它们，这样输出就会匹配某个品牌，而不是默认的通用外观。
添加浏览器验证：接入 Playwright 或浏览器 MCP，让 Kilo 在真实浏览器中渲染，并检查其在各个断点下的输出，而不仅仅是确认构建通过。
使用当前的设置部分获取命令和版本特定细节，这些内容可能会发生变化。
# 1. Install the Kilo Code extension from the VS Code\n# (or JetBrains) marketplace, or install the CLI.\n\n# 2. Open your project and sign in / add a provider key\ncd your-project\nkilo # connect your provider (BYOK) or Kilo's gateway\n\n# 3. Add project context\n# create custom rules for this project's design conventions\n\n# 4. Wire the Figma MCP server (optional, for design handoff)\n# add it from the MCP marketplace / MCP settings上一个指南中的历史命令示例；请验证链接的供应商文档中的当前语法。
从截图到界面的循环
在使用 Kilo Code 进行设计时，最具杠杆效应的循环是将参考图像转化为可用的响应式 UI，并不断迭代直到匹配——依靠视觉能力强的模型将输出与参考进行比较。
从你拥有的最清晰的视觉参考开始——并且包含多种状态（桌面端和移动端、悬停、空状态、加载状态），而不仅仅是一张主视觉图。
在提示中要具体；模糊的提示即使在强大的模型下也会产生通用的 UI。
将你的设计系统和约定保留在 Kilo 的自定义规则中，并告诉智能体令牌和规范原语所在的位置。
运行开发服务器，让 Kilo 在真实浏览器中渲染，调整到各个断点以检查结果。
通过让 Kilo 将其实现与截图进行对比来迭代——而不仅仅是确认构建通过。
使用 Architect 模式规划构建，然后切换到 Code 模式，并附上带有具体约束的参考：
保持提示简短且聚焦，提交好的迭代并回滚不好的迭代（在回滚时告诉 Kilo），这样每次都能在干净的基础上进行。
上一个指南中的历史命令示例；请验证链接的供应商文档中的当前语法。
从你拥有的最清晰的视觉参考开始——并且包含多种状态（桌面端和移动端、悬停、空状态、加载状态），而不仅仅是一张主视觉图。
在提示中要具体；模糊的提示即使在强大的模型下也会产生通用的 UI。
将你的设计系统和约定保留在 Kilo 的自定义规则中，并告诉智能体令牌和规范原语所在的位置。
运行开发服务器，让 Kilo 在真实浏览器中渲染，调整到各个断点以检查结果。
通过让 Kilo 将其实现与截图进行对比来迭代——而不仅仅是确认构建通过。
使用 Architect 模式规划构建，然后切换到 Code 模式，并附上带有具体约束的参考：
保持提示简短且聚焦，提交好的迭代并回滚不好的迭代（在回滚时告诉 Kilo），这样每次都能在干净的基础上进行。
# Plan in Architect mode, then build in Code mode:\n> Implement this design from @reference-desktop.png and\n @reference-mobile.png in React + Vite + Tailwind + TypeScript.\n Reuse my existing design-system components and tokens\n from the custom rules.\n Match spacing, layout, and hierarchy; make it responsive.\n Render it in the browser and iterate until it matches the\n references across breakpoints.上一个指南中的历史命令示例；请验证链接的供应商文档中的当前语法。
模式、自定义规则与 MCP
三个扩展点让 Kilo Code 在持续设计工作中变得实用，并且这三个扩展点都能清晰地映射到开放设计工作流上。
模式（Architect → Code）：在 Architect 模式下规划屏幕的结构，然后在 Code 模式下实现它，并在 Debug 模式下修复问题——将设计意图与实现分离。自定义模式允许您编码自己的设计审查流程。
自定义规则：项目自定义规则是存放设计约定的持久位置——包括设计令牌、基础元素和审查清单——每次运行时都会读取，以便代理按照您的品牌工作。
MCP 服务器：Kilo 通过其市场支持 MCP 服务器——这是引入设计上下文和外部工具的可移植方式，最相关的是 Figma MCP 服务器，它可以跨代理工作，而不仅仅是 Kilo。
这些是可移植的、多代理的能力——正是 OpenDesign 旨在编排的东西，而不是每个项目都重新创建。
模式（Architect → Code）：在 Architect 模式下规划屏幕的结构，然后在 Code 模式下实现它，并在 Debug 模式下修复问题——将设计意图与实现分离。自定义模式允许您编码自己的设计审查流程。
自定义规则：项目自定义规则是存放设计约定的持久位置——包括设计令牌、基础元素和审查清单——每次运行时都会读取，以便代理按照您的品牌工作。
MCP 服务器：Kilo 通过其市场支持 MCP 服务器——这是引入设计上下文和外部工具的可移植方式，最相关的是 Figma MCP 服务器，它可以跨代理工作，而不仅仅是 Kilo。
这些是可移植的、多代理的能力——正是 OpenDesign 旨在编排的东西，而不是每个项目都重新创建。
面向设计：Kilo Code 对比 Codex、Claude Code、Cursor 与 Gemini CLI
对于设计工作，没有单一的赢家——每个代理都有不同的优势，经验丰富的团队会将它们组合使用。一个公正的总结：
Kilo Code —— 开源且模型无关，支持 BYOK 并跨多个提供商；Architect/Code 模式和 MCP —— 为每个任务选择自己的模型，并控制成本和凭据
Codex —— 强大的视觉抛光能力，具备前端技能；沙盒异步构建 —— 委托异步构建和可移植的 AGENTS.md 规则
Claude Code —— 具体的设计决策（十六进制色值、间距、字体）和代码库感知的 UX —— 前端推理和大上下文重构
Cursor —— 可视化构建并查看循环，具有实时预览和内联编辑 —— 在 IDE 内进行紧密的迭代和观察 UI 工作
Gemini CLI —— 强大的多模态图像理解和 100 万令牌上下文 —— 大量截图的工作以及在上下文中容纳整个设计系统
反复出现的社区结论是，品味来自人类：在没有技能、参考和约束的情况下，它们默认呈现一种通用的美学。这才是真正需要解决的问题——而且是设计工具形态的问题，而不是模型形态的问题。
代理 — 设计优势 — 最适合
Kilo Code —— 开源且模型无关，支持 BYOK 并跨多个提供商；Architect/Code 模式和 MCP —— 为每个任务选择自己的模型，并控制成本和凭据
Codex —— 强大的视觉抛光能力，具备前端技能；沙盒异步构建 —— 委托异步构建和可移植的 AGENTS.md 规则
Claude Code —— 具体的设计决策（十六进制色值、间距、字体）和代码库感知的 UX —— 前端推理和大上下文重构
Cursor —— 可视化构建并查看循环，具有实时预览和内联编辑 —— 在 IDE 内进行紧密的迭代和观察 UI 工作
Gemini CLI —— 强大的多模态图像理解和 100 万令牌上下文 —— 大量截图的工作以及在上下文中容纳整个设计系统
反复出现的社区结论是，品味来自人类：在没有技能、参考和约束的情况下，它们默认呈现一种通用的美学。这才是真正需要解决的问题——而且是设计工具形态的问题，而不是模型形态的问题。
代理 — 设计优势 — 最适合
常见陷阱，以及如何摆脱“AI 味”外观
关于 AI 生成设计最常见的抱怨是它看起来很通用——柔和的渐变、漂浮的面板、过大的圆角、夸张的阴影，以及一种 Inter 字体和紫色的氛围，让人觉得“明显是 AI 做的”。其他报告的问题包括移动端布局损坏和指令泄露到 UI 文案中。这些都不是 Kilo Code 特有的；它们是任何代理在没有精心策划的设计上下文时运行的结果。
添加审美技能：一个精心策划的设计技能会迫使代理致力于一个真正的方向，而不是默认的外观。
在真实浏览器中验证：使用具备视觉能力的模型在断点处进行渲染和自我检查，以便布局不会在移动端无声地损坏。
提供令牌和参考：真实的设计令牌和参考截图是影响输出质量的最大杠杆。
在自定义规则中编码规则：将“没有英雄卡片、最多两种字体、品牌优先的层次结构”等风格规则放在代理每次运行都会读取的地方。
请注意，每一项缓解措施都是关于给代理一个精心策划的设计上下文。手动为每个项目维护这个上下文，正是 OpenDesign 所消除的辛劳。
添加审美技能：一个精心策划的设计技能会迫使代理致力于一个真正的方向，而不是默认的外观。
在真实浏览器中验证：使用具备视觉能力的模型在断点处进行渲染和自我检查，以便布局不会在移动端无声地损坏。
提供令牌和参考：真实的设计令牌和参考截图是影响输出质量的最大杠杆。
在自定义规则中编码规则：将“没有英雄卡片、最多两种字体、品牌优先的层次结构”等风格规则放在代理每次运行都会读取的地方。
请注意，每一项缓解措施都是关于给代理一个精心策划的设计上下文。手动为每个项目维护这个上下文，正是 OpenDesign 所消除的辛劳。
在 OpenDesign 中使用 Kilo Code 进行设计
OpenDesign 是上述工作流一直需要的开源设计层。它将 Kilo Code 视为第一方适配器，并将其包裹在精心策划的技能和设计系统库、结构化的渲染管道以及本地桌面 UI 中——因此，使 Kilo 表现出色的设计上下文从第一次运行起就存在，而不是每次手动拼凑。两者都是开源且本地优先的，这使得这种搭配非常自然。
使用您自己的提供商密钥（BYOK）或 Kilo 的网关进行身份验证——凭据保留在您的机器上，绝不通过我们代理。
选择一个设计系统和一个技能，然后生成具有一致品味的路演文稿、原型和落地页。
每个工件和 DESIGN.md 文件都存放在您自己的仓库中，而不是托管的云端。
同样的 Kilo Code 代理，同样的密钥——外加一个真实、可移植、开源的设计工作流环绕其中。它是本地优先且开源的，因此您的任何工作或凭据都不会离开您的机器。
安装 OpenDesign 并选择 Kilo Code 作为您的代理。
使用您自己的提供商密钥（BYOK）或 Kilo 的网关进行身份验证——凭据保留在您的机器上，绝不通过我们代理。
选择一个设计系统和一个技能，然后生成具有一致品味的路演文稿、原型和落地页。
每个工件和 DESIGN.md 文件都存放在您自己的仓库中，而不是托管的云端。
同样的 Kilo Code 代理，同样的密钥——外加一个真实、可移植、开源的设计工作流环绕其中。它是本地优先且开源的，因此您的任何工作或凭据都不会离开您的机器。
安装 OpenDesign 并选择 Kilo Code 作为您的代理。
OpenDesign 与 Kilo Code 有关联吗？
没有。OpenDesign 是一个独立的项目；两者都是开源的，但它们是分开的。