|

open-design 完整入門指南：3 步搭建開源 AI 設計生成系統（19 Skills 詳解）

ByAPIYI - 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-zh-hant 图示

一、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-zh-hant 图示

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-zh-hant 图示

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~

Similar Posts