Open Design的安装和使用
1.介绍
Open-Design作为开源 Claude Design 替代方案， open-design 提供了一个比 Claude Design 更"透明"的选择：
- 代码全开源：能看懂工作流的每个细节，便于二次开发
- 不锁定厂商：换 Anthropic、OpenAI、Google 的模型都可以
- 零额外订阅：你已经为 Claude Code 或其他 CLI 付费，不需要再单独订阅 Claude Design
- 支持 BYOK：可以接入第三方 Claude API 中转服务（如 API易 apiyi.com），实现更灵活的成本控制和并发管理
Open-Design 的核心架构由两个抽象层组成：Skills（能力） 和 Design Systems（视觉风格）。19 + 71 的组合理论上可以产生超过 1300 种"能力 × 风格"组合。
1.Open-Design 的 19 个 Skills 按用途分为三大类：
设计交付类（8 个 Skills）
| Skill 名称 | 用途 | 输出格式 |
|---|---|---|
web-prototype | 单页 HTML 落地页 | HTML |
saas-landing | SaaS 营销页面 | HTML |
dashboard | 后台管理界面 | HTML |
pricing-page | 定价页面 | HTML |
docs-page | 三栏文档页 | HTML |
blog-post | 长篇博客内容 | HTML/Markdown |
mobile-app | 移动 App 屏幕 | HTML + 设备框 |
simple-deck | 简洁横向幻灯片 | HTML |
演示类（2 个 Skills）
guizang-ppt：杂志风格 Web PPT（默认演示模式）magazine-poster：印刷品和海报设计
办公文档类（9 个 Skills）
包含 PM 规范文档（PRD）、周报、会议纪要、工程 Runbook、财务报表、HR Onboarding、发票、Kanban 看板、OKR 评分卡等。
2.Open-Design 的71 套品牌级设计系统按行业分类如下：
| 分类 | 代表品牌 | 风格特点 |
|---|---|---|
| AI / LLM | Claude、Cohere、Mistral、ElevenLabs、Ollama | 简洁、技术感、低饱和 |
| 开发者工具 | Cursor、Vercel、Linear、Framer、Supabase | 暗色主题、等宽字体、高对比 |
| 生产力 | Notion、Figma、Miro、Airtable、Cal | 友好、白底、圆润元素 |
| 金融 | Stripe、Coinbase、Binance、Wise | 信任感、蓝色基调、专业 |
| 电商 / 出行 | Shopify、Airbnb、Uber、Nike、Starbucks | 视觉冲击、品牌色突出 |
| 媒体 | Spotify、PlayStation、Wired、The Verge | 编辑感、大图、强对比 |
| 汽车 | Tesla、BMW、Ferrari、Lamborghini | 高级感、金属质感、留白 |
| 基础风格 | Default Neutral、Warm Editorial | 通用底色 |
提示
新人无需一开始就尝试所有 Skills，建议先从 web-prototype 和 saas-landing 入手，搭配 Default Neutral 设计系统，跑通完整流程后再探索其他组合。
2.安装
第一步：克隆仓库
git clone https://github.com/nexu-io/open-design.git
cd open-design第二步：启用 pnpm 并安装依赖
corepack enable
pnpm install第三步：启动本地服务
pnpm tools-dev run web启动后会自动完成：
- 扫描 PATH 环境变量，识别可用的 Agent CLI （我之前装过Claude CLI ，所以它可以自动是别）
- 加载全部 19 个 Skills 和 71 套 Design Systems
- 创建
.od/运行目录（包含 SQLite、projects、artifacts） - 在浏览器打开 Web 界面
3.使用
3.1 切换语言
首页面右上方–> “齿轮”图标 –>切换语言
3.2 创建项目
- 首页左侧菜单 –> 新建项目 -> 会弹出引导面板，比较好理解，按需要选就行
- 然后建议上传一个预先准备好的产品白皮书
- 默认情况下，Open Design会调用本地的AI CLI，但是每次调用都会子进程发起一次调用，且过程中初始化CLI的LLM模型（比如我用的就是Claude Code+DeepSeek V4）, 所以比较慢，而且40%的概率会断（我遇到的情况）
- 刚开始，Open Design会问你一些设计上的偏好和要求，按需回答就行。
- 最终它生成的效果惊人（我是产品白皮书–>Web系统），比我直接用Trae Solo+DeepSeekV4/GLM5.1生成的要好太多了。（说明他的Prompt/SKill这些还确实不可或缺）
心得
很多东西我还没有挖掘，但仅从初次使用的结果开，强烈推荐！下回我要再开发App，我肯定先让他给我设计下