Kimi OpenDesign

用 Kimi
在 OpenDesign
做设计。

如何在 OpenDesign 中使用 Kimi CLI 设计界面:以参考截图作为输入,以 AGENTS.md 作为规则手册,一个从 brief 到审阅完成文件的通知偏好设置任务,以及开始前需要了解的限制。

从 brief 到界面01 / Kimi
您带来想法↗

“人们
一分钟内就能完成的通知设置。”

示意性界面 · 非实际产品录屏
本页内容 示例
  1. 示例
  2. 适用场景
  3. 兼容性
  4. 环境搭建
  5. 工作流
  6. 资源
  7. 局限性
  8. 常见问题

一个完整的 Kimi 设计任务

一个 Kimi 任务:简报入,界面出

将通知偏好任务走完整个循环:你交出的简报和约束、返回的产物,以及仍由你负责的检查。下方界面是为此页面制作的插图,并非从 Kimi 会话中截取。

1设计 Brief 与约束条件

Brief

为协作应用设计一个通知偏好设置界面:渠道(电子邮件、推送、应用内)、免打扰时段、按项目覆盖。从所附参考中提取语气,而非其布局。桌面端和手机端。

  • 设计系统OpenDesign 纸感画布——Albert Sans,单一绿色强调色
  • 断点1440px 桌面端和 390px 手机端,无横向滚动
  • 交互开关、免打扰时段的时间选择器、可展开的按项目行
  • 输出一个自包含的 HTML 文件,其 data-od-id 钩子保持稳定

2谁做什么:你、Kimi、OpenDesign

  • 你

    你撰写简报、选择设计系统并设定验收标准。

  • Kimi

    Kimi 规划布局、编写 HTML、CSS 和 JavaScript,并按需修改。

  • OpenDesign

    OpenDesign 提供设计系统和技能、渲染预览,并将每次修订保存为项目中的文件。

  • 审查

    视觉层级、8px 网格间距、两个断点以及每个交互都在交付前接受检查。

3Kimi 的产物:1440px 和 390px 下的通知设置

Kimi 的产物:1440px 和 390px 下的通知设置 — 桌面端
示意性示例

4交付前审查

Layout

网格与间距

各分区、行和保存操作都落在 8px 网格上;时间选择器与开关对齐。

Hierarchy

视觉层级

渠道名称比辅助文本更突出,强调色只出现在已启用的开关上。

Responsive

移动端布局

各分区折叠为分段切换器;每行在右侧保留单个开关。

Interaction

交互检查

切换一个渠道、设置静默时段、展开一个项目覆盖设置。

Fit

Kimi 适合的场景——以及不适合的场景

Kimi 适合以下场景

  • Agentic 参考 → UI。 长周期 Kimi K2 编码将你的参考转化为响应式标记,然后在真实浏览器中对照检查渲染结果。
  • 256k token 上下文。 你的设计系统、组件库和参考集可以一次性全部容纳,因此输出会复用你实际拥有的原语。
  • AGENTS.md + MCP。 你的约定随上下文文件一起传递;Figma MCP 服务器将真实设计上下文拉入代码。
  • 开源且 BYOK。 Apache-2.0,通过 OAuth 登录或你自己的 Moonshot API 密钥认证,并同时提供 OpenAI 和 Anthropic 兼容端点。

选择其他工作流的场景

  • 你需要可编辑的矢量文件。 返回的是 HTML,而不是可编辑的设计文档——你需要为所需素材格式寻找单独的矢量工作流。
  • 你没有参考也没有约束。 没有设计系统或示例,输出会偏向通用外观;在生成前先撰写简报。
  • 你没有此代理所需的凭证。 需要你自己的 Moonshot API 密钥。OpenDesign 既不提供也不代理凭证。
  • 你的团队使用 Qwen 或 DeepSeek。 这些代理有自己的页面;工作区可以沿用,设置则不行。参见 相关代理。

兼容性

