延伸阅读
Kilo 延伸阅读
已发布指南中列出的、用于使用 Kilo 进行设计的教程、文档和演示。
Kilo 
OpenDesign 用 Kilo
在 OpenDesign
做设计。
如何在 OpenDesign 中用 Kilo Code 设计界面：你选择的模型、你自己的规则与模式、一个从截图到已审阅文件的产品页任务，以及开始前需要了解的局限。
从 brief 到界面01 / Kilo
您带来想法↗
“从截图生成一个产品页面，
用我选择的任意模型。”
一个完整的 Kilo 设计任务
一个 Kilo 设计任务：从 brief 到界面
完整展示一个任务：你交出的 brief 与约束、返回的产物，以及在完成前仍需运行的检查。下方界面是为本页制作的示意示例，并非 Kilo 实际运行的记录。
1设计 Brief 与约束条件
Brief根据所附截图为一家户外品牌设计商品详情页：图库、价格、尺寸与颜色选项、加入购物袋，以及相关商品。桌面端和手机端。
- 设计系统OpenDesign 纸感画布：Albert Sans，单一绿色强调色
- 断点1440px 桌面端与 390px 移动端，无横向滚动
- 交互图库缩略图、选项选择、加入购物袋、相关商品滚动
- 输出一个自包含的 HTML 文件，带有稳定的
data-od-id挂钩
2分工：您、Kilo 与 OpenDesign
- 你
撰写 brief，选择设计系统并定义验收标准。
- Kilo
规划布局，编写 HTML、CSS 和 JavaScript，并按要求进行修改。
- OpenDesign
提供设计系统与 skill，渲染预览，并将每个版本作为文件存储在项目中。
- 审查
在交付前，检查视觉层级、8px 网格上的间距、两个断点以及每一项交互。
3Kilo 产物：1440px 与 390px 下的产品页面
4交付前审查
Layout
网格与间距
画廊与信息栏遵循 8px 网格；在 1440 下，信息栏高度始终不超过画廊。
Hierarchy
视觉层级
名称、价格，然后是选项；强调色只用于加入购物袋按钮。
Responsive
移动端布局
先展示画廊，再是名称和价格、选项，以及一个全宽按钮；相关商品可滚动查看。
Interaction
交互检查
切换缩略图、选择尺码、加入购物袋、滚动查看相关商品。
Fit
Kilo 适合什么任务，不适合什么任务
Kilo 适用场景
- 与模型无关的截图 → UI。 用最擅长将参考图像转换为响应式标记的视觉能力模型来驱动它，然后对照参考图检查结果。
- 跨提供商 BYOK。 携带您自己的 Anthropic、OpenAI、Google、OpenRouter 等密钥——或使用 Kilo 的网关——让成本和凭证始终掌握在您手中。
- 模式 + 自定义规则 + MCP。 在 Architect 模式下规划，在 Code 模式下构建，用自定义规则承载约定，并通过 Figma MCP server 带入真实设计上下文。
- 开源。 检查每一个 prompt 和上下文负载；没有任何隐藏，Agent 在您的 IDE 或 CLI 中运行。
选择其他工作流的场景
- 你需要可编辑的矢量文件。 产物是 HTML，而非可编辑的设计文档。请查看其他矢量工作流以获取所需的资源格式。
- 没有参考图也没有约束条件。 缺少设计系统或示例时，输出往往趋于千篇一律；请先写好 brief。
- 您没有此 Agent 所需的凭证。 必需：您自己的提供商 API key（自带密钥）或 Kilo 的网关。OpenDesign 不提供也不代理凭证。
- 您的团队使用 OpenCode 或 Aider 工作。这些 Agent 各有专属页面；工作区相同，配置不同。请参见相关 Agent。
兼容性
开始使用 Kilo 前的要求
本指南介绍通过 OpenDesign 桌面应用连接的 Kilo。已核实的公开参考资料截至 2026 年 9 月 6 日。
工具范围Kilo，由 Kilo Code, Inc. 出品
Kilo Code 是 Kilo Code, Inc. 出品的开源 AI 编程 Agent。它运行在 VS Code、JetBrains IDE 及终端中，读取您的代码库、编辑文件并执行命令。本页介绍的是通过 OpenDesign 使用 Kilo 来设计界面，而非 Kilo 自身的界面。OpenDesign 的安装说明列出了可用的 Agent。
账户与身份验证您自己的供应商 API 密钥（BYOK）或 Kilo 的
您自己的供应商 API 密钥（BYOK）或 Kilo 的网关。使用您自己的供应商密钥（BYOK）或 Kilo 的网关进行身份验证——凭证始终留在您的设备上。本页不承诺任何配额或价格。
系统与版本桌面应用或源码
请查看下载页面获取桌面版构建。源码 quickstart 中列出的 Node.js 与 pnpm 要求适用于从源码运行，而非安装桌面包。此处未验证最低兼容的 Kilo 版本。
连接检查成功的标志
按照您安装版本所显示的连接说明操作，然后运行一个小任务。确认 Kilo 已处理该任务，且产物能够打开。仅完成下载并不代表连接已就绪。
从桌面应用开始
三步完成 Kilo 设置
先下载，再针对您安装的版本完成 Kilo 设置，然后检查一个小结果。按此路径操作无需从源码构建 OpenDesign。
- 1
下载 OpenDesign 桌面应用
选择适合您电脑的软件包，安装并打开该应用。
下载 OpenDesign检查点桌面应用会打开。已经安装过？请进入下一步；无需再次下载。 - 2
准备您的 Kilo 连接
按照已安装版本中的 Kilo 说明操作。使用您自己的 provider key（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 设置说明；请查阅供应商文档以获取当前命令。
检查点确认目标 Agent 与账户。如果不可用，请在尝试更大任务之前先检查兼容性。 - 3
运行一个小型 Kilo 任务
使用一个小 brief，以便您评估整个流程，包括一次修改。
入门 brief构建一个设置页面，包含个人资料表单和保存确认提示。使用我的设计规则。在桌面和移动端宽度下进行检查。
检查点打开结果，测试保存状态，并提出一个具体的修改请求。生成的文件是评审的开始，而不是结束。
若要从源代码运行 OpenDesign，请参阅技术快速入门。
Kilo 设计工作流
五步完成 Kilo 设计工作流
同一个产品页面任务，从 brief 到验证文件全程跟踪。每一步都列出您提供的内容、Kilo 执行的操作、OpenDesign 贡献的内容以及您需要检查的内容。
- 1
设计 Brief
用简明语言写三到六行，说明目标受众、该界面要完成的任务，以及适用的平台。
- 您撰写 brief；如有参考截图，请附上。
- Kilo读取 brief 和项目的指令文件；遇到含糊之处会提出询问。
- OpenDesign提供项目、prompt 界面，以及对应产物类型的 skill。
- 检查确认 brief 中已写明验收标准。现在补充比生成之后再补充成本更低。
- 2
设计约束
一套设计系统加几条硬性规则。正是这些将符合品牌调性的产出与千篇一律的效果区分开来。
- 您选择一个设计系统；说明断点及必须使用的组件。
- Kilo在写下第一行代码之前，将 DESIGN.md 中的 token 和风格规则加载到上下文中。
- OpenDesign提供设计系统库，并将所选设计系统绑定到 skill 模板中。
- 检查确认 token 与您的品牌相符：单一强调色、正确的字体、正确的圆角。
- 3
生成界面
Kilo 编写一个自包含的 HTML 文件：布局、样式、交互和稳定的 hook。
- 您等待即可，或回答澄清性问题。无需进行任何配置。
- Kilo规划各个部分，编写 HTML、CSS 和 JavaScript，运行该文件并修复失败之处。
- OpenDesign将产物保存到项目文件夹中，并为预览建立索引。
- 检查此步骤暂无需检查。请在文件渲染后进行判断，而非查看源代码。
- 4
预览
文件会以你要求的宽度在 OpenDesign 中渲染。设计的好坏就在这里被检验。
- 你切换宽度，点击交互，在元素上留下评论。
- Kilo读取您在预览上的评论，并准备下一版修订。
- OpenDesign渲染预览，暴露
data-od-id目标以供评论和编辑。 - 检查层级结构、对比度、390px 下的溢出、焦点状态，以及强调色是否使用得克制。
- 5
修订与验证
通过在预览中指向元素来请求修改。每次修订都是一个新文件，绝不会被静默覆盖。
- 你把评论转化为请求；决定任务何时完成。
- Kilo就地应用更改并重新运行该文件。
- OpenDesign将各版本并排保留；完成后导出图片或 HTML。
- 检查只重新检查发生变化的区域，然后在每个断点上完整检查一次整页。
资源
Kilo 设计资源
限制
Kilo 的限制、人工检查与后备方案
- 范围它与模型无关，支持跨多个 provider 的 BYOK，具备 Architect/Code/Debug/Ask 模式和 MCP 支持，因此您可以自行选择模型并掌控凭据。本页面介绍的是作为已连接 OpenDesign 的 Agent 的 Kilo，并非 Kilo 的全部功能。
- 使用限额使用限额和费用取决于您使用的凭据（您自己的 provider API key 或 Kilo 的网关）。本页面不对免费额度做任何说明。
- 网络本地项目文件并不代表离线推理。在分享敏感输入之前，请检查你的 Agent 供应商设置和数据政策。
- 输出为 HTML产物是 HTML 文件，而非矢量设计文件。
- 人工审查可访问性、真实内容、品牌契合度和交互正确性均由你在预览中审查。将 Agent 的任何自检视为初步检查。
- 后备方案如果 Agent 不可用或任务失败，请检查所安装版本的连接说明和身份验证。在更改配置前，请保留错误信息和最后一个可用的产物。
常见问题
关于 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 开始第一个设计任务
从一个小任务开始，评估往返效果，然后再提交真实的 brief。请选择与您的环境相符的选项；本页不会自动检测。