Open Design: An Open-Source AI Design Framework That Connects to Your Existing Coding Agents

Why We Need an Open-Source Design Alternative

The core concept behind Cloud Design is compelling—instead of having AI models talk about design in the abstract, they directly produce previewable design artifacts, including prototypes, presentations, mobile interfaces, and various visual pages. The problem is that Cloud Design remains closed-source and paid, deeply locked into the Anthropic ecosystem. If you want private deployment, integration with Codex, Cursor agents, Gemini CLI, or running design workflows locally, it's essentially impossible.

Open Design was created to solve exactly this pain point. It's a local-first, Apache 2.0 licensed open-source design application whose core philosophy isn't to reinvent an AI agent, but to directly connect to your existing coding agents—Claude Code, Codex CLI, Cursor Agent, Gemini CLI, Open Code, Q1 Code, and others—using them as design engines.

About the Apache 2.0 License: Apache 2.0 is one of the most popular licenses for enterprise-grade open-source projects. Unlike GPL-family licenses, it allows users to freely use, modify, and distribute code in commercial products without requiring derivative works to be open-sourced, while providing explicit patent grant provisions. This makes private deployment feasible—enterprises can run and modify the code in intranet environments without worrying about legal compliance risks. In contrast, Anthropic's Cloud Design, as a closed-source SaaS product, hosts all user data and workflows on third-party servers, which is a fundamental barrier for financial, healthcare, or government institutions with data sovereignty requirements.

In other words, if you're already paying for coding agents, there's no need to subscribe to an additional design service just to generate UI assets. The cost is entirely determined by the models and agent configurations you use.

19 Composable Skills and 71 Design Systems

The Skills System: Beyond "Make Me a Nice-Looking Page"

Open Design isn't a blank chat box with a preview panel. It ships with 19 composable skills covering the vast majority of common design scenarios:

• Web: SaaS landing pages, dashboards, pricing pages, documentation pages, blogs
• Mobile: Mobile app interfaces
• Presentation: Simple slideshows, magazine cover layouts
• Work Templates: PRDs, design frameworks, weekly reports, meeting notes, operations manuals
• Business: Financial reports, invoices, Kanban boards, OKRs

Each skill sets explicit rule constraints for the agent. For example, selecting the "Dashboard" skill biases the model toward generating data-dense admin panel interfaces; selecting "Magazine Cover" makes it follow corresponding typographic conventions. This structured constraint mechanism is exactly the core architecture that AI design tools need.

How Coding Agent CLIs Work: Claude Code, Codex CLI, Cursor Agent, and similar coding agents are essentially AI agent programs with file system operation capabilities. They don't just generate code snippets—they can read and write local files, execute terminal commands, and manage project structures, forming a complete "perceive—plan—execute" loop. These tools typically communicate with the host program through standard input/output (stdin/stdout) or local sockets. Open Design leverages this characteristic by using a daemon process as an orchestration layer, decomposing design tasks into file operation sequences that agents can execute, rather than merely obtaining text responses. The advantage of this architecture is that outputs are real project files, not ephemeral code blocks existing only in conversation context.

Design.md Design Systems: 71 Ready-to-Use Specifications

The reason AI-generated interfaces often look cheap isn't that models can't write CSS—it's the lack of a stable visual system—no constraints, no checklists, repeatedly generating identical card layouts.

Open Design solves this through the Design.md design system. Design.md is essentially a set of design specifications in pure Markdown format, covering color, typography, spacing, layout, components, animations, tone of voice, brand rules, and anti-patterns. The project ships with 71 design systems inspired by renowned brands like Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, and Apple, as well as tools like Cursor, Supabase, Figma, Raycast, Spotify, and Webflow.

Design.md and Design Token Systems: The core idea behind Design.md is closely related to the concept of "Design Tokens" in front-end engineering. Design tokens are a system that abstracts visual decisions (colors, spacing, font sizes, border radii, etc.) into named variables, originally popularized by the Salesforce Lightning Design System and later widely adopted by tools like Figma and Tailwind CSS. Traditional design tokens exist as JSON or CSS variables, whereas Design.md transforms these specifications into a natural language format that large language models can directly understand. This transformation is crucial: when LLMs process structured Markdown, they can internalize visual rules as generation constraints rather than treating them merely as reference documentation. The 71 design systems are essentially 71 carefully annotated "visual language dictionaries" that give models a clear frame of reference when generating CSS and HTML, rather than relying on statistical averages from training data.

You no longer need to say vague things like "make it clean" or "more modern"—just select the Linear or Stripe style, and the design will follow that specific visual language system.

Direction Selector and Discovery Form

Lock in the Direction Before Generating

If you don't have an existing brand, Open Design uses a Direction Selector to let you choose from five visual directions:

1. Editorial — Modern minimalist
2. Tech — Utilitarian
3. Brutalist — Bold and avant-garde
4. Soft & Warm — Approachable and friendly
5. Modern Minimal — Clean and sharp

The model determines the color palette, typography, and visual direction before building, rather than guessing blindly.

Discovery Form: 30 Seconds Saves 30 Minutes

When you input a design brief, Open Design's prompt stack prioritizes outputting a discovery form rather than jumping straight into code generation. The form asks about visual treatment, audience, brand tone, use case, scale, and constraints.

This sounds trivial, but it's actually critical. If the model starts building before understanding the target audience, brand tone, and use case, you'll often need ten more prompts to correct the initial wrong direction. Spending 30 seconds answering questions saves 30 minutes of rework.

After completing these steps, the agent creates an execution plan with progress displayed in real-time on the interface, then generates the final design artifact.

Underlying Architecture and Local Deployment

An Elegantly Simple Technical Implementation

Open Design's technical architecture is designed with great clarity:

• Frontend: Vite + React + TypeScript
• Backend: Built on Node, managing projects, conversations, messages, and tabs through a SQLite daemon
• How It Works: The daemon has system-level permissions, responsible for launching your chosen AI agent and creating project folders in local directories

Tech Stack Selection Logic: Vite's native ES module-based dev server starts 10–100x faster than Webpack, and for a design tool that requires frequent preview of generated results, cold start latency directly impacts the user experience. React's component model makes it easy to develop and maintain feature modules like the "skill selector," "direction selector," and "real-time progress panel" independently. TypeScript's static type system helps when handling