开始前的 Kimi 要求

此处一切内容都涉及通过 OpenDesign 桌面应用连接的 Kimi。已发布的参考文献检查于 2026 年 9 月 6 日。

工具范围Kimi,由 Moonshot 出品

Kimi CLI 是 Moonshot AI 的开源(Apache-2.0)终端代理,运行在 Kimi K2 模型系列上:它读取你的代码库、编辑文件、运行命令、搜索文件并获取网页。此页面介绍的是在 OpenDesign 内使用 Kimi 设计界面,而不是 Kimi 自身的界面。OpenDesign 的 设置说明 列出了可用的代理。

账户与身份验证Moonshot API key(BYOK)

Moonshot API 密钥(BYOK)。用它认证,凭证会留在你的机器上。此页面不承诺任何配额或价格。

系统与版本桌面应用或源码

桌面版构建位于下载页面。源码快速入门中的 Node.js 和 pnpm 要求属于从源码运行,而不是安装桌面包。最低兼容的 Kimi 版本:此处未验证。

连接检查成功的标志

按你已安装版本显示的连接说明操作,然后运行一个小任务。确认 Kimi 处理了它,并且产物可以打开;仅下载本身并不能证明连接可用。

从桌面应用开始

Kimi 三步设置

从下载开始,完成你所安装版本的 Kimi 设置,然后检查一个小任务。此路径不需要从源码构建 OpenDesign。

  1. 1

    下载 OpenDesign 桌面应用

    选择适合你机器的包,安装它,打开应用。

    下载 OpenDesign
    检查点
    桌面应用打开。已经安装?跳过——无需再次下载。
  2. 2

    准备您的 Kimi 连接

    遵循已安装版本附带的 Kimi 说明。使用你的 Moonshot API 密钥(BYOK)进行认证——凭证会留在你的机器上。

    Kimi CLI 文档 — 快速入门
    # 1. Install Kimi CLI (uses uv; Python 3.12–3.14, 3.13 recommended)
    curl -LsSf https://code.kimi.com/install.sh | bash
    # or, if you already have uv:
    uv tool install --python 3.13 kimi-cli
    
    # 2. Start it in your project and authenticate on first run
    cd your-project
    kimi              # then run /login: OAuth via Kimi Code, or paste a Moonshot API key

    摘自已发布指南中的 Kimi 设置说明;请在供应商文档中确认当前命令。

    检查点
    确认预期的代理和账户。如果不可用,请先检查兼容性,再扩大任务规模。
  3. 3

    运行一个小型 Kimi 任务

    给它一份你能记住的简报,以便整个循环——包括一次修订——保持可评判。

    入门 brief

    构建一个设置页面,包含个人资料表单和保存确认提示。使用我的设计规则。在桌面和移动端宽度下进行检查。

    检查点
    打开结果,测试保存状态并请求一项具体更改。生成开启审查;它并不结束审查。

改为从源码运行 OpenDesign?请遵循 技术快速入门。

Kimi 设计工作流

从简报到你审查过的 Kimi 文件的五个步骤

