/ 目錄 / 演練場 / Open Design
← 全部伺服器 ↗ GitHub
● 社群 nexu-io ⚡ 即開即用

Open Design

作者 nexu-io · nexu-io/open-design

Claude Design 的開源複刻——19 個技能 + 71 個品牌級設計系統，沙盒預覽，可匯出為 HTML／PDF／PPTX／MP4。

nexu-io 的 open-design 是 Anthropic Claude Design 的社群替代方案。它捆綁了 19 個涵蓋網頁設計、行動裝置原型、簡報、圖片、影片和 HyperFrames 的技能，以及 71 個預建品牌系統（Linear、Stripe、Vercel、Notion、Toss 風格……）。可在任何相容 Claude Code 的框架中執行，並提供沙盒預覽 + 匯出管線。

▶ 觀看演示 📦 安裝 💡 使用場景

為什麼要用

核心特性

即時演示

實際使用效果

就緒

安裝

作者儲存庫 · Claude Skills 官方文件

使用場景

實戰用法： Open Design

以特定品牌風格生成簡報

👤 創辦人／產品經理 ⏱ ~30 min beginner

何時使用： 你需要一份 10 頁的簡報，不想和 Keynote 搏鬥。

步驟
  1. 選擇品牌
    使用 open-design。選擇 Stripe 風格的外觀。列出它的 token。✓ 已複製
    → 外觀 token 已顯示
  2. 草稿
    為我們的發布生成 10 頁簡報——標題、問題、解決方案、牽引力、路線圖、募資需求。使用 Stripe 外觀。✓ 已複製
    → 10 頁具一致風格的簡報
  3. 匯出
    匯出為 PPTX，讓我可以在 Keynote 中編輯。✓ 已複製
    → PPTX 檔案已寫入

結果： 看起來不像 AI 生成的簡報；一致的品牌感。

注意事項
  • 圖片生成看起來很通用 — 技能提供圖示和插圖集；指定要使用哪一套
搭配使用： filesystem

以品牌風格製作落地頁原型

👤 迭代主頁設計的開發者／設計師 ⏱ ~25 min intermediate

何時使用： 在正式建置前，你需要 3 個視覺方向。

步驟
  1. 變體
    生成 3 個主視覺區塊變體——Linear、Notion 和 Vercel 外觀。相同內容，不同風格。✓ 已複製
    → 3 個 HTML 預覽
  2. 選擇並迭代
    採用 Linear 版。收緊字體排版並加入次要 CTA。✓ 已複製
    → 精修後的 HTML

結果： 在深度建置前快速做出方向性決策。

注意事項
  • 外觀 token 與你現有的 CSS 衝突 — 沙盒預覽避免衝突；選擇性整合
搭配使用： ui-ux-pro-max-skill

從腳本生成一段短行銷影片

👤 行銷／開發者關係 ⏱ ~60 min intermediate

何時使用： 你有一段 30 秒的腳本，需要一部影片。

步驟
  1. 分鏡表
    將這段腳本轉換為 HyperFrames 分鏡表——6 個鏡頭，品牌風格。✓ 已複製
    → 分鏡表
  2. 渲染
    渲染為 MP4。✓ 已複製
    → MP4 已寫入

結果： 品牌一致的短影片，無需找設計師。

注意事項
  • 渲染時間不短 — 最終渲染前先在分鏡表上迭代

組合

與其他 MCP 搭配，撬動十倍槓桿

open-design-skill + ui-ux-pro-max-skill

品牌外觀 + 設計基礎

用 UI/UX Pro Max 處理字體排版，用 open-design 處理品牌外觀。✓ 已複製
open-design-skill + filesystem

輸出到專案目錄

將簡報匯出到 /presentations/launch/。✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
list_skins （無） 選擇品牌風格 免費
design_web spec, skin 網頁頁面／原型 token
design_slides outline, skin 簡報／演講 token
export format: html|pdf|pptx|mp4 最終交付 渲染時間

成本與限制

運行它的成本

API 配額
不適用
每次呼叫 Token 數
渲染密集的輸出（影片）成本較高
費用
免費
提示
在分鏡表上迭代，而非最終渲染

安全

權限、密鑰、影響範圍

最小權限： 本機沙盒 + 檔案寫入
憑證儲存： 無
資料出站： 無——本機

故障排查

常見錯誤與修復

影片渲染失敗

確認已安裝 ffmpeg；技能會標記遺失的依賴

外觀套用不一致

部分模板早於外觀系統；使用 README 中列出的外觀感知模板

替代方案

Open Design 對比其他方案

替代方案何時用它替代權衡
Anthropic Claude Design你想要官方支援封閉；客製化程度較低
手工設計你有設計師迭代速度較慢

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills