/ 目录 / 演练场 / Open Design
← 全部服务器 ↗ GitHub
● 社区 nexu-io ⚡ 即开即用

Open Design

作者 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 中运行，内置沙盒预览和导出管道。

▶ 观看演示 📦 安装 💡 使用场景

为什么要用

核心特性

实时演示

实际使用效果

就绪

安装

作者仓库 · Claude Skills 官方文档

使用场景

实战用法： Open Design

用特定品牌风格生成 pitch deck

👤 创始人 / PM ⏱ ~30 min beginner

何时使用： 需要一个 10 页 deck，但不想跟 Keynote 较劲。

步骤
  1. 选择品牌
    Use open-design. Pick the Stripe-style skin. List its tokens.✓ 已复制
    → 显示外观 token
  2. 起草
    Generate a 10-slide deck for our launch — title, problem, solution, traction, roadmap, ask. Use the Stripe skin.✓ 已复制
    → 10 张风格一致的幻灯片
  3. 导出
    Export to PPTX so I can edit in Keynote.✓ 已复制
    → PPTX 文件已写入

结果： 不像 AI 生成的 deck；品牌感一致。

注意事项
  • 图像生成看起来太通用 — skill 提供图标和插图集；指定具体使用哪一套
搭配使用： filesystem

用品牌风格原型化落地页

👤 迭代首页的开发者 / 设计师 ⏱ ~25 min intermediate

何时使用： 在正式开发前，你需要 3 个视觉方向。

步骤
  1. 生成变体
    Generate 3 hero variants — Linear, Notion, and Vercel skins. Same content, different style.✓ 已复制
    → 3 个 HTML 预览
  2. 选择并迭代
    Take the Linear one. Tighten typography and add a secondary CTA.✓ 已复制
    → 精细化后的 HTML

结果： 在深度开发之前快速做出方向决策。

注意事项
  • 外观 token 与已有 CSS 冲突 — 沙盒预览可避免冲突；选择性地集成
搭配使用： ui-ux-pro-max-skill

从脚本生成短营销视频

👤 市场 / DevRel ⏱ ~60 min intermediate

何时使用： 你有一个 30 秒的脚本，需要一段视频。

步骤
  1. 分镜
    Turn this script into a HyperFrames storyboard — 6 shots, brand-styled.✓ 已复制
    → 分镜脚本
  2. 渲染
    Render to MP4.✓ 已复制
    → MP4 已写入

结果： 品牌一致的短视频，无需找设计师。

注意事项
  • 渲染时间较长 — 先在分镜阶段充分迭代，再做最终渲染

组合

与其他 MCP 搭配，撬动十倍杠杆

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

品牌外观 + 设计基础原则

Use UI/UX Pro Max for typography, open-design for brand skin.✓ 已复制
open-design-skill + filesystem

输出到项目目录

Export deck to /presentations/launch/.✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
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

成本与限制

运行它的成本

API 配额
N/A
每次调用 Token 数
渲染密集型输出（视频）消耗较重
费用
免费
提示
在分镜上迭代，而不是反复做最终渲染

安全

权限、密钥、影响范围

最小权限： Local sandbox + file write
凭据存储： 无
数据出站： 无——本地运行

故障排查

常见错误与修复

Render fails for video

确保 ffmpeg 已安装；skill 会提示缺失的依赖

Skin doesn't apply consistently

部分模板早于外观系统；使用 README 中列出的支持外观的模板

替代方案

Open Design 对比其他方案

替代方案何时用它替代权衡
Anthropic Claude Design需要官方支持闭源；可定制性较低
Hand-coded designs你有设计师迭代速度更慢

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills