[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81624":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":15,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":16,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":17,"fork":17,"defaultBranch":18,"hasWiki":17,"hasPages":17,"topics":19,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":15,"starSnapshotCount":15,"syncStatus":13,"lastSyncTime":35,"discoverSource":36},81624,"open-design-studio","Sr173\u002Fopen-design-studio","Sr173","Open-source AI design studio. Multi-variant canvas, inspect & edit in code. Powered by Claude \u002F GPT. 本地优先的 AI 设计工作台。","https:\u002F\u002Fgithub.com\u002FSr173\u002Fopen-design-studio",null,"TypeScript",22,2,1,0,38.43,false,"main",[20,21,22,23,24,25,26,27,28,29,30,31],"ai-coding","ai-design","anthropic","claude","claude-code","design-system","design-tool","electron","figma-alternative","local-first","multi-variant","open-design","2026-06-12 04:01:34","\u003Cdiv align=\"center\">\n\n# Open Design Studio\n\n**Local-first AI design workbench — pair an AI designer with any code repo.**\n\n**本地优先的 AI 设计工作台 — 把 AI 设计师挂到任何代码仓库上。**\n\n[English](#english) · [中文](#中文)\n\n![Open Design Studio screenshot — multi-variant canvas with chat dock](docs\u002Fscreenshot.png)\n\n\u003C\u002Fdiv>\n\n---\n\n## English\n\n### What is Open Design Studio?\n\nOpen 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 \u002F CSS \u002F JS designs into a sandboxed `.design\u002F` 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.\n\nYour project's source code is never touched. AI's design output lives in `.design\u002F` — gitignore-friendly, isolated, exportable as a static zip with one click.\n\n```\nyour-repo\u002F\n├─ src\u002F           ← your code, never touched\n├─ package.json\n└─ .design\u002F       ← AI designs land here\n   ├─ shared\u002F\n   │  └─ styles.css\n   └─ variants\u002F\n      ├─ sidebar-led\u002Findex.html\n      ├─ canvas-first-dock\u002Findex.html\n      └─ spatial-overlay\u002Findex.html\n```\n\n### Why Open Design Studio?\n\n| Tool | Gap |\n|---|---|\n| **Figma** | Powerful but disconnected from code. AI plug-ins output throwaway mockups, not real markup. |\n| **Cursor \u002F Claude Code** | Great for code, no design workflow. No side-by-side variant comparison. No inspect mode. |\n| **ChatGPT \u002F Claude.ai** | One chat, one output, no canvas, no iteration discipline. |\n\nOpen Design Studio = **Figma's canvas & variant discipline + Claude Code's depth in code + local privacy**.\n\n### Features\n\n- 🎨 **AI as designer** — Claude Opus \u002F GPT writes real HTML\u002FCSS, you see it render in real time\n- 🔀 **Multi-variant canvas** — 3 directions side-by-side (conservative \u002F balanced \u002F bold), pan & zoom like Figma\n- 📁 **Bind a local folder** — AI writes to disk; your VSCode edits sync back into the chat\n- 🔍 **Inspect \u002F Comment \u002F Edit** — point at any element, leave a comment, or edit text inline\n- 🎛 **Tweak controls** — AI marks tweakable points in source; drag a slider \u002F color picker to update the file in place\n- ⌘K **Command palette** — fuzzy jump to file \u002F chat \u002F project \u002F action, keyboard-driven\n- 🛠 **Real coding tools** — `read_file` (with `cat -n` line numbers), `search_files` (grep + glob), `apply_patch` (multi-file atomic), `todo_write`\n- 🧠 **Smart context** — auto-elide old \u002F large tool results; file-hash dedup on re-reads; saves ~$1\u002Fturn on Opus\n- 💾 **Local secrets** — API keys live in OS keychain (macOS Keychain \u002F Win DPAPI \u002F Linux libsecret), never in browser storage\n- 🔒 **Code isolation** — AI's outputs live in `.design\u002F`, your source code is read-only to the AI\n\n### Quick start\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002F\u003Cyou>\u002Fopen-design-studio\ncd open-design-studio\npnpm install\npnpm electron:dev\n```\n\nThen:\n1. Bottom-left **⚙ Settings** → paste your Anthropic \u002F OpenAI key (saved to OS keychain)\n2. Left rail **📂 Projects → ＋ New project** → pick any local folder\n3. Type in the right-side chat: *\"Make me a SaaS landing page, 3 directions\"*\n4. Watch three variants land in `\u003Cyour-folder>\u002F.design\u002Fvariants\u002F`\n\nRecommended 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.\n\n### Examples\n\nSee [`docs\u002Fexamples\u002F`](docs\u002Fexamples\u002F) for sample `.design\u002F` outputs you can browse without running anything. Each folder is a complete multi-variant project — drop one into your own project's `.design\u002F` and Open Design Studio will pick it up immediately.\n\nNotably: `docs\u002Fexamples\u002Fdogfooding-workbench-redesign\u002F` shows the 3 variants we generated when redesigning this very tool's UI. Variant A (`sidebar-companion`) is what shipped.\n\n### Architecture (60 seconds)\n\n```\nElectron app\n┌─────────────────────────────────────────────────────────────┐\n│  TopBar (project · breadcrumb · turn \u002F tokens \u002F autosave)   │\n├──┬─────────────────────────────────────┬───────────────────┤\n│  │  canvas-frame                       │                   │\n│Rl│   ↕ multi-variant canvas (Figma)    │   ChatPane        │\n│56│      + inspect \u002F comment \u002F edit     │   (with TodoPanel │\n│  │      + Tweak controls               │    + tool blocks  │\n│  ├─────────────────────────────────────┤    + ask_questions│\n│  │  VariantBar (A · B · C chips)       │    streaming)     │\n├──┴─────────────────────────────────────┴───────────────────┤\n│  StatusBar (git · turn · ctx · model · zoom · ⌘K)            │\n└────────────────────────────────────────────────────────────┘\n\nRenderer process              Main process (embedded Hono)\n- React UI                    - LLM provider (Anthropic \u002F OpenAI)\n- Dexie (chat history)        - File system (read\u002Fwrite in .design)\n- Service Worker preview      - Chokidar file watcher\n- Element bridge \u002F inject     - Git status (read-only)\n                              - Keytar (API keys → OS keychain)\n```\n\n**Two file scopes**:\n- **`.design\u002F`** — AI's sandbox: write_file \u002F edit_file \u002F apply_patch \u002F read_file all scoped here\n- **project root** — read-only for the AI via `list_source_files` \u002F `read_source_file` \u002F `search_files`. AI uses these in Phase 1 Recon to understand your stack; never writes here.\n\n### Tech stack\n\n- **Electron** for native shell (cross-platform, full Chromium for design-fidelity rendering)\n- **React 18** + **Vite** renderer\n- **Hono** + `@hono\u002Fnode-server` for the embedded LLM server (in-process, auth via Bearer token)\n- **Anthropic SDK** + **OpenAI SDK** for upstream calls, normalized to one `Block[]` schema\n- **Dexie** (IndexedDB) for chat history, messages, snapshots\n- **Chokidar** for file watching, **simple-git** for status, **keytar** for OS keychain\n- **TypeScript strict** throughout\n\n### Status & roadmap\n\n- **v6.x (current)** — Electron + native folder binding + multi-variant canvas + workbench layout\n- Next: shell-tool execution, LSP-aware reads, MCP server support\n- See `PLAN_ELECTRON.md` for the engineering roadmap\n\n### License\n\nMIT\n\n---\n\n## 中文\n\n### Open Design Studio 是什么?\n\nOpen Design Studio 是一个桌面 AI 设计工作台。把它绑到本地任何一个文件夹,AI 会把生成的设计稿(真实的 HTML \u002F CSS \u002F JS)写到该文件夹下的 `.design\u002F` 子目录里 —— **跟你的原代码完全隔离**。你能在无限画布上**并排对比多个变体方案**,点选元素 inspect,拖动画布像 Figma,内联直改文字。\n\n```\n你的项目\u002F\n├─ src\u002F           ← 你的代码,AI 一根毛都不动\n├─ package.json\n└─ .design\u002F       ← AI 生成的设计在这里\n   ├─ shared\u002F\n   │  └─ styles.css\n   └─ variants\u002F\n      ├─ sidebar-led\u002Findex.html\n      ├─ canvas-first-dock\u002Findex.html\n      └─ spatial-overlay\u002Findex.html\n```\n\n`.design\u002F` 可以加进 `.gitignore`,也可以跟代码一起 commit。一键导出 zip 给同事看。\n\n### 为什么是 Open Design Studio?\n\n| 工具 | 现存痛点 |\n|---|---|\n| **Figma** | 设计强但跟代码脱节;AI 插件出来的 mockup 又落不到真 token \u002F 真组件 |\n| **Cursor \u002F Claude Code** | 能写代码但没设计工作流;没**多变体并排对比**,没 inspect 模式 |\n| **ChatGPT \u002F Claude 官方版** | 单 chat 单输出,没 canvas,没\"多方向\"纪律 |\n\nOpen Design Studio = **Figma 的画布感与变体纪律 + Claude Code 的代码深度 + 本地化的隐私和速度**。\n\n### 功能特性\n\n- 🎨 **AI 当设计师** — Claude Opus \u002F GPT 写真 HTML\u002FCSS,iframe 实时渲染\n- 🔀 **多变体画布** — 同一需求出 3 个方向(保守 \u002F 中位 \u002F 大胆),无限画布并排对比,Figma 一样 pan\u002Fzoom\n- 📁 **绑本地文件夹** — AI 写真文件落到磁盘;你在 VSCode 里改,chat 知道你改了什么\n- 🔍 **Inspect \u002F Comment \u002F Edit** — 点元素 inspect、留评论、直改文案\n- 🎛 **Tweak 控件** — AI 在源码里标 marker,你拉滑块 \u002F 选颜色就能改值,**源文件同步更新**\n- ⌘K **命令面板** — 模糊跳转文件 \u002F chat \u002F 项目 \u002F 命令,键盘流不离手\n- 🛠 **真正的写代码工具集** — `read_file`(带 `cat -n` 行号)、`search_files`(grep + glob)、`apply_patch`(多文件原子化)、`todo_write`\n- 🧠 **智能上下文压缩** — 自动 elide 老的 \u002F 大的 tool result;同 path + 同 hash 重读直接 stub。Opus 单 turn 省 ~ $1\n- 💾 **API key 进系统钥匙串** — macOS Keychain \u002F Win DPAPI \u002F Linux libsecret,不存浏览器\n- 🔒 **代码隔离** — AI 写永远只在 `.design\u002F`,原项目代码只读\n\n### 快速开始\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002F\u003C你>\u002Fopen-design-studio\ncd open-design-studio\npnpm install\npnpm electron:dev\n```\n\n然后:\n1. 左下 **⚙ 设置** → 粘你的 Anthropic \u002F OpenAI key(自动存系统钥匙串)\n2. 左 rail **📂 项目 → ＋ 新建项目** → 选本地任意文件夹\n3. 右边 chat 里输入:**\"做一个 SaaS 落地页,3 个方向\"**\n4. 看 `\u003C你的文件夹>\u002F.design\u002Fvariants\u002F` 下出现三个变体\n\n推荐用 **Anthropic Claude Opus 4.x**(Anthropic 官方 API 或兼容网关均可)。输出预算默认 128k tokens(Opus 硬上限),一次性写超密度页面也兜得住。\n\n### 示例\n\n[`docs\u002Fexamples\u002F`](docs\u002Fexamples\u002F) 下有 AI 设计输出的真实样例,不用跑代码也能浏览。每个子目录是一个完整的多变体项目 —— 拷到你自己项目的 `.design\u002F` 下,Open Design Studio 立刻识别并展示。\n\n特别注意:`docs\u002Fexamples\u002Fdogfooding-workbench-redesign\u002F` 是**我们用这个工具自己设计自己**生成的 3 个变体方案,最终发布版选了变体 A(`sidebar-companion`)。\n\n### 30 秒看架构\n\n```\nElectron App\n┌────────────────────────────────────────────────────────────┐\n│  顶 TopBar  (项目 · 文件 breadcrumb · turn \u002F tokens \u002F 保存) │\n├──┬────────────────────────────────────┬──────────────────┤\n│  │  canvas-frame                      │                  │\n│Rl│   ↕ 多变体画布(Figma 风)          │   ChatPane       │\n│56│      + inspect \u002F comment \u002F edit    │   (含 TodoPanel  │\n│  │      + Tweak 控件                  │    + tool 调用块  │\n│  ├────────────────────────────────────┤    + ask_questions│\n│  │  VariantBar (A · B · C 变体 chips) │     流式)         │\n├──┴────────────────────────────────────┴──────────────────┤\n│  底 StatusBar  (git · turn · ctx · model · zoom · ⌘K)      │\n└────────────────────────────────────────────────────────────┘\n\nRenderer 进程                Main 进程(嵌入式 Hono)\n- React UI                   - LLM provider (Anthropic \u002F OpenAI)\n- Dexie 存 chat 历史          - 文件系统(.design\u002F 读写)\n- 预览 SW + iframe 注入       - Chokidar 文件 watcher\n- elementBridge \u002F inspect    - Git 状态(只读)\n                             - Keytar(API key → 系统钥匙串)\n```\n\n**两个文件命名空间**:\n- **`.design\u002F`** — AI 的沙箱:`write_file` \u002F `edit_file` \u002F `apply_patch` \u002F `read_file` 全在这里\n- **项目根** — 对 AI 只读:`list_source_files` \u002F `read_source_file` \u002F `search_files` 拿到上下文(技术栈、现有 token、组件风格),但**不能写**\n\n### 技术栈\n\n- **Electron** 桌面壳(跨平台,Chromium 渲染保证设计还原度)\n- **React 18** + **Vite** renderer\n- **Hono** + `@hono\u002Fnode-server` 嵌入式 LLM 后端(同进程,Bearer token 鉴权)\n- **Anthropic SDK** + **OpenAI SDK** 调上游,归一化为统一 `Block[]` schema\n- **Dexie**(IndexedDB)存 chat \u002F messages \u002F snapshots\n- **Chokidar** 文件监听、**simple-git** git 状态、**keytar** 系统钥匙串\n- **TypeScript strict** 全栈\n\n### 状态 & 路线\n\n- **v6.x(当前)** — Electron 套壳 + 本地文件夹绑定 + 多变体画布 + workbench 布局\n- 接下来:shell 工具执行、LSP-aware 读源码、MCP server 接入\n- 详细路线见仓库 `PLAN_ELECTRON.md`\n\n### 协议\n\nMIT\n","Open Design Studio 是一个本地优先的 AI 设计工作台，能够将 AI 设计师与任何代码仓库结合。其核心功能包括通过 Claude 或 GPT 生成真实的 HTML\u002FCSS\u002FJS 设计，并在多变体画布上进行比较、检查和编辑。技术特点涵盖了支持无限画布上的多方向设计变体展示、实时渲染预览、以及与 VSCode 同步编辑的能力。此外，它还提供了智能上下文处理和本地密钥管理等功能，确保开发过程中的数据安全性和隐私保护。适用于需要紧密结合代码与设计工作的场景，如 Web 应用界面的设计迭代或快速原型制作。","2026-06-11 04:05:43","CREATED_QUERY"]