mirror of https://github.com/ZSeven-W/openpencil.git synced 2026-06-01 03:14:29 +07:00

* fix(ai): add icon name aliases and fix multi-path SVG concatenation

Add 55+ common icon name aliases (burger→hamburger, sushi→fish, etc.)
to both client icon-resolver and server icon API for robust AI-generated
icon resolution. Register Lucide's own aliases for broader coverage.

Fix SVG path concatenation bug where joining multiple <path> d-values
caused incorrect rendering — a standalone <path> treats initial lowercase
"m" as absolute, but after concatenation it becomes relative to the
previous sub-path endpoint. Now ensures each sub-path starts with
absolute "M".

Add tryAsyncIconFontResolution for icon_font nodes that miss local
lookup — fetches from server API, caches result, and triggers canvas
re-render.

* fix(canvas): preserve badge/overlay absolute positioning in auto-layout

Add isBadgeOverlayNode() detector for badge, indicator, notification-dot,
and overlay nodes. These nodes now retain their x/y coordinates instead
of being stripped by layout sanitization.

Update computeLayoutPositions to exclude badge nodes from the layout flow
— they keep absolute positioning and render on top (prepended for correct
z-order in reverse iteration).

* fix(ai): prevent duplicate canvas objects and fix emoji-to-icon pipeline

Streaming path: add ensureUniqueNodeIds before inserting nodes to prevent
ID collisions across multiple AI generations. Track newly inserted IDs
so subsequent streaming nodes don't collide either.

Canvas sync: deduplicate Fabric objects sharing the same penNodeId —
keep only the one tracked in objMap, remove stale duplicates.

Badge nodes: use shared isBadgeOverlayNode() for z-order insertion
and skip x/y stripping in layout parents.

Fix emoji-to-icon pipeline: re-run applyIconPathResolution after
applyNoEmojiIconHeuristic converts emoji text nodes to path nodes,
so the icon resolver can match by name (e.g. "Pizza Emoji Path" → pizza).

* fix(canvas): add async icon resolution fallback for icon_font nodes

When lookupIconByName fails locally, queue tryAsyncIconFontResolution
to fetch from server API. Cache result in ICON_PATH_MAP and trigger
canvas re-render via store update. Store iconFontName and iconStyle
on Fabric object for sync tracking.

* fix(ai): strengthen emoji ban in prompts and improve orchestrator defaults

Update all AI prompts to explicitly ban emoji characters with concrete
examples and redirect to icon_font nodes instead of the previously
incorrect "path nodes" guidance.

Add z-order rule to orchestrator prompt: overlay elements must come
before content they overlap.

Add padding support to OrchestratorPlan rootFrame type. Default mobile
root frame gap to 16 for consistent spacing.

* feat(electron): add publisher name to Windows build configuration

Updated the `electron-builder.yml` to include a publisher name for Windows builds, enhancing the identification of the application during installation. Additionally, revised the README files across multiple languages to reflect the new project description and features, emphasizing OpenPencil as the world's first AI-native open-source vector design tool with concurrent agent teams and design-as-code capabilities.

---------

Co-authored-by: Fini <fini.yang@gmail.com>

2026-03-11 21:18:49 +08:00

11 KiB

Raw Blame History

OpenPencil

全球首个 AI 原生开源矢量设计工具。
_{并发 Agent 团队 • 设计即代码 • 内置 MCP 服务器 • 多模型智能}

English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia

_{点击图片观看演示视频}

为什么选择 OpenPencil

🎨 提示词 → 画布

用自然语言描述任意 UI，实时以流式动画在无限画布上生成。选中已有元素，通过对话即可修改设计。

🤖 并发 Agent 团队

编排器将复杂页面分解为空间子任务。多个 AI 智能体同时处理不同区块 — Hero、功能区、页脚 — 全部并行流式生成。

🧠 多模型智能

自动适配每个模型的能力。Claude 获得完整提示词和思考模式；GPT-4o/Gemini 关闭思考模式；小模型（MiniMax、通义千问、Llama）使用简化提示词以确保输出可靠性。

🔌 MCP 服务器

一键安装到 Claude Code、Codex、Gemini、OpenCode、Kiro 或 Copilot CLI。从终端进行设计 — 通过任意 MCP 兼容的智能体读取、创建和修改 .op 文件。

📦 设计即代码

.op 文件是 JSON — 人类可读、对 Git 友好、可进行 diff 对比。设计变量生成 CSS 自定义属性。代码导出为 React + Tailwind 或 HTML + CSS。

🖥️ 全平台运行

Web 应用 + 通过 Electron 支持 macOS、Windows 和 Linux 原生桌面端。从 GitHub Releases 自动更新。.op 文件关联 — 双击即可打开。

快速开始

# 安装依赖
bun install

# 在 http://localhost:3000 启动开发服务器
bun --bun run dev

或以桌面应用形式运行：

bun run electron:dev

前置条件： Bun >= 1.0 以及 Node.js >= 18

AI 原生设计

提示词生成 UI

文字转设计 — 描述一个页面，实时以流式动画在画布上生成
编排器 — 将复杂页面分解为空间子任务，支持并行生成
设计修改 — 选中元素后，用自然语言描述更改
视觉输入 — 附加截图或线框图作为参考进行设计

多智能体支持

智能体	配置方式
Claude Code	无需配置 — 使用 Claude Agent SDK 本地 OAuth
Codex CLI	在 Agent 设置中连接（`Cmd+,`）
OpenCode	在 Agent 设置中连接（`Cmd+,`）
GitHub Copilot	运行 `copilot login` 后在 Agent 设置中连接（`Cmd+,`）

模型能力配置 — 自动根据模型层级适配提示词、思考模式和超时时间。完整层级模型（Claude）获得完整提示词；标准层级模型（GPT-4o、Gemini、DeepSeek）关闭思考模式；基础层级模型（MiniMax、通义千问、Llama、Mistral）使用简化的嵌套 JSON 提示词以确保最大可靠性。

MCP 服务器

内置 MCP 服务器 — 一键安装到 Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI
从终端进行设计自动化：通过任意 MCP 兼容的智能体读取、创建和修改 .op 文件
分层设计工作流 — design_skeleton → design_content → design_refine，实现更高保真度的多区块设计
分段提示词检索 — 按需加载所需的设计知识（schema、layout、roles、icons、planning 等）
多页面支持 — 通过 MCP 工具创建、重命名、重新排序和复制页面

代码生成

React + Tailwind CSS
HTML + CSS
从设计令牌生成 CSS Variables

功能特性

画布与绘图

无限画布，支持平移、缩放、智能对齐参考线和吸附
矩形、椭圆、直线、多边形、钢笔（贝塞尔）、Frame、文本
布尔运算 — 联合、减去、交集，配合上下文工具栏
图标选择器（Iconify）和图片导入（PNG/JPEG/SVG/WebP/GIF）
自动布局 — 垂直/水平方向，支持间距、内边距、主轴对齐、交叉轴对齐
多页面文档，支持标签页导航

设计系统

设计变量 — 颜色、数字、字符串令牌，支持 $variable 引用
多主题支持 — 多个主题轴，每个轴有多个变体（浅色/深色、紧凑/舒适）
组件系统 — 可复用组件，支持实例和覆盖
CSS 同步 — 自动生成自定义属性，代码输出中使用 var(--name)

Figma 导入

导入 .fig 文件，保留布局、填充、描边、效果、文本、图片和矢量图形

桌面应用

通过 Electron 支持原生 macOS、Windows 和 Linux
.op 文件关联 — 双击即可打开，单实例锁定
从 GitHub Releases 自动更新
原生应用菜单和文件对话框

技术栈


