From spec to front-end, no handoff in between
Point your agent at a DESIGN.md and a description; it writes on-system, real front-end code — components, screens, dashboards — straight in your project. No redlines, no “waiting on design.”
In one line
Open Design closes the designer-to-engineer gap by making the design system machine-readable: the same agent that writes your code applies the system and renders real UI.
How an engineer uses Open Design
- 01
Read the system, not a redline
The DESIGN.md lives in the repo. Your agent reads it the way it reads the rest of the codebase — no exported specs to interpret.
- 02
Generate on-system UI
Describe the screen or component; the agent writes front-end that already matches the system. Prototypes, admin dashboards, internal tools — in minutes.
- 03
It is already your code
Output is HTML / framework code in your repo, reviewable in a PR. No translation step between “the design” and “the build.”
What an engineer can generate
prototype Read full prompt → Docs Page
A documentation page — inline-start nav, scrollable article body, inline-end table of contents. Use when the brief mentions "docs", "documentation", "guide", "API reference", or "tutorial".
prototype Read full prompt → Eng Runbook
An engineering runbook — service overview, alerts table, dashboards links, common procedures with copy-pasteable commands, on-call rotation, and an incident-response checklist. Use when the brief mentions "runbook", "ops doc", "on-call guide", "SRE doc", or "运维手册".
deck Read full prompt → Html Ppt Knowledge Arch Blueprint
奶油蓝图架构 deck — 奶油纸 #F0EAE0 底色 + 单一锈红 #B5392A 高亮、48px 蓝图网格 mask、2px 黑边硬卡片、pipeline 步骤盒（其中一个抬高）、右侧锈红 insight callout、Playfair 衬线大字、SVG 虚线反馈环。零渐变零软阴影，认真且印刷友好。
deck Read full prompt → Html Ppt Tech Sharing
Conference / internal tech-talk deck — GitHub-dark, JetBrains Mono, terminal code blocks, agenda + Q&A pages. Use for engineering presentations, internal sharing sessions, conference talks, and code-heavy walkthroughs.
prototype Read full prompt → Data Visualization Report
Turns CSV, Excel, or JSON data into a polished visual report page.
prototype Read full prompt → Kanban Board
Kanban / task board with columns (To do / In progress / In review / Done), draggable-looking cards, assignee avatars, swimlanes, and a top filter bar. Use when the brief mentions "kanban", "task board", "sprint board", "trello", "看板".
Front-end with Open Design vs. the handoff way
| What you need | With Open Design | Design-to-dev handoff |
|---|---|---|
| Get a design to build from | ●A DESIGN.md your agent reads directly | A Figma file you re-interpret by hand |
| Match the system | ●Enforced automatically at generation time | Eyeball it against a spec, drift creeps in |
| Build internal tools / dashboards | ●Prompt → on-system front-end in the repo | Wait for a designer, then build it twice |
| Review | ●It is code — diff it in a PR | Pixel-compare against a mockup |
| Cost & lock-in | ●Open source, in your repo, runs locally | A design tool the whole team must license |
Real, on-system front-end generated straight in the repo. Pick one close to what you are building and describe it.
Engineering FAQ
-
01 Do I still need a designer?
For brand and direction, yes. But for building on-system UI and internal tools, the agent reads the DESIGN.md and writes the front-end — no handoff round-trip.
-
02 What does it output?
Real HTML / framework code in your repo, reviewable in a PR — not a mockup you reimplement.
-
03 How does it stay on system?
The DESIGN.md is the source of truth; the agent applies it at generation time, so output matches without manual pixel-checking.
-
04 Which agents can I use?
Claude Code, Codex, Cursor Agent, Gemini CLI and more first-party adapters, with your own provider keys.
Generate your next UI tonight
Star the repo, install Open Design, and turn a DESIGN.md into front-end — in the agent you already use.