Open Design: Local, Model-Agnostic UI Prototyping with 72 Design Systems
Open Design is an open-source, local-first design engine for generating web prototypes, mobile app mockups, and HTML slide decks. It scans the system PATH for installed AI agent harnesses (Claude Code, Codex, OpenCode, Gemini CLI, and others) and lets you switch between them per project. All generated files are stored locally. The quality of output is stabilized through a library of 72 brand-grade design systems and a skill-based architecture.
How it achieves consistent output
Design systems
Open Design bundles 72 design systems modeled after companies like Stripe, Miro, Linear, and Spotify. Each system defines typography (font families, sizes, weights, line heights), color tokens with assigned roles, spacing and grid rules, and component styles for buttons, inputs, cards, and navigation. Selecting a design system at project creation constrains the AI's output, preventing arbitrary style choices and producing cohesive, professional results regardless of which model is being used.
Skills
Skills are pre-programmed capabilities the agent can invoke during generation. Instead of relying on the model's general knowledge for every task, the agent selects from specific tools: a dashboard skill for layouts with KPIs and data tables, a slide-deck skill for presentation output using PptxGenJS, a shadcn-ui skill for shadcn/ui components, and a threejs skill for interactive 3D browser experiences.
This architecture makes generation more reliable: complex requests are broken into smaller steps, each handled by the appropriate skill.
Installation
Desktop app
Pre-built installers (.dmg for macOS, .exe for Windows) are available in the GitHub repository's Releases section.
Docker
The interface is available at http://localhost:7456.
From source
Requires Node.js and pnpm.
The terminal outputs a local URL such as http://127.0.0.1:57732.
Generating a prototype
Agent and model selection
In the interface, the agent status bar in the lower-left shows the current selection. Clicking it opens the Execution & model settings. Under the Local CLI tab, Open Design lists all detected agents. Selecting one reveals model-specific options. The model dropdown selects the exact version for the session.
Creating a project
In the Prototype tab, set a project name, select a design system from the dropdown or the full gallery, and click Create. Target platform and fidelity are configurable but default to responsive web at high fidelity.
Prompting with context
The prompt box accepts natural language instructions. For redesigning an existing application, providing the URL of the running app gives the agent concrete context:
Make me a well-designed, simple-looking site for a product that I can use to search for YouTube channels. Start with a simple input box, and hide the more complex search features under a toggle or cog. Make the design similar to a well-designed Google search site. The website I want you to redesign is currently at this URL:
http://localhost:5173. If you are able to, use agent-browser or a similar tool to visit the site and understand its features, including all the different pages and inputs.
After submission, Open Design presents a questionnaire (audience, visual tone, brand context, pages needed) to refine the output before generation begins.
The agent's execution is visible in a side panel during generation: bash commands, agent-browser calls to the provided URL, and file creation in real time.
Reviewing and iterating
Completed files appear as tabs in the preview pane. For a multi-page application, each page (search home, search results, favourites) is a separate HTML file. Additional prompts refine the output. The Finalize design package button in the upper left synthesizes all project artifacts into a complete package.
Export and deployment
The Share button in the upper right opens a menu with several options.
Export formats: - Download as .zip: all HTML, CSS, and assets packaged for local hosting or inspection - Export as standalone HTML: a single self-contained file, useful for handing to a coding agent for implementation in a framework - Export as PDF: for static documentation - Export as PPTX: PowerPoint presentation from the design - Export as Markdown
Direct deployment: - Deploy to Vercel - Deploy to Cloudflare Pages
One-click deployment pushes the generated site to the selected platform and returns a shareable URL.
Final thoughts
Open Design's main practical advantages are model flexibility and local execution. Being able to switch between Claude Code, Codex, and open-source models within the same tool, without sending project data to a cloud service, addresses two recurring pain points in AI-assisted prototyping. The design system library and skill architecture provide output quality that would otherwise require significantly more prompt engineering to achieve with a raw model.
The tool is most useful for generating high-fidelity starting points that can then be handed to a coding agent for full implementation, or shared as interactive prototypes with stakeholders before development begins.
Source code is at github.com/nexu-io/open-design.
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.