Open Design (Claude Skill) — Use Cases, Install & Live Demo

Why use it

Key features

19 design skills — web, mobile, slides, image, video
71 brand-grade design system skins
Sandboxed preview (HTML/PDF/PPTX/MP4)
Works with Claude Code, Codex, Cursor, Gemini, OpenCode, Copilot
Local-first; no SaaS dependency

Live Demo

What it looks like in practice

ready

Install

Pick your client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %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
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "open-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ],
      "_inferred": true
    }
  }
}

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "open-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ],
      "_inferred": true
    }
  }
}

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "open-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ],
      "_inferred": true
    }
  }
}

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "open-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ]
    }
  ]
}

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json

{
  "context_servers": {
    "open-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/nexu-io/open-design",
          "~/.claude/skills/open-design"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add open-design-skill -- git clone https://github.com/nexu-io/open-design ~/.claude/skills/open-design

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use Open Design

Generate a pitch deck in a specific brand style

👤 Founders / PMs ⏱ ~30 min beginner

When to use: You need a 10-slide deck and don't want to fight Keynote.

Flow

Pick brand

Use open-design. Pick the Stripe-style skin. List its tokens.✓ Copied

→ Skin tokens shown
Draft

Generate a 10-slide deck for our launch — title, problem, solution, traction, roadmap, ask. Use the Stripe skin.✓ Copied

→ 10 slides with consistent style
Export

Export to PPTX so I can edit in Keynote.✓ Copied

→ PPTX file written

Outcome: Deck that doesn't look AI-generated; consistent brand feel.

Pitfalls

Image generation looks generic — Skill provides icon and illustration sets; specify which to use

Combine with: filesystem

Prototype a landing page in a brand style

👤 Devs / designers iterating on hero pages ⏱ ~25 min intermediate

When to use: You need 3 visual directions before building for real.

Flow

Variants

Generate 3 hero variants — Linear, Notion, and Vercel skins. Same content, different style.✓ Copied

→ 3 HTML previews
Pick + iterate

Take the Linear one. Tighten typography and add a secondary CTA.✓ Copied

→ Refined HTML

Outcome: Fast directional decisions before deep build.

Pitfalls

Skin tokens collide with your existing CSS — Sandbox preview avoids conflicts; integrate selectively

Combine with: ui-ux-pro-max-skill

Generate a short marketing video from a script

👤 Marketing / DevRel ⏱ ~60 min intermediate

When to use: You have a 30-second script and need a video.

Flow

Storyboard

Turn this script into a HyperFrames storyboard — 6 shots, brand-styled.✓ Copied

→ Storyboard
Render

Render to MP4.✓ Copied

→ MP4 written

Outcome: Brand-consistent short video without going to a designer.

Pitfalls

Render time is non-trivial — Iterate on storyboard before final render

Combinations

Pair with other MCPs for X10 leverage

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

Brand skins + design fundamentals

Use UI/UX Pro Max for typography, open-design for brand skin.✓ Copied

open-design-skill + filesystem

Output to project directories

Export deck to /presentations/launch/.✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call	Cost
list_skins	(none)	Pick brand style	free
design_web	spec, skin	Web pages / prototypes	tokens
design_slides	outline, skin	Pitch / talk decks	tokens
export	format: html\|pdf\|pptx\|mp4	Final delivery	render time

Cost & Limits

What this costs to run

API quota: N/A
Tokens per call: Heavy on render-heavy outputs (video)
Monetary: Free
Tip: Iterate on storyboard, not final render

Security

Permissions, secrets, blast radius

Minimum scopes: Local sandbox + file write

Credential storage: None

Data egress: None — local

Troubleshooting

Common errors and fixes

Render fails for video

Ensure ffmpeg installed; the skill flags missing deps

Skin doesn't apply consistently

Some templates predate skin system; use skin-aware templates listed in README

Alternatives

Open Design vs others

Alternative	When to use it instead	Tradeoff
Anthropic Claude Design	You want first-party support	Closed; less customizable
Hand-coded designs	You have a designer	Slower iteration

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills