Open Design: Open‑Source AI‑Powered Design Engine for Developers

Introduction

If you’ve ever tried Anthropic’s Claude Design, you know the excitement of watching an LLM turn a simple brief into a polished UI mock‑up. The problem? Claude Design is closed‑source, cloud‑only, and tied to Anthropic’s own models and skills. Open Design (the GitHub project at github.com/nexu-io/open-design) solves that dilemma by delivering a local‑first, open‑source, BYOK (bring‑your‑own‑key) design engine that works on your laptop, can be deployed to Vercel, and integrates with any of the 16 coding‑agent CLIs you already have.

This article walks through the core concepts, architecture, and practical steps to start building brand‑grade prototypes, decks, and media with Open Design.

What Makes Open Design Different?

In short, Open Design gives you the same artifact‑first mental model without vendor lock‑in.

Core Architecture Overview

Browser (Next.js 16) ⇄ /api/* (Express daemon) ⇄ Local CLI agents

1. Frontend – A React/Next.js SPA that hosts the chat composer, skill picker, design‑system selector, and sandboxed iframe preview.
2. Daemon – A Node‑24 Express server (od) that:
3. Scans your $PATH for supported coding‑agent CLIs and registers them.
4. Stores projects, conversations, and templates in a local SQLite DB (.od/app.sqlite).
5. Normalises streaming responses from any LLM provider via a BYOK proxy (/api/proxy/{anthropic,openai,…}).
6. Serves prompt‑template galleries, design‑system catalogs, and artifact linting.
7. Agent Runtime – The daemon spawns the selected CLI inside the project folder (.od/projects/<id>). The agent gets real read/write, Bash, and web‑fetch capabilities, making it feel like a teammate working on a real filesystem.

The separation of concerns means you can run the web UI on any machine, while the heavy‑lifting LLM calls happen locally or through your own API keys.

Getting Started – Three Quick Paths

1️⃣ Pre‑built Desktop App (Zero‑setup)

1. Visit open‑design.ai and download the latest macOS or Windows installer.
2. Run the app – it bundles the daemon, web UI, and optional Electron shell.
3. The first launch creates a hidden .od folder, detects any installed agents, and loads the default skill (web‑prototype).

2️⃣ Docker Compose (No Node required)

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
docker compose up -d   # starts daemon + web on port 7456

3️⃣ Run from Source (Full developer control)

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
pnpm install
pnpm tools-dev run web   # starts daemon + web, prints URL

The Design Workflow – From Brief to Artifact

1. Pick a Skill – Choose a prototype (e.g., mobile‑app) or a deck (guizang‑ppt). Each skill ships a SKILL.md that defines mode, platform, and required assets.
2. Select a Design System – Pick from the 72 catalog entries. The system supplies a 9‑section DESIGN.md (colors, typography, spacing, etc.).
3. Enter a Brief – The first turn is a question‑form that locks surface, audience, tone, brand context, and scale. This eliminates 80 % of costly redesign loops.
4. Choose a Visual Direction – If you have no brand, a second form offers five curated directions (Editorial Monocle, Modern Minimal, Tech Utility, Brutalist, Soft Warm). One click injects a deterministic palette and font stack.
5. Live Todo Progress – The agent streams a todo card (in_progress → completed) so you can intervene mid‑flight.
6. Sandboxed Preview – The generated <artifact> renders inside a clean srcdoc iframe. You can edit files directly in the workspace and re‑run the skill.
7. Export – Click Save to store the artifact as HTML, PDF, PPTX, ZIP, or Markdown. Templates you love can be saved to the SQLite templates table for reuse.

Prompt Stack – The Secret Sauce

Open Design’s prompt stack isn’t a simple system + user message. It layers:

• Discovery directives – the question form, brand‑spec extraction, and 5‑dim critique.
• Identity charter – anti‑AI‑slop rules, junior‑designer voice, and brand‑specific constraints.
• Active DESIGN.md – token values for the chosen system.
• Active SKILL.md – mode‑specific instructions and checklist references.
• Project metadata – fidelity, speaker notes, animation flags.
• Side‑file pre‑flight – reads assets, validates checklist, and injects defaults.

Because every layer is a file, you can edit the prompt stack directly (apps/daemon/src/prompts/*.ts) to customise tone, add new design philosophies, or integrate a proprietary LLM.

Media Generation – Images, Video, Audio

Open Design ships a prompt‑templates gallery: * 93 image prompts (gpt‑image‑2) – posters, avatars, infographics. * 39 Seedance 2.0 video prompts – 15 s cinematic text‑to‑video. * 11 HyperFrames templates – HTML → MP4 motion graphics.

Select a template, the daemon forwards the request to the appropriate model, and the resulting .png or .mp4 lands in the project folder, ready to be referenced by the next skill.

Extending the Platform

Adding a New Skill

1. Create a folder under skills/ following the existing SKILL.md convention.
2. Add any assets (template.html, references/…).
3. Restart the daemon – the new skill appears in the picker.

Adding a Design System

Drop a DESIGN.md into design-systems/<brand>/. The 9‑section schema (colors, typography, spacing, components, motion, voice, brand, anti‑patterns) is validated by apps/daemon/src/skills.ts.

Adding a New CLI Agent

Edit apps/daemon/src/agents.ts and add a new entry with the binary name, streaming format, and argument map. The daemon will auto‑detect it on the next start.

Real‑World Use Cases

Comparison with Competitors

• OpenCoDesign – First open Claude‑Design clone, but limited to a desktop Electron bundle and fewer skills.
• OpenCoCodesign – Shares the streaming‑artifact loop but ships its own bundled agent. Open Design delegates to the agents you already trust, keeping the runtime lightweight.
• Claude Design – Powerful but closed, cloud‑only, and expensive. Open Design matches the feature set while staying free, self‑hosted, and extensible.

Community & Contribution

Open Design thrives on community contributions: * Good‑first‑issues are labelled for newcomers. * Adding a skill or design system is a single‑folder PR. * The CONTRIBUTING.md provides style guidelines, code‑review policies, and translation instructions (the repo ships docs in 12 languages). * Over 170 contributors have already helped shape the project, and the star count (35k+) shows strong interest.

Final Thoughts

Open Design proves that a local‑first, open‑source AI design engine can rival commercial offerings. By leveraging existing coding‑agent CLIs, a rich catalog of design systems, and a disciplined prompt stack, it delivers fast, reproducible, and brand‑consistent artifacts without ever sending your proprietary assets to the cloud.

Whether you’re a solo founder building a pitch deck, a product team prototyping UI, or a developer curious about LLM‑driven workflows, Open Design gives you the tools to design, iterate, and export entirely under your own control.

Ready to try it? Grab the desktop app, spin up a Docker container, or clone the repo and start building today.