Open Design
github.com/nexu-io/open-design- Category
- AI Tools
- Rank
- No. 91Tools index
- Pricing
- Open Source
- Type
- APP
- Builder
- nexu-io
- GitHub
- 95.0k stars
- Latest release
- open-design-v0.22.0
- Date
About
Open-source alternative to Claude Design that generates web prototypes, mobile apps, presentations, and design systems using local coding agents. Connects with 15+ AI coding CLIs (Claude Code, Cursor, Copilot, etc.) and includes 72 design systems with local-first workflow.
What it does
Open Design turns a brief and a chosen design system into working visual artifacts. Its studio streams single-page prototypes into a sandboxed preview, while the same project can produce decks, images, dashboards, and motion graphics. Outputs use real web code and can be exported in common document, web, and media formats.
Why it's ranked here
The strongest case is breadth joined to a coherent workflow: brief, design direction, streamed artifact, critique, and delivery. Coding-agent integration, reusable automations, plugins, and a shared brand contract make it more than a prompt wrapper. The repository also shows substantial desktop, web, sidecar, and packaging machinery behind the product claims.
What's good
Artifacts remain practical after generation. Prototypes use real HTML, CSS, fonts, and components, with downloadable source and sandboxed preview. A single design contract shapes several output types. The product supports repeatable automations, distributable plugins, external MCP tools, and direct exports to HTML, PDF, PPTX, and MP4.
Tradeoffs
The architecture carries real operational weight: an Electron desktop shell, web and daemon sidecars, native dependencies, and strict Node and pnpm requirements. Agent support also depends on configuring local tools or supplying model endpoints and credentials. The supplied design-system previews are generated preset modules, so teams still need to define and maintain their own brand contract.
How to use it well
Use it when designers and engineers want agent-generated artifacts that stay close to executable source, especially across prototypes, decks, images, and recurring branded workflows. Start with a clear design contract, choose a focused skill, then critique the streamed result before export. It does not replace detailed freeform canvas editing or remove the need for model access.
Technical notes+
The root package.json defines a private ESM pnpm workspace, requires Node ~24, exposes the od binary, and includes Electron, better-sqlite3, Sharp, TypeScript, and workspace tooling. apps/web/src/App.tsx shows a large React application spanning projects, plugins, design systems, collaboration, onboarding, configuration, and daemon-backed operations. apps/web/sidecar/index.ts and apps/web/sidecar/server.ts implement a stamped sidecar runtime, local HTTP serving, daemon proxying, standalone production startup, host validation, and IPC lifecycle. apps/packaged/src/index.ts coordinates the Electron launcher, single-instance behavior, splash state, sidecars, updates, and headless MCP bootstrap. scripts/migrate-to-plugins/lib.ts and scripts/migrate-to-plugins/main.ts provide dependency-light migration tooling that converts legacy templates, examples, and design systems into normalized plugin manifests.
Observed
- License
- Apache-2.0
- Primary language
- TypeScript, with React TSX for the web application
- Packaging
- Private ESM pnpm workspace requiring Node ~24 and pnpm 10.33.2 or later within major version 10
- Interfaces
- Native desktop application, CLI, MCP server, local web interface, and HTTP proxy endpoints
- Platform support
- Native desktop application for macOS and Windows; automatic Claude Desktop MCP configuration is limited to those platforms
- Exports
- HTML, PDF, PPTX, and MP4
- Architecture
- Electron packaged shell with separate web and daemon sidecars
Read from README.md, package.json, scripts/migrate-to-plugins/lib.ts, scripts/migrate-to-plugins/main.ts, apps/web/src/App.tsx, apps/web/sidecar/index.ts, apps/packaged/src/index.ts, apps/web/sidecar/server.ts, apps/web/src/index.css, design-systems/ant/system/index.html, design-systems/arc/system/index.html, design-systems/bmw/system/index.html, design-systems/cal/system/index.html.
What it can do
Generate web prototypes
Design requirements or prompts → Functional web prototype code
Generate mobile app designs
App specifications or requirements → Mobile app interface code and assets
Create presentations
Content requirements or outline → Presentation files with design elements
Generate design systems
Brand guidelines or design specifications → Complete design system with components and styles
Connect with AI coding CLIs
Integration requests for Claude Code, Cursor, Copilot, etc. → Established connections to external coding agents
Apply pre-built design systems
Project requirements and design system selection → Styled components using chosen design system
Execute local coding workflows
Design specifications and coding requirements → Generated code artifacts stored locally
Tags
Tech Stack
Media
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.