* feat(ai): add agent identity system with visual indicators for concurrent generation

- Agent identity: assign unique colors and names to each sub-agent
- Canvas indicators: breathing glow border + name pill above streaming nodes
- Preview effect: outline appears 500ms before element materializes
- Screen grouping: subtasks with same `screen` field share one root frame,
fixing multi-page apps being split into too many frames
- Screen-level parallelism: subtasks within same screen run sequentially
(preserving section order), different screens run in parallel

* fix(canvas): make agent indicator visual effect much more dramatic

- Outer glow: 8px soft border for visible halo effect
- Inner border: 2.5px sharp crisp border at high alpha
- Preview fill: 10-15% alpha (was ~1% before, essentially invisible)
- Breathing: faster cycle (400ms), higher range [0.35, 0.95]
- Name pill: larger font (11px), bold 700, drop shadow
- Pill dedup: only draw one name pill per agent (not per node)
- Rounded rect helper for polished pill rendering

* fix(canvas): use globalThis for agent indicator state to prevent module isolation

Vite module splitting can create separate module instances for the same
file when imported from different chunks. This causes the indicator Map
written by the orchestrator (services/ai/) to be a different instance
than the one read by the canvas hook (canvas/). Using globalThis
guarantees a single shared instance across all chunks.

* feat(i18n): enhance internationalization support by integrating i18next for translation in various components. Added new dependencies: i18next, i18next-browser-languagedetector, and react-i18next. Updated UI elements in the editor, toolbar, and status bar to utilize translation keys for improved localization. Enhanced README with language options for better accessibility.

* feat(auto-update): implement auto-update functionality with settings management

- Added auto-update feature to check for updates at app startup and periodically while running.
- Introduced settings for enabling/disabling auto-update, stored in a JSON file.
- Integrated IPC handlers to manage auto-update settings from the renderer process.
- Created new API endpoints for managing MCP server status, including start/stop functionality.
- Enhanced the UI to support theme presets, allowing users to save and load variable presets.
- Updated internationalization support for new UI elements related to auto-update and presets.

* feat(ai): add element boundaries to orchestrator subtask planning

Orchestrator now outputs an "elements" field per subtask listing the
specific UI elements it owns. Sub-agent prompts display these boundaries
so each agent knows exactly what to generate and what belongs to other
sections, preventing content duplication across subtasks.

Also includes: sequential cascade reveal animation, agent indicator
recursive tagging, delayed indicator removal, single-agent identity
for sequential mode, model name truncation fix.

---------

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

2026-03-05 21:14:50 +08:00

7.5 KiB

Raw Blame History

OpenPencil

AI 原生开源设计工具。设计即代码。
从提示词到画布 UI。多智能体编排。内置 MCP 服务器。代码生成。

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

快速开始 · AI · 功能特性 · Discord · 参与贡献

快速开始

# 安装依赖
bun install

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

或以桌面应用形式运行：

bun run electron:dev

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

AI 原生设计

OpenPencil 从底层就围绕 AI 构建——不是作为插件，而是作为核心工作流。

提示词生成 UI

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

多智能体支持

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

MCP 服务器

内置 MCP 服务器 — 一键安装到 Claude Code / Codex / Gemini / OpenCode / Kiro CLI
从终端进行设计自动化：通过任意 MCP 兼容的智能体读取、创建和修改 .op 文件

代码生成

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

功能特性

画布与绘图

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

设计系统

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

Figma 导入

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

桌面应用

通过 Electron 支持原生 macOS、Windows 和 Linux
从 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
运行时	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 客户端封装
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+,`	智能体设置

脚本命令

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 — 提问、分享设计、提出功能建议。

7.5 KiB Raw Blame History Unescape Escape