作者 nexu-io · nexu-io/open-design
Claude Design 的开源克隆——19 个 skill + 71 个品牌级设计系统、沙盒预览，可导出为 HTML/PDF/PPTX/MP4。
nexu-io 的 open-design 是 Anthropic Claude Design 的社区替代方案。它打包了 19 个涵盖 Web 设计、移动端原型、幻灯片、图像、视频和 HyperFrames 的 skill，以及 71 个预制品牌设计系统（Linear、Stripe、Vercel、Notion、Toss 风格……）。可在任何兼容 Claude Code 的 harness 中运行，内置沙盒预览和导出管道。
%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 页 deck，但不想跟 Keynote 较劲。
结果： 不像 AI 生成的 deck；品牌感一致。
何时使用： 在正式开发前，你需要 3 个视觉方向。
结果： 在深度开发之前快速做出方向决策。
何时使用： 你有一个 30 秒的脚本，需要一段视频。
结果： 品牌一致的短视频，无需找设计师。
品牌外观 + 设计基础原则
| 工具 | 输入参数 | 何时调用 | 成本 |
|---|---|---|---|
| list_skins | (none) | 选择品牌风格 | free |
| design_web | spec, skin | Web 页面 / 原型 | tokens |
| design_slides | outline, skin | Pitch / 演讲 deck | tokens |
| export | format: html|pdf|pptx|mp4 | 最终交付 | render time |
Local sandbox + file writeRender fails for video确保 ffmpeg 已安装；skill 会提示缺失的依赖
Skin doesn't apply consistently部分模板早于外观系统；使用 README 中列出的支持外观的模板
| 替代方案 | 何时用它替代 | 权衡 |
|---|---|---|
| Anthropic Claude Design | 需要官方支持 | 闭源；可定制性较低 |
| Hand-coded designs | 你有设计师 | 迭代速度更慢 |