前端	React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui
画布	Fabric.js v7
状态管理	Zustand v5
服务器	Nitro
桌面端	Electron 35
AI	Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK
运行时	Bun · Vite 7
文件格式	`.op` — 基于 JSON，人类可读，对 Git 友好

项目结构

src/
  canvas/          Fabric.js 引擎 — 绘图、同步、布局、参考线、钢笔工具
  components/      React UI — 编辑器、面板、共享对话框、图标
  services/ai/     AI 聊天、编排器、设计生成、流式处理
  services/figma/  Figma .fig 二进制文件导入流水线
  services/codegen React+Tailwind 和 HTML+CSS 代码生成器
  stores/          Zustand — 画布、文档、页面、历史、AI、设置
  variables/       设计令牌解析与引用管理
  mcp/             供外部 CLI 集成使用的 MCP 服务器工具
  uikit/           可复用组件套件系统
server/
  api/ai/          Nitro API — 流式聊天、生成、验证
  utils/           Claude CLI、OpenCode、Codex、Copilot 客户端封装
electron/
  main.ts          窗口、Nitro 子进程、原生菜单、自动更新
  preload.ts       IPC 桥接

键盘快捷键

按键	操作	按键	操作
`V`	选择	`Cmd+S`	保存
`R`	矩形	`Cmd+Z`	撤销
`O`	椭圆	`Cmd+Shift+Z`	重做
`L`	直线	`Cmd+C/X/V/D`	复制/剪切/粘贴/重复
`T`	文本	`Cmd+G`	编组
`F`	Frame	`Cmd+Shift+G`	取消编组
`P`	钢笔工具	`Cmd+Shift+E`	导出
`H`	手形（平移）	`Cmd+Shift+C`	代码面板
`Del`	删除	`Cmd+Shift+V`	变量面板
`[ / ]`	调整层级顺序	`Cmd+J`	AI 聊天
方向键	微移 1px	`Cmd+,`	智能体设置
`Cmd+Alt+U`	布尔联合	`Cmd+Alt+S`	布尔减去
`Cmd+Alt+I`	布尔交集

脚本命令

bun --bun run dev          # 开发服务器（端口 3000）
bun --bun run build        # 生产构建
bun --bun run test         # 运行测试（Vitest）
npx tsc --noEmit           # 类型检查
bun run electron:dev       # Electron 开发模式
bun run electron:build     # Electron 打包

参与贡献

欢迎贡献！请查阅 CLAUDE.md 了解架构细节和代码风格。

Fork 并克隆仓库
创建分支：git checkout -b feat/my-feature
运行检查：npx tsc --noEmit && bun --bun run test
使用 Conventional Commits 提交：feat(canvas): add rotation snapping
向 main 分支发起 PR

路线图

设计变量与令牌，支持 CSS 同步
组件系统（实例与覆盖）
带编排器的 AI 设计生成
MCP 服务器集成与分层设计工作流
多页面支持
Figma .fig 导入
布尔运算（合并、减去、相交）
多模型能力配置
协同编辑
插件系统

贡献者

社区

加入我们的 Discord — 提问、分享设计、提出功能建议。

飞书交流群

11 KiB

Raw Blame History

OpenPencil

为什么选择 OpenPencil

🎨 提示词 → 画布

🤖 并发 Agent 团队

🧠 多模型智能

🔌 MCP 服务器

📦 设计即代码

🖥️ 全平台运行

快速开始

AI 原生设计

功能特性

技术栈

项目结构

键盘快捷键

脚本命令

参与贡献

路线图

贡献者

社区

Star History

许可证

11 KiB Raw Blame History Unescape Escape

OpenPencil

为什么选择 OpenPencil

🎨 提示词 → 画布

🤖 并发 Agent 团队

🧠 多模型智能

🔌 MCP 服务器

📦 设计即代码

🖥️ 全平台运行

快速开始

AI 原生设计

功能特性

技术栈

项目结构

键盘快捷键

脚本命令

参与贡献

路线图

贡献者

社区

Star History

许可证

11 KiB

Raw Blame History