|

open-design 完整入门指南：3 步搭建开源 AI 设计生成系统（19 Skills 详解）

作者APIYI - Stable and affordable AI API

作者注：open-design 是 Anthropic Claude Design 的开源替代方案，本文从新人视角完整介绍 19 Skills + 71 Design Systems 的架构原理、安装步骤和 Claude API 配置方法。

GitHub 上最近出现了一个引发设计圈关注的开源项目 open-design，它被称为 Anthropic Claude Design 的"开源平替"，主打本地化部署、19 个内置 Skills 和 71 套品牌级设计系统。

这不是又一个 AI 套壳工具，而是一个真正面向开发者、能够通过你已经安装的 CLI（如 Claude Code、Codex、Cursor、Gemini CLI）来驱动设计生成的完整框架。项目采用 Apache-2.0 许可证，可本地运行，也支持 Vercel 部署。

核心价值: 读完本文，你将了解 open-design 的核心架构、19 Skills 的具体能力，以及如何配合 Claude API 中转服务（如 API易 apiyi.com）零门槛跑通整个工作流。

open-design-tutorial-guide 图示

一、open-design 是什么：开源 Claude Design 替代方案的 3 个核心定位

open-design 由 nexu-io 团队开发，定位是 本地优先（Local-first）、可 Vercel 部署、由 Skills 驱动 的设计生成平台。它最大的特点是 不自带 AI Agent，而是把 Agent 的运行交给你电脑上已经安装的 CLI 工具。

1.1 open-design 的核心定位

定位维度 open-design 的特点 与 Claude Design 的差异
运行模式 本地优先 + Vercel 可部署 Claude Design 仅在线托管
Agent 来源 复用本地 CLI（Claude Code/Codex 等） Claude Design 强绑定 Opus
License Apache-2.0 开源 闭源商业产品
Skills 数量 19 个文件式 Skills 私有 Skills，不可扩展
Design Systems 71 套品牌级设计系统 设计系统不公开
API Key BYOK 自带密钥 官方计费

1.2 为什么 open-design 值得新人关注

如果你刚接触 AI 辅助设计这个领域，open-design 提供了一个比 Claude Design 更"透明"的选择：

  • 代码全开源：能看懂工作流的每个细节，便于二次开发
  • 不锁定厂商：换 Anthropic、OpenAI、Google 的模型都可以
  • 零额外订阅：你已经为 Claude Code 或其他 CLI 付费，不需要再单独订阅 Claude Design
  • 支持 BYOK：可以接入第三方 Claude API 中转服务（如 API易 apiyi.com），实现更灵活的成本控制和并发管理

💡 新人建议：如果你之前没有使用过 Claude API，建议先注册 API易 apiyi.com 获取一个统一的 API 密钥，再开始 open-design 的部署。这样可以省去申请 Anthropic 官方账号、绑卡、海外支付等繁琐流程。

1.3 open-design 适合哪些用户

  • 独立开发者：想做产品落地页、Dashboard、移动端原型，但不想雇设计师
  • PM / 产品经理：需要快速产出原型、PRD 文档、Roadmap 可视化
  • 技术博主：希望生成高质量的封面图、对比图、信息图
  • 设计师：想用 AI 辅助加速重复性工作（如 Email 模板、Invoice、Kanban）

二、open-design 核心特性：19 Skills + 71 Design Systems 详解

open-design 的核心架构由两个抽象层组成：Skills（能力） 和 Design Systems（视觉风格）。19 + 71 的组合理论上可以产生超过 1300 种"能力 × 风格"组合。

open-design-tutorial-guide 图示

2.1 19 个内置 Skills 全景

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.2 71 套 Design Systems 分类

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 设计系统，跑通完整流程后再探索其他组合。如果遇到 Claude API 调用频繁的问题，可以使用 API易 apiyi.com 的中转服务，避免官方接口的速率限制。

2.3 五大视觉方向（Visual Direction）