一个通知偏好设置界面,从你的简报一路走到你验证过的文件。每一步都区分你的输入、Kimi 的工作、OpenDesign 的贡献和你自己的检查。

  1. 1

    设计 Brief

    三到六行平实语言。说明界面面向谁、必须做什么,以及哪些平台重要。

    • 您你撰写简报,并在有参考截图时附上它。
    • KimiKimi 阅读简报以及项目的 AGENTS.md 指令文件,并在请求含糊时提问。
    • OpenDesignOpenDesign 提供项目、提示界面以及匹配产物类型的技能。
    • 检查检查简报是否列明验收标准。在生成前写下它们,比事后补写成本更低。
  2. 2

    设计约束

    一个设计系统加上几条硬性规则。这种组合让输出保持品牌化,而非千篇一律。

    • 您选择设计系统,然后说明断点以及必须出现的组件。
    • KimiKimi 在编写任何代码前,将 DESIGN.md token 和姿态规则加载到上下文中。
    • OpenDesignOpenDesign 提供设计系统库,并将你的选择绑定到技能模板中。
    • 检查你的检查:token 与品牌匹配——单一强调色、正确字体、正确圆角。
  3. 3

    生成界面

    Kimi 生成一个自包含的 HTML 文件——布局、样式、交互、稳定钩子。

    • 您你只需等待,或回答澄清问题。无需配置。
    • KimiKimi 规划分区、编写 HTML、CSS 和 JavaScript、运行文件并修复失败。
    • OpenDesignOpenDesign 将产物存储在项目文件夹中,并为其建立索引以供预览。
    • 检查暂时没有——在文件渲染后评估它,而不是通过阅读源码。
  4. 4

    预览

    OpenDesign 会按你指定的宽度渲染文件。你就在这里评判设计。

    • 你你切换断点、试用交互,并对各个元素发表评论。
    • KimiKimi 会读取你的预览评论并准备下一版修订。
    • OpenDesignOpenDesign 渲染预览,并暴露 data-od-id 目标,供评论和编辑使用。
    • 检查检查层级、对比度、390px 下的溢出、焦点状态,以及强调色是否保持克制。
  5. 5

    修订与验证

    通过在预览中指向元素来请求更改。每次修订都会成为一个新文件;未经提示不会覆盖任何内容。

    • 你你将评论转化为请求,并决定工作何时完成。
    • KimiKimi 就地应用更改并重新运行文件。
    • OpenDesignOpenDesign 并排保留各版本,并在你完成时导出图像或 HTML。
    • 检查仅重新检查更改区域,然后在每个断点检查一次完整页面。

资源

Kimi 设计资源

限制

Kimi 限制、手动检查与回退方案

  • 适用范围Kimi K2 模型针对智能体式、长周期编码进行了调优;上下文窗口最高可达 256k tokens,足以一次性容纳整个设计系统。范围说明:本页介绍的是接入 OpenDesign 的 Kimi 智能体,而非 Kimi 的每一项功能。
  • 使用限额使用限制和费用取决于你自带的凭证(Moonshot API key)。此处不主张任何免费额度。
  • 网络你的项目文件保存在本地,但推理并非离线进行。在发送敏感输入前,请检查提供商设置和数据政策。
  • 输出为 HTML返回的是 HTML 文件,而不是矢量设计文档。
  • 人工审查你在预览中审查可访问性、真实内容、品牌契合度和交互正确性。智能体运行的任何自检都只是第一遍检查。
  • 后备方案当智能体不可用或任务失败时,请查阅你所安装版本的连接说明和身份验证。在更改配置前,保存错误信息和最后一个可用的工件。

常见问题

关于 Kimi 与 OpenDesign 的常见问题

