Open Design Studio

Local-first AI design workbench — pair an AI designer with any code repo.

本地优先的 AI 设计工作台 — 把 AI 设计师挂到任何代码仓库上。

Open Design Studio screenshot — multi-variant canvas with chat dock

English

What is Open Design Studio?

Open Design Studio is a desktop app that pairs an AI designer with your codebase. Point it at any local folder; the AI drafts real HTML / CSS / JS designs into a sandboxed .design/ subdirectory inside that folder. You compare multi-variant prototypes side-by-side on an infinite canvas, inspect any element, drag the canvas like Figma, and edit text inline.

Your project's source code is never touched. AI's design output lives in .design/ — gitignore-friendly, isolated, exportable as a static zip with one click.

your-repo/
├─ src/           ← your code, never touched
├─ package.json
└─ .design/       ← AI designs land here
   ├─ shared/
   │  └─ styles.css
   └─ variants/
      ├─ sidebar-led/index.html
      ├─ canvas-first-dock/index.html
      └─ spatial-overlay/index.html

Why Open Design Studio?

Tool	Gap
Figma	Powerful but disconnected from code. AI plug-ins output throwaway mockups, not real markup.
Cursor / Claude Code	Great for code, no design workflow. No side-by-side variant comparison. No inspect mode.
ChatGPT / Claude.ai	One chat, one output, no canvas, no iteration discipline.

Open Design Studio = Figma's canvas & variant discipline + Claude Code's depth in code + local privacy.

Features

🎨 AI as designer — Claude Opus / GPT writes real HTML/CSS, you see it render in real time
🔀 Multi-variant canvas — 3 directions side-by-side (conservative / balanced / bold), pan & zoom like Figma
📁 Bind a local folder — AI writes to disk; your VSCode edits sync back into the chat
🔍 Inspect / Comment / Edit — point at any element, leave a comment, or edit text inline
🎛 Tweak controls — AI marks tweakable points in source; drag a slider / color picker to update the file in place
⌘K Command palette — fuzzy jump to file / chat / project / action, keyboard-driven
🛠 Real coding tools — read_file (with cat -n line numbers), search_files (grep + glob), apply_patch (multi-file atomic), todo_write
🧠 Smart context — auto-elide old / large tool results; file-hash dedup on re-reads; saves ~$1/turn on Opus
💾 Local secrets — API keys live in OS keychain (macOS Keychain / Win DPAPI / Linux libsecret), never in browser storage
🔒 Code isolation — AI's outputs live in .design/, your source code is read-only to the AI

Quick start

git clone https://github.com/<you>/open-design-studio
cd open-design-studio
pnpm install
pnpm electron:dev

Then:

Bottom-left ⚙ Settings → paste your Anthropic / OpenAI key (saved to OS keychain)
Left rail 📂 Projects → ＋ New project → pick any local folder
Type in the right-side chat: "Make me a SaaS landing page, 3 directions"
Watch three variants land in <your-folder>/.design/variants/

Recommended model: Anthropic Claude Opus 4.x via Anthropic API or compatible gateway. Output budget defaults to 128k tokens (Opus's hard ceiling) so even dense one-shot pages fit.

Examples

See docs/examples/ for sample .design/ outputs you can browse without running anything. Each folder is a complete multi-variant project — drop one into your own project's .design/ and Open Design Studio will pick it up immediately.

Notably: docs/examples/dogfooding-workbench-redesign/ shows the 3 variants we generated when redesigning this very tool's UI. Variant A (sidebar-companion) is what shipped.

Architecture (60 seconds)

Electron app
┌─────────────────────────────────────────────────────────────┐
│  TopBar (project · breadcrumb · turn / tokens / autosave)   │
├──┬─────────────────────────────────────┬───────────────────┤
│  │  canvas-frame                       │                   │
│Rl│   ↕ multi-variant canvas (Figma)    │   ChatPane        │
│56│      + inspect / comment / edit     │   (with TodoPanel │
│  │      + Tweak controls               │    + tool blocks  │
│  ├─────────────────────────────────────┤    + ask_questions│
│  │  VariantBar (A · B · C chips)       │    streaming)     │
├──┴─────────────────────────────────────┴───────────────────┤
│  StatusBar (git · turn · ctx · model · zoom · ⌘K)            │
└────────────────────────────────────────────────────────────┘

Renderer process              Main process (embedded Hono)
- React UI                    - LLM provider (Anthropic / OpenAI)
- Dexie (chat history)        - File system (read/write in .design)
- Service Worker preview      - Chokidar file watcher
- Element bridge / inject     - Git status (read-only)
                              - Keytar (API keys → OS keychain)

Two file scopes:

.design/ — AI's sandbox: write_file / edit_file / apply_patch / read_file all scoped here
project root — read-only for the AI via list_source_files / read_source_file / search_files. AI uses these in Phase 1 Recon to understand your stack; never writes here.

Tech stack

Electron for native shell (cross-platform, full Chromium for design-fidelity rendering)
React 18 + Vite renderer
Hono + @hono/node-server for the embedded LLM server (in-process, auth via Bearer token)
Anthropic SDK + OpenAI SDK for upstream calls, normalized to one Block[] schema
Dexie (IndexedDB) for chat history, messages, snapshots
Chokidar for file watching, simple-git for status, keytar for OS keychain
TypeScript strict throughout

Status & roadmap

v6.x (current) — Electron + native folder binding + multi-variant canvas + workbench layout
Next: shell-tool execution, LSP-aware reads, MCP server support
See PLAN_ELECTRON.md for the engineering roadmap

License

MIT

中文