用 Kilo Code 做设计。

Kilo Code 究竟是什么

Kilo Code 是由 Kilo Code, Inc. 打造的开源 AI 编码 agent。它以 VS Code 扩展、JetBrains 系列 IDE 中的插件以及命令行界面的形式运行——读取你的代码仓库、编辑文件、执行命令，并从自然语言任务出发去规划和验证工作，而不只是补全几行代码。它最鲜明的特点是模型无关：由你选择驱动它的模型，并自带你的供应商密钥。

对设计工作而言，有两点格外突出。因为它模型无关，你可以让它接入最能读懂参考截图、最会推断布局的强力视觉模型。又因为它开源且支持 BYOK，你可以精确查看发送了哪些上下文，并把凭证与成本牢牢掌握在自己手中。

• Agent 模式: Kilo 自带几种专门模式——Architect 负责规划、Code 负责构建、Debug 负责修复、Ask 负责答疑——还可自定义模式，于是你可以先规划设计，再在各自专注的环节里实现它。
• 自定义规则 + MCP: 它会读取项目级的自定义规则以保留持久上下文，并支持 MCP 服务器（还有 MCP 市场），于是你可以接入外部上下文，比如一份在线的 Figma 文件或设计工具。
• 自带密钥: Kilo 在众多供应商之间支持 BYOK——Anthropic、OpenAI、Google、OpenRouter 等等——你也可以使用 Kilo 自家的网关，它按供应商成本提供 500 多个模型。

• 供应商：Kilo Code, Inc.（开源）
• 凭证：你自己的供应商 API 密钥（BYOK——Anthropic、OpenAI、Google、OpenRouter 等）或 Kilo 自家网关
• 许可：开源

为什么一个开放、模型无关的 agent 适合设计

Kilo Code 在设计上的优势来自开放性和模型选择权——但和每一个 agent 一样，品味仍然得由人来提供。

• 天生模型无关: 因为模型由你来选，你可以用最能读懂参考截图的视觉模型来驱动 Kilo——并在出现更好的模型时随时切换，无需改动工作流。
• 开放且可审查: Kilo 是开源的，所以你能精确看到发送了哪些上下文和提示词——当你希望 agent 复用你真实的设计原语、而不是凭空造出一次性样式时，这一点很有用。
• 把规范写进自定义规则: 项目级自定义规则（再加一个 Figma 的 MCP 服务器）把 agent 指向你的 tokens、组件和真实规格，于是它是在对照一个品牌工作，而不是套用默认外观。

这个道理每个 agent 都在教我们：Kilo Code 默认并没有品味。只有当你给它约束——一套设计系统、一个审美 skill 和具体的参考图——它才能产出优秀的设计。Open Design 恰好把这些输入打包好了，这正是两者契合的原因（下文详述）。

从零开始配置 Kilo Code 做设计

下面是从一台干净的机器到一个能构建并验证 UI 的 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

# 3. Add project context
#    create custom rules for this project's design conventions

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add it from the MCP marketplace / MCP settings

• 把你的设计规则编码下来: 把你的 tokens、原语和规范放进 Kilo 的自定义规则，并把 agent 指向它们，让输出对齐一个品牌，而不是默认套上千篇一律的外观。
• 加上浏览器验证: 接入 Playwright 或浏览器 MCP，让 Kilo 在真实浏览器中渲染，并跨各个断点检查输出，而不只是确认构建通过。

截图到 UI 的工作流

用 Kilo Code 杠杆最高的设计回路，是把一张参考图变成可用的响应式 UI，并不断迭代直到它匹配为止——借助一个视觉模型把输出对照参考图反复比对。

1. 从你手上最清晰的视觉参考开始——并包含多种状态（桌面端和移动端、悬停、空态、加载态），而不只是一张主视觉图。
2. 提示词要具体；含糊的提示词即便配上强力模型也只会产出千篇一律的 UI。
3. 把你的设计系统和规范放进 Kilo 的自定义规则，并告诉 agent tokens 和标准原语在哪里。
4. 跑一个开发服务器，让 Kilo 在真实浏览器中渲染，并缩放到各个断点来检查结果。
5. 让 Kilo 把自己的实现对照截图反复比对来迭代——而不只是确认它能构建通过。

用 Architect 模式规划构建，然后切到 Code 模式，附上你的参考图并给出具体约束：

# Plan in Architect mode, then build in Code mode:
> Implement this design from @reference-desktop.png and
  @reference-mobile.png in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens
  from the custom rules.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the
  references across breakpoints.

让提示词保持小而专注，把好的迭代提交、把坏的回退（回退时告诉 Kilo），这样每一轮都建立在一个干净的基础之上。

模式、自定义规则与 MCP

三个扩展点让 Kilo Code 在持续的设计工作中切实可用，而这三者都能干净利落地映射到一套开放的设计工作流上。

