Open Design

What is Open Design

Open Design is an open-source local-first AI design workspace, positioned as an alternative to Claude Design . It does not bundle AI models; instead, it directly calls the coding Agents already on your computer, such as Claude Code、Cursor、Kimi、Codex and 21+ others, driving workflows through SKILL.md skills and the DESIGN.md design system. You can complete the full loop of requirement definition, visual direction locking, artifact generation, and review on the desktop, outputting web prototypes, dashboards, presentations, images, and videos, and exporting them as HTML, PDF, PPTX, or MP4.

Open Design's main features

• Open-source local-first: Apache-2.0 license, an open-source alternative to Claude Design, with all data stored locally and no dependence on a single vendor's cloud services.
• Agent-native driven: supports 21+ coding Agents (Claude Code, Cursor, Kimi, Codex, Gemini, Copilot, DeepSeek, etc.), with one-click integration via the MCP protocol.
• Skill system: built-in 259+ reusable design skills based on SKILL.md , loaded by dragging into a folder, and directly readable and executable by the Agent.
• Design system: provides 142+ brand-level DESIGN.md design systems (Linear, Stripe, Apple, Vercel, etc.), and supports automatically extracting brand specifications by uploading screenshots or Figma files.
• Multi-form artifact output: can generate web prototypes, real-time dashboards, presentations (Decks), images, videos, and HyperFrames motion graphics.
• Multi-format export: artifacts can be exported as HTML, PDF, PPTX, MP4, and other formats directly usable in engineering.
• BYOK support: bring your own API Key, compatible with any endpoint such as OpenAI, Anthropic, Google, Moonshot, OpenRouter, self-hosted vLLM, etc.
• Four-step design loop: Detect (automatic Agent detection) → Discover (30-second requirements questionnaire) → Direct (lock visual direction) → Deliver (streaming generation and preview).

How to use Open Design

• Download and install: visit the Open Design official website https://open-design.ai/ , download the desktop app (macOS / Windows), or clone the source code github.com/nexu-io/open-design to install with Node 24 + pnpm, or docker compose up one-click deployment.
• Connect coding Agents: after installation, run od mcp install <agent> to connect local Agents (Claude Code, Cursor, Kimi, Codex, and 21+ others) to Open Design's MCP server with one click.
• Start the daemon: after opening the app, the daemon automatically scans $PATH for Agents, loading 259+ skills and 142+ design systems.
• Create a project: on the Home page, select the artifact type (prototype, dashboard, presentation, image, video, etc.), and bind a DESIGN.md design system (such as Stripe, Apple style, or a custom brand).
• Lock requirements: answer the 30-second questionnaire (purpose, audience, tone, scale, brand background) to quickly align the design direction.
• Choose visual direction: choose from 5 deterministic visual options; the system automatically locks the OKLch palette, font stack, and layout posture.
• Generate and preview: The Agent writes artifacts to the local disk and previews the real CSS rendering in real time within a sandboxed iframe.
• Review & Iterate: Critically optimizes the artifact through a built-in 5-dimension self-evaluation system (philosophy, hierarchy, execution, specificity, restraint).
• Export & Deliver: After confirmation, export as HTML, PDF, PPTX, MP4, or ZIP, with artifacts kept directly in your project directory.

Core Advantages of Open Design

• Fully open-source and free: Apache-2.0 license, no subscription fees, free to fork and self-host.
• Local-first, data autonomy: All artifacts and project data are stored on the local file system, never routed through vendor clouds, giving you controllable privacy.
• Agent-agnostic, switch freely: Supports 21+ coding Agents (Claude, Cursor, Kimi, Codex, etc.); skills and systems are not tied to a specific model, so switching Agents only requires changing one line of configuration.
• BYOK cost control: Bring your own API Key, pay the provider of your choice directly, no middleman cut, and support for OpenRouter and self-hosted models.
• Files as the design system: Based on SKILL.md and DESIGN.md , a declarative file system where skills and design systems are reusable, version-controllable, and shareable across teams.
• Real code rendering: Outputs real CSS, real fonts, and real components, not canvas pixels, so artifacts can go straight into engineering workflows.
• Multi-format one-click output: The same design system can stream-generate web prototypes, dashboards, PPTs, images, videos, and HyperFrames.
• Zero-cost brand migration: Upload a screenshot or Figma export file, and the Agent automatically extracts it as DESIGN.md, after which all subsequent skills automatically apply that brand specification.

Comparison of Open Design with Similar Competitors

Open Design use cases

• Rapid product prototyping: Use 259+ skills and 142+ design systems to quickly generate high-fidelity interactive prototypes for web, desktop, or mobile through natural language descriptions, with real CSS rendering that can be used directly for development handoff.
• Brand visual system construction and migration: Upload brand screenshots or Figma export files, and the Agent automatically extracts them into DESIGN.md, establishing a reusable brand specification to ensure visual consistency across all outputs (prototypes, PPTs, images).
• Presentation and proposal creation: Use the Magazine Decks skill to generate editorial-grade slides, supporting WebGL motion effects and magazine layouts, and export PPTX or PDF for client reports and fundraising pitches.
• Marketing asset and multimedia content generation: Use the Synthetic Matter skill to generate images, videos, and HyperFrames motion graphics, completing everything from copy to visuals within a unified chat interface.
• Real-time data dashboard building: Generate interactive Live Artifacts, connect to real data sources to build internal monitoring panels, operations dashboards, or SaaS backend interface prototypes.
• Design system standardization and team collaboration: Store the team's DESIGN.md and SKILL.md in a shared repository, so all members produce output driven by the same set of files, enabling version-controlled management of design specifications.