如果你没有现成的品牌资产，open-design 提供 5 种预设视觉方向：

  1. Editorial：Monocle / FT 风格，印刷杂志感，暖色重点强调
  2. Modern Minimal：Linear / Vercel 风格，冷峻、结构化、克制
  3. Tech Utility：高密度信息、等宽字体、终端感
  4. Brutalist：粗犷、超大字体、锐利、无阴影
  5. Soft Warm：宽松、低对比、桃色中性色

每种方向都锁定了 OKLch 配色方案和字体栈，确保 AI 生成的结果不会"飘"。

三、open-design 快速上手：3 步完成本地部署

3.1 系统环境要求

部署 open-design 前请确认本地环境：

依赖项 版本要求 说明
Node.js ~24 推荐使用 nvm 管理
pnpm 10.33.x 通过 corepack 启用
Git 任意 用于克隆仓库
至少一个 CLI Agent Claude Code / Codex / Cursor 等 见下文兼容列表

3.2 三步完成安装

第一步：克隆仓库

git clone https://github.com/nexu-io/open-design.git
cd open-design

第二步：启用 pnpm 并安装依赖

corepack enable
pnpm install

第三步：启动本地服务

pnpm tools-dev run web

启动后会自动完成：

  1. 扫描 PATH 环境变量，识别可用的 Agent CLI
  2. 加载全部 19 个 Skills 和 71 套 Design Systems
  3. 创建 .od/ 运行目录（包含 SQLite、projects、artifacts）
  4. 在浏览器打开 Web 界面

3.3 验证安装是否成功

打开浏览器访问 http://localhost:3000，应该能看到：

  • ✅ 顶部显示 Agent 选择器（已识别的 CLI 列表）
  • ✅ 左侧 Skill 选择器（19 个 Skill 卡片）
  • ✅ 右侧 Design System 选择器（71 个品牌）
  • ✅ 中间是初始化表单（Discovery Form）

如果某个 CLI 没有被识别，确认它是否已加入系统 PATH。

# 检查 CLI 是否可用
which claude
which codex
which cursor-agent

四、open-design 配合 Claude API：BYOK 配置完整指南

新人最容易卡住的环节往往是 API Key 配置。open-design 的 BYOK（Bring Your Own Key）模式支持两种方式调用 Claude 模型：通过 Claude Code CLI、或者直接走 Anthropic API SSE。

open-design-tutorial-guide 图示

4.1 为什么需要 Claude API 中转服务

直接使用 Anthropic 官方 API 时，新人常遇到三个问题：

  1. 海外支付门槛：需要美元信用卡，国内 Visa/Master 经常被拒
  2. 速率限制严苛：新账号 Tier 1 每分钟 token 限制极低，复杂 Skill 容易触发
  3. 并发能力有限：当 open-design 同时处理多个 Skill 任务时，官方接口经常报 429

这时使用专业的 Claude API 中转服务（如 API易 apiyi.com）可以一次性解决这三个问题，下面给出具体配置方法。

4.2 通过环境变量接入 API易（推荐）

open-design 的 Daemon 在调用 Anthropic API 时会读取标准的 Anthropic SDK 环境变量。在启动前，先配置好 ANTHROPIC_BASE_URL 和 ANTHROPIC_API_KEY：

# macOS / Linux
export ANTHROPIC_BASE_URL="https://vip.apiyi.com"
export ANTHROPIC_API_KEY="sk-your-apiyi-key-here"

# Windows PowerShell
$env:ANTHROPIC_BASE_URL = "https://vip.apiyi.com"
$env:ANTHROPIC_API_KEY = "sk-your-apiyi-key-here"

# 启动 open-design
pnpm tools-dev run web

🎯 关键说明：ANTHROPIC_BASE_URL 是 Anthropic 官方 SDK 支持的标准变量。API易 apiyi.com 完全兼容 Anthropic 原生格式，所以无需修改任何代码，只要替换 base_url 即可让 open-design 透明地走中转通道。

