Local-first · Apache-2.0 · agent-native

The design engine now lives on your laptop.

Open Design turns the coding agent already on your PATH into a brand-grade studio — prototypes, decks, live artifacts and motion, all shaped by a DESIGN.md brand contract. No cloud round-trip. No lock-in.

Open localhost:7456 → Read the source

MCP server open-design · wired into Claude Code · ✓ Connected

155

skills installed

150

DESIGN.md systems

agent CLIs

261

plugins

Wired into your agent

One install. The tools you already run become the design engine.

The daemon scans your PATH for Claude Code, Codex, Cursor, Gemini and 17 more — then exposes your projects to them over MCP. The agent always sees the live file, never a stale export.

claude mcp get open-design

# registered into Claude Code — user scope, every project
open-design:
  Scope:   User config (available in all your projects)
  Status:  ✓ Connected
  Type:    stdio
  Tools:   list_projects · get_artifact · get_file · search_files · create_artifact

$ "use open-design to build a pricing page with the linear-app system"
→ streaming <artifact> · sandboxed preview · export HTML / PDF / PPTX / MP4

One project · many surfaces

The same design system streams out every artifact type.

Prototype

Single-page web · desktop · mobile artifacts that read your DESIGN.md and render in a sandboxed iframe.

HTML · downloadable source

Live artifact

Editable KPI walls and decision rooms with a tweaks panel — re-render in place, no reload.

manifest-driven

Deck

Magazine and Swiss-grid presentations you page through by keyboard and export to PPTX / PDF.

15 templates · 36 themes

Image

Brand-grade visual assets at high resolution from 93 ready-to-replicate prompt templates.

gpt-image-2 · BYOK

HyperFrame

Agent-written HTML + GSAP rendered to a deterministic MP4 — headless Chrome + FFmpeg.

1920×1080 · 30fps

Refresh a repo

Hand the agent a git repo + DESIGN.md and it refactors your real components to the brand spec.

Figma → React / Vue

Glowing wireframe slab over a luminous grid — agent-native motion graphics

HyperFrames · HTML + GSAP → deterministic MP4

Meta: this page wasn't themed by hand. It was rendered straight from the bundled design-systems/linear-app/DESIGN.md — a 9-section brand contract covering palette, type, spacing, motion and anti-patterns. Swap the system, the next render re-skins itself. That's the whole idea.

Browse 150 systems →