Open Design

Open Design: The Open-Source Design Engine You Can Run Locally

Open Design (OD) is pitched as the open-source alternative to Claude Design, built to run on your own machine, deploy to the web, and stay BYOK at every layer. It auto-discovers 11 coding-agent CLIs on your PATH, from Claude Code to Pi, Copilot CLI, Gemini CLI, Qwen Code, Kiro, and more, and uses them as the design engines. It stacks 31 composable Skills and a library of 72 brand-grade Design Systems to drive a fully artifact-first design workflow. If you don’t have a CLI installed, a compatible BYOK proxy can connect in the same loop, minus the spawn. This is design tooling designed to sit on your laptop, not in a vendor cloud.

Open Design — editorial cover: design with the agent on your laptop

Overviews and signals

• Coding-agent CLIs (11 in total) are auto-detected on PATH and swapped with a single click.
• BYOK fallback via an OpenAI-compatible proxy at /api/proxy/stream lets you install and run with vendor-agnostic engines.
• A robust design-systems catalog includes 72 brand-grade systems, plus 129 in the design-system starter set, plus 57 design skills pulled in from community sources.
• Skills (31 in total) are file-based, not plugin-based. Drop a folder into skills/ and restart the daemon to add a new capability.
• Everything runs in a local, detachable daemon with a live, sandboxed preview, a real filesystem workspace, and persistent state.

Open Design is more than a code playground. It is a full-stack, local-first design studio that can deploy to the web, produce publishable artifacts, and keep all data under your control. It is a living, design-first workflow that treats code agents not as a novelty but as teammates who operate against a real filesystem, a deterministic color system, and a structured critique culture.

At a glance

• Coding-agent CLIs (11) Claude Code, Codex CLI, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro — auto-detected on PATH, swappable with one click.
• BYOK fallback An OpenAI-compatible proxy at /api/proxy/stream lets you point to baseUrl/apiKey/model and any OpenAI-compatible provider becomes the engine, with internal network protections at the daemon edge.
• Design systems built-in 129 design-system starters plus 70 product systems and 57 additional design skills integrated beneath design-systems/, giving you a ready-made fuel tank for any project.
• Skills built-in 31 skills in total, split between prototype-mode (27) and deck-mode (4). They sit in skills/ and map to 72 design-systems, grouped by scenario (design, marketing, operation, engineering, product, finance, HR, sales, personal).
• Media generation Visuals, video, and audio surfaces accompany the design loop. Image prompts via gpt-image-2, Seedance 2.0 for cinematic video, and HyperFrames for HTML→MP4 motion graphics are all available, delivering ready-to-export .png, .mp4, and other assets.
• Visual directions Five curated visual directions (Editorial Monocle, Modern Minimal, Tech Utility, Brutalist, Soft Warm) give you a deterministic OKLch palette and font stack to lock in a brand look early.
• Device frames Pixel-accurate device frames for iPhone, Pixel, iPad, MacBook, and a browser frame, shared across skills to keep visuals consistent.
• Agent runtime The daemon launches the CLI in your project folder, providing Read/Write/Bash/WebFetch against a real filesystem. It can render templates, drop generated assets, and export to HTML, PDF, PPTX, ZIP, or Markdown.
• Persistence and lifecycle SQLite stores projects, conversations, messages, tabs, and templates. Everything reopens where you left off tomorrow.
• Desktop optional An Electron shell can be enabled for a local desktop experience while still driving the same web-based workflow.
• Deployable to web and beyond Local daemon + web layer can be deployed to Vercel; the system also contemplates a packaged Electron experience for offline usage.

Illustration of the design-systems library The 72 design systems library — style guide spread

Key features in detail

Design systems and skills

• 72 design systems shipped as DESIGN.md files, each with a precise color, typography, spacing, layout, components, motion, voice, brand guidelines, and anti-patterns. They’re portable and readable as Markdown, not locked into a noisy theme JSON.
• 31 skills ship in the box (27 prototype-mode, 4 deck-mode). Skills are folder-based descriptors that pair with SKILL.md frontmatter. They are designed to be dropped into skills/ and then discovered by the daemon without special plugins.
• The design system catalog is extended by 57 designer-sourced skills (from awesome-design-skills) integrated directly under design-systems/. This gives you a diverse palette of tokens to apply to any artifact.

