作者 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 的框架中執行，並提供沙盒預覽 + 匯出管線。
%APPDATA%\Claude\claude_desktop_config.json{
"mcpServers": {
"open-design-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/nexu-io/open-design",
"~/.claude/skills/open-design"
],
"_inferred": true
}
}
}開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。
{
"mcpServers": {
"open-design-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/nexu-io/open-design",
"~/.claude/skills/open-design"
],
"_inferred": true
}
}
}Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。
{
"mcpServers": {
"open-design-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/nexu-io/open-design",
"~/.claude/skills/open-design"
],
"_inferred": true
}
}
}點擊 Cline 側欄中的 MCP Servers 圖示，然後選 "Edit Configuration"。
{
"mcpServers": {
"open-design-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/nexu-io/open-design",
"~/.claude/skills/open-design"
],
"_inferred": true
}
}
}格式與 Claude Desktop 相同。重啟 Windsurf 生效。
{
"mcpServers": [
{
"name": "open-design-skill",
"command": "git",
"args": [
"clone",
"https://github.com/nexu-io/open-design",
"~/.claude/skills/open-design"
]
}
]
}Continue 使用伺服器物件陣列，而非映射。
{
"context_servers": {
"open-design-skill": {
"command": {
"path": "git",
"args": [
"clone",
"https://github.com/nexu-io/open-design",
"~/.claude/skills/open-design"
]
}
}
}
}加入 context_servers。Zed 儲存後熱重載。
claude mcp add open-design-skill -- git clone https://github.com/nexu-io/open-design ~/.claude/skills/open-design一行命令搞定。用 claude mcp list 驗證，claude mcp remove 移除。
何時使用： 你需要一份 10 頁的簡報，不想和 Keynote 搏鬥。
結果： 看起來不像 AI 生成的簡報；一致的品牌感。
何時使用： 在正式建置前，你需要 3 個視覺方向。
結果： 在深度建置前快速做出方向性決策。
何時使用： 你有一段 30 秒的腳本，需要一部影片。
結果： 品牌一致的短影片，無需找設計師。
品牌外觀 + 設計基礎
| 工具 | 輸入參數 | 何時呼叫 | 成本 |
|---|---|---|---|
| list_skins | （無） | 選擇品牌風格 | 免費 |
| design_web | spec, skin | 網頁頁面／原型 | token |
| design_slides | outline, skin | 簡報／演講 | token |
| export | format: html|pdf|pptx|mp4 | 最終交付 | 渲染時間 |
本機沙盒 + 檔案寫入影片渲染失敗確認已安裝 ffmpeg；技能會標記遺失的依賴
外觀套用不一致部分模板早於外觀系統；使用 README 中列出的外觀感知模板
| 替代方案 | 何時用它替代 | 權衡 |
|---|---|---|
| Anthropic Claude Design | 你想要官方支援 | 封閉；客製化程度較低 |
| 手工設計 | 你有設計師 | 迭代速度較慢 |