• 模式（Architect → Code）: 在 Architect 模式下规划一个页面的结构，然后在 Code 模式下实现它，再在 Debug 模式下修复问题——把设计意图与实现分开。自定义模式还能让你编码出一套自己的设计评审环节。
• 自定义规则: 项目级自定义规则是你设计规范的长久归宿——tokens、原语和评审清单——每次运行都会读取，让 agent 对照你的品牌工作。
• MCP 服务器: Kilo 通过它的市场支持 MCP 服务器——这是引入设计上下文和外部工具的可移植方式，最相关的是一个 Figma 的 MCP 服务器，它们跨 agent 通用，不止限于 Kilo。

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

做设计：Kilo Code 对比 Codex、Claude Code、Cursor、Gemini CLI

设计工作没有单一赢家——每个 agent 都各有所长，有经验的团队会把它们叠加使用。一份公允的概括：

社区反复得出的结论是：品味来自人类——它们在缺少 skill、参考图和约束时，都会默认走向千篇一律的审美。这才是真正要解决的问题——而且它的形状是设计工具，而非模型。

陷阱，以及如何避开“AI 流水线感”的样子

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

• 加一个审美 skill: 一个精选的设计 skill 会逼着 agent 投入一个真实的方向，而不是套用默认外观。
• 在真实浏览器中验证: 用一个视觉模型跨断点渲染并自检，这样布局就不会在移动端悄无声息地崩坏。
• 提供 tokens 和参考图: 真实的设计 tokens 和参考截图，是撬动输出质量最大的那根杠杆。
• 把规则编码进自定义规则: 把“不要 hero 卡片、最多两种字体、品牌优先的层级”这类风格规则放在 agent 每次运行都会读到的地方。

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

在 Open Design 中用 Kilo Code 做设计

Open Design 正是上文那套工作流一直在呼唤的、开源的设计层。它把 Kilo Code 当作一等公民适配器，并在其外围包上一套精选的 skill 与设计系统库、一条结构化的渲染流水线和一个本地桌面 UI——于是让 Kilo 出色的那份设计上下文从第一次运行起就在那里，而不必每次都手动拼凑。两者都是开源、本地优先的，这让它们的搭配水到渠成。

1. 安装 Open Design，并选择 Kilo Code 作为你的 agent。
2. 用你自己的供应商密钥（BYOK）或 Kilo 的网关进行认证——凭证留在你的机器上，绝不经我们中转。
3. 选定一套设计系统和一个 skill，然后以一致的品味生成演示稿、原型和落地页。
4. 每一份产物和 DESIGN.md 文件都存在你自己的仓库里，而不是托管的云端。

还是同一个 Kilo Code agent、同一套密钥——只是外围多了一套真实、可移植、开源的设计工作流。它本地优先且开源，所以关于你工作或凭证的一切都不会离开你的机器。

常见问题

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

   能——只要上下文里有一个审美 skill、一套设计系统和真实的参考图，Kilo Code 就能产出生产级的响应式 UI，再由一个视觉模型把输出对照参考图来验证。缺了这份上下文，它往往会默认走向千篇一律的外观，而这正是 Open Design 填补的空白。

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

   Kilo Code 是开源的，安装免费。你自带供应商 API 密钥（BYOK）并直接向该供应商付费，或者按供应商成本使用 Kilo 自家网关。无论哪种方式，Open Design 都绝不中转你的凭证。

3. 03 Kilo Code 在设计上具体好在哪里？ +

   它模型无关且开源，所以你可以用最能读懂参考截图的视觉模型来驱动它，精确查看发送了哪些上下文，并把成本与凭证掌握在自己手中。品味仍然来自你提供的设计系统、skill 和参考图。

4. 04 前端设计选 Kilo Code 还是 Claude Code？ +

   两者都很强。Claude Code 以具体、对代码库有感知的设计决策著称；Kilo Code 的优势在于它开源、模型无关且支持 BYOK，模型由你来选。许多团队两者并用——Open Design 让你在不改动设计工作流的前提下切换 agent。

5. 05 我该如何把 Kilo Code 连到 Figma？ +

   从 Kilo 的 MCP 市场或 MCP 设置里添加一个 Figma 的 MCP 服务器。这样 Kilo 就能拉取真实的设计上下文——组件、变量、布局数据——让生成的代码与源头一致，而不是近似还原。

6. 06 Open Design 和 Kilo Code 有关联吗？ +

   没有。Kilo Code 是 Kilo Code, Inc. 的产品；Open Design 是一个独立的开源项目，把它作为一等公民适配器来支持。两者恰好都是开源的，但它们是各自独立的项目。

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

   安全——Open Design 本地优先且开源。你的文件、产物和 DESIGN.md 都留在你自己的仓库里，你的供应商凭证由你的 agent 直接使用，绝不经 Open Design 服务器中转。