Visual directions and device frames

• Five deterministic directions are available when you lack a brand spec: Editorial Monocle, Modern Minimal, Tech Utility, Brutalist, and Soft Warm. Each direction pairs with a fixed OKLch palette and a font stack to lock the look without improvisation.
• Device frames cover iPhone 15 Pro, Pixel, iPad Pro, MacBook, and a browser chrome. The frames are shared across skills, ensuring consistent presentation across prototypes, decks, and editorial outputs.

Media generation and prompts

• Media generation is integrated with the design workflow. The same chat surface that creates HTML can also drive image, video, and audio assets. The gallery of ready-to-replicate prompts includes:
• 43 gpt-image-2 image prompts
• 39 Seedance prompts for cinematic 15-second text-to-video and image-to-video
• 11 HyperFrames prompts for HTML→MP4 motion graphics
• A gallery of 93 ready prompts is provided with thumbnails and attribution, serving as a fast-start reference for image and video assets. Outputs render into the workspace as real files (e.g., .mp4, .png) and appear as download chips after a turn.

What a typical OD flow looks like

• Entry view
• Pick a skill, choose a design system, and supply a brief. The surface supports prototypes, decks, mobile apps, dashboards, and editorial pages.
• Turn-1 discovery form
• The brief is locked down up front: surface, audience, tone, brand context, scale. This upfront constraint reduces the typical redirect loop and speeds you to a concrete direction.
• Direction picker
• If brand is absent, the agent emits five deterministic directions (Monocle/Modern Minimal/Tech Utility/Brutalist/Soft Warm) with a fixed palette and typography palette.
• Live todo progress
• The agent streams a plan in real time as a live card—watch the progress and adjust mid-flight if needed.
• Sandboxed preview
• Each artifact renders inside a secure srcdoc iframe, with in-place editing in the workspace. Outputs can be downloaded as HTML, PDF, or ZIP.
• Design systems library
• Click a design system to see its 4-color signature and a live DESIGN.md, swatch grid, and live showcase.
• Deck mode
• The deck-mode surface uses the op7418/guizang-ppt-skill as a default deck template, with magazine-style layouts and single-file HTML output plus PDF export.
• Prototyping and mobile
• Prototypes can render as magazine posters, dashboards, or mobile app screens with pixel-accurate frames that match the target device.
• Preview and export
• HTML, PDF, PPTX, ZIP, and Markdown exports provide publish-ready artifacts. The export process is embedded in the agent workflow and surfaced as a downloadable artifact.

How to start using Open Design

• Quickstart guide

• Clone the repository

• Install dependencies with corepack and pnpm

• Run the web interface with pnpm tools-dev run web

• The daemon auto-detects the coding agents on PATH and loads 31 skills + 72 design systems

• The welcome dialog invites you to paste an Anthropic key if you’re using the BYOK fallback path

• Open Design automatically creates a local runtime folder at .od/ with a SQLite database

• Run and explore

• The first load identifies available agent CLIs

• The system populates the workspace with artifacts and prompts you to save to disk or export

• Per-project workspaces persist with the artifacts, tasks, and tabs resting where you left them

• First-run state

• The daemon stores data in .od/ with subfolders for app.sqlite, artifacts, and per-project working directories

• You can inspect what’s inside, reset to a clean slate, or move it to a different location (note: path relocation is not yet fully supported)

• Quickstart visuals

• Entry view and discovery interface

• Direction picker with five presets

• Live-progress cards

• Sandboxed preview for artifact verification

• Design-systems library view with color swatches

• Keyboard shortcuts and automation

• The daemon supports a one-entry-point workflow (pnpm tools-dev) for starting, stopping, running tasks, and inspecting logs

• Desktop integration via an optional Electron shell can provide a sandboxed renderer with EVAL/STATUS/SCREENSHOT/CONSOLE/CLICK/SHUTDOWN

• BYOK proxy allows you to deploy on your own terms by connecting to your preferred model provider

• Media and prompts gallery

• The 93 prompts gallery includes image templates, video templates, and motion-design prompts. Each prompt includes the target model, aspect ratio, and attribution

• The image templates include a collection of editorial, poster-style, and product-illustration prompts, each with a thumbnail and source attribution

• Video prompts cover cinematic storytelling, product reveals, and social-ready formats

• Importing Claude Design ZIPs

• If you already have a Claude Design ZIP, you can import it into the welcome dialog with /api/import/claude-design. This splices the content into a real project so the local agent can continue editing exactly where Anthropic left off.

• BYOK proxy and safety

• The BYOK proxy forwards SSE chunks to the browser and normalizes paths for OpenAI-compatible endpoints. It provides SSRF protections by rejecting loopback and local network destinations at the edge.

Architecture and technical scaffolding

• Architecture overview

• Frontend: Next.js 16 with App Router, React 18, TypeScript, deployable to Vercel

• Daemon: Node 24 with Express and SQLite (better-sqlite3) storing projects, conversations, messages, tabs, and templates

• Agent transport: Spawns for each CLI adapter, using a typed event stream for each supported model (Claude Code, Copilot, Gemini, Qwen, etc.)

• BYOK proxy: A secure path for streaming SSE results to the client

• Storage and workspace: .od/ with per-project directories and toolchains that reflect a real filesystem

• Desktop: Optional Electron shell for desktop automation and E2E testing

• Preview and export: Sandbox iframe previews and a multi-format export stack (HTML, PDF, PPTX, ZIP, Markdown)

• Quick-start scaffolding

• The system is designed so there is no od init command. The daemon creates the needed folders on boot, detects agents, and loads the default catalog. It quickly becomes a live, evolving workspace that persists across sessions.

• Roadmap and status

• The project is in an early but functional state. The core loop (detect → pick skill and design system → chat → parse " " → preview → save) runs end-to-end and is stable in practice for many workflows. The prompt stack and skill library are the heavy-lifting values, while the UI is evolving day by day.

• Design philosophy and anti-AI-slop

• OD borrows heavily from huashu-design: a disciplined prompt stack that hard-codes a short discovery first workflow, a brand-spec extraction phase, a five-dimension critique, and a P0/P1/P2 checklist to guard quality.

• The system uses a five-dim self-critique gate before emitting artifacts, an anti-AI-slop checklist to prevent generic aesthetics, and a well-defined skeleton of brand assets.

• Open source lineage and credits

• Open Design draws inspiration and components from Claude Design (the closed-source baseline), OpenCoworkAI open-codesign, multica, and VoltAgent’s design-md schemas.

• The 9-section DESIGN.md schema and the 72 design systems originate in VoltAgent/awesome-design-md, with additional design-systems sources from the community.

• The 31 skills are file-based SKILL.md bundles, tied to per-skill prompts and seed templates. The deck modes borrow from guizang-ppt-skill for magazine-like deck flows.

• The license is Apache-2.0, with various components retaining their original licenses.

Media and gallery highlights

• Image gallery

• A curated gallery of 43 image prompts, offering editorial, travel-style, and product visuals. Each item is a card with a thumbnail and a prompt payload ready to drop into the composer.

• Seedance 2.0 video gallery

• A collection of 39 video prompts designed for cinematic storytelling, micro-expressions, and product shows. These render as downloadable MP4 files in your workspace.

• HyperFrames templates

• HTML→MP4 motion graphics templates that are wired into OD’s media pipeline. The templates come with a ready-to-edit HTML layer and a deterministic render path, so you can generate broadcast-ready video outputs from your design artifacts.

Beyond chat: other capabilities already wired

• Claude Design ZIP import

• Import Claude Design ZIPs with a single POST call that seeds a real project and continuation prompts.

• BYOK proxy

• OpenAI-compatible streaming proxies that forward model results to the client, with loopback and RFC1918 protections implemented at the daemon edge.

• User-saved templates

• Save any render as a template to reuse later in new projects; templates are stored in the templates table for quick retrieval.

• Tab persistence

• Open projects resume with the same open files and active tabs, ensuring a seamless workflow across sessions.

• Artifact lint API

• An API endpoint to lint artifacts for structural integrity, guiding the designer to correct issues in future outputs.

• Sidecar IPC

• A sidecar protocol enables robust desktop automation; a structured IPC allows status, evaluation, screenshots, console output, and UI actions to be driven from a headless or automated environment.

• Windows-friendly spawning

• Long prompts are streamed to CLIs via stdin or a temporary prompt-file, preventing argv-length constraints on Windows.

• Per-namespace runtime data

• OD supports ODDATADIR and --namespace to isolate workspace data for different users or projects.

