open-design — local-first design artifact generation
Open-source alternative to Anthropic's Claude Design — generates web, mobile, and desktop prototypes, decks, and media artifacts using coding agents already installed on your machine.
Open Design is most useful when you choose the smallest generation mode that fits the job:
- start with a prototype before reaching for a full deck
- pick one design system before layering custom styles
- choose one output format (HTML review before PDF/PPTX export)
- use the Turn 1 discovery form to reduce redirect cycles before generation begins
When to use this skill
- The user needs a local-first UI prototype, presentation deck, or document artifact from a single prompt
- The user wants to generate design artifacts using coding agents they already have installed (Claude Code, Cursor, Gemini CLI, etc.)
- The user wants to apply one of 72 built-in design systems (Linear, Stripe, Vercel, Notion, Apple, etc.) to their output
- The user needs multi-format export: HTML review → PDF, PPTX, ZIP, or Markdown
- The user wants AI-generated images, video, or audio media embedded in design artifacts
- The user wants to extend Open Design with custom file-based skills or install it as a Claude Code plugin
Do not use this skill when
- The task is live UI component authoring in a real codebase → route to or
- The task is video production or Remotion animation → route to
- The task is a data-driven presentation deck without design-system application → route to
- The task is compressing or optimizing existing media files → route to
- The task is a broad web UI critique or audit → route to
Instructions
Step 1: Capture the generation mode
Collect the minimum packet before choosing a workflow:
- Output type: UI prototype, presentation deck, landing page, document, or media artifact
- Design system: one of the 72 built-ins (Linear, Stripe, Vercel, Notion, Tesla, Apple…) or custom
- Visual direction: one of 5 directions (minimal, bold, playful, enterprise, dark)
- Export format: HTML review, PDF, PPTX, ZIP, or Markdown
- Agent: which installed CLI to delegate to (auto-detected or explicit)
Use this rule set:
- If output is a UI prototype or landing page → choose mode
- If output is a presentation or investor deck → choose mode
- If output is a long-form document or spec → choose mode
- If media (image/video/audio) generation is the primary output → choose mode
- If the user has not chosen a design system → use the Turn 1 discovery form to reduce drift before generating
Step 2: Install Open Design
bash
# Clone and install
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
pnpm install
# Start the local web UI
pnpm tools-dev run web
Requirements:
Plugin install (Claude Code):
bash
claude plugin marketplace add nexu-io/open-design
Install from oh-my-skills:
bash
npx skills add https://github.com/akillness/oh-my-skills --skill open-design
Lifecycle commands:
bash
pnpm tools-dev start # start daemon
pnpm tools-dev stop # stop daemon
pnpm tools-dev run web # open local web UI
pnpm tools-dev status # check status
pnpm tools-dev logs # tail logs
pnpm tools-dev inspect # inspect agent connections
pnpm tools-dev check # preflight check
Step 3: Choose the right generation mode
A. Prototype mode
Use when the user needs a web, mobile, or desktop UI mockup.
Mode: Prototype
Design system: Linear (or any of 72 built-ins)
Visual direction: minimal / bold / playful / enterprise / dark
Output: HTML review → PPTX / PDF / ZIP
Best for:
- SPA dashboards, landing pages, mobile screens
- Multi-page prototype flows
- Design-system-aligned mockups before actual implementation
B. Deck mode
Use when the user needs an investor pitch, roadmap, or architecture deck.
Mode: Deck
Design system: Vercel / Stripe / Notion (pick one)
Visual direction: enterprise / bold
Output: PPTX, PDF, or Google Slides
Best for:
- Investor / roadmap / launch decks
- Architecture and demo presentations
- Workshop or game-pitch slide decks
Routes: for deck-only work without design-system application, route to
.
C. Document mode
Use when the output is a long-form technical document, spec, or styled report.
Mode: Document
Design system: pick one for consistent typography/spacing
Output: Markdown, PDF
Best for:
- Design specs and system documentation
- Styled technical reports exported to PDF
D. Media mode
Use when the primary output is generated images, video, or audio.
Supported generation backends:
- Images: gpt-image-2 (via integrated coding agents)
- Video: Seedance 2.0
- HTML → MP4: HyperFrames
- 93 ready-to-use prompt templates across product, marketing, and social media categories
Step 4: Apply a design system
Open Design includes 72 built-in design systems with:
- Consistent color palettes, typography, and spacing tokens
- Cross-format coherence (same system across HTML, PPTX, and PDF)
- Named systems from real products (Linear, Stripe, Vercel, Notion, Tesla, Apple, and more)
Keep to one design system per artifact. Mixing multiple systems produces inconsistent output.
Step 5: Export the artifact
Choose the smallest output format that meets the need:
| Format | Best for |
|---|
| HTML review | Quick stakeholder review, iteration before final export |
| PPTX | Presentation slides, editable after export |
| PDF | Final delivery, print |
| ZIP | Full artifact package including assets |
| Markdown | Documentation, wiki integration |
Prefer HTML review first to catch direction issues before committing to PDF/PPTX export.
Step 6: Extend with custom skills
Open Design supports file-based skill plugins:
- Drop a skill folder into the directory and restart
- Skill folders follow the same convention used in this repo
- Community skills and design systems can be contributed via GitHub issues and PRs
bash
# Add a custom skill to Open Design
cp -r my-custom-skill open-design/skills/
pnpm tools-dev stop && pnpm tools-dev run web
Examples
Example 1: SaaS dashboard prototype
Mode: Prototype | Design system: Linear | Direction: minimal
Prompt: "Analytics dashboard with sidebar nav, KPI cards, and a time-series chart"
Export: HTML review → PPTX
Example 2: Investor pitch deck
Mode: Deck | Design system: Vercel | Direction: enterprise
Prompt: "10-slide investor deck: problem, solution, market, traction, team, ask"
Export: PPTX
Example 3: Product image generation
Mode: Media | Backend: gpt-image-2 | Template: Product hero
Prompt: "Clean product hero image for a developer CLI tool, dark background, code aesthetic"
Example 4: Plugin install
bash
# Claude Code plugin
claude plugin marketplace add nexu-io/open-design
Best practices
- Use the Turn 1 discovery form to freeze design system, visual direction, and output format before generation — do not skip it for ambiguous requests.
- Choose one design system per artifact to keep cross-format output coherent.
- Prefer HTML review before committing to PDF/PPTX to save iteration cost.
- Use media mode only when generated images/video are the primary deliverable, not a side effect.
- For real codebase UI components, route to or instead.
- When adding file-based skills to Open Design, follow the same format used in this repo.
- Prefer before first use to verify Node.js and pnpm version requirements.
References
- Open Design GitHub Repository
- stitch-skills — for live AI-generated UI components in a real codebase
- presentation-builder — for data-driven deck artifacts without design-system application
- video-production — for Remotion/programmable video production
- compresso — for offline media compression
- web-design-guidelines — for broad web UI audits and guidelines