4.3 配合 Claude Code CLI 使用

如果你已经安装了 Claude Code CLI，open-design 默认会优先使用它。在使用前，先把 Claude Code 自身指向 API易：

# 配置 Claude Code 使用 API易中转
claude config set api-url https://vip.apiyi.com
claude config set api-key sk-your-apiyi-key-here

# 验证连接
claude --version
claude "你好" --max-tokens 100

配置完成后，open-design 调用 Claude Code 时会自动复用这套配置，不需要在 open-design 内额外设置。

4.4 API易接入 vs 官方直连：完整对比

对比维度 Anthropic 官方 API易中转 (apiyi.com)
支付方式 海外信用卡（美元） 国内充值（人民币）
价格 标准价 充值 100 美金送 10%（≈ 官网 85 折）
速率限制 Tier 1 严苛限制 不限并发
API 格式 Anthropic 原生 完全兼容 Anthropic 原生
接入难度 需修改 base_url 修改 base_url 即可
故障切换 单一通道 多机房负载均衡
技术支持 英文工单 中文客服

4.5 验证 API 配置是否生效

在 open-design Web 界面创建一个测试项目，选择最简单的 web-prototype Skill，输入 prompt："Create a simple landing page for a coffee shop"，观察终端日志：

  • ✅ 看到 Connecting to https://vip.apiyi.com/v1/messages 表示走中转
  • ✅ 响应时间 < 5 秒（API易中转通常比官方更快）
  • ✅ 没有 429 / 529 错误

如果出现连接失败，检查环境变量是否正确导出（可用 echo $ANTHROPIC_BASE_URL 验证）。

五、open-design 实战场景：5 大典型应用案例

5.1 场景一：独立开发者做 SaaS 落地页

目标：3 小时内产出一个可上线的 SaaS 产品落地页

操作流程：

  1. 在 open-design 选择 saas-landing Skill
  2. Design System 选择 Linear 或 Vercel 风格
  3. 在 Discovery Form 填写产品定位（受众、卖点、价格档）
  4. Agent 自动生成完整 HTML（含 Hero、Features、Pricing、CTA）
  5. 导出 ZIP，部署到 Vercel

API 用量预估：单次生成约消耗 30-50K input + 8-15K output tokens。如果反复迭代 5 次，总消耗约 25 万 tokens。建议使用 API易 apiyi.com 来降低反复迭代的成本压力。

5.2 场景二：PM 快速生成 PRD 文档

目标：基于一段需求描述，自动生成结构化的 PRD

操作流程：

  1. 选择办公文档类 Skill（PM 规范文档）
  2. Design System 选择 Notion 风格
  3. 输入需求要点和约束
  4. Agent 生成包含背景、目标、用户故事、AC、技术方案的完整 PRD
  5. 导出为 Markdown 或 HTML

5.3 场景三：技术博主生成封面图

目标：为博客文章生成统一风格的封面图

操作流程：

  1. 选择 magazine-poster Skill
  2. Design System 选择 Wired 或 The Verge
  3. 输入文章主题和关键词
  4. 调整视觉方向（Editorial / Brutalist / Soft Warm）
  5. 导出 PNG

5.4 场景四：移动端原型快速验证

目标：1 天内产出 5 个屏幕的移动 App 原型

操作流程：

  1. 选择 mobile-app Skill
  2. Device Frame 选择 iPhone 15 Pro
  3. Design System 选择 Spotify 或 Airbnb
  4. 分屏生成（首页、列表、详情、设置、Onboarding）
  5. 导出 HTML 给前端参考

5.5 场景五：数据 Dashboard 设计

目标：基于业务数据字段，生成可交互的 Dashboard 原型

操作流程：

  1. 选择 dashboard Skill
  2. Design System 选择 Stripe 或 Vercel
  3. 输入数据字段和图表类型偏好
  4. Agent 生成包含侧边栏、KPI 卡片、图表、表格的完整 Dashboard