• Design-for-market ethics

• The anti-AI-slop rules enforce a disciplined approach to design tokens and brand continuity, ensuring outputs stay on-brand and legible.

The star and the call to contribute

• Star us

• If Open Design saved you time, consider starring the project on GitHub. A visual callout invites you to show support for this evolving open design toolkit.

  Star Open Design on GitHub

• Contributing

• Contributions welcome at the file level: add a skill, add a design system, wire up a new coding-agent CLI adapter. The most impactful changes are often one folder, one Markdown file, or one adapter PR away.

• Guidelines and references live in docs and CONTRIBUTING; localized versions exist for Deutsch, Simplified Chinese, etc.

Designs in action: demo visuals

• Entry view

• An intuitive starting surface to choose a skill, a design system, and a brief. It is the same surface used for prototypes, decks, mobile apps, dashboards, and editorial pages.

• Discovery and direction

• The Turn-1 form locks surface, audience, tone, brand context, scale, and constraints. The 30-second prompt captures essential context; a longer brief remains flexible for creative decisions.

• Live planning and preview

• The live Todo stream gives you a real-time sense of plan progression and what to expect next. The sandboxed preview helps you verify visuals while editing the workspace.

• Magazine decks and mobile prototypes

• Decks ship with magazine layouts and WebGL hero backgrounds. Prototypes render on pixel-accurate device frames for realistic feedback and iteration.

• The full suite of artifacts

• HTML, PDF, PPTX, ZIP, and Markdown exports let you publish to multiple channels and formats from the same design session.

A note on license and provenance

• The core is Apache-2.0 licensed, with mirrors of upstream design-md and design-systems pipelines. The bundled GUIs and prompts align with the open-source ethos, while preserving original attributions for borrowed components.

• The “Design Systems” catalog pulls from the 72 systems in the design-systems library, initially sourced from VoltAgent/awesome-design-md and extended with community skills.

• The magazine-deck flow (guizang-ppt) and html-ppt templates contribute to the deck-mode experience, with their own separate licenses embedded in the respective skill folders.

• The design philosophy behind Open Design is to give designers a local-first, non-lock-in, artifact-first workflow with a broad ecosystem of ready-made systems and prompts.

Images and visuals to explore

• Banner: Open Design — editorial cover: design with the agent on your laptop

• docs/assets/banner.png

• Design systems library spread

• docs/assets/design-systems-library.png

• Demo screens

• 01-entry-view: docs/screenshots/01-entry-view.png

• 02-question-form: docs/screenshots/02-question-form.png

• 03-direction-picker: docs/screenshots/03-direction-picker.png

• 04-todo-progress: docs/screenshots/04-todo-progress.png

• 05-preview-iframe: docs/screenshots/05-preview-iframe.png

• 06-design-systems-library: docs/screenshots/06-design-systems-library.png

• 07-magazine-deck: docs/screenshots/07-magazine-deck.png

• 08-mobile-app: docs/screenshots/08-mobile-app.png

• GitHub star badge

• docs/assets/star-us.png

• Repository metrics

• docs/assets/github-metrics.svg

• Community and contributors

• contribs snapshots and wall (embedded in docs)

Closing thoughts: Open Design as a designer’s local studio

Open Design is more than a new tool; it’s a philosophy about how design work can be done on a laptop with open, modular components. It embraces a scalable catalog of design systems, a diverse library of design-skills, and a disciplined, non-greedy prompt workflow that refuses to default to empty visuals. It is a local-first, web-deployable, BYOK-enabled environment where your agent is not an external cloud service but a trusted teammate that runs in your own workspace, reads your files, critiques itself, and exports final artifacts you can share with clients or colleagues.

If you’re curious about building your own design pipeline that respects autonomy, privacy, and portability, Open Design offers a clear roadmap: discover your toybox of CLIs, assemble a library of design systems, combine them with a structured prompt stack, and let your local agents craft magazine-worthy, production-grade design artifacts. It’s a bold bet on the idea that the best design work happens when you have total control of the tools, sources, and outputs—right where you work.

Star Open Design today and start exploring a design studio that lives on your laptop, not in a cloud account. And if you have ideas, a skill to share, or a new design system to publish, your contribution will help keep the open design ecosystem vibrant and useful for teams worldwide.