OpenDesign: The Open-Source Claude Design & Figma Alternative ⚡
How to use OpenDesign to turn your coding assistant into an agency-grade design studio: generating web prototypes, slide decks, mobile UIs, and DESIGN.md contracts.
⚡ TL;DR
- OpenDesign is the open-source alternative to Claude Design and Figma.
- Rather than forcing designers to push static vector pixels on a canvas, OpenDesign produces single-page interactive artifacts in real CSS, HTML, and React components shaped by an explicit DESIGN.md design system contract.
- It runs natively alongside 26+ coding agent runtimes including DeepSeek Harness (dsh), Claude Code, and Antigravity.
Artifact Formats in OpenDesign Studio
- Web Prototypes: Interactive single-page web experiences rendered in sandboxed iframes.
- Multi-Slide Decks: Presentation decks with speaker notes and PDF/PPTX export.
- Mobile App UIs: Pixel-perfect iOS and Android component previews.
- HyperFrames Motion: Animated graphics and generative video transitions rendered in code.
MASTER PROMPT
1-Click DESIGN.md Brand Design System Generator
Paste this prompt into Claude or OpenDesign to extract and compile an exhaustive DESIGN.md design system for your website or product:
OPEN_DESIGN_TOKEN_ENGINE
Act as a Principal Design Systems Architect and Frontend Engineer. Analyze my product / website [DESCRIBE PRODUCT OR PASTE STYLES] and generate a complete, production-grade DESIGN.md specification: 1. CORE BRAND TOKENS: - Color Palette: Primary, Secondary, Background, Surface, Border, Ink/Text, Accent, and Status colors (Hex + CSS Variable names) - Typography: Primary font family, Monospace/Code font, Heading scale (H1-H4 with font-size, line-height, letter-spacing, and font-weight) - Elevation & Shadows: Flat retro borders, neumorphic offsets, or box-shadow tokens 2. COMPONENT DESIGN CONTRACTS: - Button States: Primary, Secondary, Accent, Disabled, Hover, and Active click transforms - Card / Window Containers: Border width, border-radius, padding scales, and header titlebars - Badge & Tag Specs: Micro-typography, background tints, and border contrast 3. LAYOUT & RESPONSIVENESS: - Max-width containers, breakpoint grid rules, and zero-horizontal-scroll enforcement Output the result as a clean, ready-to-save DESIGN.md document.
GITHUB REPO
open-design
View on GitHub ->
Open-source Figma and Claude Design alternative tailored for coding AI agents.
Prerequisites:
Node.js 18+, npm / pnpm# 1. Clone the open-design repository
git clone https://github.com/nexu-io/open-design.git
cd open-design
# 2. Install dependencies
npm install
# 3. Start local design canvas
npm run dev
# 4. Connect Claude Code or Cursor via MCP
npx @open-design/mcp-server