[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-ZSeven-W--openpencil":3,"tool-ZSeven-W--openpencil":61},[4,18,26,36,44,53],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",155373,2,"2026-04-14T11:34:08",[14,13,35],"语言模型",{"id":37,"name":38,"github_repo":39,"description_zh":40,"stars":41,"difficulty_score":32,"last_commit_at":42,"category_tags":43,"status":17},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",108322,"2026-04-10T11:39:34",[14,15,13],{"id":45,"name":46,"github_repo":47,"description_zh":48,"stars":49,"difficulty_score":32,"last_commit_at":50,"category_tags":51,"status":17},6121,"gemini-cli","google-gemini\u002Fgemini-cli","gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。\n\n这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。\n\n它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。",100752,"2026-04-10T01:20:03",[52,13,15,14],"插件",{"id":54,"name":55,"github_repo":56,"description_zh":57,"stars":58,"difficulty_score":32,"last_commit_at":59,"category_tags":60,"status":17},4721,"markitdown","microsoft\u002Fmarkitdown","MarkItDown 是一款由微软 AutoGen 团队打造的轻量级 Python 工具，专为将各类文件高效转换为 Markdown 格式而设计。它支持 PDF、Word、Excel、PPT、图片（含 OCR）、音频（含语音转录）、HTML 乃至 YouTube 链接等多种格式的解析，能够精准提取文档中的标题、列表、表格和链接等关键结构信息。\n\n在人工智能应用日益普及的今天，大语言模型（LLM）虽擅长处理文本，却难以直接读取复杂的二进制办公文档。MarkItDown 恰好解决了这一痛点，它将非结构化或半结构化的文件转化为模型“原生理解”且 Token 效率极高的 Markdown 格式，成为连接本地文件与 AI 分析 pipeline 的理想桥梁。此外，它还提供了 MCP（模型上下文协议）服务器，可无缝集成到 Claude Desktop 等 LLM 应用中。\n\n这款工具特别适合开发者、数据科学家及 AI 研究人员使用，尤其是那些需要构建文档检索增强生成（RAG）系统、进行批量文本分析或希望让 AI 助手直接“阅读”本地文件的用户。虽然生成的内容也具备一定可读性，但其核心优势在于为机器",93400,"2026-04-06T19:52:38",[52,14],{"id":62,"github_repo":63,"name":64,"description_en":65,"description_zh":66,"ai_summary_zh":66,"readme_en":67,"readme_zh":68,"quickstart_zh":69,"use_case_zh":70,"hero_image_url":71,"owner_login":72,"owner_name":72,"owner_avatar_url":73,"owner_bio":74,"owner_company":74,"owner_location":74,"owner_email":74,"owner_twitter":74,"owner_website":74,"owner_url":75,"languages":76,"stars":95,"forks":96,"last_commit_at":97,"license":98,"difficulty_score":32,"env_os":99,"env_gpu":100,"env_ram":100,"env_deps":101,"category_tags":107,"github_topics":108,"view_count":32,"oss_zip_url":74,"oss_zip_packed_at":74,"status":17,"created_at":128,"updated_at":129,"faqs":130,"releases":165},7515,"ZSeven-W\u002Fopenpencil","openpencil","The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.","OpenPencil 是全球首款开源的 AI 原生矢量设计工具，旨在通过“设计即代码”的理念彻底改变界面创作流程。它解决了传统设计软件中从创意到落地耗时过长、协作效率低以及设计与代码割裂的痛点，让用户能够直接将自然语言提示词转化为可编辑的实时 UI 界面。\n\n这款工具特别适合前端开发者、追求效率的产品设计师以及希望探索 AI 工作流的技术研究人员使用。其核心亮点在于引入了“并发智能体团队”机制：系统能将复杂的页面任务拆解，由多个 AI 智能体并行处理不同区域（如头部、功能区和页脚），大幅提升生成速度。此外，OpenPencil 支持多模型自适应调度，内置 MCP 服务器以便在终端中直接操控设计文件，并将设计保存为人类可读、Git 友好的 JSON 格式（.op 文件），可一键导出为 React + Tailwind 或标准 HTML\u002FCSS 代码。作为一款跨平台的现代化工具，OpenPencil 让界面设计变得像编写代码一样高效、透明且易于版本管理。","\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FZSeven-W_openpencil_readme_a1924a8ba3cb.png\" alt=\"OpenPencil\" width=\"120\" \u002F>\n\u003C\u002Fp>\n\n\u003Ch1 align=\"center\">OpenPencil\u003C\u002Fh1>\n\n\u003Cp align=\"center\">\n  \u003Cstrong>The world's first open-source AI-native vector design tool.\u003C\u002Fstrong>\u003Cbr \u002F>\n  \u003Csub>Concurrent Agent Teams • Design-as-Code • Built-in MCP Server • Multi-model Intelligence\u003C\u002Fsub>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\".\u002FREADME.md\">\u003Cb>English\u003C\u002Fb>\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.zh.md\">简体中文\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.zh-TW.md\">繁體中文\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.ja.md\">日本語\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.ko.md\">한국어\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.fr.md\">Français\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.es.md\">Español\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.de.md\">Deutsch\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.pt.md\">Português\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.ru.md\">Русский\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.hi.md\">हिन्दी\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.tr.md\">Türkçe\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.th.md\">ไทย\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.vi.md\">Tiếng Việt\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.id.md\">Bahasa Indonesia\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fstargazers\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FZSeven-W\u002Fopenpencil?style=flat&color=cfb537\" alt=\"Stars\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fblob\u002Fmain\u002FLICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002FZSeven-W\u002Fopenpencil?color=64748b\" alt=\"License\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Factions\u002Fworkflows\u002Fci.yml\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Factions\u002Fworkflow\u002Fstatus\u002FZSeven-W\u002Fopenpencil\u002Fci.yml?branch=main&label=CI\" alt=\"CI\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fh9Fmyy6pVh\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F1476517942949580952?label=Discord&logo=discord&logoColor=white&color=5865F2\" alt=\"Discord\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cbr \u002F>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Foss.ioa.tech\u002Fzseven\u002Fopenpencil\u002Fa46e24733239ce24de36702342201033.mp4\">\n    \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FZSeven-W_openpencil_readme_0a5c0c0e59af.png\" alt=\"OpenPencil — click to watch demo\" width=\"100%\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cp align=\"center\">\u003Csub>Click the image to watch the demo video\u003C\u002Fsub>\u003C\u002Fp>\n\n\u003Cbr \u002F>\n\n> **Note:** There is another open-source project with the same name — [OpenPencil](https:\u002F\u002Fgithub.com\u002Fopen-pencil\u002Fopen-pencil), focused on Figma-compatible visual design with real-time collaboration. This project focuses on AI-native design-to-code workflows.\n\n## Why OpenPencil\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"50%\">\n\n### 🎨 Prompt → Canvas\n\nDescribe any UI in natural language. Watch it appear on the infinite canvas in real-time with streaming animation. Modify existing designs by selecting elements and chatting.\n\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\n\n### 🤖 Concurrent Agent Teams\n\nThe orchestrator decomposes complex pages into spatial sub-tasks. Multiple AI agents work on different sections simultaneously — hero, features, footer — all streaming in parallel with per-member canvas indicators.\n\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\n\n### 🧠 Multi-Model Intelligence\n\nAutomatically adapts to each model's capabilities. Claude gets full prompts with thinking; GPT-4o\u002FGemini disable thinking; smaller models (MiniMax, Qwen, Llama) get simplified prompts for reliable output.\n\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\n\n### 🔌 MCP Server\n\nOne-click install into Claude Code, Codex, Gemini, OpenCode, Kiro, or Copilot CLIs. Design from your terminal — read, create, and modify `.op` files through any MCP-compatible agent.\n\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\n\n### 🎨 Style Guides\n\nBuilt-in style guide library with tag-based fuzzy matching. Apply visual styles (glassmorphism, brutalist, retro, etc.) to AI-generated designs. MCP tools for external agent access.\n\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\n\n### 📦 Design-as-Code\n\n`.op` files are JSON — human-readable, Git-friendly, diffable. Design variables generate CSS custom properties. Code export to React + Tailwind or HTML + CSS.\n\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\n\n### 🖥️ Runs Everywhere\n\nWeb app + native desktop on macOS, Windows, and Linux via Electron. Auto-updates from GitHub Releases. `.op` file association — double-click to open.\n\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\n\n### ⌨️ CLI — `op`\n\nControl the design tool from your terminal. `op design`, `op insert`, `op export` — batch design DSL, node manipulation, code export. Pipe in from files or stdin. Works with desktop app or web server.\n\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\n\n### 🎯 Multi-Platform Code Export\n\nExport to React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native — all from one `.op` file. Design variables become CSS custom properties.\n\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\n\n### 🧩 Embeddable SDK\n\n`pen-engine` (headless) + `pen-react` (React UI SDK) — embed the design engine in your own app. DesignProvider, DesignCanvas, hooks, panels, and toolbar components out of the box.\n\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\n\n### 🛡️ Design System Kit\n\nManage reusable UIKits with style switching and component composition. Import\u002Fexport kits from `.pen` files. Built-in registry with MCP tools for external access.\n\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n## Install\n\n**macOS (Homebrew):**\n\n```bash\nbrew tap zseven-w\u002Fopenpencil\nbrew install --cask openpencil\n```\n\n**Windows (Scoop):**\n\n```powershell\nscoop bucket add openpencil https:\u002F\u002Fgithub.com\u002Fzseven-w\u002Fscoop-openpencil\nscoop install openpencil\n```\n\n**Linux \u002F Windows direct download:** [GitHub Releases](https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Freleases) — `.exe` (Windows), `.AppImage` \u002F `.deb` (Linux)\n\n**CLI (`op`):**\n\n```bash\nnpm install -g @zseven-w\u002Fopenpencil\n```\n\n## Quick Start (Development)\n\n```bash\n# Install dependencies\nbun install\n\n# Start dev server at http:\u002F\u002Flocalhost:3000\nbun --bun run dev\n```\n\nOr run as a desktop app:\n\n```bash\nbun run electron:dev\n```\n\n> **Prerequisites:** [Bun](https:\u002F\u002Fbun.sh\u002F) >= 1.0 and [Node.js](https:\u002F\u002Fnodejs.org\u002F) >= 18. Optional: [Zig](https:\u002F\u002Fziglang.org\u002F) >= 0.14 for building `agent-native` from source (a prebuilt binary will be downloaded automatically if Zig is not installed).\n\n### Docker\n\nMultiple image variants are available — pick the one that fits your needs:\n\n| Image                        | Size    | Includes             |\n| ---------------------------- | ------- | -------------------- |\n| `openpencil:latest`          | ~226 MB | Web app only         |\n| `openpencil-claude:latest`   | —       | + Claude Code CLI    |\n| `openpencil-codex:latest`    | —       | + Codex CLI          |\n| `openpencil-opencode:latest` | —       | + OpenCode CLI       |\n| `openpencil-copilot:latest`  | —       | + GitHub Copilot CLI |\n| `openpencil-gemini:latest`   | —       | + Gemini CLI         |\n| `openpencil-full:latest`     | ~1 GB   | All CLI tools        |\n\n**Run (web only):**\n\n```bash\ndocker run -d -p 3000:3000 ghcr.io\u002Fzseven-w\u002Fopenpencil:latest\n```\n\n**Run with AI CLI (e.g. Claude Code):**\n\nThe AI chat relies on Claude CLI OAuth login. Use a Docker volume to persist the login session:\n\n```bash\n# Step 1 — Login (one-time)\ndocker volume create openpencil-claude-auth\ndocker run -it --rm \\\n  -v openpencil-claude-auth:\u002Froot\u002F.claude \\\n  ghcr.io\u002Fzseven-w\u002Fopenpencil-claude:latest claude login\n\n# Step 2 — Start\ndocker run -d -p 3000:3000 \\\n  -v openpencil-claude-auth:\u002Froot\u002F.claude \\\n  ghcr.io\u002Fzseven-w\u002Fopenpencil-claude:latest\n```\n\n**Build locally:**\n\n```bash\n# Base (web only)\ndocker build --target base -t openpencil .\n\n# With a specific CLI\ndocker build --target with-claude -t openpencil-claude .\n\n# Full (all CLIs)\ndocker build --target full -t openpencil-full .\n```\n\n## AI-Native Design\n\n**Prompt to UI**\n\n- **Text-to-design** — describe a page, get it generated on canvas in real-time with SSE streaming animation\n- **Orchestrator** — decomposes complex pages into spatial sub-tasks for parallel generation\n- **Agent Teams** — concurrent team members with delegate tool, per-member canvas indicators, and fallback strategies\n- **Design modification** — select elements, then describe changes in natural language\n- **Vision input** — attach screenshots or mockups for reference-based design\n- **Style Guides** — apply visual styles (glassmorphism, brutalist, retro, etc.) via tag-based fuzzy matching\n- **Anti-slop** — cross-generation diversity tracking to avoid repetitive AI output\n\n**Multi-Agent Support**\n\n| Agent                       | Setup                                                                                             |\n| --------------------------- | ------------------------------------------------------------------------------------------------- |\n| **Built-in (9+ providers)** | Select from provider presets with region switcher — Anthropic, OpenAI, Google, DeepSeek, and more |\n| **Claude Code**             | No config — uses Claude Agent SDK with local OAuth                                                |\n| **Codex CLI**               | Connect in Agent Settings (`Cmd+,`)                                                               |\n| **OpenCode**                | Connect in Agent Settings (`Cmd+,`)                                                               |\n| **GitHub Copilot**          | `copilot login` then connect in Agent Settings (`Cmd+,`)                                          |\n| **Gemini CLI**              | Connect in Agent Settings (`Cmd+,`)                                                               |\n\n**Model Capability Profiles** — automatically adapts prompts, thinking mode, and timeouts per model tier. Full-tier models (Claude) get complete prompts; standard-tier (GPT-4o, Gemini, DeepSeek) disable thinking; basic-tier (MiniMax, Qwen, Llama, Mistral) get simplified nested-JSON prompts for maximum reliability.\n\n**i18n** — Full interface localization in 15 languages: English, 简体中文, 繁體中文, 日本語, 한국어, Français, Español, Deutsch, Português, Русский, हिन्दी, Türkçe, ไทย, Tiếng Việt, Bahasa Indonesia.\n\n**MCP Server**\n\n- Built-in MCP server (`pen-mcp` package) — one-click install into Claude Code \u002F Codex \u002F Gemini \u002F OpenCode \u002F Kiro \u002F Copilot CLIs\n- Auto-detects Node.js — if not installed, falls back to HTTP transport and auto-starts the MCP HTTP server\n- Design automation from terminal: read, create, and modify `.op` files via any MCP-compatible agent\n- **Layered design workflow** — `design_skeleton` → `design_content` → `design_refine` for higher-fidelity multi-section designs\n- **Segmented prompt retrieval** — load only the design knowledge you need (schema, layout, roles, icons, planning, etc.)\n- **Style guide tools** — `get_style_guide_tags` and `get_style_guide` for applying visual styles via MCP\n- Multi-page support — create, rename, reorder, and duplicate pages via MCP tools\n\n**Code Generation**\n\n- React + Tailwind CSS, HTML + CSS, CSS Variables\n- Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native\n\n## CLI — `op`\n\nInstall globally and control the design tool from your terminal:\n\n```bash\nnpm install -g @zseven-w\u002Fopenpencil\n```\n\n```bash\nop start                     # Launch desktop app\nop design @landing.txt       # Batch design from file\nop insert '{\"type\":\"RECT\"}'  # Insert a node\nop export react --out .      # Export to React + Tailwind\nop import:figma design.fig   # Import Figma file\ncat design.dsl | op design - # Pipe from stdin\n```\n\nSupports three input methods: inline string, `@filepath` (read from file), or `-` (read from stdin). Works with desktop app or web dev server. See [CLI README](.\u002Fapps\u002Fcli\u002FREADME.md) for full command reference.\n\n**LLM Skill** — install the [OpenPencil Skill](https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil-skill) plugin to teach AI agents (Claude Code, Cursor, Codex, Gemini CLI, etc.) how to design with `op`.\n\n## Features\n\n**Canvas & Drawing**\n\n- Infinite canvas with pan, zoom, smart alignment guides, and snapping\n- Rectangle, Ellipse, Line, Polygon, Pen (Bezier), Frame, Text\n- Boolean operations — union, subtract, intersect with contextual toolbar\n- Icon picker (Iconify) and image import (PNG\u002FJPEG\u002FSVG\u002FWebP\u002FGIF)\n- Auto-layout — vertical\u002Fhorizontal with gap, padding, justify, align\n- Multi-page documents with tab navigation\n\n**Design System**\n\n- Design variables — color, number, string tokens with `$variable` references\n- Multi-theme support — multiple axes, each with variants (Light\u002FDark, Compact\u002FComfortable)\n- Component system — reusable components with instances and overrides\n- CSS sync — auto-generated custom properties, `var(--name)` in code output\n- Reusable UIKits — import\u002Fexport component kits from `.pen` files\n\n**AI & Agents**\n\n- Prompt-to-canvas with streaming generation and orchestrator-driven spatial decomposition\n- Concurrent Agent Teams — multiple designers work on different sections in parallel with per-member canvas indicators\n- Layered workflow — `design_skeleton` → `design_content` → `design_refine` with focused prompts per phase\n- Style Guides — 50+ built-in styles (glassmorphism, brutalist, retro, etc.) with tag-based fuzzy matching, wired into planning and generation\n- Multi-model capability profiles — auto-adapts thinking mode, effort, and prompt shape per model tier\n- Built-in agent runtime (`agent-native`, Zig NAPI) + Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, Gemini providers\n- Anthropic-format passthrough for Chinese LLM providers — Kimi, Zhipu, GLM, DouBao, Ark, Bailian\u002FDashScope, ModelScope, Coding Plans\n\n**Git Integration**\n\n- Clone wizard with SSH \u002F HTTPS auth and SSH key management\n- Branch picker — create, switch, delete, merge, all from the git panel\n- Pull \u002F push cascades with auth retry and non-fast-forward handling\n- Folder-mode three-way merge with on-disk `MERGE_HEAD` state tracking\n- Conflict panel with per-node \u002F per-field three-way cards, inline JSON editor, bulk actions, and inline diff block\n- Remote settings and SSH keys UI; 15-locale i18n across the whole Git surface\n\n**Export**\n\n- Canvas export — PNG, JPEG, WEBP, PDF (`Cmd+Shift+P`)\n- Code export — React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native\n- Incremental MCP codegen pipeline — `codegen_plan`, `codegen_submit_chunk`, `codegen_assemble`, `codegen_clean`\n\n**Figma Import**\n\n- Import `.fig` files with layout, fills, strokes, effects, text, images, and vectors preserved\n\n**Desktop App**\n\n- Native macOS, Windows, and Linux via Electron\n- `.op` file association — double-click to open, single-instance lock\n- Auto-update from GitHub Releases\n- Native application menu with Save As, Open Recent, and an unsaved-changes dialog on close\n- Recent files persistence\n\n## Tech Stack\n\n|                 |                                                                                         |\n| --------------- | --------------------------------------------------------------------------------------- |\n| **Frontend**    | React 19 · TanStack Start · Tailwind CSS v4 · shadcn\u002Fui · i18next                       |\n| **Canvas**      | CanvasKit\u002FSkia (WASM, GPU-accelerated)                                                  |\n| **Engine**      | pen-engine (headless) · pen-react (React UI SDK)                                        |\n| **State**       | Zustand v5                                                                              |\n| **Server**      | Nitro                                                                                   |\n| **Desktop**     | Electron 35                                                                             |\n| **CLI**         | `op` — terminal control, batch design DSL, code export                                  |\n| **AI**          | agent-native (Zig NAPI) · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |\n| **Runtime**     | Bun · Vite 7                                                                            |\n| **Lint**        | oxlint · oxfmt                                                                          |\n| **File format** | `.op` — JSON-based, human-readable, Git-friendly                                        |\n\n## Project Structure\n\n```text\nopenpencil\u002F\n├── apps\u002F\n│   ├── web\u002F                 TanStack Start web app\n│   │   ├── src\u002F\n│   │   │   ├── canvas\u002F      CanvasKit\u002FSkia engine — drawing, sync, layout\n│   │   │   ├── components\u002F  React UI — editor, panels, shared dialogs, icons\n│   │   │   ├── services\u002Fai\u002F AI chat, orchestrator, design generation, streaming\n│   │   │   ├── services\u002Fcodegen\u002F Code generation service wrappers\n│   │   │   ├── stores\u002F      Zustand — canvas, document, pages, history, AI\n│   │   │   ├── hooks\u002F       Keyboard shortcuts, file drop, Figma paste, MCP sync\n│   │   │   ├── i18n\u002F        Internationalization — 15 locales\n│   │   │   └── uikit\u002F       Reusable component kit system\n│   │   └── server\u002F\n│   │       ├── api\u002Fai\u002F      Nitro API — streaming chat, agent, generation, image search\n│   │       ├── api\u002Fmcp\u002F     MCP HTTP transport endpoints\n│   │       └── utils\u002F       Claude, OpenCode, Codex, Copilot, Gemini CLI wrappers\n│   ├── desktop\u002F             Electron desktop app\n│   │   ├── main.ts          Window, Nitro fork, native menu, auto-updater\n│   │   ├── ipc-handlers.ts  Native file dialogs, theme sync, prefs IPC\n│   │   └── preload.ts       IPC bridge\n│   └── cli\u002F                 CLI tool — `op` command\n│       ├── src\u002Fcommands\u002F    Design, document, export, import, node, page, variable commands\n│       ├── connection.ts    WebSocket connection to running app\n│       └── launcher.ts      Auto-detect and launch desktop app or web server\n├── packages\u002F\n│   ├── pen-types\u002F           Type definitions for PenDocument model\n│   ├── pen-core\u002F            Document tree ops, layout engine, variables\n│   ├── pen-engine\u002F          Headless design engine — document, selection, history, viewport\n│   ├── pen-react\u002F           React UI SDK — provider, canvas, hooks, panels, toolbar\n│   ├── pen-codegen\u002F         Code generators (React, HTML, Vue, Flutter, ...)\n│   ├── pen-figma\u002F           Figma .fig file parser and converter\n│   ├── pen-renderer\u002F        Standalone CanvasKit\u002FSkia renderer\n│   ├── pen-mcp\u002F             MCP server — tools, routes, document manager\n│   ├── pen-sdk\u002F             Umbrella SDK (re-exports all packages)\n│   ├── pen-ai-skills\u002F       AI prompt skill engine (phase-driven prompt loading)\n│   └── agent-native\u002F        Native AI agent runtime (Zig NAPI, multi-provider, teams)\n└── .githooks\u002F               Pre-commit version sync from branch name\n```\n\n## Keyboard Shortcuts\n\n| Key         | Action            |     | Key           | Action                    |\n| ----------- | ----------------- | --- | ------------- | ------------------------- |\n| `V`         | Select            |     | `Cmd+S`       | Save                      |\n| `R`         | Rectangle         |     | `Cmd+Z`       | Undo                      |\n| `O`         | Ellipse           |     | `Cmd+Shift+Z` | Redo                      |\n| `L`         | Line              |     | `Cmd+C\u002FX\u002FV\u002FD` | Copy\u002FCut\u002FPaste\u002FDuplicate  |\n| `T`         | Text              |     | `Cmd+G`       | Group                     |\n| `F`         | Frame             |     | `Cmd+Shift+G` | Ungroup                   |\n| `P`         | Pen tool          |     | `Cmd+Shift+P` | Export (PNG\u002FJPG\u002FWEBP\u002FPDF) |\n| `H`         | Hand (pan)        |     | `Cmd+Shift+C` | Code panel                |\n| `Del`       | Delete            |     | `Cmd+Shift+V` | Variables panel           |\n| `[ \u002F ]`     | Reorder           |     | `Cmd+J`       | AI chat                   |\n| Arrows      | Nudge 1px         |     | `Cmd+,`       | Agent settings            |\n| `Cmd+Alt+U` | Boolean union     |     | `Cmd+Alt+S`   | Boolean subtract          |\n| `Cmd+Alt+I` | Boolean intersect |     | `Cmd+Shift+S` | Save As                   |\n\n## Scripts\n\n```bash\nbun --bun run dev          # Dev server (port 3000)\nbun --bun run build        # Production build\nbun --bun run test         # Run tests (Vitest)\nnpx tsc --noEmit           # Type check\nbun run lint               # Lint (oxlint)\nbun run format             # Format (oxfmt)\nbun run bump \u003Cversion>     # Sync version across all package.json\nbun run electron:dev       # Electron dev\nbun run electron:build     # Electron package\nbun run cli:dev            # Run CLI from source\nbun run cli:compile        # Compile CLI to dist\nbun run mcp:dev            # Run MCP server from source\n```\n\n## Contributing\n\nContributions are welcome! See [CLAUDE.md](.\u002FCLAUDE.md) for architecture details and code style.\n\n1. Fork and clone\n2. Set up version sync: `git config core.hooksPath .githooks`\n3. Create a branch: `git checkout -b feat\u002Fmy-feature`\n4. Run checks: `npx tsc --noEmit && bun --bun run test`\n5. Commit with [Conventional Commits](https:\u002F\u002Fwww.conventionalcommits.org\u002F): `feat(canvas): add rotation snapping`\n6. Open a PR against `main`\n\n## Roadmap\n\n- [x] Design variables & tokens with CSS sync\n- [x] Component system (instances & overrides)\n- [x] AI design generation with orchestrator\n- [x] MCP server integration with layered design workflow\n- [x] Multi-page support\n- [x] Figma `.fig` import\n- [x] Boolean operations (union, subtract, intersect)\n- [x] Multi-model capability profiles\n- [x] Monorepo restructure with reusable packages\n- [x] CLI tool (`op`) for terminal control\n- [x] Built-in AI agent SDK with multi-provider support\n- [x] i18n — 15 languages\n- [x] Headless design engine (`pen-engine`) + React UI SDK (`pen-react`)\n- [x] Style Guides with tag-based matching and MCP tools\n- [x] Concurrent Agent Teams with delegate tool and canvas indicators\n- [x] Native agent runtime (`agent-native` — Zig NAPI)\n- [x] Git integration — clone, branch, push\u002Fpull, folder-mode three-way merge\n- [x] Canvas raster export (PNG \u002F JPEG \u002F WEBP \u002F PDF)\n- [ ] Collaborative editing\n- [ ] Plugin system\n\n## Contributors\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FZSeven-W_openpencil_readme_fb8b12bf6528.png\" alt=\"Contributors\" \u002F>\n\u003C\u002Fa>\n\n## Sponsors\n\nOpenPencil is free and open-source. Development is funded by people who find it useful — thank you for keeping the canvas open.\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmrqyun\" title=\"MrQyun\">\n  \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FZSeven-W_openpencil_readme_f9499ec86e4b.png\" width=\"64\" height=\"64\" alt=\"MrQyun\" \u002F>\n\u003C\u002Fa>\n\nThanks to **[MrQyun](https:\u002F\u002Fgithub.com\u002Fmrqyun)** — want your name here too? **[Become a sponsor →](https:\u002F\u002Fgithub.com\u002Fsponsors\u002FZSeven-W)**\n\n## Community\n\n\u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fh9Fmyy6pVh\">\n  \u003Cimg src=\".\u002Fapps\u002Fweb\u002Fpublic\u002Flogo-discord.svg\" alt=\"Discord\" width=\"16\" \u002F>\n  \u003Cstrong> Join our Discord\u003C\u002Fstrong>\n\u003C\u002Fa>\n— Ask questions, share designs, suggest features.\n\n## Star History\n\n\u003Ca href=\"https:\u002F\u002Fstar-history.com\u002F#ZSeven-W\u002Fopenpencil&Date\">\n \u003Cpicture>\n   \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FZSeven-W_openpencil_readme_0303ac3fdd5a.png&theme=dark\" \u002F>\n   \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FZSeven-W_openpencil_readme_0303ac3fdd5a.png\" \u002F>\n   \u003Cimg alt=\"Star History Chart\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FZSeven-W_openpencil_readme_0303ac3fdd5a.png\" width=\"100%\" \u002F>\n \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n## License\n\n[MIT](.\u002FLICENSE) — Copyright (c) 2026 ZSeven-W\n","\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FZSeven-W_openpencil_readme_a1924a8ba3cb.png\" alt=\"OpenPencil\" width=\"120\" \u002F>\n\u003C\u002Fp>\n\n\u003Ch1 align=\"center\">OpenPencil\u003C\u002Fh1>\n\n\u003Cp align=\"center\">\n  \u003Cstrong>全球首款开源的原生AI矢量设计工具。\u003C\u002Fstrong>\u003Cbr \u002F>\n  \u003Csub>并发代理团队 • 设计即代码 • 内置MCP服务器 • 多模型智能\u003C\u002Fsub>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\".\u002FREADME.md\">\u003Cb>English\u003C\u002Fb>\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.zh.md\">简体中文\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.zh-TW.md\">繁體中文\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.ja.md\">日本語\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.ko.md\">한국어\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.fr.md\">Français\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.es.md\">Español\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.de.md\">Deutsch\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.pt.md\">Português\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.ru.md\">Русский\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.hi.md\">हिन्दी\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.tr.md\">Türkçe\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.th.md\">ไทย\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.vi.md\">Tiếng Việt\u003C\u002Fa> · \u003Ca href=\".\u002FREADME.id.md\">Bahasa Indonesia\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fstargazers\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FZSeven-W\u002Fopenpencil?style=flat&color=cfb537\" alt=\"Stars\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fblob\u002Fmain\u002FLICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002FZSeven-W\u002Fopenpencil?color=64748b\" alt=\"License\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Factions\u002Fworkflows\u002Fci.yml\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Factions\u002Fworkflow\u002Fstatus\u002FZSeven-W\u002Fopenpencil\u002Fci.yml?branch=main&label=CI\" alt=\"CI\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fh9Fmyy6pVh\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F1476517942949580952?label=Discord&logo=discord&logoColor=white&color=5865F2\" alt=\"Discord\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cbr \u002F>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Foss.ioa.tech\u002Fzseven\u002Fopenpencil\u002Fa46e24733239ce24de36702342201033.mp4\">\n    \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FZSeven-W_openpencil_readme_0a5c0c0e59af.png\" alt=\"OpenPencil — 点击观看演示\" width=\"100%\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cp align=\"center\">\u003Csub>点击图片即可观看演示视频\u003C\u002Fsub>\u003C\u002Fp>\n\n\u003Cbr \u002F>\n\n> **注：** 还有一个同名的开源项目——[OpenPencil](https:\u002F\u002Fgithub.com\u002Fopen-pencil\u002Fopen-pencil)，专注于支持Figma的实时协作式可视化设计。而本项目则聚焦于原生AI驱动的设计到代码工作流。\n\n## 为什么选择OpenPencil\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"50%\">\n\n### 🎨 提示词 → 画布\n\n用自然语言描述任何UI界面。它将实时出现在无限画布上，并伴随流畅的动画效果。只需选择元素并进行对话，即可轻松修改现有设计。\n\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\n\n### 🤖 并发代理团队\n\n编排器会将复杂的页面分解为多个空间子任务。多个AI代理可同时处理不同区域——例如头部、功能区、页脚等——所有操作均以流式传输方式并行进行，每个成员的画布状态都会实时显示。\n\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\n\n### 🧠 多模型智能\n\n自动适配各模型的能力。Claude接收完整的思考型提示；GPT-4o\u002FGemini则关闭思考模式；而小型模型（MiniMax、Qwen、Llama）则会收到简化版提示，以确保输出稳定可靠。\n\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\n\n### 🔌 MCP服务器\n\n一键集成至Claude Code、Codex、Gemini、OpenCode、Kiro或Copilot CLI中。你可以在终端直接进行设计——通过任意兼容MCP的代理读取、创建和修改`.op`文件。\n\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\n\n### 🎨 样式库\n\n内置基于标签的模糊匹配样式库。可将玻璃质感、粗野主义、复古风等视觉风格应用到AI生成的设计中。MCP工具还支持外部代理访问。\n\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\n\n### 📦 设计即代码\n\n`.op`文件采用JSON格式，易于阅读、兼容Git且可进行差异比较。设计变量会自动生成CSS自定义属性。支持导出为React + Tailwind或HTML + CSS代码。\n\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\n\n### 🖥️ 跨平台运行\n\n提供Web应用以及基于Electron的原生桌面版本，适用于macOS、Windows和Linux系统。自动从GitHub Releases获取更新。双击`.op`文件即可打开。\n\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\n\n### ⌨️ CLI — `op`\n\n通过终端控制设计工具。`op design`、`op insert`、`op export`等命令可批量执行设计DSL、节点操作及代码导出。支持从文件或标准输入管道传入数据。既可与桌面应用配合使用，也可作为Web服务器运行。\n\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\n\n### 🎯 多平台代码导出\n\n只需一个`.op`文件，即可导出为React + Tailwind、HTML + CSS、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native等多种格式。设计变量会自动转换为CSS自定义属性。\n\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\n\n### 🧩 可嵌入SDK\n\n`pen-engine`（无界面）+ `pen-react`（React UI SDK）——可将设计引擎嵌入到你的应用中。开箱即用的DesignProvider、DesignCanvas组件、钩子函数以及面板和工具栏组件。\n\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\n\n### 🛡️ 设计系统套件\n\n管理可复用的UI套件，支持样式切换和组件组合。可通过`.pen`文件导入或导出套件。内置注册表，并配备MCP工具供外部访问。\n\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n## 安装\n\n**macOS (Homebrew):**\n\n```bash\nbrew tap zseven-w\u002Fopenpencil\nbrew install --cask openpencil\n```\n\n**Windows (Scoop):**\n\n```powershell\nscoop bucket add openpencil https:\u002F\u002Fgithub.com\u002Fzseven-w\u002Fscoop-openpencil\nscoop install openpencil\n```\n\n**Linux \u002F Windows 直接下载：** [GitHub Releases](https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Freleases) — `.exe`（Windows）、`.AppImage` \u002F `.deb`（Linux）\n\n**CLI (`op`)：**\n\n```bash\nnpm install -g @zseven-w\u002Fopenpencil\n```\n\n## 快速开始（开发环境）\n\n```bash\n# 安装依赖\nbun install\n\n# 启动开发服务器，地址为 http:\u002F\u002Flocalhost:3000\nbun --bun run dev\n```\n\n或者以桌面应用形式运行：\n\n```bash\nbun run electron:dev\n```\n\n> **前提条件：** [Bun](https:\u002F\u002Fbun.sh\u002F) >= 1.0 和 [Node.js](https:\u002F\u002Fnodejs.org\u002F) >= 18。可选：[Zig](https:\u002F\u002Fziglang.org\u002F) >= 0.14，用于从源码构建`agent-native`（若未安装Zig，则会自动下载预编译二进制文件）。\n\n### Docker\n\n提供了多种镜像变体，请根据需求选择：\n\n| 镜像                        | 大小    | 包含内容             |\n| ---------------------------- | ------- | -------------------- |\n| `openpencil:latest`          | ~226 MB | 仅Web应用         |\n| `openpencil-claude:latest`   | —       | + Claude Code CLI    |\n| `openpencil-codex:latest`    | —       | + Codex CLI          |\n| `openpencil-opencode:latest` | —       | + OpenCode CLI       |\n| `openpencil-copilot:latest`  | —       | + GitHub Copilot CLI |\n| `openpencil-gemini:latest`   | —       | + Gemini CLI         |\n| `openpencil-full:latest`     | ~1 GB   | 包含所有CLI工具        |\n\n**仅运行Web应用：**\n\n```bash\ndocker run -d -p 3000:3000 ghcr.io\u002Fzseven-w\u002Fopenpencil:latest\n```\n\n**运行带AI CLI版本（如Claude Code）：**\n\nAI聊天功能依赖于Claude CLI的OAuth登录。建议使用Docker卷来持久化登录会话：\n\n```bash\n\n# 步骤 1 — 登录（仅需一次）\ndocker volume create openpencil-claude-auth\ndocker run -it --rm \\\n  -v openpencil-claude-auth:\u002Froot\u002F.claude \\\n  ghcr.io\u002Fzseven-w\u002Fopenpencil-claude:latest claude login\n\n# 步骤 2 — 启动\ndocker run -d -p 3000:3000 \\\n  -v openpencil-claude-auth:\u002Froot\u002F.claude \\\n  ghcr.io\u002Fzseven-w\u002Fopenpencil-claude:latest\n```\n\n**本地构建：**\n\n```bash\n# 基础版（仅限网页）\ndocker build --target base -t openpencil .\n\n# 带特定 CLI 的版本\ndocker build --target with-claude -t openpencil-claude .\n\n# 完整版（所有 CLI）\ndocker build --target full -t openpencil-full .\n```\n\n## 原生 AI 设计\n\n**提示到 UI**\n\n- **文本转设计** — 描述页面内容，通过 SSE 流式动画实时在画布上生成\n- **编排器** — 将复杂页面分解为空间子任务，以实现并行生成\n- **代理团队** — 多个并发成员，具备委托工具、成员专属画布指示器及回退策略\n- **设计修改** — 选择元素后，用自然语言描述更改内容\n- **视觉输入** — 可附加截图或线框图，用于参考式设计\n- **风格指南** — 通过基于标签的模糊匹配应用视觉风格（玻璃拟物、粗野主义、复古风等）\n- **防重复机制** — 跨代多样性追踪，避免 AI 输出重复内容\n\n**多代理支持**\n\n| 代理                       | 设置                                                                                             |\n| --------------------------- | ------------------------------------------------------------------------------------------------- |\n| **内置（9+提供商）**       | 从提供者预设中选择，并可切换地区 — Anthropic、OpenAI、Google、DeepSeek 等                     |\n| **Claude Code**             | 无需配置 — 使用 Claude Agent SDK 和本地 OAuth                                                  |\n| **Codex CLI**               | 在代理设置中连接（`Cmd+,`）                                                                     |\n| **OpenCode**                | 在代理设置中连接（`Cmd+,`）                                                                     |\n| **GitHub Copilot**          | 先执行 `copilot login`，再在代理设置中连接（`Cmd+,`）                                          |\n| **Gemini CLI**              | 在代理设置中连接（`Cmd+,`）                                                                     |\n\n**模型能力档案** — 根据模型层级自动调整提示、思考模式和超时时间。全功能模型（Claude）使用完整提示；标准级模型（GPT-4o、Gemini、DeepSeek）禁用思考模式；基础级模型（MiniMax、Qwen、Llama、Mistral）则采用简化的嵌套 JSON 提示，以确保最大可靠性。\n\n**国际化** — 界面全面本地化为 15 种语言：英语、简体中文、繁體中文、日语、韩语、法语、西班牙语、德语、葡萄牙语、俄语、印地语、土耳其语、泰语、越南语、印尼语。\n\n**MCP 服务器**\n\n- 内置 MCP 服务器（`pen-mcp` 包）— 一键安装至 Claude Code \u002F Codex \u002F Gemini \u002F OpenCode \u002F Kiro \u002F Copilot CLI\n- 自动检测 Node.js — 若未安装，则回退至 HTTP 传输并自动启动 MCP HTTP 服务器\n- 可通过终端进行设计自动化：使用任何兼容 MCP 的代理读取、创建和修改 `.op` 文件\n- **分层设计工作流** — `design_skeleton` → `design_content` → `design_refine`，适用于高保真度的多区块设计\n- **分段式提示获取** — 仅加载所需的设计知识（架构、布局、角色、图标、规划等）\n- **风格指南工具** — 使用 `get_style_guide_tags` 和 `get_style_guide` 通过 MCP 应用视觉风格\n- 支持多页面 — 可通过 MCP 工具创建、重命名、排序和复制页面\n\n**代码生成**\n\n- React + Tailwind CSS、HTML + CSS、CSS 变量\n- Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native\n\n## CLI — `op`\n\n全局安装后，即可通过终端控制设计工具：\n\n```bash\nnpm install -g @zseven-w\u002Fopenpencil\n```\n\n```bash\nop start                     # 启动桌面应用\nop design @landing.txt       # 从文件批量设计\nop insert '{\"type\":\"RECT\"}'  # 插入节点\nop export react --out .      # 导出为 React + Tailwind\nop import:figma design.fig   # 导入 Figma 文件\ncat design.dsl | op design - # 从标准输入管道传入\n```\n\n支持三种输入方式：内联字符串、`@filepath`（从文件读取）或 `-`（从标准输入读取）。可与桌面应用或 Web 开发服务器配合使用。完整命令参考请参阅 [CLI README](.\u002Fapps\u002Fcli\u002FREADME.md)。\n\n**LLM 技能** — 安装 [OpenPencil Skill](https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil-skill) 插件，即可教会 AI 代理（Claude Code、Cursor、Codex、Gemini CLI 等）如何使用 `op` 进行设计。\n\n## 功能特性\n\n**画布与绘图**\n\n- 无限画布，支持平移、缩放、智能对齐引导线及吸附功能\n- 矩形、椭圆、直线、多边形、钢笔（贝塞尔曲线）、框架、文本工具\n- 布尔运算——并集、差集、交集，并配有上下文工具栏\n- 图标选择器（Iconify）和图片导入（PNG\u002FJPEG\u002FSVG\u002FWebP\u002FGIF）\n- 自动布局——垂直\u002F水平方向，可设置间距、内边距、对齐方式\n- 多页文档支持，可通过标签页导航\n\n**设计系统**\n\n- 设计变量——颜色、数字、字符串等 token，使用 `$variable` 引用\n- 多主题支持——支持多个维度，每个维度包含变体（浅色\u002F深色、紧凑\u002F舒适）\n- 组件系统——可复用组件，支持实例化与覆盖\n- CSS 同步——自动生成 CSS 自定义属性，在代码输出中使用 `var(--name)`\n- 可复用 UI 套件——支持从 `.pen` 文件导入导出组件套件\n\n**AI 与代理**\n\n- 提示词转画布，支持流式生成及编排驱动的空间分解\n- 并发代理团队——多名设计师可并行处理不同区域，每位成员的画布状态实时显示\n- 分层工作流——`design_skeleton` → `design_content` → `design_refine`，各阶段配备针对性提示词\n- 风格指南——内置 50+ 种风格（玻璃拟物、粗野主义、复古等），基于标签的模糊匹配，无缝集成到规划与生成流程中\n- 多模型能力配置文件——根据模型层级自动调整思维模式、工作强度及提示词结构\n- 内置代理运行时（`agent-native`, Zig NAPI）+ Anthropic、Claude Agent SDK、OpenCode、Codex、Copilot、Gemini 等提供商\n- 支持 Anthropic 格式的中国 LLM 提供商接入——Kimi、智谱、GLM、豆包、悟道、百炼\u002FDashScope、ModelScope、Coding Plans 等\n\n**Git 集成**\n\n- 克隆向导，支持 SSH \u002F HTTPS 认证及 SSH 密钥管理\n- 分支选择器——创建、切换、删除、合并分支，所有操作均在 Git 面板完成\n- Pull \u002F push 流程，具备认证重试与非快进处理机制\n- 文件夹模式下的三路合并，支持磁盘上的 `MERGE_HEAD` 状态跟踪\n- 冲突面板，按节点\u002F字段展示三路对比卡片，内置 JSON 编辑器、批量操作及内联差异块\n- 远程仓库设置与 SSH 密钥管理界面；整个 Git 界面支持 15 种语言本地化\n\n**导出**\n\n- 画布导出——PNG、JPEG、WEBP、PDF（快捷键：Cmd+Shift+P）\n- 代码导出——React + Tailwind、HTML + CSS、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native\n- 增量式 MCP 代码生成流水线——`codegen_plan`、`codegen_submit_chunk`、`codegen_assemble`、`codegen_clean`\n\n**Figma 导入**\n\n- 支持导入 `.fig` 文件，保留布局、填充、描边、效果、文本、图片及矢量图形\n\n**桌面应用**\n\n- 原生 macOS、Windows 和 Linux 版本，基于 Electron 构建\n- `.op` 文件关联——双击即可打开，单实例锁定\n- 自动更新，通过 GitHub Releases 发布\n- 原生应用菜单，包含另存为、最近打开文件等功能，并在关闭未保存时弹出对话框\n- 最近打开文件持久化存储\n\n## 技术栈\n\n|                 |                                                                                         |\n| --------------- | --------------------------------------------------------------------------------------- |\n| **前端**        | React 19 · TanStack Start · Tailwind CSS v4 · shadcn\u002Fui · i18next                       |\n| **画布**        | CanvasKit\u002FSkia（WASM，GPU 加速）                                                        |\n| **引擎**        | pen-engine（无头版） · pen-react（React UI SDK）                                        |\n| **状态管理**    | Zustand v5                                                                              |\n| **服务器**      | Nitro                                                                                   |\n| **桌面端**      | Electron 35                                                                             |\n| **CLI 工具**    | `op` — 终端控制、批处理设计 DSL、代码导出                                              |\n| **AI**          | agent-native（Zig NAPI） · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |\n| **运行时**      | Bun · Vite 7                                                                            |\n| **代码检查**    | oxlint · oxfmt                                                                          |\n| **文件格式**    | `.op` — 基于 JSON，人类可读，兼容 Git                                                    |\n\n## 项目结构\n\n```text\nopenpencil\u002F\n├── apps\u002F\n│   ├── web\u002F                 TanStack Start Web 应用\n│   │   ├── src\u002F\n│   │   │   ├── canvas\u002F      CanvasKit\u002FSkia 引擎——绘图、同步、布局\n│   │   │   ├── components\u002F  React UI——编辑器、面板、共享对话框、图标\n│   │   │   ├── services\u002Fai\u002F AI 聊天、编排器、设计生成、流式传输\n│   │   │   ├── services\u002Fcodegen\u002F 代码生成服务封装\n│   │   │   ├── stores\u002F      Zustand——画布、文档、页面、历史记录、AI\n│   │   │   ├── hooks\u002F       键盘快捷键、文件拖放、Figma 粘贴、MCP 同步\n│   │   │   ├── i18n\u002F        国际化——支持 15 种语言\n│   │   │   └── uikit\u002F       可复用组件套件系统\n│   │   └── server\u002F\n│   │       ├── api\u002Fai\u002F      Nitro API——流式聊天、代理、生成、图像搜索\n│   │       ├── api\u002Fmcp\u002F     MCP HTTP 传输接口\n│   │       └── utils\u002F       Claude、OpenCode、Codex、Copilot、Gemini 的 CLI 封装\n│   ├── desktop\u002F             Electron 桌面应用\n│   │   ├── main.ts          窗口、Nitro 分叉、原生菜单、自动更新程序\n│   │   ├── ipc-handlers.ts  原生文件对话框、主题同步、偏好设置 IPC\n│   │   └── preload.ts       IPC 桥接\n│   └── cli\u002F                 CLI 工具——`op` 命令\n│       ├── src\u002Fcommands\u002F    设计、文档、导出、导入、节点、页面、变量相关命令\n│       ├── connection.ts    WebSocket 连接到正在运行的应用\n│       └── launcher.ts      自动检测并启动桌面应用或 Web 服务器\n├── packages\u002F\n│   ├── pen-types\u002F           PenDocument 模型的类型定义\n│   ├── pen-core\u002F            文档树操作、布局引擎、变量管理\n│   ├── pen-engine\u002F          无头设计引擎——文档、选区、历史记录、视口\n│   ├── pen-react\u002F           React UI SDK——提供者、画布、钩子、面板、工具栏\n│   ├── pen-codegen\u002F         代码生成器（React、HTML、Vue、Flutter 等）\n│   ├── pen-figma\u002F           Figma .fig 文件解析器和转换工具\n│   ├── pen-renderer\u002F        独立的 CanvasKit\u002FSkia 渲染器\n│   ├── pen-mcp\u002F             MCP 服务器——工具、路由、文档管理\n│   ├── pen-sdk\u002F             总 SDK（重新导出所有包）\n│   ├── pen-ai-skills\u002F       AI 提示词技能引擎（按阶段加载提示词）\n│   └── agent-native\u002F        原生 AI 代理运行时（Zig NAPI，多提供商，支持团队协作）\n└── .githooks\u002F               提交前从分支名同步版本号\n```\n\n## 键盘快捷键\n\n| 键         | 操作            |     | 键           | 操作                    |\n| ----------- | ----------------- | --- | ------------- | ------------------------- |\n| `V`         | 选择            |     | `Cmd+S`       | 保存                      |\n| `R`         | 矩形            |     | `Cmd+Z`       | 撤销                      |\n| `O`         | 椭圆            |     | `Cmd+Shift+Z` | 重做                      |\n| `L`         | 直线            |     | `Cmd+C\u002FX\u002FV\u002FD` | 复制\u002F剪切\u002F粘贴\u002F复制      |\n| `T`         | 文本            |     | `Cmd+G`       | 组合                      |\n| `F`         | 框架            |     | `Cmd+Shift+G` | 取消组合                  |\n| `P`         | 钢笔工具        |     | `Cmd+Shift+P` | 导出 (PNG\u002FJPG\u002FWEBP\u002FPDF)   |\n| `H`         | 手势（平移）    |     | `Cmd+Shift+C` | 代码面板                |\n| `Del`       | 删除            |     | `Cmd+Shift+V` | 变量面板                |\n| `[ \u002F ]`     | 重新排序        |     | `Cmd+J`       | AI 聊天                   |\n| 箭头      | 微调 1px        |     | `Cmd+,`       | 代理设置                |\n| `Cmd+Alt+U` | 布尔并集        |     | `Cmd+Alt+S`   | 布尔差集                  |\n| `Cmd+Alt+I` | 布尔交集        |     | `Cmd+Shift+S` | 另存为                    |\n\n## 脚本\n\n```bash\nbun --bun run dev          # 开发服务器 (端口 3000)\nbun --bun run build        # 生产构建\nbun --bun run test         # 运行测试 (Vitest)\nnpx tsc --noEmit           # 类型检查\nbun run lint               # 代码检查 (oxlint)\nbun run format             # 代码格式化 (oxfmt)\nbun run bump \u003Cversion>     # 同步所有 package.json 中的版本\nbun run electron:dev       # Electron 开发\nbun run electron:build     # Electron 打包\nbun run cli:dev            # 从源码运行 CLI\nbun run cli:compile        # 将 CLI 编译到 dist\nbun run mcp:dev            # 从源码运行 MCP 服务器\n```\n\n## 贡献\n\n欢迎贡献！请参阅 [CLAUDE.md](.\u002FCLAUDE.md)，了解架构细节和代码风格。\n\n1. 分支并克隆\n2. 设置版本同步：`git config core.hooksPath .githooks`\n3. 创建分支：`git checkout -b feat\u002Fmy-feature`\n4. 运行检查：`npx tsc --noEmit && bun --bun run test`\n5. 使用 [Conventional Commits](https:\u002F\u002Fwww.conventionalcommits.org\u002F) 提交：`feat(canvas): 添加旋转吸附`\n6. 对 `main` 提交 PR\n\n## 路线图\n\n- [x] 设计变量与 CSS 同步的 token\n- [x] 组件系统（实例与覆盖）\n- [x] 带有编排器的 AI 设计生成\n- [x] MCP 服务器集成分层设计工作流\n- [x] 多页面支持\n- [x] Figma `.fig` 导入\n- [x] 布尔运算（并集、差集、交集）\n- [x] 多模型能力配置文件\n- [x] 单仓库重构，使用可复用包\n- [x] CLI 工具 (`op`) 用于终端控制\n- [x] 内置 AI 代理 SDK，支持多提供商\n- [x] i18n — 15 种语言\n- [x] 无头设计引擎 (`pen-engine`) + React UI SDK (`pen-react`)\n- [x] 样式指南，带标签匹配和 MCP 工具\n- [x] 并发代理团队，带委托工具和画布指示器\n- [x] 原生代理运行时 (`agent-native` — Zig NAPI)\n- [x] Git 集成 — 克隆、分支、推送\u002F拉取、文件夹模式三路合并\n- [x] 画布栅格导出 (PNG \u002F JPEG \u002F WEBP \u002F PDF)\n- [ ] 协作编辑\n- [ ] 插件系统\n\n## 贡献者\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FZSeven-W_openpencil_readme_fb8b12bf6528.png\" alt=\"Contributors\" \u002F>\n\u003C\u002Fa>\n\n## 赞助商\n\nOpenPencil 是免费且开源的。开发资金来自那些觉得它有用的人——感谢您让画布保持开放。\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmrqyun\" title=\"MrQyun\">\n  \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FZSeven-W_openpencil_readme_f9499ec86e4b.png\" width=\"64\" height=\"64\" alt=\"MrQyun\" \u002F>\n\u003C\u002Fa>\n\n感谢 **[MrQyun](https:\u002F\u002Fgithub.com\u002Fmrqyun)** — 想让您的名字也出现在这里吗？**[成为赞助商 →](https:\u002F\u002Fgithub.com\u002Fsponsors\u002FZSeven-W)**\n\n## 社区\n\n\u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fh9Fmyy6pVh\">\n  \u003Cimg src=\".\u002Fapps\u002Fweb\u002Fpublic\u002Flogo-discord.svg\" alt=\"Discord\" width=\"16\" \u002F>\n  \u003Cstrong>加入我们的 Discord\u003C\u002Fstrong>\n\u003C\u002Fa>\n— 提问、分享设计、提出功能建议。\n\n## 星标历史\n\n\u003Ca href=\"https:\u002F\u002Fstar-history.com\u002F#ZSeven-W\u002Fopenpencil&Date\">\n \u003Cpicture>\n   \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FZSeven-W_openpencil_readme_0303ac3fdd5a.png&theme=dark\" \u002F>\n   \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FZSeven-W_openpencil_readme_0303ac3fdd5a.png\" \u002F>\n   \u003Cimg alt=\"星标历史图表\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FZSeven-W_openpencil_readme_0303ac3fdd5a.png\" width=\"100%\" \u002F>\n \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n## 许可证\n\n[MIT](.\u002FLICENSE) — 版权归 2026 ZSeven-W 所有","# OpenPencil 快速上手指南\n\nOpenPencil 是全球首款开源的 AI 原生矢量设计工具。它支持通过自然语言提示词直接生成 UI 界面，采用“设计即代码”（Design-as-Code）理念，并内置多智能体协作与 MCP 服务器功能。\n\n## 环境准备\n\n在开始之前，请确保您的系统满足以下要求：\n\n*   **操作系统**：macOS, Windows, 或 Linux。\n*   **运行时依赖**：\n    *   [Node.js](https:\u002F\u002Fnodejs.org\u002F) >= 18\n    *   [Bun](https:\u002F\u002Fbun.sh\u002F) >= 1.0 (推荐用于开发和运行)\n*   **可选依赖**：\n    *   [Zig](https:\u002F\u002Fziglang.org\u002F) >= 0.14：如需从源码构建 `agent-native` 模块则需要（若未安装，系统将自动下载预编译二进制文件）。\n*   **网络环境**：由于涉及 AI 模型调用，请确保网络畅通以连接各大模型提供商（如 Anthropic, OpenAI, Google 等）。\n\n## 安装步骤\n\n您可以根据需求选择安装桌面端应用或命令行工具（CLI）。\n\n### 1. 安装桌面应用\n\n**macOS (使用 Homebrew):**\n```bash\nbrew tap zseven-w\u002Fopenpencil\nbrew install --cask openpencil\n```\n\n**Windows (使用 Scoop):**\n```powershell\nscoop bucket add openpencil https:\u002F\u002Fgithub.com\u002Fzseven-w\u002Fscoop-openpencil\nscoop install openpencil\n```\n\n**Linux \u002F Windows (直接下载):**\n访问 [GitHub Releases](https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Freleases) 下载对应安装包：\n*   Windows: `.exe`\n*   Linux: `.AppImage` 或 `.deb`\n\n### 2. 安装命令行工具 (CLI)\n\n若需通过终端控制设计流程或使用 `op` 命令，请全局安装：\n\n```bash\nnpm install -g @zseven-w\u002Fopenpencil\n```\n\n### 3. Docker 部署 (可选)\n\n如果您偏好容器化部署，可以使用以下命令启动 Web 版：\n\n```bash\ndocker run -d -p 3000:3000 ghcr.io\u002Fzseven-w\u002Fopenpencil:latest\n```\n*注：如需集成 Claude Code 等 AI CLI 工具，请使用对应的镜像标签（如 `openpencil-claude:latest`）并挂载认证卷。*\n\n## 基本使用\n\n### 方式一：桌面端快速体验\n\n1.  启动安装好的 OpenPencil 桌面应用。\n2.  在界面中找到输入框，使用自然语言描述您想要的界面（例如：“创建一个带有深色模式的现代登录页面”）。\n3.  系统将实时流式生成矢量设计稿。\n4.  选中画布上的任意元素，继续通过对话进行修改（例如：“把按钮变成圆角，颜色改为蓝色”）。\n\n### 方式二：使用 CLI 进行自动化设计\n\n安装 CLI 后，您可以在终端直接执行设计任务：\n\n**启动桌面应用：**\n```bash\nop start\n```\n\n**从文本文件批量生成设计：**\n假设 `landing.txt` 中包含您的设计提示词：\n```bash\nop design @landing.txt\n```\n\n**插入节点：**\n```bash\nop insert '{\"type\":\"RECT\"}'\n```\n\n**导出代码（React + Tailwind）：**\n```bash\nop export react --out .\n```\n\n**管道输入（从 stdin 读取）：**\n```bash\ncat design.dsl | op design -\n```\n\n### 方式二：本地开发运行\n\n如果您想贡献代码或运行最新开发版：\n\n```bash\n# 安装依赖\nbun install\n\n# 启动 Web 开发服务器 (http:\u002F\u002Flocalhost:3000)\nbun --bun run dev\n\n# 或以桌面应用模式运行\nbun run electron:dev\n```\n\n### 核心工作流提示\n\n*   **提示词生成 (Prompt → Canvas)**：直接描述 UI，支持流式动画预览。\n*   **多智能体协作**：复杂页面会自动分解为由多个 AI 代理并行处理的子任务（如头部、特性区、页脚）。\n*   **风格应用**：通过标签模糊匹配应用内置风格指南（如玻璃拟态、粗野主义、复古风等）。\n*   **代码导出**：设计完成后，可一键导出为 React+Tailwind, Vue, Flutter, SwiftUI 等多种格式代码。","某初创公司的全栈开发者需要在周五下班前快速构建一个包含复杂布局的营销落地页原型，以便周一向投资人演示。\n\n### 没有 openpencil 时\n- **重复劳动耗时**：开发者需先在 Figma 中手动绘制线框图，再切换到代码编辑器重写 HTML\u002FCSS，设计与编码完全割裂。\n- **多模块协作困难**：面对英雄区、特性展示和页脚等多个板块，只能串行逐个开发，难以在短时间内完成整体页面搭建。\n- **风格统一成本高**：每次调整视觉风格（如玻璃拟态或复古风）都需要手动修改大量 CSS 变量，容易出错且效率低下。\n- **版本管理混乱**：设计稿与代码不同步，Git 中只能看到最终代码，无法追溯设计变更的历史差异，回滚极其麻烦。\n\n### 使用 openpencil 后\n- **提示词即界面**：开发者直接在画布输入“创建一个带有玻璃拟态效果的 SaaS 落地页”，openpencil 实时流式生成可编辑的矢量 UI，跳过绘图环节。\n- **并发代理加速**：openpencil 的并发 Agent 团队自动将页面拆解，同时并行生成英雄区、特性区和页脚，构建速度提升数倍。\n- **智能风格应用**：通过内置风格库标签模糊匹配，一键将“现代极简”风格应用到所有 AI 生成的组件上，无需手动调参。\n- **设计即代码版本化**：设计以 `.op` (JSON) 文件存储，天然支持 Git 差分对比，设计师和开发者可在同一份文件中协同并清晰追踪每次变更。\n\nopenpencil 通过将自然语言直接转化为可版本控制的代码级设计，彻底消除了从创意到原型之间的繁琐转换过程。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FZSeven-W_openpencil_0a5c0c0e.png","ZSeven-W","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002FZSeven-W_fe519196.png",null,"https:\u002F\u002Fgithub.com\u002FZSeven-W",[77,81,85,89,92],{"name":78,"color":79,"percentage":80},"TypeScript","#3178c6",99.2,{"name":82,"color":83,"percentage":84},"JavaScript","#f1e05a",0.5,{"name":86,"color":87,"percentage":88},"Shell","#89e051",0.1,{"name":90,"color":91,"percentage":88},"CSS","#663399",{"name":93,"color":94,"percentage":88},"Dockerfile","#384d54",2239,205,"2026-04-14T12:00:13","MIT","Linux, macOS, Windows","未说明",{"notes":102,"python":100,"dependencies":103},"该工具是基于 Electron 的桌面应用和 Web 应用，主要依赖 Bun 和 Node.js 运行时，而非传统的 Python AI 环境。开发需安装 Bun (>=1.0) 和 Node.js (>=18)。若需从源码构建 'agent-native' 模块，可选安装 Zig (>=0.14)，否则会自动下载预编译二进制文件。支持通过 Docker 部署，提供包含不同 AI CLI 工具（如 Claude Code, Copilot 等）的多种镜像版本。",[104,105,106],"Bun >= 1.0","Node.js >= 18","Zig >= 0.14 (可选)",[13,15,14],[109,110,111,112,113,64,114,115,116,117,118,119,120,121,122,123,124,125,126,127],"agent","ai","fimga","pencil","ui","claude","codex","mcp","opencode","agent-team","claude-code","react","vue","vibecoding","vibedesign","flutter","html","react-native","svelte","2026-03-27T02:49:30.150509","2026-04-15T06:08:27.677677",[131,136,141,146,151,156,160],{"id":132,"question_zh":133,"answer_zh":134,"source_url":135},33678,"安装时提示 '@zseven-w\u002Fpen-engine' 在 npm  registry 中缺失怎么办？","该项目目前推荐使用 Bun 包管理器进行安装，而不是 npm。请尝试使用命令 `bun install -g @zseven-w\u002Fopenpencil` 进行安装。README 文档可能未及时更新，请以实际支持的包管理器为准。","https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fissues\u002F101",{"id":137,"question_zh":138,"answer_zh":139,"source_url":140},33679,"是否支持通过 HTTP Transport 方式使用 MCP，以便在内网或远程 Linux 环境部署？","已支持。项目已在后续版本（参考 Issue #19）中更新了对 HTTP Transport 的支持，解决了内网无法联网及 stdio 模式在远程开发环境中不便的问题。用户可以加入反馈群获取企业私有化部署版本的沟通渠道。","https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fissues\u002F16",{"id":142,"question_zh":143,"answer_zh":144,"source_url":145},33680,"OpenPencil 是否必须使用官方模型，支持中转模型或第三方模型（如 GLM）吗？","支持使用非官方模型和中转服务。用户反馈表明可以通过配置使用 GLM 等模型。如果遇到连接问题（如 Claude Code 进程退出），请检查是否已通过 `\u002Flogin` 命令完成认证，并确认 Node.js 版本兼容性（推荐 v20+ 或 v22+）。对于特定反代模型（如 GPT-5.2）导致的流程卡死，建议切换至稳定的模型版本（如 Claude Sonnet）。","https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fissues\u002F31",{"id":147,"question_zh":148,"answer_zh":149,"source_url":150},33681,"Windows 环境下遇到 'Claude Code process exited with code 1' 错误如何解决？","该问题可能与 Claude 的安装方式及登录状态有关。1. 确认 Claude 是通过 `claude install` 升级的原生二进制版本，而非仅通过 npm 安装；2. 检查是否执行了 `\u002Flogin` 命令完成模型认证，未登录可能导致进程退出；3. 如果问题持续，建议加入官方飞书反馈群提供日志以便进一步排查，因为该问题在某些 Windows 环境下难以复现。","https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fissues\u002F75",{"id":152,"question_zh":153,"answer_zh":154,"source_url":155},33682,"为什么连接 Codex 失败但连接 Claude Code 正常？","这通常与使用的具体模型版本有关。用户反馈显示，使用某些反代的 GPT 模型（如 gpt5.2）可能导致流程无法正常跑完或连接失败，而切换到 Claude Sonnet 4.6 等稳定模型则能正常工作。请检查您的代理配置和所选模型兼容性，必要时切换模型测试。","https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fissues\u002F53",{"id":157,"question_zh":158,"answer_zh":159,"source_url":145},33683,"如何区分应用界面主题和设计节点主题？为什么设计稿渲染时主题不生效？","这是两个独立的概念：1. 应用 UI 主题控制 OpenPencil 界面颜色的深浅模式（已正常工作）；2. 设计节点主题控制画布上渲染的变量变体。如果发现渲染忽略节点的 `theme: {\"Mode\": \"Light\"}` 属性而始终使用默认深色主题，这是一个已知 Bug，已在相关 PR 中被修复。请确保更新至最新版本以解决此渲染问题。",{"id":161,"question_zh":162,"answer_zh":163,"source_url":164},33684,"macOS 上启动 MCP 服务后关闭设置页面，服务随即停止且端口未监听怎么办？","在 v0.5.2 版本中，维护者在本地暂时无法复现该问题（MCP 服务应在后台常驻）。如果您遇到此问题，请尝试：1. 确保软件更新至最新版本；2. 检查是否有安全软件拦截了后端进程；3. 若问题依旧，建议提供详细的复现步骤和日志给维护者，因为这可能是特定环境下的偶发问题。","https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fissues\u002F86",[166,171,176,181,186,191,196,201,206,211,216,221,226,231,236,241,246,251,256,261],{"id":167,"version":168,"summary_zh":169,"released_at":170},263514,"v0.7.1","## 摘要\n\nv0.7.1 引入了对 ACP（代理客户端协议）的一流支持、可安装技能的 CLI 以及一系列生产稳定性修复。用户现在可以直接从“设置 → 代理”中连接兼容 ACP 的外部代理（例如 `claude-agent-acp`），并通过 OpenPencil 的 MCP 工具在实时画布上运行。\n\n## 变更\n\n**ACP（代理客户端协议）集成**\n- 新的 `@zseven-w\u002Fpen-acp` 客户端包，封装了 ACP TypeScript SDK\n- 设置 → 代理 → **ACP 代理** 部分，支持本地进程和远程 WebSocket 连接\n- 服务器端连接管理器，具备延迟重连功能，并通过 `globalThis` 在 Vite HMR 中保持持久性\n- `\u002Fapi\u002Fai\u002Fagent?providerType=acp` 分支将会话\u002F提示 + 会话\u002F更新整合到现有的 SSE 聊天流中\n- 自动启动 OpenPencil MCP 服务器，通过 `session\u002Fnew` 将其传递给 ACP，并自动批准工具权限\n- 自定义系统提示强制执行分层设计流程（`design_skeleton` → `design_content` → `design_refine`），以获得更高品质的输出\n- 仅限桌面版的本地进程启动保护机制（在 Electron 外部或开发模式之外拒绝启动）\n\n**`op install` CLI**\n- 新增 `op install` 和 `op uninstall` 命令，具备目标自动检测功能（Claude Code、Codex、Cursor、Gemini CLI、OpenCode）\n- 技能文件在构建时被打包进 CLI 二进制文件中——安装时无需访问 GitHub\n\n**生产构建修复**\n- `@zseven-w\u002Fagent-native` 包及原生 `.node` 二进制文件被正确放置在 `server\u002Fnode_modules\u002F` 目录下，以便 Nitro 能够解析\n- Electron 的 `before-quit` 事件处理程序以及开发脚本的 SIGINT 处理程序会终止分离的 MCP 服务器进程（不再出现孤儿进程）\n- 对拖放操作中的 `webUtils.getPathForFile` 进行捕获，确保最近文件条目在重新打开后仍可点击\n\n**`batch_design` 稳健性（MCP）**\n- 通过括号\u002F引号平衡分割器支持多行 JSON\n- 自动规范化 `fill` \u002F `stroke` 缩写形式（字符串或单对象形式 → 标准数组）\n- 改为逐行收集错误而非整个批次直接中止；修复空键、尾随逗号和智能引号问题\n- 支持无绑定的 `I(parent, data)` 形式（自动生成绑定）\n\n**代码生成 \u002F 聊天优化**\n- 精简 JSON 并移除噪声字段（`id`、`parentId`、布局管理的 `x\u002Fy` 以及默认值）——请求体缩小 60–70%，以避免代理返回 403 “请求不允许” 错误\n- CRUD 意图检测会路由到轻量级提示词和工具集（不使用设计技能）；`insert_node` 支持 `after` 参数，用于兄弟节点的插入\n- `agent-native`：在每轮对话之间重置 `StreamingToolExecutor`（修复 MiniMax 和第三方提供商多轮对话中 `tool_use` ID 不匹配的问题）；通过新的 `Provider.lastError()` VTable 显示上游 HTTP 错误信息\n- 在客户端移除 h3 JSON 错误包装，使聊天界面显示干净的错误信息\n\n**图层面板**\n- 矩形节点现在支持拖拽重新父级化（它们继承了 `ContainerProps` —— 此前的限制仅为 UI 层面）\n\n**国际化**\n- 为所有 15 种语言环境提供了完整的 ACP 翻译键\n\n**文档**\n- 添加并更新了 MIT 许可证、README 和 CLAUDE.md 文件","2026-04-13T13:43:21",{"id":172,"version":173,"summary_zh":174,"released_at":175},263515,"v0.7.0","## 摘要\n\nv0.7.0 是一次平台级发布：全新无框架设计引擎 + React SDK，全面 Git 集成（克隆\u002F分支\u002F推送\u002F拉取\u002F三向合并），画布导出功能，多代理团队协作，包含 50 条样式的样式指南库，以及对 8 家中文大模型提供商的 Anthropic 格式支持。此外，还整合了来自真实设计调试场景的数百项 AI 质量、布局和国际化修复。\n\n## 变更\n\n### 核心特性\n\n- **`pen-engine` + `pen-react` 包** — 提取了一个无框架的无头设计引擎（DocumentManager、SelectionManager、HistoryManager、ViewportController、EngineSpatialIndex、VariableManager、PageManager 以及浏览器适配器）和完整的 React SDK（DesignProvider、DesignCanvas、核心 Hook、图层面板、属性面板、工具栏及共享组件）。第三方应用现在可以嵌入该编辑器。\n- **全面 Git 集成** — 增加了带有 SSH\u002FHTTPS 认证重试表单的克隆向导、支持创建\u002F切换\u002F删除\u002F合并流程的分支选择器、拉取\u002F推送级联操作、远程仓库设置与 SSH 密钥管理界面、基于文件夹模式的分歧合并并保留磁盘上的 MERGE_HEAD 状态，以及包含节点级\u002F字段级三向对比卡片、内联 JSON 编辑器、差异块和批量操作的冲突解决面板。Phase 5\u002F6\u002F7 的所有 UI 完成了 15 种语言的国际化适配。\n- **`pen-core` 合并模块** — 支持双向文档差异比较、7 分类节点识别、基于决策重建树结构，以及变量\u002F主题\u002F标量\u002F页面顺序的合并逻辑。\n- **画布导出** — 全局 PNG\u002FJPEG\u002FWEBP\u002FPDF 导出功能绑定至 Cmd+Shift+P 快捷键。\n- **文件管理交互体验** — 原生文件菜单、另存为、带持久化的最近打开文件列表，“未保存更改”对话框取代原生 `window.confirm`，可自由调整大小并支持最大化显示的 AI 对话面板。\n- **多代理团队协作** — 并发人数 ≥ 2 时强制启用团队模式，支持设计师并行工作；新增 `delegate` 工具，可根据 toolCallId 进行路由并加载技能；提供 `spawn_member` 功能、成员画布指示器，以及针对 `generate.ts` 的 SSE 流式传输；同时为内置 Zig 提供商构建了完整的 `generate_design` 流程。\n- **样式指南系统** — 包含 50 条样式指南，支持通过 Vite 插件自动生成注册表；新增 `get_style_guide_tags` 和 `get_style_guide` MCP 工具，并将样式选择与规划和生成流程打通。\n- **代码生成流水线** — 实现了按深度限制子树获取的 `read_nodes` 功能，支持增量式 MCP 代码生成；在应用端新增代码生成计划存储模块，并提供了 CLI 的 `read-nodes` 和代码生成流水线命令；同时将 `validateContract` 功能迁移至 pen-codegen 模块。\n- **MCP 调试工具** — 在功能开关控制下提供了 `validation_report`、`logs_tail` 和 `screenshot`（基于 SkiaEngine 回读 + SSE RPC）等调试工具。\n- **模型提供商扩展** — 新增对 Kimi、智谱、GLM、豆包、通义千问、百炼\u002FDashScope、ModelScope 等多家厂商的 Anthropic 格式支持，并预设了 Coding Plan 配置；当 API 格式变更时会自动切换 baseURL。\n\n### 设计质量改进\n\n- 主题感知的角色默认值，确保深色页面不再出现白色导航栏。\n- 纯诊断图层，配备符合 WCAG 标准的检测器和严重性等级定义。\n- 跨版本多样性追踪机制，防止设计粗糙化。\n- 视觉后处理修复：按钮前景对比度优化、区块背景交替显示、孤儿容器对比度调整、输入框…","2026-04-11T15:26:51",{"id":177,"version":178,"summary_zh":179,"released_at":180},263532,"v0.1.1","                                                                                                \r\n  New Features                                                                                    \r\n                                                            \r\n  - Figma Clipboard Paste — Copy elements in Figma, paste directly into OpenPencil with\r\n  Cmd\u002FCtrl+V. Supports frames, shapes, text, images, and nested components. Pasted nodes are\r\n  automatically centered in the viewport.\r\n  - Image Fit Mode — New image fit mode property (fill, fit, crop) with a dropdown in the property\r\n   panel. Images now render per fill mode with native crop support.\r\n  - Figma Image Scale Mode — Figma import now preserves image scale mode (fill\u002Ffit\u002Fcrop) from the\r\n  original file.\r\n\r\n  Bug Fixes\r\n\r\n  - Zoom to Fit — Fixed zoom-to-fit bounds being inflated by clipped children, resulting in more\r\n  accurate framing.\r\n  - Figma Import Order — Preserved imported node order and disabled OpenPencil auto-layout during\r\n  Figma import to maintain original layout fidelity.\r\n\r\n  Improvements\r\n\r\n  - AI Provider Routing — Enforced explicit provider and model routing for all AI endpoints;\r\n  removed implicit ANTHROPIC_API_KEY fallback. All AI requests now require a connected provider\r\n  (Claude Code, Codex CLI, or OpenCode).\r\n  - Electron Build — Enabled macOS notarization for signed builds; improved artifact handling in\r\n  CI workflow.\r\n\r\n\r\n\r\n**Full Changelog**: https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fcompare\u002Fv0.1.0...v0.1.1","2026-03-02T14:27:17",{"id":182,"version":183,"summary_zh":184,"released_at":185},263533,"v0.1.0"," The first milestone release of OpenPencil. Figma import, multi-page documents, AI vision chat, and a native desktop experience — the moment things start to feel real.\r\n\r\n  Highlights\r\n\r\n  Figma Import\r\n  Import .fig files directly into OpenPencil. Supports frames, vectors, text, fills, strokes, effects, auto-layout, and images with high visual fidelity.\r\n\r\n  Multi-Page Architecture\r\n  Documents now support multiple pages. Navigate between pages via the tab bar, with full context menu support for add, rename, duplicate, reorder, and delete.\r\n\r\n  AI Image Attachments\r\n  Attach images to AI chat for vision-powered design generation. Supports up to 4 images per message (5MB each) with preview strip.\r\n\r\n  Electron Native Menu\r\n  Full native application menu on macOS with keyboard shortcuts for file operations, edit actions, undo\u002Fredo, and more.\r\n\r\n  Multi-platform support\r\n  Build Linux and Windows artifacts\r\n\r\n  New Features\r\n\r\n  - Image corner radius via clipPath, preserved during drag and async load\r\n  - AI chat streaming improvements with progress checklist and better error surfacing\r\n  - Agent settings UI enhancements for multi-provider configuration\r\n\r\n  Bug Fixes\r\n\r\n  - Canvas z-order now aligns with layer panel convention (top = front)\r\n  - Corner radius clamped to half the element height to prevent visual artifacts\r\n  - AI: 30s API connect timeout for faster error detection\r\n  - AI: hardened Claude agent environment variable resolution","2026-03-01T01:35:47",{"id":187,"version":188,"summary_zh":189,"released_at":190},263516,"v0.6.0","v0.6.0 引入了内置的多提供商支持的 AI 代理 SDK、用于专业化设计委托的代理团队模式，以及对 AI 驱动设计生成可靠性的显著提升。                                                                                                            \r\n                                                                                                            \r\n  ## 变更                                                                                                \r\n                                                                                          \r\n  ### AI 代理 SDK 和多提供商支持                                               \r\n  - 添加内置代理 SDK (`packages\u002Fagent`)，支持 Web 集成和 SSE 流式传输       \r\n  - 添加 9 种以上的内置提供商预设（OpenAI、Anthropic、Google Gemini、Mistral、DeepSeek 等），并配备区域切换器\r\n  - 增加对 Google Gemini 的支持，涵盖 3.x 系列模型                                                        \r\n  - 在自定义提供商设置中支持 Anthropic API 格式                                                \r\n  - 通过 `pen-ai-skills` 实现动态系统提示，以提供上下文感知的 AI 回答              \r\n  - 为长时间运行的 LLM 调用添加保持连接的心跳请求（Bun 兼容性，间隔 5 秒）                     \r\n  - 增加 API 错误分类与自动重试功能，无需工具辅助                                               \r\n  - 为内置提供商设置添加国际化支持（15 种语言环境）                                   \r\n                                                                                                            \r\n  ### 代理团队模式                                    \r\n  - 添加团队专区 UI，并配备专用的设计模型选择器                              \r\n  - 在聊天处理程序中接入团队模式，支持成员委派事件\r\n  - 向 `AgentEvent` 类型中添加 `source` 字段及团队事件，以便进行多代理追踪\r\n  - 当设计模型已设定时，自动启用团队模式，使用当前聊天模型                                        \r\n  - 在聊天界面中以视觉方式区分团队模式\r\n                                                                                                            \r\n  ### 设计生成流程                         \r\n  - 将 `insert_node` 替换为 `generate_design` 作为主要设计工具（使用内部 CLI 设计流程）\r\n  - 使 `insert_node` 与 `batch_design` 功能对齐，以确保节点创建的一致性                           \r\n  - 插入后自动替换空根框架，并自动缩放以适应内容\r\n  - 在 `generate_design` 失败时清理未完成的节点                                                     \r\n  - 对节点数据进行净化，并在后处理前执行深度克隆，以避免 Zustand 状态库的变异\r\n  - 防止由性能较弱的模型重复插入根级别节点                                                 \r\n                      \r\n  ### 渲染器与画布                                                                                     \r\n  - 在 `resolveFillColor`\u002F`resolv` 中防范未定义的填充项","2026-03-28T15:13:53",{"id":192,"version":193,"summary_zh":194,"released_at":195},263517,"v0.5.2","## 摘要                                                                                                        \r\n                                                                                                                    \r\nv0.5.2 引入了 **pen-ai-skills** 包——一个基于阶段驱动的提示技能引擎，它用可组合的 Markdown 技能文件替换了硬编码的 AI 提示。此外，还新增了 **CLI 工具**（`op`），修复了 MCP SSE 端点以兼容 h3 v2 和 Bun，并改进了 Windows 系统下以及代理环境中的 Claude Agent SDK 集成支持。              \r\n                                                                                   \r\n  ## 变更                                                                                                        \r\n                      \r\n  ### 新增：`pen-ai-skills` 包                 \r\n  - 使用核心类型、技能加载器、解析器和预算模块搭建 `@zseven-w\u002Fpen-ai-skills` 脚手架\r\n  - Vite 插件（`vite-plugin-skills`）在构建时将带有 YAML 前置元数据的 `.md` 技能文件编译为类型化的注册表\r\n  - 包含 27 个技能文件，覆盖不同阶段（规划、生成、验证、维护）、不同领域（仪表盘、着陆页、移动应用、表单 UI）以及不同知识体系（设计原则、角色定义、图标库、文案撰写）\r\n  - 提供文档上下文和生成历史记忆模块，以丰富提示词的上下文信息    \r\n  - 通过 `resolveSkills()` 将其接入编排器、子代理和验证流水线                              \r\n  - 移除了旧的硬编码提示文件（`ai-prompt-sections.ts`、`orchestrator-prompts.ts`、`design-principles\u002F`、`role-definitions\u002F*.ts`）                                                              \r\n                                                                                                                    \r\n  ### 新增：CLI（`apps\u002Fcli\u002F`）                                                                                        \r\n  - `op` 命令行工具，用于从终端控制桌面应用或 Web 服务器\r\n  - 支持命令：`start`、`stop`、`status`、`design`、`open`、`save`、`get`、`selection`、`insert`、`update`、`delete`、`move`、`copy`、`replace`、`export`、`import`、`pages`、`variables`                                              \r\n  - 跨平台支持（macOS、Windows、Linux），并打包进 Electron 构建中        \r\n                                                                                                                    \r\n  ### 修复：MCP SSE 端点（修复 #80）                                            \r\n  - 重写了 `events.get.ts`，改用 h3 v2 的 `createEventStream` API，而非直接使用 `res.write()`\r\n  - 将心跳间隔从 30 秒缩短至 8 秒，以低于 Bun.serve 的 10 秒空闲超时限制                            \r\n  - 修复了 MCP 服务器路径解析问题（`dist\u002F` → `out\u002F`），并添加了 `ELECTRON_RUN_AS_NODE` 环境变量，以便启动 Electron 子进程                                                    ","2026-03-24T13:33:29",{"id":197,"version":198,"summary_zh":199,"released_at":200},263518,"v0.5.1","### 摘要                                                                                                       \r\n                                                                                                                    \r\nv0.5.1 引入了 OpenPencil CLI (`op`)，用于通过终端控制设计工具；新增了基于段落图像缓存的文本渲染性能优化；并修复了 Docker 多平台构建问题。                     \r\n                                                                                                                    \r\n  ### 新特性                                                                                                  \r\n                                                                                                                    \r\n  - **CLI 工具（`apps\u002Fcli`）** — 新增 `op` 命令行工具，可在终端中控制桌面应用或 Web 服务器。命令包括应用生命周期管理（`start`、`stop`、`status`）、文档操作（`open`、`save`、`get`、`selection`）、节点操作（`insert`、`update`、`delete`、`move`、`copy`、`replace`）、设计 DSL（`design`）、多平台代码导出（`export`）等。已作为 `@zseven-w\u002Fopenpencil-cli` 发布于 npm。                  \r\n  ([#75](https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fissues\u002F75))\r\n  - **npm 发布工作流** — 新增 GitHub Actions 工作流（`publish-cli.yml`），按拓扑顺序发布所有 `@zseven-w\u002F*` 包，并添加了 `publish:beta` 脚本。\r\n                                                                                           \r\n  ### 性能     \r\n                                                                                                                    \r\n  - **段落图像缓存** — CanvasKit 渲染器现会缓存预光栅化的段落图像（128 MB LRU），在缓存命中时以 `drawImageRect` 替代每帧的字形构造，从而显著提升文本密集型文档的帧率。([#76](https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fpull\u002F76))\r\n  - **框架标签缩放稳定性** — 框架标签现在会在视口变换后以屏幕空间坐标进行渲染，消除了整数缩放边界处的闪烁现象。在主动缩放期间还会跳过阴影渲染，以获得更流畅的性能。\r\n                                                                                                                    \r\n  ### Bug 修复                                          \r\n                                                                                                                    \r\n  - **Docker 多平台构建** — 修复了 monorepo 的路径问题，并为 Docker 工作流增加了多平台支持。\r\n                                                                                                                    \r\n  ### 文档                                      \r\n                                                                                             ","2026-03-23T15:00:32",{"id":202,"version":203,"summary_zh":204,"released_at":205},263519,"v0.5.0","## 摘要\n\nOpenPencil v0.5.0 — 引入了设计系统（design.md），作为一种以规范驱动的 AI 生成方法。同时新增了 Electron 桌面应用、图像搜索与生成流水线、Gemini CLI 集成，以及渲染性能优化。\n\n## 变更\n\n**设计系统面板（design.md）— 发布亮点**\n\n一个全新的基于 Markdown 的设计系统规范，确保 AI 生成的设计严格遵循您的设计语言。\n\n- 添加可拖动、可调整大小的浮动设计系统面板，包含可展开的模块（主题、颜色、排版、组件样式、布局原则）\n- 支持导入\u002F导出 Google Stitch 格式的 `.md` 文件——便于团队共享和版本控制\n- 一键从现有画布设计自动生成 design.md（AI 分析节点树 → 生成结构化规范）\n- 将调色板同步到设计变量（`$primary`、`$secondary` 等），可单独或批量操作——直接用于文档和代码生成\n- AI 生成时会自动注入 design.md 上下文——颜色、字体、组件样式和布局规则均生效，取代默认样式策略\n- MCP 工具支持：`get_design_md` \u002F `set_design_md` \u002F `export_design_md`——外部代理可读写设计系统\n- 基于 localStorage 的文档级持久化——切换文件时会自动恢复关联的 design.md\n- 完整的 i18n 支持（中文、英文、日文等）\n\n**Electron 桌面应用**\n- 实现带有自动更新功能的桌面应用架构\n- 将 IPC 处理器提取到专用模块\n- 优化 Windows 进程启动，用于 CLI 脚本\n- 在存在未保存更改时关闭前发出警告\n\n**图像搜索与生成**\n- 添加双源图像搜索（Openverse + Wikimedia），并提供结果网格 UI\n- 新增多提供商图像生成端点及弹出式 UI\n- 自动搜索流水线：在 AI 设计生成完成后自动填充图片\n- MCP：在批量设计 DSL 中添加 `G()` 操作，用于图像搜索\n- 在代理设置中新增“Images”选项卡，用于配置 API 密钥和提供商\n- 将 `imageSearchQuery` 和 `imagePrompt` 分离，以提升搜索与生成的精度\n\n**Gemini CLI 集成**\n- 将 Gemini CLI 添加为支持的 AI 代理（支持 Docker，并提供多语言文档）\n\n**性能**\n- 视口剔除：跳过可见区域外节点的绘制调用（#64）\n- 文本缓存：将基于计数的限制替换为基于内存的淘汰机制（#66）\n\n**Bug 修复**\n- 修复因字符串填充值导致的图标节点选择崩溃问题（修复 #61）\n- 修复 Windows 下 Claude Code CLI 退出码为 1 的问题（修复 #63）\n- 修复调整画布大小时出现的 1 帧延迟问题（#60）\n\n## 相关问题\n\n修复 #61，修复 #63，关闭 #65\n\n## 类型\n\n- [x] `feat` — 新特性\n- [x] `fix` — Bug 修复\n- [x] `perf` — 性能优化\n\n## 检查清单\n\n- [x] `npx tsc --noEmit` 通过\n- [x] `bun --bun run test` 通过\n- [x] 不包含无关变更\n- [x] 提交信息符合 [Conventional Commits](https:\u002F\u002Fwww.conventionalcom","2026-03-22T02:15:01",{"id":207,"version":208,"summary_zh":209,"released_at":210},263520,"v0.4.4","## 摘要                                                                                                              \r\n                                                                                                  \r\n v0.4.4 专注于 CLI 工具集成（Claude、Codex、Copilot）的 Windows 兼容性修复、macOS 上 Electron 进程生命周期的优化，以及 Codex CLI 错误处理和提示结构的增强。                            \r\n                                                                                                                          \r\n  ## 变更                                                                                                              \r\n                                                                                         \r\n  ### Bug 修复                                                                                                           \r\n  - **fix(electron): 改进进程清理与 Windows 兼容性** — 解决应用关闭后 macOS 上出现的孤立进程问题，并优化 Windows 下的进程管理                                                                                 \r\n  - **fix(ai): 提升 Codex CLI 在 Windows 上的兼容性** — 修复在 Windows 系统中 CLI 二进制文件（如 `claude.cmd`）无法正确解析而导致的启动失败问题                                                                         \r\n  - **fix(ai): 改进 Codex CLI 对认证及结构化日志错误的错误信息提取** — 针对认证失败和结构化日志错误，提供更清晰的错误提示                                                                          \r\n  - **fix(ai): 更新错误处理逻辑并移除已废弃的 `reasoning` 字段** — 与最新的 Codex CLI 输出格式保持一致\r\n  - **fix(ai): 增加编排器回退机制及三路意图路由** — 在编排器失效时启用回退路径，以避免设计生成失败                                                                                   \r\n                                                                                                                          \r\n  ### 功能特性                                                                                                            \r\n  - **feat(ai): 为从 Codex 的 `latest-model.md` 文件中解析模型信息添加回退机制** — 当 `models_cache.json` 文件缺失时，改由 Codex 的 Markdown 文件读取模型信息                                                                              \r\n  - **feat(ai): 更新设计生成助手的提示结构** — 进一步提升设计生成的质量\r\n  - **feat(ai): 加强 connect-agent 中二进制路径的处理能力** — 提高跨平台 CLI 工具的发现稳定性         \r\n  - **feat(ai): 改善 Windows 系统下 CLI 工具的二进制文件解析** — 优化 `.cmd`\u002F`.exe` 扩展名的解析逻辑                                                                                                           ","2026-03-20T14:02:09",{"id":212,"version":213,"summary_zh":214,"released_at":215},263521,"v0.4.3","## 摘要\n\n修复了所有代理（Claude、Codex、OpenCode、Copilot）的 Windows CLI 二进制文件解析问题，重新设计了设置对话框，新增侧边导航和丰富的连接信息；更新了 Copilot SDK，并为设置界面添加了完整的国际化支持。\n\n## 更改内容\n\n### Windows CLI 二进制文件解析\n- **Claude Code**：在 Windows 上为通过 npm 安装的 CLI 添加了 `npm.cmd prefix -g` 查找路径以及 `claude.cmd` 的备用路径（`%APPDATA%\\npm\\`、nvm、fnm）。\n- **Codex CLI**：增加了 `npm.cmd prefix -g` 查找路径及 `codex.cmd` 的备用路径；将 `where` 命令包裹在内部的 try\u002Fcatch 中，以防止原始错误泄露到 UI。\n- **OpenCode**：为 Windows 的 `where` 命令添加了 `2>nul` 标准错误重定向。\n- **Copilot**：从仅依赖 PATH 的查找方式升级为包含 `npm.cmd prefix -g` 和常见 Windows 安装位置的多步骤完整解析流程。\n- **install-agent.ts**：修复了 Windows 系统中使用 `npm install -g` 时调用 `npm.cmd` 的问题。\n\n### 服务器日志记录\n- 新增 `server-logger.ts` — 基于文件的日志记录器，日志写入 `~\u002F.openpencil\u002Flogs\u002Fserver-{date}.log`，并按 7 天轮转。\n- 所有代理解析器和连接函数现在都会记录详细步骤（PATH 查找、npm 前缀、候选检查、连接结果等）。\n\n### 设置对话框重新设计\n- **侧边导航**：新增“代理”、“MCP”和“系统”选项卡，并配有图标（原为单列滚动布局）。\n- **更宽的布局**：尺寸调整为 720×520px，采用侧边栏与内容分隔的方式（原为 480px）。\n- **丰富的连接信息**：显示各提供商的认证方式、邮箱和订阅类型：\n  - Claude：通过 SDK 的 `accountInfo()` 调用获取邮箱和订阅类型。\n  - Codex：从 `~\u002F.codex\u002Fauth.json` 解码 JWT，提取邮箱和套餐信息。\n  - OpenCode：直接从 SDK 获取提供商名称。\n  - Copilot：通过 `getAuthStatus()` 获取 GitHub 用户名和认证类型。\n- **配置提示**：本地化显示“You can set additional environment variables in {path}”，并提供跨平台路径。\n- **系统选项卡**：自动更新开关从侧边栏底部移至专用页面。\n- **全面国际化**：所有硬编码字符串均已替换为翻译键，覆盖 15 种语言环境。\n\n### 其他\n- 更新所有 README 文件和 GitHub 配置中的 Discord 邀请链接为 `https:\u002F\u002Fdiscord.gg\u002Fh9Fmyy6pVh`。\n- 将 `@github\u002Fcopilot-sdk` 从 0.1.30 升级至 0.1.32（修复协议版本 3 不匹配的问题）。\n- 修正 Copilot 图标视觉权重，为其添加 viewBox 内边距，以与其他提供商图标保持一致。\n\n## 相关问题\n\n修复 https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fissues\u002F47  \n修复 https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fissues\u002F48  \n修复 https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fissues\u002F49  \n\n## 类型\n\n- [x] `feat` — 新功能  \n- [x] `fix` — 错误修复  \n- [x] `chore` — 构建\u002F工具链\u002F依赖项相关更改  \n\n## 检查清单\n\n- [x] `npx tsc --noEmit` 测试通过  \n- [x] 未包含无关更改  \n- [x] 提交信息遵循 [Conventional Commits](https:\u002F\u002Fwww.conventionalcommits.org\u002F)\n\n**完整变更日志**：https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fcompare\u002Fv0.4.2...v0.4.3","2026-03-18T13:36:26",{"id":217,"version":218,"summary_zh":219,"released_at":220},263522,"v0.4.2","## 摘要\n\n新增多边形绘制工具、椭圆弧\u002F甜甜圈编辑功能、多边形和弧线的圆角半径支持，以及基于 Docker 的容器化部署（包含 CLI 变体镜像），并改进了 OpenCode 代理的连接性。\n\n## 更改内容\n\n### 画布与形状工具\n- **多边形工具**：在形状下拉菜单中新增绘制工具（三角形图标），用于创建可配置边数（3–100）的正多边形，边数可在外观面板中调整。\n- **椭圆弧编辑**：新增画布上的交互式弧形控件（起始角度、终止角度、内半径），可用于创建弧线、扇形和甜甜圈形状；这些控件可直接在画布上拖动。\n- **弧\u002F椭圆属性面板**：在外观部分新增起始角度、扫掠角度和内半径控制项，支持精确的数值输入。\n- **多边形和弧线的圆角半径**：多边形和椭圆节点现支持 `cornerRadius` 属性，通过 CanvasKit 的 `PathEffect.MakeCorner` 渲染。\n- **多边形渲染优化**：多边形现在会正确缩放以填充其边界框（顶点已归一化到最小\u002F最大边界，而非使用原始三角函数坐标）。\n- **多边形预览**：拖动时的绘制预览现已支持多边形形状类型。\n- **弧线描边支持**：弧线\u002F甜甜圈椭圆现可渲染描边（此前仅支持填充）。\n\n### Docker\n- **Dockerfile**：采用多阶段构建，提供 6 种镜像变体——`base`（仅 Web）、`with-claude`、`with-codex`、`with-opencode`、`with-copilot` 和 `full`（包含所有 CLI）。\n- **CI 工作流**：`.github\u002Fworkflows\u002Fdocker.yml` 在版本标签发布时构建并推送所有变体至 GHCR，并启用构建缓存。\n- **`.dockerignore`**：排除构建产物、`node_modules` 目录及非必要文件。\n\n### 代理连接性\n- **OpenCode 二进制解析器**：增强了跨平台的二进制查找功能（通过 PATH 查找、npm 前缀路径，以及 macOS\u002FWindows\u002FLinux 系统的常见安装位置，包括 Homebrew、Scoop、nvm、fnm 等）。\n- **OpenCode Windows 安装**：将 Windows 安装命令由 `go install` 改为 `npm install -g opencode-ai`；自动安装功能现已支持 Windows 系统。\n\n### 国际化\n- 在所有 15 种语言环境中新增了 `polygon.sides`、`ellipse.start`、`ellipse.sweep`、`ellipse.innerRadius` 和 `shapes.polygon` 翻译键。\n\n### 文档\n- 在所有本地化 README 文件中新增了 Docker 使用说明章节。\n\n## 类型\n\n- [x] `feat` — 新功能\n## 检查清单\n\n- [x] `npx tsc --noEmit` 通过\n- [x] `bun --bun run test` 通过\n- [x] 未包含无关更改\n- [x] 提交信息遵循 [Conventional Commits](https:\u002F\u002Fwww.conventionalcommits.org\u002F) 规范\n\n\n**完整变更日志**：https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fcompare\u002Fv0.4.1...v0.4.2","2026-03-17T13:08:56",{"id":222,"version":223,"summary_zh":224,"released_at":225},263523,"v0.4.1","## 摘要                                                                                                                                \r\n                                         \r\n  v0.4.1 新增了图像填充支持，通过全新的 FontPicker 改进了字体处理，增强了文本阴影的渲染效果以匹配 Figma 的保真度，并且 \r\n  修复了多个 Figma 导入和画布渲染方面的问题。   \r\n                                                                                                                                            \r\n  ## 更改                                                \r\n\r\n  ### 功能\r\n  - **图像填充支持** — SkiaRenderer 中新增图像填充类型，支持填充\u002F适应\u002F裁剪\u002F拉伸\u002F平铺模式，提供曝光、对比度和饱和度调整功能，以及 ImageFillPopover 用户界面（`ff14266`）\r\n  - **字体处理与 FontPicker** — 新增 `FontPicker` 组件，集成捆绑字体和系统字体并支持搜索；新增 `cssFontFamily` 工具函数，用于正确引用字体名称；新增系统字体枚举 Hook（`9ae3b61`）\r\n  - **文本阴影渲染** — 将文本阴影绘制为模糊的字形副本，与 Figma 的投影行为保持一致（`15d0ced`）\r\n\r\n  ### 修复\r\n  - **图像填充渲染** — 对于填充\u002F适应\u002F裁剪\u002F拉伸模式，使用 `drawImageRect` 结合画布剪切进行渲染；`makeShaderOptions()` 只在重复平铺模式下可靠工作（`58c4c54`）\r\n  - **图像调整重置** — 重置按钮现在会以单次原子操作更新所有调整值，不再使用过时的引用进行循环操作（`55ec2dc`）\r\n  - **Figma 弧形椭圆位置** — 移除对翻转弧形椭圆的冗余位置调整；`extractPosition` 已经计算出正确的视觉左上角，避免了二次校正导致甜甜圈图元素偏移的问题（`81a59df`）\r\n\r\n  ### 重构\r\n  - **Figma 剪贴板处理** — 通过 HTML 解析为节点添加样式提示；将未解析的图像引用转换为占位矩形；改进了从 Figma 样式引用中解析样式的逻辑（`b03cc98`）\r\n  - **Figma 字体处理** — 增加对非 Google 字体的识别，以避免不必要的 CDN 请求；针对剪贴板数据实现实例到符号属性的合并（`d1c7470`）\r\n\r\n  ## 相关问题\r\n\r\n  \u003C!-- 链接任何相关问题：修复 #123，关闭 #456 -->\r\n\r\n  ## 类型\r\n\r\n  - [x] `feat` — 新功能\r\n  - [x] `fix` — 错误修复\r\n  - [x] `refactor` — 代码重构（无行为变更）\r\n  - [ ] `perf` — 性能优化\r\n  - [ ] `docs` — 文档\r\n  - [ ] `test` — 测试\r\n  - [ ] `chore` — 构建 \u002F 工具链 \u002F 依赖项\r\n\r\n  ## 检查清单\r\n\r\n  - [x] `npx tsc --noEmit` 通过\r\n  - [x] `bun --bun run test` 通过\r\n  - [x] 未包含无关更改\r\n  - [x] 提交信息遵循 [Conventional Commits](https:\u002F\u002Fwww.conventionalcommits.org\u002F)\r\n\r\n**完整变更日志**: https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fcompare\u002Fv0.4.0...v0.4.1","2026-03-16T01:38:53",{"id":227,"version":228,"summary_zh":229,"released_at":230},263524,"v0.4.0"," ## Summary\r\n\r\n  v0.4.0 major release: Replace Fabric.js with CanvasKit\u002FSkia WASM rendering engine, significantly improve Figma\r\n  `.fig` import fidelity, and enhance AI\u002FMCP infrastructure.\r\n\r\n  ## Changes\r\n\r\n  ### Canvas Engine\r\n  - Replace Fabric.js with GPU-accelerated CanvasKit\u002FSkia WASM renderer\r\n  - Add dirty-flag rendering loop (no continuous redraws)\r\n  - Add R-tree backed `SpatialIndex` for fast hit testing and marquee selection\r\n  - Add bitmap caching during zoom\u002Fpan for smoother interaction\r\n  - Add vector text rendering with bundled fonts (Inter, Noto Sans SC)\r\n  - Enhance CJK font support and pre-load Noto Sans SC\r\n  - Align text centering with CanvasKit and improve font fallback\r\n  - Respect node-level theme overrides during variable resolution\r\n\r\n  ### Figma Import\r\n  - Fix instance override resolution with full DFS strategy for nested INSTANCE\u002FSYMBOL nodes\r\n  - Fix recursive nested instance expansion and derived data processing\r\n  - Fix arc rendering for ellipse data (donut charts, pie segments)\r\n  - Resolve `styleIdForFill` in instance override entries\r\n  - Apply icon colors and fix vector rendering in `.fig` import\r\n  - Skip `opacity=0` nodes during import to fix breadcrumb visibility\r\n  - Fix layout mapping: avoid gap\u002FjustifyContent conflicts for `SPACE_EVENLY` mode\r\n  - Fix multiple `.fig` import rendering issues\r\n\r\n  ### AI & MCP\r\n  - Add HTTP fallback for MCP server installation when `node` binary is unavailable\r\n  - Add fallback models for third-party API proxies in connect-agent\r\n  - Enhance prompt handling for basic-tier models\r\n  - Improve error messages for API authentication and connection issues\r\n  - Strip tool call blocks from text processing\r\n\r\n  ### Server & Infrastructure\r\n  - Add ESM-compatible `__dirname` polyfill for Nitro bundling\r\n  - Make MCP HTTP server survive parent process lifecycle\r\n  - Streamline environment variable reading and settings handling\r\n  - Add `graceful-fs` for Node.js v25 \u002F Electron compatibility\r\n\r\n  ### Performance\r\n  - Bitmap cache during zoom\u002Fpan operations\r\n  - Large file save optimization\r\n\r\n  ## Related Issues\r\n\r\n  Fixes #38, Fixes #41, Fixes #42, Fixes #43\r\n\r\n  ## Type\r\n\r\n  - [x] `feat` — New feature\r\n  - [x] `fix` — Bug fix\r\n  - [x] `refactor` — Code refactoring (no behavior change)\r\n  - [x] `perf` — Performance improvement\r\n\r\n  ## Checklist\r\n\r\n  - [x] `npx tsc --noEmit` passes\r\n  - [x] `bun --bun run test` passes\r\n  - [x] No unrelated changes included\r\n  - [x] Commit messages follow [Conventional Commits](https:\u002F\u002Fwww.conventionalcommits.org\u002F)\n\n## What's Changed\n* fix(electron): add graceful-fs to devDependencies for Node.js v25 compat by @Related8919 in https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fpull\u002F38\n* fix(server): add ESM-compatible __dirname polyfill by @hr1juldey in https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fpull\u002F42\n* fix(server): make MCP HTTP server survive parent process lifecycle by @hr1juldey in https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fpull\u002F43\n* fix(canvas): respect node-level theme overrides during variable resolution by @hr1juldey in https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fpull\u002F41\n\n## New Contributors\n* @Related8919 made their first contribution in https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fpull\u002F38\n* @hr1juldey made their first contribution in https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fpull\u002F42\n\n**Full Changelog**: https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fcompare\u002Fv0.3.3...v0.4.0","2026-03-15T02:02:44",{"id":232,"version":233,"summary_zh":234,"released_at":235},263525,"v0.3.3","  \r\n  Figma Import                                                                                          \r\n                                                                                                      \r\n  - Component instance inlining — INSTANCE nodes that reference master components (SYMBOL) on Figma's\r\n  internal canvas now correctly inline their children, preserving visual content that was previously\r\n  lost during import\r\n  - Instance overrides — Fill colors, arc data, text content, font size, font family, line height, and\r\n  letter spacing overrides from symbolData.symbolOverrides and derivedSymbolData are now applied,\r\n  ensuring instances render with their customized properties\r\n  - Arc \u002F pie \u002F donut chart support — Figma arcData (start angle, end angle, inner radius) is now\r\n  converted to PenNode arc properties and rendered as SVG Path objects on canvas, enabling pie charts,\r\n  donut segments, and ring shapes\r\n  - Flip-aware arc rendering — Horizontally\u002Fvertically flipped arc ellipses have their flip absorbed\r\n  into arc angles with corrected positioning, avoiding Fabric.js path flip distortion\r\n  - Percentage-based text metrics — Line height and letter spacing with PERCENT units are now correctly\r\n  converted relative to font size\r\n  - Sub-pixel position precision — Node positions now preserve 0.01px precision instead of rounding to\r\n  integers\r\n  - Single-path vector decode fix — Vectors with a single path segment are now correctly decoded\r\n  (previously silently dropped)\r\n\r\n  AI Design Generation\r\n\r\n  - Model profiles — New per-model capability system (model-profiles.ts) that adapts thinking mode,\r\n  timeouts, and prompt complexity based on model tier (full \u002F standard \u002F basic). Supports Claude,\r\n  GPT-4o, Gemini, DeepSeek, Qwen, Llama, and more\r\n  - Design type presets — Replaced scattered keyword detection with structured DesignTypePreset registry\r\n   for mobile-screen, app-screen, and landing-page detection with i18n pattern matching\r\n  - Improved icon pipeline — Icon name aliases for common mismatches, multi-path SVG concatenation fix,\r\n  and async icon resolution fallback for icon_font nodes\r\n  - Emoji elimination — Strengthened emoji ban in prompts and orchestrator defaults to prevent emoji\r\n  rendering in generated designs\r\n  - Duplicate object prevention — Canvas sync now deduplicates objects during AI generation to prevent\r\n  visual artifacts\r\n  - Better error diagnostics — Sub-agent failures now include model output preview and JSON parse status\r\n   for easier debugging\r\n  - Simplified prompt for lightweight models — Basic-tier models (Haiku, GPT-4o Mini, etc.) receive a\r\n  streamlined prompt variant\r\n\r\n  AI Providers\r\n\r\n  - OpenCode streaming — Rewritten streaming implementation with event-based architecture, timeout\r\n  wrapping, and structured error formatting with nested JSON extraction\r\n  - OpenCode error messages — Human-readable error labels for common API errors (auth failures, context\r\n  overflow, rate limits)\r\n\r\n  Canvas\r\n\r\n  - Arc ellipse rendering — Full canvas support for partial arcs (pie slices, donut segments) in both\r\n  object creation and property sync\r\n  - Auto-layout fix — Badge and overlay nodes with absolute positioning are now preserved during\r\n  auto-layout computation\r\n\r\n  Code Generation\r\n\r\n  - Arc ellipse nodes now generate proper \u003Csvg>\u003Cpath> output in React, HTML, Svelte, and Vue generators\r\n\r\n  Chat Panel\r\n\r\n  - Paste image support — Ctrl\u002FCmd+V paste of images from clipboard directly into the chat input as\r\n  attachments\r\n\r\n  Electron\r\n\r\n  - Windows code signing — Custom Authenticode signature verification for self-signed certificates, with\r\n   publisher name validation\r\n  - CI signing secrets — Added WIN_CSC_LINK \u002F WIN_CSC_KEY_PASSWORD to build workflow\r\n\r\n  Community\r\n\r\n  - Added GitHub Issue templates (Bug Report, Feature Request) with structured forms\r\n  - Added Pull Request template with checklist\r\n  - Added Discord community link\r\n  - Updated README across all 16 languages","2026-03-11T14:19:23",{"id":237,"version":238,"summary_zh":239,"released_at":240},263526,"v0.3.2","MCP Layered Design Workflow                               \r\n\r\n  Introduced a layered design generation workflow for external LLMs (Claude Code, Codex CLI, Gemini CLI,\r\n   etc.) to produce higher-fidelity designs through the MCP server.\r\n\r\n  New MCP Tools:\r\n\r\n  - design_skeleton — Creates the root frame and section scaffolding with per-section content guidelines\r\n   (supports 15+ section types: nav, hero, features, footer, CTA, pricing, etc.)\r\n  - design_content — Inserts content nodes into a section frame with per-section post-processing (role\r\n  resolution, icon resolution, sanitization)\r\n  - design_refine — Full-tree validation pass with before\u002Fafter diff reporting\r\n  - get_selection — Returns the currently selected nodes on the live canvas. LLMs no longer need to\r\n  discover batch_get with selection patterns — just call get_selection directly.\r\n\r\n  Segmented Prompt Retrieval:\r\n\r\n  get_design_prompt now accepts a section parameter to retrieve focused subsets of design knowledge\r\n  instead of the full ~8K char prompt. Available sections: schema, layout, roles, text, style, icons,\r\n  examples, guidelines, planning.\r\n\r\n  Recommended workflow: get_design_prompt(\"planning\") → design_skeleton → design_content (per section) →\r\n   design_refine\r\n\r\n  Canvas Selection Sync for MCP\r\n\r\n  Real-time selection state is now synced from the renderer to the Nitro server, enabling the new\r\n  get_selection MCP tool. Selection changes are debounced (300ms) and pushed to POST \u002Fapi\u002Fmcp\u002Fselection.\r\n\r\n  Electron Improvements\r\n\r\n  - File Logger — Main process logs are now written to {userData}\u002Flogs\u002Fmain.log with daily rotation\r\n  (7-day retention), replacing console-only error output for better debugging.\r\n  - Windows Build Naming — Updated electron-builder.yml to specify artifact naming convention for\r\n  Windows builds.\r\n\r\n  Bug Fixes\r\n\r\n  - Fixed MCP server crash (Cannot read properties of undefined (reading 'DEV')) caused by\r\n  import.meta.env being undefined in CJS output. Resolved by adding --define:import.meta.env={} to the\r\n  esbuild compile command.\n\n**Full Changelog**: https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fcompare\u002Fv0.3.1...v0.3.2","2026-03-10T13:57:01",{"id":242,"version":243,"summary_zh":244,"released_at":245},263527,"v0.3.1"," ### New Features                                                                                      \r\n                                                                                                        \r\n  - **Icon Font nodes** — New `icon_font` node type with full Lucide icon set support. Icons render   \r\n  natively on canvas with dedicated property panel for library selection and icon picking. All 8 code \r\n  generators (React, Vue, Svelte, HTML, Flutter, SwiftUI, React Native, Compose) output proper icon\r\n  components.\r\n  - **Electron auto-updater** — Checks GitHub Releases on startup and hourly. Shows download progress\r\n  and \"Restart & Install\" banner when an update is ready.\r\n  - **Electron native app menu** — Full File\u002FEdit\u002FView menu with keyboard shortcuts, extracted into\r\n  dedicated `app-menu.ts` module.\r\n  - **MCP enhancements** — Improved document management, design tools, and live canvas sync. MCP tools\r\n  now support page-aware operations with `pageId` parameter.\r\n\r\n  ### Bug Fixes\r\n\r\n  - **Electron: preferences lost on restart** — `localStorage` is scoped by origin; since Nitro starts\r\n  on a random port each launch, all persisted settings (theme, language, agent config, UI kit, canvas\r\n  prefs) were wiped. Introduced `appStorage` abstraction backed by a JSON preferences file via IPC,\r\n  replacing `localStorage` across 7 stores.\r\n  - **Linux: MCP server orphaned on close** — Closing Electron killed the Nitro child process but left\r\n  the MCP grandchild process running. Added signal handlers (`SIGTERM`\u002F`SIGINT`\u002F`SIGHUP`) in\r\n  `mcp-server-manager.ts` to ensure cleanup.\r\n  - **MCP: blank pages when switching** — Canvas sync skipped re-rendering when switching to pages with\r\n  empty children. Removed the `pageChildren.length > 0` guard so page switches always trigger a full\r\n  canvas re-sync. Also fixed `applyExternalDocument` to force children reference updates on all pages.\r\n  - **MCP: redundant push-back after external updates** — `skipNextPushRef` (boolean) only blocked one\r\n  cascading `setState` call. Replaced with timestamp-based suppression window (200ms) to handle all\r\n  cascading updates from `applyExternalDocument`.\r\n  - **Canvas: text centering and layout inference** — Improved optical center calculation for text\r\n  nodes, better auto-layout detection, and Pencil.dev format rendering fixes.\r\n\r\n  ### Improvements\r\n\r\n  - **Smaller .op files** — Removed JSON pretty-printing (`JSON.stringify(doc)` instead of 2-space\r\n  indentation). Files remain plain-text JSON for git diffability. ~30-40% size reduction.\r\n  - **AI generation pipeline** — Optimized streaming layout, improved design accuracy, better\r\n  post-generation validation with extracted fix modules.\r\n  - **AI design guidelines** — Clarified mobile design guidelines and mockup usage in prompts.\r\n\r\n**Full Changelog**: https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fcompare\u002Fv0.3.0...v0.3.1","2026-03-09T14:40:58",{"id":247,"version":248,"summary_zh":249,"released_at":250},263528,"v0.3.0"," Highlights                                                                                                                                                                                                                                                                \r\n                  \r\n  Multi-Framework Code Export — Added Vue, Svelte, React Native, Flutter, SwiftUI, and Jetpack Compose code generators. Combined with existing React\u002FTailwind and HTML\u002FCSS, OpenPencil now supports 8 output formats.                                                       \r\n                  \r\n  Boolean Operations — Union, Subtract, and Intersect for combining shapes, accessible via toolbar or ⌘⌥U\u002FS\u002FI shortcuts.\r\n\r\n  AI Visual Reference Pipeline — AI design generation now supports image references, intent classification for smarter chat routing, and post-generation visual validation with quality checklist.\r\n\r\n  .op File Association — Double-click .op files to open them directly in OpenPencil on macOS, Windows, and Linux.\r\n\r\n  MCP Enhancements — Live canvas as default target, semantic role-aware design prompts with CJK typography support, and cross-platform fixes.\r\n\r\n  ---\r\n  New Features\r\n\r\n  - Multi-framework code export — Vue, Svelte, React Native, Flutter, SwiftUI, Jetpack Compose generators with scrollable tab navigation\r\n  - Boolean operations — Union, Subtract, Intersect for combining shapes (⌘⌥U\u002FS\u002FI)\r\n  - AI visual reference pipeline — Attach reference images to guide AI design generation\r\n  - AI intent classification — Smarter chat routing between design requests and general questions\r\n  - AI validation checklist — Post-generation visual validation with detailed quality scores and fix suggestions\r\n  - AI modular design principles — Sub-agents receive structured design context for better output\r\n  - Orchestrator style guide — styleGuide required in orchestrator plans for consistent output\r\n  - .op file association — Native file association on all desktop platforms\r\n  - Electron theme overlay — Enhanced title bar theme management for Windows and Linux\r\n  - Port file plugin — Server writes a port file for external tool discovery (MCP CLI integrations)\r\n  - Code panel responsive prompts — Enhanced system prompt for responsive design code generation\r\n  - Agent badge glow — Breathing glow border on canvas agent indicator\r\n\r\n  Bug Fixes\r\n\r\n  - AI node ID collisions — Prevent duplicate IDs between consecutive generations\r\n  - AI validation timeout — Increased to 90s, fixed response parsing for quality scores\r\n  - Text layout accuracy — Precise text width estimation and centered fit-content text in horizontal layouts\r\n  - Layout accuracy — Improved positioning for AI-generated auto-layout designs\r\n  - Validation UI — Replaced emoji icons with styled Lucide icons in checklist panel\r\n\r\n  Refactoring\r\n\r\n  - Editor layout and panels restructured for improved maintainability\r\n  - Electron settings path moved to platform-standard app data directory\r\n\r\n  Docs\r\n\r\n  - Added WeChat group info to Chinese README\r\n  - Updated Discord invite links\r\n\r\n**Full Changelog**: https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fcompare\u002Fv0.2.1...v0.3.0","2026-03-08T04:00:39",{"id":252,"version":253,"summary_zh":254,"released_at":255},263529,"v0.2.1","   New Features\r\n\r\n  GitHub Copilot Support\r\n  - Added GitHub Copilot as a new AI provider alongside Anthropic, OpenAI, and OpenCode\r\n  - Full chat streaming support with Copilot models\r\n  - Automatic detection of the standalone copilot CLI binary (avoids Bun node:sqlite\r\n  incompatibility)\r\n\r\n  Auto-Install CLI Agents\r\n  - Clicking \"Connect\" on an uninstalled agent now prompts to auto-install it\r\n  - Platform-aware install commands: npm install -g for Claude Code \u002F Codex CLI, curl installer\r\n  for OpenCode, brew install for Copilot (macOS)\r\n  - Shows manual installation instructions with docs link on failure\r\n  - Supported on macOS, Windows, and Linux\r\n\r\n  MCP Multi-Page Support\r\n  - Added MCP tools for multi-page document operations (pages.ts)\r\n  - Enhanced node operations and batch tools for page-aware workflows\r\n\r\n  Improvements\r\n\r\n  Windows & Linux Title Bar\r\n  - Custom frameless title bar with native window controls overlay (—, □, ×) for a consistent look\r\n  - Transparent overlay background — blends seamlessly with the app's top bar\r\n  - Window control symbol colors adapt to dark\u002Flight theme\r\n  - Linux: auto-detects whether the desktop environment places controls on the left or right\r\n  (GNOME, KDE, XFCE, etc.)\r\n  - Hidden native menu bar for cleaner appearance\r\n\r\n  Update Banner\r\n  - Repositioned auto-update notification to avoid overlap with window controls\r\n\r\n  Bug Fixes\r\n\r\n  - Fixed Copilot SDK crash under Bun runtime due to node:sqlite — now routes to native CLI binary\r\n  - Fixed generic \"Connection failed\" message hiding actual server errors in agent settings UI\r\n\r\n  i18n\r\n\r\n  - Added new translation keys for agent install flow across all 15 supported languages\r\n","2026-03-06T13:02:37",{"id":257,"version":258,"summary_zh":259,"released_at":260},263530,"v0.2.0"," Agent Team — Multi-Agent Concurrent Design Generation                                           \r\n                                                            \r\n  The headline feature of v0.2.0 is Agent Team: multiple AI agents working in parallel to generate\r\n   designs simultaneously. When you describe a multi-page application, OpenPencil's orchestrator\r\n  automatically decomposes the task into subtasks, groups them by screen, and dispatches them to\r\n  independent agents that run concurrently — each with its own name, color, and real-time visual\r\n  presence on the canvas.\r\n\r\n  Intelligent Task Decomposition\r\n\r\n  The orchestrator groups subtasks by their screen field. Subtasks targeting different screens\r\n  execute in parallel, while sections within the same screen remain sequential to preserve layout\r\n  consistency. Parallel mode only activates when there are 2+ distinct screen groups; single-page\r\n  designs take the proven sequential path. Element boundary constraints have been added to subtask\r\n   planning, giving each agent precise spatial layout bounds to work within.\r\n\r\n  Agent Identity\r\n\r\n  Each agent receives a unique visual identity so users can track \"who is doing what\" during\r\n  parallel generation. There are 12 agent names (Kiki, Mochi, Pixel, Nova, Zuri, Cleo, Boba, Rune,\r\n   Fern, Echo, Puck, Sage) and a 6-color palette. Names are randomly assigned via Fisher-Yates\r\n  shuffle; colors cycle across agents. Concurrency is configurable from 1 to 6 agents, persisted\r\n  in localStorage.\r\n\r\n  Real-Time Canvas Indicators\r\n\r\n  Three layers of visual feedback render on the canvas during generation:\r\n\r\n  - Breathing glow border — A dashed colored border wraps nodes as they are being generated, with\r\n  opacity pulsating between 0.4–0.8 on a 600ms cycle.\r\n  - Preview fill tint — A soft 6% color wash appears on nodes 500ms before they materialize,\r\n  hinting at incoming content.\r\n  - Agent badge — A pill-shaped label above each root frame showing a spinning dot animation and\r\n  the agent's name (e.g. \"Kiki\"). Badges linger for 2 seconds after generation completes before\r\n  fading out.\r\n\r\n  Indicator state is stored on globalThis to prevent module isolation issues across bundled\r\n  modules.\r\n\r\n  ---\r\n  Other New Features\r\n\r\n  Internationalization (i18n)\r\n\r\n  Full multilingual support with 15 languages: English, Simplified Chinese, Traditional Chinese,\r\n  Japanese, Korean, French, Spanish, German, Portuguese, Russian, Hindi, Turkish, Thai,\r\n  Vietnamese, and Indonesian. 287 translation keys cover the entire editor UI — toolbar, panels,\r\n  dialogs, AI chat, code generation, Figma import, and more. A language selector in the top bar\r\n  auto-detects browser language and persists the user's preference. Localized README files are\r\n  included for all supported languages.\r\n\r\n  MCP Server — Streamable HTTP Transport\r\n\r\n  The MCP server now supports dual transport: stdio for CLI integrations and Streamable HTTP for\r\n  remote\u002Fweb clients. The HTTP endpoint at \u002Fmcp includes session management, CORS headers, and LAN\r\n   IP detection for cross-device access. A management API (GET\u002FPOST \u002Fapi\u002Fmcp\u002Fserver) allows\r\n  starting and stopping the HTTP server at runtime.\r\n\r\n  MCP Tools — Full Node CRUD\r\n\r\n  10 new tools bring the total to 17 MCP tools. Six node manipulation tools (insert_node,\r\n  update_node, delete_node, move_node, copy_node, replace_node) provide full CRUD with optional\r\n  post-processing (role defaults, icon resolution, sanitization). import_svg converts local SVG\r\n  files to editable PenNodes using a pure Node.js regex-based parser with no DOM dependency. Three\r\n   theme preset tools (save_theme_preset, load_theme_preset, list_theme_presets) enable saving and\r\n   loading .optheme design system presets.\r\n\r\n  Theme Preset System\r\n\r\n  A new .optheme file format enables portable design system presets. The Variables panel includes\r\n  preset management UI for saving, loading, importing, and exporting presets. Importing a preset\r\n  non-destructively merges its themes and variables into the current document.\r\n\r\n  UIKit — Modular shadcn Components\r\n\r\n  The default kit has been restructured into a modular shadcn architecture: shadcn-kit with 19\r\n  core components, shadcn-kit-extra with 15 additional components (select, slider, dialog,\r\n  dropdown, pagination, toast, progress, skeleton, tooltip, table), and shadcn-kit-meta with\r\n  category metadata and search tags. The component browser now renders SVG previews without\r\n  Fabric.js and automatically copies referenced design variables on insert.\r\n\r\n  Electron Auto-Update\r\n\r\n  Automatic update checks on startup and hourly via electron-updater. An update notification\r\n  banner shows checking, available, downloading (with progress bar), and downloaded states. A\r\n  \"Restart & Install\" button appears when the update is ready. Auto-update can be disabled in\r\n  Agent Settings.\r\n\r\n  ---\r\n  Refactoring\r\n\r\n  - Figma node mapper split into figma-node-converters.ts and figma-tree-buil","2026-03-05T13:36:25",{"id":262,"version":263,"summary_zh":264,"released_at":265},263531,"v0.1.2"," \r\n  Live Canvas Sync                                                                                                               \r\n                  \r\n  MCP tools can now connect to the running OpenPencil editor in real time. Call open_document() without a filePath (or with\r\n  \"live:\u002F\u002Fcanvas\") to read and modify the live canvas directly — no file I\u002FO needed.\r\n\r\n  - SSE-based sync: The renderer pushes document changes to the Nitro server; MCP reads them instantly. When MCP writes back, the\r\n   canvas updates automatically.\r\n  - Port discovery: Electron writes ~\u002F.openpencil\u002F.port so the MCP server can locate the running instance.\r\n  - Debounced push: Local edits are batched (2s debounce) before syncing to avoid flooding the server.\r\n\r\n  MCP Server Improvements\r\n\r\n  - HTTP transport: MCP server now supports StreamableHTTPServerTransport in addition to stdio. Configure via the new transport\r\n  mode selector in Agent Settings (stdio \u002F http \u002F stdio + http).\r\n  - open_document redesigned: Returns a context summary (node count, canvas size, existing content) and a full designPrompt with\r\n  the PenNode schema, layout rules, and style policy — giving external AI agents everything they need to generate high-quality\r\n  designs.\r\n  - New design_prompt tool: Exposes the complete design knowledge prompt (schema, layout engine, copywriting rules, design\r\n  guidelines) as a standalone tool.\r\n  - batch_design post-processing: New postProcess flag automatically applies role defaults, icon name resolution, emoji removal,\r\n  layout sanitization, and unique ID enforcement after insert operations.\r\n  - Empty frame auto-replacement: When inserting a root-level frame and an empty root frame already exists, it is replaced\r\n  in-place (inheriting position) instead of creating a sibling.\r\n\r\n  Security Hardening\r\n\r\n  - Electron file write allowlist: dialog:saveToPath IPC now validates file extension (.op\u002F.pen only) and restricts writes to\r\n  user home or OS temp directories.\r\n  - Prototype pollution protection: sanitizeObject() strips __proto__, constructor, and prototype keys from all parsed JSON in\r\n  MCP tools.\r\n  - MCP path traversal guard: resolveDocPath() rejects null bytes and .. traversal in file paths.\r\n  - Codex env allowlist: filterCodexEnv() only forwards safe environment variables (PATH, HOME, OPENAI_*, CODEX_*) to child\r\n  processes.\r\n  - Media type allowlist: AI chat image attachments restricted to image\u002Fpng, image\u002Fjpeg, image\u002Fgif, image\u002Fwebp.\r\n  - Sensitive log sanitization: Debug output scrubs lines containing API keys, Bearer tokens, and secrets.\r\n  - New test suites: 3 security test files covering prototype pollution, path traversal, env filtering, media types, and log\r\n  sanitization.\r\n\r\n  Agent Settings\r\n\r\n  - Transport mode selector: Choose between stdio, http, or stdio + http for MCP CLI integrations. Changing the mode\r\n  automatically re-installs all enabled CLIs.\r\n  - HTTP port config: Configurable port for HTTP transport (default 3100).\r\n\r\n  Other Changes\r\n\r\n  - Version bump to 0.1.2.\r\n  - Figma import: Additional safety checks in binary .fig parser.\r\n  - SVG parser: Tightened input validation.\r\n  - Removed: Unused dropdown-select.tsx component.\r\n  - Docs: Updated README and CLAUDE.md.\r\n\r\n## New Contributors\r\n* @RolandSherwin made their first contribution in https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil\u002Fpull\u002F18\r\n\r\n","2026-03-03T13:10:17"]