💡 场景共性建议：以上 5 个场景都涉及反复迭代，每次迭代都是一次完整的 Claude API 调用。我们建议把 open-design 接到 API易 apiyi.com，这样不仅能享受 85 折的成本优势，也能利用其不限并发的特性同时跑多个 Skill 任务。

六、open-design 常见问题 FAQ

Q1: open-design 和 Claude Design 的核心区别是什么？

核心区别在于 Agent 运行方式。Claude Design 是 Anthropic 的闭源 SaaS 产品，强绑定 Opus 模型；open-design 是开源项目，Agent 由你本地的 CLI 提供（Claude Code、Codex、Cursor 等任选），换句话说 Claude Design 是"产品"，open-design 是"框架"。

如果你已经订阅了 Claude Code 或拥有 API易 apiyi.com 的 API Key，open-design 几乎是零额外成本的选择。

Q2: 我没有 Anthropic 官方账号，可以使用 open-design 吗？

完全可以。open-design 支持任意 CLI Agent，并不强制使用 Anthropic API。常见的替代方案有：

  • 使用 Cursor Agent（自带 Cursor 订阅）
  • 使用 Gemini CLI（Google 免费额度）
  • 使用 OpenCode 或 Qwen Code
  • 使用 API易 apiyi.com 提供的 Claude API 中转服务（推荐新人）

API易支持人民币充值，免去申请海外账号的麻烦，对国内开发者最友好。

Q3: 19 个 Skills 哪些最值得新人优先尝试？

按"容易上手 + 输出价值高"排序，推荐顺序：

  1. web-prototype – 最简单，单页 HTML
  2. saas-landing – 实用性高，可直接用于产品
  3. simple-deck – PPT 替代，5 分钟出一份演示
  4. dashboard – 数据可视化练手
  5. mobile-app – 学习移动端布局

办公文档类（如 PRD、周报）也很实用，但需要更多的 prompt 调优。

Q4: 71 套 Design Systems 是固定的吗，能自定义吗？

完全可以扩展。Design Systems 本质上是 DESIGN.md 文件，遵循 9 段式 Schema。你只需要：

  1. 在 design-systems/ 目录新建一个文件夹（以品牌名命名）
  2. 创建 DESIGN.md 描述配色、字体、间距、组件风格
  3. 重启 Daemon，新设计系统会自动出现在选择器中

这种文件式扩展是 open-design 区别于 Claude Design 的核心优势。

Q5: 使用 open-design 会消耗大量 API tokens 吗？

会，但可以控制。每个 Skill 的 prompt stack 都比较长（约 5-10K tokens 系统 prompt），加上输出可能 5-15K tokens。一次完整生成消耗约 20-40K tokens。

降低成本的方式：

  • 使用 API易 apiyi.com 中转，享受充值 100 美金送 10%（≈ 85 折）的优惠
  • 优先使用 Claude Sonnet 4.5 而非 Opus（性价比高 5 倍以上）
  • 利用 Claude 原生的 prompt caching 功能（API易 apiyi.com 完全兼容）

Q6: open-design 支持中文 prompt 吗？

完全支持。open-design 本身只是一个 prompt 编排框架，最终的中文理解能力取决于你选用的模型。Claude Sonnet 4.5 和 Opus 4.7 对中文支持都非常优秀，包括中文场景的设计语境（如"国潮风"、"赛博朋克"等）。

Q7: 部署到 Vercel 后还能本地访问 .od 目录吗？

不能。Vercel 是 Serverless 架构，没有持久化文件系统。如果需要 Vercel 部署，建议采用混合模式：Web 层部署到 Vercel，Daemon 仍然跑在本地或自有服务器，通过隧道（如 Cloudflare Tunnel）暴露给 Vercel 的 Web 层。

Q8: open-design 的 Anti-AI-Slop 机制具体做了什么？