Kimi CLI 真的能处理设计工作吗?
可以——在具备审美 skill、设计系统以及真实参考图像作为上下文的情况下,Kimi CLI 能够生成可用于生产环境的响应式 UI,其具备 Agent 能力的 Kimi K2 模型还能对照参考图渲染并验证输出结果。若缺少这些上下文,它往往会退回到通用外观,这正是 OpenDesign 所填补的空白。
用 Kimi CLI 做设计需要付费吗?
您需要自带凭证:通过 Kimi Code OAuth 登录进行授权,或粘贴 Moonshot API key(BYOK),费用由 Moonshot 平台计费。无论哪种方式,OpenDesign 都不会代理您的凭证。
Kimi CLI 为何适合设计?
有两点:一是 Kimi K2 模型针对具备 Agent 能力的长周期编码和工具使用进行了调优,因此 Agent 能够持续构建和打磨,直到得到可用的结果;二是上下文窗口最高可达 256k token,足以一次性容纳整个设计系统和参考素材集。这两点都有帮助——但审美水准仍然来自您提供的设计系统、skill 和参考资料。
前端设计该用 Kimi CLI 还是 Claude Code?
两者都很出色。Claude Code 以具体且能感知代码库的设计决策著称;Kimi CLI 的优势在于其具备 Agent 能力的 Kimi K2 模型,以及配合 BYOK 经济模式的大上下文。许多团队会同时使用两者——OpenDesign 让您在切换 Agent 时无需改变设计工作流。
如何将 Kimi CLI 接入 Figma?
在 Kimi CLI 中运行 /mcp-config 以添加并验证 Figma MCP 服务器。之后 Kimi 便可拉取真实的设计上下文——组件、变量、布局数据——从而使生成的代码与源文件一致,而不只是近似还原。
Kimi CLI 究竟是什么
Kimi CLI 是 Moonshot AI 为终端提供的开源(Apache-2.0)AI agent。它会读取你的仓库、编辑文件、运行 shell 命令、搜索文件、抓取网页,并根据获得的反馈决定下一步——从自然语言任务出发进行规划与验证,而不只是补全代码行。它是一款 Python 工具,通过 uv 安装,背后驱动的是 Kimi K2 模型系列。

对于设计工作而言,有两点尤为突出。Kimi K2 模型明确针对 agentic、长周期编码与工具使用做了调优,因此该 agent 能够把多步骤的构建一路推进到可用的结果。而在近期 K2 版本中,上下文窗口最高可达 256k tokens,足以一次性容纳你整套设计系统、组件库和参考集,而无需将它们摘要压缩掉。

上下文文件:Kimi CLI 会读取 AGENTS.md 文件以获取持久的项目上下文——这正是编码你的设计规范、tokens 和评审清单的天然位置。对于尚无该文件的项目,运行 /init 即可生成一个。

MCP、ACP + 子 agent:它通过 /mcp-config 以对话方式管理 MCP 服务器,通过 Agent Client Protocol(kimi acp)将会话暴露给 Zed 和 JetBrains,并能在隔离的上下文中派发内置的 coder、explore 和 plan 子 agent。

登录或 BYOK:首次启动时,/login 可让你通过 OAuth(Kimi Code)授权,或输入你自己的 Moonshot API key;Kimi 平台还提供兼容 OpenAI 和 Anthropic 的端点。

凭据:Moonshot API key(BYOK),或通过 Kimi Code 进行 OAuth 登录

厂商:Moonshot AI

许可证:Apache-2.0,开源
为什么 agentic 的 K2 模型与大上下文适合设计
Kimi CLI 的设计优势来自两个模型特性——但是,和每一个 agent 一样,品味仍须由你来提供。

Agentic、长周期编码:Kimi K2 模型针对工具使用和多步骤工作做了优化,因此该 agent 能够拿着一份参考和一个简要需求,真正去构建、运行并打磨 UI,而不是止步于初稿。

大上下文窗口:近期 K2 版本最高可达 256k tokens,意味着整套设计系统、tokens 和许多参考状态可以一次性容纳,因此该 agent 会复用你真实的基元,而不是凭空发明一次性的样式。

AGENTS.md 中的约定:一份 AGENTS.md(外加像 Figma 这样的 MCP 服务器)会把 agent 指向你的 tokens、组件和真实规格,让它围绕一个品牌来工作,而不是套用默认外观。

品味来自你提供的三种输入:一套设计系统、一项 skill,以及真实的参考图片。

这个教训是每个 agent 都会教的同一个:Kimi CLI 默认没有品味。当你给它约束——一套设计系统、一项美学 skill 和具体的参考——它才会产出好的设计。OpenDesign 恰好打包了这些输入,这也是两者契合的原因(详见下文)。
从零开始为设计设置 Kimi CLI
设置流程:安装 → 身份验证 → 配置 AGENTS.md → 添加技能 → 启用浏览器验证。

编码你的设计规则:将你的令牌、基础组件和约定放入 AGENTS.md,并让 Kimi 以它们为准,这样输出就会符合某个品牌,而不是默认变成通用外观。

