Open Design takes a text prompt and returns a working prototype backed by 71 brand-grade design systems — Linear, Stripe, Vercel, Airbnb, Tesla, Notion, and more. It hit 18K GitHub stars in five days and is already running in production teams.
Step 1: Clone and Install Open Design
Clone the repository and install dependencies:
bash
git clone https://github.com/nexu-io/open-design.git
cd open-design
npm install
No account, no API key, no subscription required.
Step 2: Start the Local Server
Run the dev server:
bash
npm run dev
Open http://localhost:3000 in your browser. You now have a fully local design-to-prototype environment.
Step 3: Choose a Design System
Before writing your first prompt, pick a design system from the 71 built-in options. Browse the selector panel and choose the brand aesthetic closest to your project — Linear for a clean SaaS look, Stripe for a fintech feel, Vercel for a developer-tool vibe, and so on. This single choice sets typography, color tokens, spacing, and component style for everything the tool generates.
Step 4: Write Your First Prompt
Type a plain-English description of the screen or component you need. Be specific about layout, purpose, and key actions. Example:
> "A SaaS pricing page with three tiers, a monthly/annual toggle, feature comparison table, and a prominent CTA button. Use the Linear design system."
Hit generate. Open Design returns a working HTML prototype in seconds.
Step 5: Iterate and Refine
Refine the output with follow-up prompts in the same session — adjust colors, swap components, add a dark mode variant. Each iteration builds on the last without restarting from scratch.
Step 6: Export Your Work
When the design is ready, export in the format your workflow needs:
- HTML — drop straight into a codebase or share with engineers
- PDF — client presentations and documentation
- PowerPoint — stakeholder decks
- MP4 — motion previews for social or handoff
All exports happen locally. Nothing leaves your machine.
Why This Works
Design systems do the hardest visual work before you type a single word — spacing, type scale, color semantics, and component hierarchy are already resolved. That lets the model focus on layout logic and content structure rather than inventing a visual language from scratch. Because everything runs locally under an MIT license, there is no vendor lock-in and no usage ceiling to hit mid-project.
Pro Tips
- Start with a real brand's system even if your project is unbranded. Stripe or Linear will produce more polished output than a generic prompt because the token relationships are battle-tested.
- Export HTML first, then tweak in code. The generated markup is a faster starting point than a blank component file.
- Use the MP4 export for async feedback. Drop a short motion preview into Slack instead of scheduling a design review call.
- Watch the GitHub repo. At 18K stars in five days, new design systems and export targets are shipping fast — a
git pullkeeps you current without any migration cost.
Open Design is available now at github.com/nexu-io/open-design. MIT license, free forever, no cloud dependency.
Want a hand?
Book a 30-min call.
Walk through your stack with us. We'll find the bottleneck and map out the exact wiring you need — free.