适合谁
Agent / 设计协作：适合研究 AI 编程 Agent 的设计分工、协作方式和工具边界。
Codex 用法
优先按具体技能或原项目安装方式使用，不建议把归档目录整包复制。
静态拆解优先；按原项目说明选择具体 Agent 或规则。
许可证 / 风险
来源与 license 需按原仓库逐项核对。
Open Design
开源的 Claude Design 替代品。本地优先，可部署到 Web，BYOK 每层。16 个 AI 编码 Agent 自动驱动，31 个可组合技能 + 72 个品牌级设计系统。
开源免费
本地运行
Vercel 部署
16
AI 编码工具
31
技能
72+
设计系统
5
输出格式
🏗️ 系统层级架构
从底层到上层，理解 Open Design 是如何工作的
🖥️ 本地 Agent 引擎
自动检测 16 个编码 CLI：Claude Code、Codex、Cursor Agent、 Gemini CLI、OpenCode、Qwen、Qoder CLI、GitHub Copilot CLI 等。本地优先运行，无需云端。
↓
🎯 31 个可组合技能
按场景分组：design / marketing / operation / engineering / product / finance / hr / sale / personal。支持 prototype（网页原型）和 deck（演示文稿）两种模式。
- 原型技能: web-prototype, saas-landing, dashboard, mobile-app
- 演示技能: guizang-ppt, simple-deck, replit-deck
↓
🎨 72+ 设计系统
内置 Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Anthropic、Apple、Cursor、Supabase、Figma、小红书等品牌级 DESIGN.md 文件。
↓
📦 5 种输出格式
HTML / PDF / PPTX / ZIP / Markdown。实时流式渲染，沙盒 iframe 预览。
⚡ 核心技能场景
31 个技能，覆盖设计、营销、运营、工程、产品、金融等场景
web-prototype 原型
网站原型生成。支持多种风格变体：brutalist / editorial / soft
saas-landing 原型
SaaS 产品落地页。适合产品 launch、营销页面。
dashboard 原型
数据仪表盘。包含实时数据图表、指标卡片。
mobile-app 原型
移动应用原型。iOS/Android 原型页面。
gamified-app 原型
游戏化应用。积分、成就、等级系统界面。
dating-web 原型
约会交友网站。个人卡片、匹配界面。
blog-post 内容
博客文章。富文本编辑器、排版优化。
email-marketing 营销
邮件营销模板。EDM、新闻 Letter。
social-carousel 营销
社交媒体轮播图。小红书、Instagram 帖子。
magazine-poster 营销
杂志风格海报。高端 print 设计质感。
image-poster 营销
图片海报。AI 生成图像 + 文案排版。
social-media-dashboard 运营
社媒���据���表盘。粉丝、互动分析。
pm-spec 产品
产品经理规格文档。PRD、需求说明。
kanban-board 产品
看板界面。Trello、Linear 风格。
hr-onboarding HR
员工入职流程。新员工引导页面。
finance-report 金融
财务报告。营收、预算、现金流。
eng-runbook 工程
工程运维手册。故障排查指南。
critique 审核
五维自审。AI 生成后的质量检查。
guizang-ppt 演示
杂志风格 PPT。WebGL 动效、P0/P1 检查清单。
simple-deck 演示
简单演示文稿。快速 pitch deck。
replit-deck 演示
Replit 风格演示。开发者向演示。
weekly-update 演示
周报更新。团队周会演示。
motion-frames 动画
动态帧序列。动画原型。
sprite-animation 动画
精灵图动画。2D 游戏角色。
wireframe-sketch 原型
线框草图。低保真原型。
invoice 财务
发票生成。账单、收据。
team-okrs 运营
团队 OKR。目标关键结果追踪。
dcf-valuation 金融
现金流估值。财务模型。
waitlist-page 营销
候补名单页面。等待注册表单。
hyperframes 视频
HyperFrames 视频。HeyGen 视频生成。
🧰 工具箱
如何使用这些技能
本地运行
pnpm tools-dev
启动本地开发服务器，默认端口 http://localhost:3456
Docker 运行
docker build -t open-design .
使用 Docker 构建本地镜像。
Vercel 部署
vercel --prod
一键部署到 Vercel 云端。
技能调用
od skills list
列出所有可用技能。
Agent 检测
od agents detect
自动检测 PATH 上的 AI 编码工具。
设计系统
od designs list
列出内置的 72+ 设计系统。
类型检查
pnpm typecheck
TypeScript 类型检查。
Guard 检查
pnpm guard
代码规范检查。
💬 这群人是怎么配合干活的？
Open Design 如何帮你做一个数据仪表盘。
做一个 SaaS 数据仪表盘
📚 大白话百科
这些术语用日常例子解释
🎯 Skill 是什么？
就像餐厅的菜谱。告诉 AI "怎么做一道菜"（页面）。有 31 本菜谱，每本对应一种场景：dashboard 是"数据菜"，landing 是"营销菜"，ppt 是"演示菜"。
🎨 Design System 是什么？
就像品牌的视觉规范手册。规定用什么颜色、字体、圆角。就像"星巴克绿"和"可口可乐红"，一看就知道是什么品牌。Open Design 内置 72+ 品牌手册。
🖥️ Agent 是什么？
就像厨师的助手。Open Design 不养厨师，你的电脑上装了什么 AI 工具（Claude Code、Cursor 等），它就用什么厨师。16 种厨师可选。
📦 Artifact 是什么？
就像做好的菜。AI 生成的是一个完整的网页/PPT/PDF，可以直接端上桌（部署上线），也可以打包带走（导出）。
🔍 critique 是什么？
就像餐厅的品鉴师。AI 做好一道菜后，会自己检查：颜色对不对、间距对不对、能不能用。五维自审让输出质量有保障。
☁️ BYOK 是什么？
Bring Your Own Key —— 带自己的 API Key。不用交钱给 Open Design store，自己去 OpenAI/Anthropic 买"食材"，自己掌控费用。