添加浏览器验证:接入 Playwright 或浏览器 MCP,让 Kimi 在真实浏览器中渲染,并跨断点检查其输出,而不只是确认构建通过。

使用当前设置部分的命令和版本特定细节;这些内容可能会变化。

# 1. 安装 Kimi CLI(使用 uv;Python 3.12–3.14,推荐 3.13) curl -LsSf https://code.kimi.com/install.sh | bash # 或者,如果你已经安装了 uv: uv tool install --python 3.13 kimi-cli # 2. 在项目中启动它,并在首次运行时进行身份验证 cd your-project kimi # 然后运行 /login:通过 Kimi Code 进行 OAuth,或粘贴 Moonshot API 密钥 # 3. 生成项目上下文 /init # 为此项目搭建一个 AGENTS.md # 4. 接入 MCP 服务器(可选,例如用于设计交接的 Figma) /mcp-config # 以对话方式添加、编辑并验证 MCP 服务器
来自上一份指南的历史命令示例;请在链接的供应商文档中验证当前语法。
从参考到 UI 的循环
使用 Kimi CLI 时,最具杠杆效应的设计循环是把参考材料变成可运行、响应式的 UI,并不断迭代直到匹配——把你的参考图交给智能体,并让它在真实浏览器中把渲染输出与这些参考图进行对比。

从你拥有的最清晰参考图开始——并包含多种状态(桌面端和移动端、悬停、空状态、加载中),而不仅仅是一张主视觉图。

提示词要具体;模糊的提示词即使使用强大的智能体也会产生通用 UI。

将你的设计系统和约定放在 AGENTS.md 中,并告诉 Kimi 令牌和规范基础组件位于哪里。

运行开发服务器,让 Kimi 在真实浏览器中渲染,并通过调整到各个断点来检查结果。

通过让 Kimi 将其实现与参考图对比来迭代——而不仅仅是确认它能构建。

让 Kimi 指向你的参考图和开发服务器,然后给出具体约束:

保持提示词简短且聚焦,提交好的迭代并还原不好的迭代(在还原时告诉 Kimi),这样每一轮都建立在干净的基础上。当某个流程难以用语言描述时,Kimi CLI 也可以接收一段简短屏幕录制或演示片段。

kimi # 在提示词中: > 在 ./references 中实现设计(reference-desktop.png、 reference-mobile.png),使用 React + Vite + Tailwind + TypeScript。 复用我在 AGENTS.md 中现有的设计系统组件和令牌。 匹配间距、布局和层级;使其具备响应式。 运行开发服务器,在浏览器中渲染,并迭代直到它 跨断点匹配参考图。
来自上一份指南的历史命令示例;请在链接的供应商文档中验证当前语法。
AGENTS.md、MCP 与子代理
三个扩展点让 Kimi CLI 足以支撑持续的设计工作,而且这三者都能干净地映射到开放的设计工作流上。

AGENTS.md 上下文:项目规则存放在仓库根目录的 AGENTS.md 中。它是你设计约定的长期归属地,每次运行都会被读取——而且它与其他代理使用的是同一种可移植格式。

MCP 服务器:通过 /mcp-config 以对话方式添加 MCP 服务器——这是引入设计上下文和外部工具的可移植方式,其中最相关的是 Figma MCP 服务器,它们可跨代理工作,而不只是 Kimi。

子代理与插件市场:在隔离上下文中调度内置的 coder、explore 和 plan 子代理,并从市场或任意 GitHub 仓库安装技能、MCP 服务器和数据源,以收集参考资料并运行验证循环。

这些都是可移植的多代理能力——正是 OpenDesign 生来就要去编排、而非在每个项目中重复造轮子的东西。
Kimi CLI 与 Codex、Claude Code、Cursor、Gemini CLI 在设计场景的对比
设计工作没有唯一赢家——每个代理各有长处,经验丰富的团队会把它们组合起来使用。一个公允的总结:

