让 AI 编程助手写界面，常常“功能能跑、长得丑”：它不懂设计系统、不会做信息层级、做不出有质感的落地页与登录流。设计师的意图在代码生成里丢失，反复返工。
Open Design Agent Kit 的思路，是把专业 UI 设计能力直接接进你已有的编程助手（Claude Code、Codex、Cursor、ChatGPT、VS Code）：提供 MCP 服务器、CLI 与一批设计 Playbook（登录、引导、仪表盘等），让 Agent 产出有设计水准的界面。

项目基本信息

信息项详情
项目名称open-design-agent-kit
GitHub地址https://github.com/feimacode/open-design-agent-kit
项目描述把专业 UI 设计能力带进 AI 编程助手的智能体套件
作者feimacode
开源协议MIT License
开源状态公开
LanguagesHTML
支持平台Web
最后更新—

一、项目介绍

feimacode/open-design-agent-kit 是一个把专业 UI 设计带进 AI 编程助手的智能体套件，MIT 协议。它提供 MCP server、CLI 与跨 75+ 智能体的 skills 接入；内置登录表单、引导向导、数据看板、落地页等 Playbook，作为“可生成式 UI（Generative UI）”与“面向 Agent 的界面”的模块化、提示驱动组件。你只需在助手会话里让它“设计某界面”，套件会把设计语言与组件接上。

二、核心优势

  1. Agent 原生：MCP/CLI/skills 多方式接入主流编程助手。
  2. 设计 Playbook：登录、引导、看板等模块化界面模板。
  3. 多 Agent 支持：覆盖 75+ 智能体（Cursor、OpenCode、Cline 等）。
  4. 生成式 UI：提示驱动、上下文感知地产出界面。
  5. 开源 MIT：免费使用与二次开发。

三、适用场景

  • 用 AI 助手生成界面、又嫌默认观感差。
  • 希望 Agent 遵循统一设计系统。
  • 快速做产品原型与落地页。
  • 在多个编程助手间统一设计能力。

四、安装教程

在项目中初始化（以 Claude Code 为例）：

npx @feimacode/open-design-agent-kit init --tools claude

或直接作为 MCP server 注册给任意 MCP 智能体：

npx -y @feimacode/open-design-agent-kit-mcp

常见报错：Node 未安装会导致 npx 失败；Claude Code 需支持 plugin/marketplace 才能用 /plugin 方式，否则走 init CLI。

五、使用示例

初始化后，在助手会话里直接让它设计界面即可；MCP 会在首次设计时自动注册。也可单独跑导出/检查命令：

npx @feimacode/open-design-agent-kit export ...
npx @feimacode/open-design-agent-kit check ...

真实效果：让 Agent “做一个带登录与引导的落地页”，套件按设计 Playbook 产出有层级、有质感的界面代码，而非裸功能。

六、常见问题

Q：支持哪些 Agent？
A：覆盖 Claude Code、Codex、Cursor、ChatGPT、VS Code 及 75+ 支持 skills 的智能体。
Q：必须装 Node 吗？
A：npx 方式需要 Node 环境；Desktop 扩展版可免 Node 使用部分能力。
Q：免费吗？
A：MIT 协议，可免费用于商业项目。

七、总结

Open Design Agent Kit 把专业 UI 设计能力以 MCP/CLI/skills 的形式接进主流 AI 编程助手，用设计 Playbook 让生成界面从“能用”变“好看”。对用 AI 写前端、又受困于观感的团队，它是把设计意图注入生成流程的实用套件；MIT 协议、Agent 原生。