Open Design (OD) is an open-source, local-first, and web-deployable alternative to Anthropic's closed-source Claude Design, emphasizing a "Bring Your Own Key" (BYOK) model across all layers. It functions as a design engine driven by existing coding-agent CLIs, composable skills, and brand-grade design systems, leveraging the artifact-first mental model of its proprietary inspiration without the vendor lock-in.

The core methodology of Open Design revolves around six load-bearing ideas:

1. Agent Agnosticism: Instead of shipping a bundled agent, OD scans the user's PATH for 15 auto-detected coding-agent CLIs (e.g., Claude Code, Devin for Terminal, GitHub Copilot CLI). These CLIs become the design engines, driven via stdio with per-CLI adapters. For users without a local CLI, an API mode acts as a BYOK proxy (/api/proxy/{provider}/stream), normalizing SSE streams from Anthropic, OpenAI, Azure OpenAI, or Google Gemini, while blocking internal IP/SSRF requests. This leverages the power of existing, user-configured agents.
2. Skills as Files: Skills are not plugins but file-system objects. Following the Claude Code SKILL.md convention, each skill is a folder containing a SKILL.md file, assets, and references. Dropping a new folder into the skills/ directory and restarting the daemon makes it available, promoting extensibility and transparency. The repository ships with 31 skills (27 prototype mode, 4 deck mode), categorized by scenario (design, marketing, operation, etc.).
3. Portable Design Systems: Design systems are represented as portable Markdown files, specifically using the 9-section DESIGN.md schema from VoltAgent/awesome-design-md (covering color, typography, spacing, layout, components, motion, voice, brand, anti-patterns). OD includes 72 such systems. The active design system dictates the tokens used in the generated artifacts, allowing for dynamic switching and consistent branding across designs.
4. Interactive Question Form for Prevention of Redirects: OD's prompt stack enforces an initial $<question-form id="discovery">$ before generating any pixels. This "Turn-1 discovery form" collects crucial project metadata such as surface, audience, tone, brand context, and scale. This "Junior-Designer workflow," inspired by huashu-design, ensures design decisions are locked down upfront, minimizing costly iterations and preventing "AI freestyle" output by guiding the model with explicit constraints and choices (e.g., a "Direction picker" for visual tone).
5. Local Daemon as Agent Environment: A local daemon (Node.js/Express) spawns the coding-agent CLIs within the project's artifact folder ($.od/projects/<id>/$), making the agent feel inherently local. The agent gains real Read, Write, Bash, and WebFetch capabilities against a persistent, on-disk environment. This allows agents to read skill templates, grep CSS for values, write brand-spec.md files, and produce downloadable artifacts (e.g., .pptx, .zip, .pdf) that appear in the file workspace. Sessions, conversations, and projects are persisted in a local SQLite database (.od/app.sqlite).
6. Composability of the Prompt Stack: The generative output is not merely a "system + user" prompt but a highly composable prompt stack. This includes DISCOVERY directives (for the initial form, brand branching, TodoWrite plans, and 5-dimensional critiques), an identity charter (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop rules, junior-pass), the active DESIGN.md and SKILL.md contexts, project metadata, skill-specific side files (auto-injected pre-flight reads), and DECK_FRAMEWORK_DIRECTIVEs for presentations. Each layer is a modifiable file, exposing the underlying contract of the AI's behavior.

The technical architecture comprises a Next.js 16 (App Router + React 18 + TypeScript) frontend, a Node.js 24 (Express + SQLite) local daemon, and the integrated coding agents. The frontend serves the user interface (chat, file workspace, iframe preview), connecting to the daemon via /api/* endpoints. The daemon manages projects, conversations, skills, design systems, and proxies agent communication. Agent transport occurs via child_process.spawn, with various typed-event parsers for different CLI output formats (e.g., claude-stream-json, json-event-stream, acp-json-rpc). Persistence is managed through plain files in $.od/projects/<id>/$ and SQLite for metadata. Artifacts are rendered in a sandboxed iframe using srcdoc and can be exported as HTML, PDF, PPTX, ZIP, or Markdown. The system is deployable locally, to Vercel (web layer), or as an Electron desktop app. An optional stdio MCP (Multi-Client Protocol) server allows other coding agents (e.g., Claude Code, Cursor) to directly access Open Design project files, replacing export/import loops with real-time access to design source (tokens CSS, JSX, HTML).