/ Directory / Playground / Open Design
← All servers ↗ GitHub
● Community nexu-io ⚡ Instant

Open Design

by nexu-io · nexu-io/open-design

An open-source clone of Claude Design — 19 skills + 71 brand-grade design systems, sandboxed preview, exports to HTML/PDF/PPTX/MP4.

open-design from nexu-io is a community alternative to Anthropic's Claude Design. It bundles 19 skills covering web design, mobile prototypes, slides, images, video, and HyperFrames, plus 71 prebuilt brand systems (Linear, Stripe, Vercel, Notion, Toss-style…). Runs in any Claude Code-compatible harness and ships sandboxed preview + export pipelines.

▶ Watch demo 📦 Install 💡 Use Cases

Why use it

Key features

Live Demo

What it looks like in practice

ready

Install

Author repository · Claude Skills documentation

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
  1. Pick brand
    Use open-design. Pick the Stripe-style skin. List its tokens.✓ Copied
    → Skin tokens shown
  2. 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
  3. 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
  1. Variants
    Generate 3 hero variants — Linear, Notion, and Vercel skins. Same content, different style.✓ Copied
    → 3 HTML previews
  2. 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
  1. Storyboard
    Turn this script into a HyperFrames storyboard — 6 shots, brand-styled.✓ Copied
    → Storyboard
  2. 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

ToolInputsWhen to callCost
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

AlternativeWhen to use it insteadTradeoff
Anthropic Claude DesignYou want first-party supportClosed; less customizable
Hand-coded designsYou have a designerSlower iteration

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills

Continue exploring

Related tools and workflows

Choose another guide for your workflow, or explore a collection.

Browse all topic collections → · See 29 new official additions →