open-design 在 prompt stack 中嵌入了 6 重防"AI 味"机制：

  1. 强制初始化表单：第一轮必须先收集需求，不允许直接生成
  2. 品牌资产五步协议：定位 → 下载 → 提取色值 → 写入 brand-spec → 复述确认
  3. 五维自评：生成前必须给自己打分（哲学、层次、执行、具体性、克制）
  4. P0/P1/P2 检查清单：每个 Skill 都有强制检查项
  5. AI Slop 黑名单：明确禁止渐变、通用 emoji、圆角左边框卡片、虚假数据
  6. 诚实占位符：用 — 或灰块代替编造的数据

这套机制是 open-design 区别于普通 AI 设计工具的核心壁垒。

七、open-design Key Takeaways 核心要点

  • ✅ open-design 是开源 Claude Design 替代方案，采用 Apache-2.0 许可证，本地优先 + Vercel 可部署
  • ✅ 核心由 19 Skills + 71 Design Systems 组成，理论组合超过 1300 种"能力 × 风格"
  • ✅ Agent 运行复用本地 CLI，支持 Claude Code、Codex、Cursor、Gemini CLI、OpenCode、Qwen 等
  • ✅ 3 步完成本地部署：克隆仓库 → pnpm install → pnpm tools-dev run web
  • ✅ BYOK 配置只需 2 个环境变量：ANTHROPIC_BASE_URL 和 ANTHROPIC_API_KEY
  • ✅ 新人推荐配合 API易中转：apiyi.com 提供原生格式兼容、不限并发、充值 100 美金送 10% 优惠
  • ✅ Anti-AI-Slop 机制：6 重防 AI 味设计，确保产出质量

八、总结

open-design 是一个被严重低估的开源项目。它没有像 Claude Design 那样以"AI 设计师"自我营销，而是务实地把自己定位为 Skills + Design Systems + Agent 调度 的组合框架。这种"工具感"反而让它在专业开发者群体中获得快速认可。

对新人来说，上手 open-design 的最大障碍不是技术，而是 API 配置。绕过这个障碍最简单的方式就是使用专业的 Claude API 中转服务（如 API易 apiyi.com）：原生格式兼容意味着不需要改一行代码，国内充值意味着不需要海外信用卡，不限并发意味着可以放心地让 open-design 跑多 Skill 工作流，充值 100 美金送 10% 的优惠相当于直接拿到官网 85 折。

如果你正在考虑系统性地引入 AI 辅助设计工作流，open-design 配合 API易 apiyi.com 是目前对国内开发者最友好的组合。从今天开始动手部署，1 个小时内就能跑通你的第一个 Skill。

🎯 下一步行动建议：访问 API易 apiyi.com 注册账号并获取 API Key，按照本文第四章的环境变量配置完成 BYOK 接入，先用 web-prototype Skill 跑通流程，再逐步探索其他 18 个 Skills 的能力边界。

参考资料

  1. open-design GitHub 仓库：项目主仓库

    • 链接: github.com/nexu-io/open-design
    • 说明: 包含完整源码、19 个 Skills、71 套 Design Systems

  2. Anthropic 官方文档：Claude API 使用指南

    • 链接: docs.anthropic.com/claude/docs
    • 说明: API 参数、prompt 结构、模型对比

  3. API易官网：Claude API 中转服务平台

    • 链接: apiyi.com
    • 说明: 原生格式兼容、不限并发、人民币充值、充值 100 美金送 10%

作者: 技术团队
最后更新: 2026-04-30
关于 API易: API易 apiyi.com 是专业的 Claude API 中转服务商，提供 Claude Sonnet 4.5、Claude Opus 4.7 等全系列模型的稳定接入，支持原生 Anthropic 格式调用，充值 100 美金赠送 10%（相当于官网 85 折），不限并发，技术支持响应快。

Try AI Large Model https://api.apiyi.com for free
Stable and reliable AI LM API aggregation service, Get 300 Millions Tokens for Free~

类似文章