把 Claude Design 从浏览器里搬出来：OpenDesign 开源设计技能包深度拆解

先收藏，回头一定用得上。

Claude.ai 内置的 Design 功能确实好用——结构化需求采集、设计系统自动提取、带验证器的输出检查。但它有个致命问题：锁在浏览器里。你没法让它读取本地项目文件，没法和已有的设计系统集成，更没法在你真正写代码的编辑器里用它。

一个叫 manalkaff 的开发者决定把这件事拆开重组。结果就是 OpenDesign——同一套设计哲学，打包成可移植的 Markdown 技能文件，装进 Claude Code、Cursor、Codex、Gemini CLI 或 OpenCode 里直接用。

177 颗星，MIT 协议，不到两个月。不复杂，但解决了一个真实痛点。

本文提纲

1. OpenDesign 是什么、解决什么问题
2. 核心架构：10 个技能如何协作
3. 工作流程：从需求到成品的全链路
4. 安装方式：六大平台一键接入
5. 技术细节：值得注意的设计决策
6. 和 Claude Design 的关键差异

OpenDesign 是什么

OpenDesign 的定位很清晰：把 AI 编程 Agent 变成一个有品味、有主见、但知道什么时候该收敛的设计师。

输出介质是 HTML。在这个介质里，它可以扮演多种角色——幻灯片设计师、UX 设计师、交互原型师、品牌设计师。关键是它不生成千篇一律的 AI 产出物，而是先读取你的实际代码库。

GitHub 地址：github.com/manalkaff/opendesign

项目由独立开发者 manalkaff 创建于 2026 年 4 月，当前版本 0.3.1，MIT 开源协议。

核心架构：10 个技能如何协作

OpenDesign 不依赖复杂的基础设施，而是用一组 Markdown 格式的 SKILL.md 文件定义行为。10 个技能，各司其职：

技能	触发场景
opendesign	入口技能。建立角色、工作流、审美规则，路由到专业子技能
setup-opendesign	首次运行初始化。创建输出目录、下载 viewer、写入 manifest
run-opendesign	启动预览服务器（端口 8289），支持重复检测和 Python/Node 自适应
create-design-system	从现有品牌、代码库或产品中提取可复用的设计系统
frontend-design	没有现成品牌系统时，推动产出有辨识度的视觉风格
wireframe	快速探索设计空间——多份粗略草图，而非一个精修方向
interactive-prototype	生成可点击、可交互的原型，行为接近真实应用
make-a-deck	幻灯片演示。固定 1920×1080 画布，章节驱动标题
make-tweakable	在设计稿中嵌入实时调参控件（变体、颜色、文案、功能开关）
handoff-to-claude-code	将完成的设计交付给开发 Agent 进行实现

这些技能不是孤立运行的。opendesign 是入口，它自动检测项目中的设计系统、调度子技能、并在完成后派生一个验证子 Agent 对照设计简报检查输出。

工作流程：从需求到成品

每次调用 opendesign，都会走一套固定的流程：

第一步：检测设计系统

扫描 ./opendesign/design-systems/*/ 目录。如果找到现有的设计系统（通过 SKILL.md 或 tokens/colors_and_type.css 标记），自动加载。没有的话提供三个选项：从代码库导入、从零创建、或跳过使用默认审美。

第二步：结构化需求采集

不是简单地"告诉我你想要什么"，而是运行一套结构化的提问协议。对于小调整和迭代，可以跳过。

第三步：读取上下文

读取选中设计系统的 tokens 文件、参考素材、以及你的代码库。这是 OpenDesign 和 Claude Design 的一个关键区别——它能直接读你本地的 CSS、组件库和设计 Token。

第四步：调度专业子技能

根据任务类型自动路由：演示文稿 → make-a-deck，交互原型 → interactive-prototype，品牌系统 → create-design-system。

第五步：验证

派生一个验证子 Agent，对照需求简报检查输出。这步确保设计不会跑偏。

第六步：预览

自动启动预览服务器，输出可点击的本地链接。

安装方式：六大平台一键接入

OpenDesign 的安装方式因平台而异，但都很简单：

Claude Code：

/plugin marketplace add manalkaff/opendesign
/plugin install opendesign@opendesign

Cursor： 在 Agent 聊天中输入 /add-plugin opendesign，或在插件市场搜索安装。

Codex CLI： 运行 /plugins，搜索 opendesign，选择安装。

Gemini CLI：

gemini extensions install https://github.com/manalkaff/opendesign

OpenCode： 让 Agent 从 GitHub 读取安装说明。

手动 Fork： Fork 仓库，在 skills/ 下添加自己的技能，通过任意宿主安装。

安装后，直接在 Agent 中调用：

/opendesign make a pitch deck for a seed-stage AI company, 10 slides

/opendesign extract our design system from the codebase and document it

技术细节：值得注意的设计决策

纯 Markdown 技能定义。 每个 SKILL.md 都用 YAML frontmatter + Markdown 正文定义行为。没有编译步骤，没有运行时依赖。这意味着你可以直接阅读、修改、扩展任何技能。

设计系统自动发现。 设计系统存储在 ./opendesign/design-systems/<name>/ 下，通过文件标记（SKILL.md 或 tokens/colors_and_type.css）实现自动发现。支持一个项目多个设计系统——营销系统、产品系统、演示模板各管各的，Agent 根据任务类型自动选择。

预览服务器内建。 0.3.0 版本加入了 run-opendesign 技能，自动检测端口占用、识别 Python/Node 环境、后台启动服务器并输出可点击链接。端口 8289 上如果已有其他进程，会报出清晰的错误而非给出死链接。

验证子 Agent。 每次设计完成后，会派生一个独立的子 Agent 对照原始需求检查输出。这个设计很有意思——相当于内置了一个设计评审流程。

跨平台插件适配。 项目同时包含 .claude-plugin/、.codex-plugin/、.cursor-plugin/ 和 .opencode/ 四套插件配置，确保在不同 AI 编程工具中都能正确加载。

和 Claude Design 的关键差异

维度	Claude Design	OpenDesign
运行环境	claude.ai 浏览器	本地 Agent（Claude Code、Cursor 等）
模型绑定	仅 Anthropic 模型	任意模型
代码库访问	无	直接读取本地文件
设计系统集成	无	自动发现、多系统支持
可定制性	闭源	MIT 开源，可 Fork
输出验证	内置	子 Agent 验证
预览方式	内嵌预览	本地预览服务器

核心区别在于"解锁"——OpenDesign 把设计能力从 claude.ai 的围墙里拿出来，放进了你实际工作的地方。

试过了？评论区说说你的体验。还没试？收藏起来周末折腾。

---

作者: itech001 来源: 公众号：AI人工智能时代 网站: https://www.theaiera.cn/ 每日分享最前沿的AI新闻资讯和技术研究。

本文首发于 AI人工智能时代，转载请注明出处。