Skip to content
UXClaim
Design Ops

Open Design CLI

Generate web prototypes, decks, and layouts using Open Design's 70+ skills and 139+ design systems within Claude Code.

View source More in Design Ops

What it does

Open Design CLI wraps the Open Design prompt composer to generate production-ready web prototypes, slide decks, dashboards, marketing pages, and editorial layouts directly inside Claude Code. No external daemon, browser, or second agent required.

How it works

The skill runs a 7-question discovery flow—artifact kind, surface, tone, brand, audience, scale, and constraints—then composes a system prompt (~30-60KB) by selecting from 70+ design skills and 139+ design systems. It treats the composed prompt as turn-scoped directives and builds artifacts using native Claude Code tools. Image generation routes through GPT Image 2 at no marginal cost.

Skip discovery for direct invocations: /open-design-cli skill=<id> design-system=<id>

Use cases

  • Ship landing pages, marketing sites, and product dashboards in minutes
  • Generate on-brand pitch decks and editorial layouts
  • Explore design systems without context switching
  • Prototype UX solutions with consistent brand guidance

Who benefits

Product designers and non-technical stakeholders who need rapid, brand-compliant prototypes. Works best with a local Open Design repository and Node.js 20+.

Frequently asked questions

How do I install open-design-cli?
Clone the repo into your Claude Code skills directory (`~/.claude/skills/open-design-cli`), then clone Open Design locally (`~/repos/open-design` or set `OD_REPO`). Restart Claude Code to pick up the skill.
What does open-design-cli generate?
Web prototypes, slide decks, dashboards, marketing pages, and editorial layouts. It uses 70+ design skills and 139+ design systems from the Open Design catalogue to match your brand, tone, and constraints.
Do I need Open Design's daemon or browser?
No. The CLI runs entirely inside Claude Code using native tools. It imports Open Design's prompt composer and design systems from a local clone at runtime, no external services needed.
Can I skip the discovery questions?
Yes. Use direct invocation syntax: `/open-design-cli skill=<id> design-system=<id>` to bypass the 7-question flow and build immediately.
How are images generated?
Image generation routes through GPT Image 2. On a ChatGPT subscription, this has zero marginal cost, keeping prototype generation affordable.
What are the requirements?
Claude Code (CLI, desktop, web, or IDE), Node.js 20+ with `tsx`, and a local clone of nexu-io/open-design. Set `OD_REPO` env var if your clone isn't in `$HOME/repos/open-design`.
Can I use it for brand consistency?
Yes. The discovery flow captures brand, tone, and audience. The composed prompt enforces consistency across all generated artifacts using your selected design system.
What's the license?
Apache License 2.0. The skill does not redistribute Open Design source; it imports modules from your local clone at runtime and provides upstream attribution.

Glossary

System prompt
A 30-60KB set of turn-scoped directives composed from Open Design's skill and design system catalogues. It guides Claude Code to generate brand-consistent artifacts.
Design skill
A reusable pattern or technique from Open Design's 70+ catalogue (e.g., card layouts, form designs, navigation patterns) that can be applied to your prototype.
Design system
A comprehensive set of components, tokens, and guidelines (one of 139+ in Open Design's catalogue) that ensures visual and interactive consistency across your artifact.
Discovery flow
A 7-question sequence that captures artifact kind, surface, tone, brand, audience, scale, and constraints before generating your design.
Claude Code
A collaborative coding environment where Claude can read, edit, and write files directly. Open Design CLI runs as a skill inside Claude Code.

More in Design Ops

All →
Design Ops

AI Atelie

Local-first, open-source design tool. Bring your own AI agent (Claude Code, Kimi, Codex). Generate designs as HTML/JSX/CSS folders with instant tweaks, inspe...

aiatelie
Design Ops

AI Toolbox

Claude Code plugin with 13+ skills for code review, accessibility audits, design systems, and end-to-end feature planning backed by ClickUp.

Matisantillan11
Design Ops

Architect Playbook

Self-improving Claude Code audit skills for TypeScript/React codebases covering architecture, security, accessibility, performance, testing, and more.

BenSheridanEdwards
Design Ops

Chrome DevTools Skill

Browser debugging, automation, performance analysis, accessibility auditing, and LCP optimization for Claude Code without MCP server setup.