Open Design

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

为任何支持 MCP 的编码 Agent 提供专业级设计。只需一条命令，无需运行其他内容。

这是 Open Design 的设计库和工作流，打包为一个纯 stdio MCP 服务，可用于 Claude Code、Codex、Cursor 以及其他任何支持 MCP 的工具。它包含 163 项技能、114 个设计模板、152 套品牌设计系统，以及 167 个可再创作的示例。让你的 Agent 制作演示文稿、落地页、仪表盘或原型，它就会在你的项目中生成真正的文件，做出看起来经过设计而非自动生成的作品。

• 无需桌面应用、守护进程或账户。 你的 Agent 会按需通过 stdio 启动服务，并在 Agent 退出时关闭服务。
• 无需 API 密钥或模型设置。 服务从不调用模型。你的 Agent 会使用自己选定的模型，通过常规文件编辑工具完成生成。服务提供设计库，并处理相关记录（清单、当前设计系统）。
• 零配置。 开箱即用，适用于当前项目。当前设计系统会记录在 .open-design/config.json 中。
• 普通文件。 生成的内容都是仓库中的普通 HTML 文件，以及小型 JSON 附属文件，因此你可以比较差异、审查并提交。

它通过 MCP 提供与 VS Code 扩展相同的核心工具和内容，而非使用原生 languageModelTools。

看看它能做什么

约 280 个随附技能和模板中的 4 个示例，均按原样呈现：

“设计一个约会网站仪表盘，展示互相关注、匹配率和 30 天趋势。”	“一款包含每日任务和 XP 的习惯追踪应用。”
“一份适合董事会审阅的战略演示文稿，采用瑞士国际主义风格。”	“5 条技巧，做成小红书风格的可滑动卡片轮播。”

每个示例都从 remix_open_design_example（复制一个真实示例并修改）或 prepare_open_design_brief（整理说明并从头生成）开始——调用 list_open_design_skills，即可浏览其他约 276 个示例。

快速开始

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

这是一个普通的 stdio MCP 服务。将它注册到你的 Agent 中：

Claude Code

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

或者改为安装 Claude Code 插件：它会自动注册此服务，并在此基础上添加 Open Design 技能。

其他 MCP 客户端

此服务已列入 MCP 注册表，名称为 io.github.feimacode/open-design，因此能够读取该注册表的客户端（例如 VS Code 的 @mcp 扩展库）可以直接安装。在 VS Code 中，建议使用扩展：它支持实时预览和编辑，同时安装两者会导致同一组工具出现两份。

Codex CLI

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

或手动添加到 ~/.codex/config.toml：

[mcp_servers.open-design]
command = "npx"
args = ["-y", "@feimacode/open-design-agent-kit-mcp"]

或者运行 npx @feimacode/open-design-agent-kit init --tools codex，同时添加匹配的技能。请参阅 Codex 设置。

其他 MCP 宿主 — 通用配置格式：

{
  "mcpServers": {
    "open-design": {
      "command": "npx",
      "args": ["-y", "@feimacode/open-design-agent-kit-mcp"]
    }
  }
}

工具和提示词

共有 24 个工具，与 VS Code 扩展相同（不含社区分享功能）：

• 目录： list_open_design_skills、list_open_design_design_systems、recommend_open_design_design_systems
• 生成： read_open_design_source（将 DOCX、PPTX、XLSX、PDF 等转换为 Markdown）、prepare_open_design_brief、register_open_design_artifact、get_open_design_artifact、remix_open_design_example、add_open_design_diagram_runtime
• 探索方向： prepare_open_design_exploration、compare_open_design_exploration、choose_open_design_direction
• 设计系统： set_active_design_system、create_open_design_design_system
• 超越原型： port_open_design_artifact_to_app、prepare_open_design_component_library、pull_open_design_figma_frame、push_open_design_artifact_to_figma、publish_open_design_artifact_to_canva、publish_open_design_artifact_to_shop
• 检查和导出： check_open_design_artifact（截图及预检结果）、export_open_design_artifact（PNG/JPEG、PDF、PowerPoint、MP4/WebM/GIF、独立 HTML、网站文件夹、邮件 HTML、可直接粘贴的 HTML、每个电子表格行分别生成一个文件）、adapt_open_design_artifact、create_open_design_qr_code、list_open_design_print_houses。渲染需要安装 Chrome、Edge 或 Chromium；导出动画还需要 FFmpeg。
• 分享： publish_open_design_artifact（生成临时链接，或发布到你自己的 Netlify、Vercel、Cloudflare Pages 或 GitHub Pages）
• 集成： list_open_design_integrations（Agent 可连接的 Canva、Figma、Notion、Google Drive、Slack 和发布服务）

MCP 提示词：工作流 open-design-new、open-design-social-post、open-design-poster、open-design-campaign、open-design-docs、open-design-explore、open-design-publish、open-design-deck-from-source、open-design-integrations 和 open-design-recurring，以及每个可混编示例对应的一个 od-<mode>-<id> 提示词。

参数、结果和错误：工具参考。提示词：提示词和命令。

配置

默认无需配置。服务会在 Agent 启动时所在的目录中运行。可选环境变量（OPEN_DESIGN_WORKSPACE_ROOT、OPEN_DESIGN_OUTPUT_DIR、OPEN_DESIGN_FIGMA_TOKEN、OPEN_DESIGN_BROWSER_PATH、OPEN_DESIGN_FFMPEG_PATH、OPEN_DESIGN_SHARE_BADGE）请参阅设置和环境变量。

此处不包含的内容

实时预览、行内评论、所见即所得编辑和 Tweaks 面板基于 webview，仅适用于 VS Code — 这些功能请参阅 VS Code 扩展。此软件包仅包含无头的技能／设计系统／制品工作流。

更多信息

文档 · 故障排除 · 所有指南 · 社交媒体帖子 · 导出演示文稿和 PDF

许可证

MIT — 参见 LICENSE。技能／设计系统／示例内容来自 open-design，以 Apache-2.0 许可证授权。