Kimi CLI —— 面向长周期编码和工具调用调优的智能体式 Kimi K2 模型,具备大上下文;开源且支持 BYOK —— 多步骤构建,以及以可负担的成本把整套设计系统保持在上下文中

Codex —— 借助前端技能实现出色的视觉打磨;沙箱化的异步构建 —— 委派的异步构建与可移植的 AGENTS.md 规则

Claude Code —— 具体的设计决策(十六进制色值、间距、字体)与具备代码库感知的 UX —— 前端推理与大上下文重构

Cursor —— 具备实时预览与内联编辑的可视化“边构建边查看”循环 —— 在 IDE 内进行紧凑的迭代并观察式 UI 工作

Gemini CLI —— 强大的多模态图像理解能力和 1M token 上下文;免费额度 —— 大量截图的工作与超大上下文

社区反复得出的结论是:品味来自人。没有技能、参考资料和约束,它们全都会默认走向千篇一律的审美。这才是真正要解决的问题——而且它是设计工具形态的问题,而非模型形态的问题。

代理 —— 设计优势 —— 最适合
常见陷阱,以及如何避免“AI 味”外观
关于 AI 生成设计最常见的抱怨,就是它看起来千篇一律——柔和的渐变、悬浮面板、过大的圆角、夸张的阴影,加上 Inter 字体配紫色的那股气质,让人一眼就“看出这是 AI 做的”。其他被反馈的问题还包括移动端布局崩坏,以及指令泄漏到 UI 文案中。这些都不是 Kimi CLI 独有的问题;任何智能体在没有经过精心整理的设计上下文的情况下运行时,都会出现这些情况。

添加美学技能:一份经过精心整理的设计技能会迫使智能体确定一个真正的设计方向,而不是套用默认外观。

在真实浏览器中验证:让 Kimi 渲染并跨断点自检,这样布局就不会在移动端悄悄崩坏。

提供 token 和参考:真实的设计 token 和参考截图是影响输出质量的最大单一杠杆。

把规则写进 AGENTS.md:将“不要 hero 卡片、最多两种字体、品牌优先的层级”这类规则放在智能体每次运行都会读取的地方。

注意,每一项缓解措施都围绕着为智能体提供经过精心整理的设计上下文。按项目手动维护这套上下文,正是 OpenDesign 所消除的苦差事。
在 OpenDesign 中使用 Kimi CLI 进行设计
OpenDesign 正是上文工作流一直在要求的那层开源设计层。它将 Kimi CLI 视为第一方适配器,并为之包裹上经过精心整理的技能与设计系统库、结构化的渲染管线,以及本地桌面 UI——因此让 Kimi 表现出色的那套设计上下文从第一次运行起就已就位,而无需每次手工拼装。两者都是开源且本地优先的,这让这一组合天然而契合。

使用你的 Moonshot API 密钥(BYOK)进行身份验证——凭据留在你的机器上,绝不经过我们代理。

选择一个设计系统和一项技能,然后生成品味一致的演示文稿、原型和落地页。

每一个产物和 DESIGN.md 文件都存放在你自己的仓库中,而不是托管云上。

同一个 Kimi CLI 智能体,同一把密钥——外加围绕它的一套真实、可移植、开源的设计工作流。它本地优先且采用 Apache-2.0,因此你的工作内容和凭据都不会离开你的机器。

安装 OpenDesign,并选择 Kimi CLI 作为你的智能体。
OpenDesign 是否与 Moonshot AI 有关联?
不。OpenDesign 是独立的;Kimi 是 Moonshot AI 的商标。

开始第一个 Kimi 设计任务

先从一个小的任务开始,判断往返效果,然后带上真实需求简报。选择与你的设置相匹配的选项——本页不会替你检测。

你目前处于设置流程的哪个阶段?
下载 OpenDesign 查看安装清单

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows