内容
align="center">
<img src="./apps/desktop/build/icon.png" alt="Buildev" width="120" />
</p>
<h1 align="center">Buildev</h1>
<p align="center">
<strong>开源的AI原生设计到代码平台。</strong><br />
<sub>可布 + IDE 模式 • 设计即代码 • 多框架导出 • 并发AI代理</sub>
</p>
<p align="center">
<a href="https://github.com/bryfar/Buildev/stargazers"><img src="https://img.shields.io/github/bryfar/Buildev?style=flat&color=cfb537" alt="Stars" /></a>
<a href="https://github.com/bryfar/Buildev/blob/main/LICENSE"><img src="img.shields.io/bryfar/Buildev?color=64748b" alt="License" /></a>
<a href="https://githubryfar/Buildev/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/bryfar/Buildev/ci.yml?branch=main&label=CI" alt="CI" /></a <a href="https://discord.gg/h9Fmyy6pVh"><img src="https://img.shields.io/discord/1476517942949580952?label=Discord&logo=discord&logoColor=white&color=5865F2" alt="Discord" /></a>
</p>
<p align="center">
<img src="./Bran%20Assets/Banner%20Readme.png" alt="Buildev Banner" width="100%" />
</p>
<p align="center">
<a href="./README.md"><b>English</b></a> ·
<a href="./README.zh.md">简体中文</a> ·
<a href="./README.zh-TW.md">繁體中文</a> ·
<a href="./README.ja.md">日本語</a> ·
<a href="./README.ko.md">한국어</a> ·
<a href="./README.fr.md">Français</a> ·
<a href="./README.es.md">Español</a> ·
<a href="./README.de.md">Deutsch</a> ·
<a href="./README.pt.md">Português</a> ·
<a href="./README.ru.md">Русский</a> ·
<a href="./README.hi.md">हिन्दी</a> ·
<a href="./README.tr.md">Türkçe</a> ·
<a href="./README.th.md">ไทย</a> ·
<a href="./README.vi.md">Tiếng Việt</a> ·
<a href="./README.id.md">Bahasa Indonesia</a>
</p>
<br />
---
## 为什么选择Buildev
<table>
<tr>
<td width="50%">
### 🎨 从提示到画布
用自然语言描述任何UI。实时在无限画布上生成并带有动画。可以通过选择元素并聊天来修改现有设计。
</td>
<td width="50%">
### 🤖 并发代理团队
协调器将复杂页面分解为空间子任务。多个AI代理同时处理不同部分 — 英雄、功能、页脚 — 所有部分并行流式传输并带有每个成员的画布指示器。
</td>
</tr>
<tr>
<td width="50%">
### 🧠 多模型智能
自动适应每个模型的 capabilities。Claude获得完整的提示和思考；GPT-4o/Gemini禁用思考；较小的模型（MiniMax、Qwen、Llama）获得简化的提示以确保可靠的输出。
</td>
<td width="50%">
### 🔌 MCP 服务器
一键安装到Claude Code、Codex、Gemini、OpenCode、Kiro或Copilot CLI。从终端设计 — 读取、创建和修改 `.op` 文件通过任何MCP兼容的代理。
</td>
</tr>
<tr>
<td width="50%">
### 🎨 样式指南
内置样式指南库，带有基于标签的模糊匹配。将视觉样式（玻璃态、野蛮主义、复古等）应用于AI生成的设计。MCP工具用于外部代理访问。
</td>
<td width="50%">
### 📦 设计即代码
`.op` 文件是JSON — 人类可读、Git友好、可差异化。设计变量生成CSS自定义属性。代码导出到React + Tailwind 或 HTML + CSS。
</td>
</tr>
<tr>
<td width="50%">
### 🖥️ 无处不在
基于Electron的Web应用和原生桌面应用，支持macOS、Windows和Linux。自动从GitHub Releases更新。`.op` 文件关联 — 双击打开。
</td>
<td width="50%">
### ⌨️ CLI — `op`
从终端控制设计工具。`op design`、`op insert` — 批量设计DSL，节点操作。从文件或stdin输入。适用于桌面应用或Web服务器。
</td>
</tr>
<tr>
<td width="50%">
### 🎯 多平台代码导出
导出到 React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native — 所有这些都来自一个 `.op` 文件。设计变量成为CSS自定义属性。
</td>
<td width="50%">
### 🧩 可嵌入的SDK
`pen-engine` （无头）+ `pen-react` （React UI SDK）— 在您自己的应用中嵌入设计引擎。DesignProvider、DesignCanvas、钩子、面板和工具栏组件开箱即用。
</td>
</tr>
<tr>
<td width="50%">
### ✨ AI视觉扫描仪
丢弃截图或模型并立即将其转换为可编辑的PenNode AST节点。由Claude/GPT-4o视觉能力驱动。
</td>
<td width="50%">
### 🔁 代码模式自动同步
编辑生成的代码并双向同步更改到可视化画布。包括React、Vue、HTML解析器。
</td>
</tr>
<tr>
<td width="50%">
### 🧩系统
可扩展的插件架构，带有9个内置插件。before/after生成的钩子、导出、导入。自定义插件API。
</td>
<td width="50%">
### 🖥️ 预览模式
专用的设备预览，用于响应式测试。移动设备、平板电脑、桌面模拟，支持全屏和自动缩放。
</td>
</tr>
</table>
---
## 架构概述
Buildev 是一个 **设计即代码** 平台。与传统的设计工具不同，后者导出静态图像，每个设计都是一个可以版本控制、AI生成的 `.op` JSON文档，可以导出为生产代码。
```mermaid
flowchart TB
subgraph Frontend["前端（React 19 + TanStack Start）"]
UI[编辑器UI<br/>工具栏、面板、画布]
Stores[Zustand 存储<br/>画布、文档、AI、Git]
Canvas[CanvasKit/Skia 引擎<br/>GPU加速WASM]
Preview[预览模式<br/>设备模拟]
CodeSync[代码同步<br/>双向]
end
subgraph AI["AI层"]
Orchestrator[协调器<br/>空间分解]
AgentTeams[代理团队<br/>并发生成]
VisionScanner[视觉扫描仪<br/>图像到设计]
MCP[MCP服务器<br/>外部代理接口 Plugins[插件系统<br/>可扩展钩子]
end
subgraph Backend["后端（Nitro服务器）"]
API[AI API<br/>流式聊天]
Codegen[代码生成/>8种框架]
Git[<br/>、分支、 Auth[身份<br/>OAuth + JWT]
end
subgraph Outputs["输出"]
React[React + Tailwind]
Vue[Vue 3]
HTML[HTML + CSS]
[Flutter]
Mobile[SwiftUI / Compose / RN]
end
UI --> Stores
Stores --> Canvas
UI --> Preview
UI --> CodeSync
CodeSync <--> Canvas
Canvas --> Orchestrator
Orchestrator --> AgentTeams
VisionScanner --> AI
AI --> API
API --> Codegen
Codegen --> Outputs
MCP --> API
Plugins -.-> Plugins -.->
Git --> Backend
```
---
## IDE工作原理
```mermaid
flowchart LR
subgraph Inputs["输入方法"]
Prompt[文本提示]
Image[截图<br/>上传]
Code[代码编辑器]
Voice[语音命令]
end
subgraph Processing["处理"]
Vision[视觉扫描仪]
AI[AI引擎]
end
subgraph CanvasArea["画布引擎"]
Document[PenDocument<br/>.op JSON]
Render[CanvasKit<br/>渲染器]
Layout[自动布局<br/>引擎]
end
subgraph Output["输出"]
Export[导出代码8种框架]
PreviewModal[预览模式]
Deploy[Git部署]
Save[保存.op文件]
end
Prompt --> AI
Image --> Vision --> AI
Code --> AI
Voice --> AI
AI --> Document
Document --> Render
Document --> Layout
Layout --> Render --> Export --> PreviewModal
Document --> Deploy
Document --> Save
```
IDE有三个主要面板：
```mermaid
TB
subgraph EditorLayout["编辑器布局 TopBar[顶部/>文件、视口控制]
subgraph LeftPanel[""]
Layers[图层面板<br/>节点树]
Components[组件浏览器<br/>UIKit]
end
subgraph Center["中心"]
CanvasArea[无限画布<br/>CanvasKit/Skia WASM]
TabBar[页面选项卡<br/>多页面导航]
end
subgraph RightPanel["右侧面板"]
Properties[属性<br/>位置、大小、样式]
AI聊天<br和修改]
Code[代码面板<br/>实时预览和导出]
变量<br/>]
end
StatusBar栏<br/>缩放、选择信息]
TopBar --> LeftPanel
TopBar --> Center
TopBar --> RightPanel
CanvasArea --> StatusBar
```
---
## 安装macOS（Homebrew）：**
```bash
brew tap zseven-w/buildev install --caskdev
```
（Scoop）：**
```powershell
s add buildev https://github.com/zseven-w/scoop-buildev
scoop installdev
```
/ Windows 直接 [GitHub Releases](https:///bryfarildev/releases)exe`），`.App / `.deb`（Linux）
（`op**
```bash install -g @bryfar/buildev
```
## 快速开始（开发）bash
#
bun install 在 http://3000 启动开发bun -- dev
```
应用运行：
bun run electron:dev
```
先决条件：** [Bun://bun.sh/).0Node.js](https.org/) >= 可选Zig](httpslang.org/).14 用于代码构建 `agent-native` （如果未安装Zig，则会自动下载预编译的二进制文件）。
### Docker
提供了多种镜像变体 — 选择适合您需求的镜像：
| 镜像 | 大小 | 包含内容 |
|-------|------|----------|
| `buildev:latest` | ~226 MB | 仅Web应用 |
| `buildev-claude:latest` | — | + Claude Code CLI |
| `buildev-codex:latest` | — | + Codex CLI |
| `buildev-opencode:latest` | — | + OpenCode CLI |
| `buildev-copilot:latest` | — | + GitHub Copilot CLI |
| `buildev-gemini:latest` | — | + Gemini CLI |
| `buildev-full:latest` | ~1 GB | 所有CLI工具 |
**运行（仅Web）：**
```bash
dockerd -p 3000:cr.iofar/buil
```
**AI CLI（例如Claude Code）：**
AI聊天依赖于Claude CLI OAuth登录卷来持久会话：
```bash
# 步骤1 — 登录（一次性）
docker volume create buildev-claude-auth
docker run -it --rm \
-v buildev-claude-auth:/root/.claude \
ghcr.io/bryfar/buildev-claude:latest claude login
步骤2 — 启动
docker run -d -p 3000:3000 \
-v buildev-claude-auth/.claude \
ghcr.io/bryfar/buildev-claude:latest**本地构建：**
```bash
# 基础（仅Web）
docker build --target base -t buildev .
# 带有特定CLI
docker build --target with-claude -t buildev-claude .
# 完整（所有CLI）
docker build --target full -t buildev-full .
```
---
## AI原生设计
**提示到UI**
- **文本到设计** — 描述一个页面，实时在画布上生成并带有SSE动画
- **协调器** — 将复杂页面分解为空间子任务以并行生成
- **代理团队** — 并发团队成员，带有委托工具，每个成员的画布指示器和备用策略
- **设计修改** — 选择元素，然后用自然语言描述更改
- **视觉 — 附加截图或模型以进行用的设计
- **样式指南** — 通过基于标签的模糊匹配应用视觉样式（玻璃态，野蛮主义，复古等）
- **防重复** — 跨代多样性跟踪以避免重复的AI输出
**多代理支持**
| 代理 | 设置 |
|-------|-------|
| **内置（9+提供商）** | 从提供商预设中选择，带有区域切换器 — Anthropic，OpenAI，Google，DeepSeek等 |
| **Claude Code** | 无需配置 — 使用本地OAuth的Claude Agent SDK |
| **Codex CLI** | 在代理设置（`Cmd+,`）中连接 |
| **OpenCode** | 在代理设置（`Cmd+,`）中| **GitHub Copilot**copilot login` 然后在代理设置Cmd+,`）中连接 |
|ini CLI** | 在代理设置（`Cmd+,`）中连接 |
**模型能力配置文件**适应提示、思考模式和层的超时。完整层模型（Cl获得完整提示层模型（GPT-4o，Gemini，DeepSeek）禁用思考；基础层模型（MiniQwen，Llama，Mistral简化的嵌套JSON提示以可靠性。
**国际化** — 语言的完整界面本地化：English，简体中文，繁體中文，日本語，한국어，Français，ol，Deutsch，Português，Русский，हिन्दी，Türkçe，ไทย， Việt，Bahasa Indonesia。
**服务器**
- 内置MCP服务器（`pen-mcp`包） — 一键安装到Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI
- 自动检测Node.js — 如果未安装，则回落到HTTP传输并自动启动MCP HTTP服务器
- 从终端进行设计自动化：通过任何MCP兼容的代理读取、创建和修改 `.op` 文件
- **分层设计工作流** — `design_skeleton` → `design_content` → `design_refine` 用于更高保真度的多部分设计
- **分段提示检索** — 仅加载您需要的设计知识（模式、布局、角色、图标、规划等）
- **样式指南工具** — `get_style_guide_tags` 和 `get_style_guide` 用于通过MCP应用视觉样式
- 多页面支持 — 通过MCP工具创建、重命名、重新排序和复制页面
**代码生成**
- React + Tailwind CSS，HTML + CSS，CSS 变量
- Vue，Svelte，Flutter，SwiftUI，Jetpack Compose，React Native
---
## 功能
### ✨ AI视觉扫描仪
丢弃截图或模型并立即将其转换为可编辑的PenNode AST节点。
```mermaid
flowchart LR
Upload[上传<br/>截图/PNG/JPG]
AI[视觉AI<br/>Claude/GPT-4o]
Parser[JSON解析器<br/>→ PenNode AST]
Canvas[画布<br/>可编辑设计]
Upload-- "base64图像" -->AI
AI-- "结构化JSON" -->Parser
Parser-- "PenNode[]" -->Canvas
```
- **文件：** `apps/web/src/services/ai/vision-scanner.ts`
- 接受通过AI聊天附件的图像数据
- 返回带有位置、大小、颜色和文本的结构化`PenNode[]`
- 支持上下文提示以提高准确性
### 🔁 代码模式自动同步
编辑生成的代码并双向同步更改到可视化画布。
```mermaid
flowchart LR
subgraph CanvasSide["画布端"]
Doc[PenDocument<br/>.op JSON]
Renderer[CanvasKit<br/>渲染器]
end
subgraph CodeSide["代码编辑器"]
React[React代码<br/>src/App.tsx]
Vue[Vue代码<br/>App.vue]
HTML[HTML + CSS]
end
subgraph SyncEngine["同步引擎"]
Forward[前向同步<br/>设计 → 代码]
Backward[反向同步<br/>代码 → 设计]
end
Doc --> Forward --> React
Doc --> Forward --> Vue
Doc --> Forward --> HTML
React --> Backward --> Doc
Vue --> Backward --> Doc
HTML --> Backward --> Doc
Doc --> Renderer
Backward -."更新画布"-> Renderer
```
- **反向解析器：** React，Vue 3，HTML，通用
- **同步状态：** 每个文件的脏/干净跟踪
- **冲突检测：** 在同时编辑时发出警告
### 🧩 插件系统
基于AI技能引擎的可扩展插件架构。
```mermaid
flowchart TB
subgraph Core["插件管理器"]
Registry[插件注册表]
Lifecycle[插件生命周期<br/>初始化 → 激活 → deactivate]
end
subgraph Hooks["插件钩子"]
Gen[beforeGenerate<br/>afterGenerate]
Export[beforeExport<br/>afterExport]
Import[beforeImport<br/>afterImport]
end
subgraph BuiltIn["内置插件"]
DS[设计系统]
代码生成器]
AI[]
UK[UIKit]
[视觉扫描仪]
CS[]
PV[预览模式]
GT[Git集成]
CP服务器]
end
["自定义插件"]
P营销插件]
P2[]
P3[SEO分析 PN[...]
end
--> Hooks
Registry --> Built Registry-- "开发者API" -->Custom
Hooks-->Lifecycle
```
- **9个内置插件** 预- **阶段钩子：/after 生成、导出、导入 **能力系统：** 其功能
- **商店：apps/web/src/stores/plugin`
- **引擎：** `packages/pen-ai-skills/src/plugin-system.ts`
### 🖥️ 预
专用的设备预览，用于测试。
```mermaid
flowchart LR
Doc[PenDocument HTMLGen[HTML生成器<br → HTML]
IframeIframe]
Devices[设备模拟移动设备/平板电脑/]
Doc --> HTMLGen -->
Devices --> Iframe- **设备：** 移动375px），平板电脑（），桌面设备（1280px **功能：** 全屏缩放，刷新
- **** `apps/web/src/components/editor/preview-mode.tsx`
### 🖥️ 无处不在
基于Electron的Web应用和原生桌面应用，支持macOS、Windows和Linux。
```mermaid
flowchart LR
subgraph Platforms["支持的平台"]
Web[Web应用<br/>Vite + Nitro]
Mac[macOS<br/>Electron]
Win[Windows<br/>Electron]
Linux[Linux<br/>Electron]
end
subgraph Features["桌面功能"]
FileAssoc[.op文件关联<br/>双击打开]
AutoUpdate[自动更新<br/>GitHub Releases]
NativeMenu[原生菜单<br/>保存为，打开最近]
RecentFiles[最近文件<br/>持久化]
end
Platforms --> Features
```
### ⌨️ 命令行界面 — `op`
```bash
npm install -g @bryfar/buildev
op start # 启动桌面应用程序
op design @landing.txt # 从文件进行批量设计
op insert '{"type":"RECT"}' # 插入一个节点
op import:figma design.fig # 导入 Figma 文件
cat design.dsl | op design - # 从标准输入管道
```
```mermaid
flowchart LR
subgraph 命令 ["命令行命令"]
Start[op start]
Design[op design]
Insert[op insert]
Import[op import:figma]
Export[op export]
end
subgraph 输入 ["输入方式"]
Inline[内联字符串]
File["@文件路径"]
Stdin["- (标准输入)"]
end
subgraph 目标 ["目标"]
Desktop[桌面应用程序<br/>Electron]
Web[网页服务器<br/>localhost:3000]
end
Input --> Commands
Commands --> Target
```
支持三种输入方式：内联字符串、`@文件路径`（从文件读取）或 `-`（从标准输入读取）。与桌面应用程序或网页开发服务器配合使用。参见 [命令行 README](./apps/cli/README.md) 获取完整的命令参考。
**LLM 技能** — 安装 Buildev 技能插件，以教导 AI 代理（Claude Code、Cursor、Codex、Gemini CLI 等）如何使用 `op` 进行设计。
### 🎯 多平台代码导出
从一个设计导出 8 种框架：
```mermaid
flowchart TB
Design[一个设计<br/>.op 文件]
Codegen[代码生成引擎<br/>pen-codegen]
React[React + Tailwind]
Vue[Vue 3 + CSS]
Svelte[Svelte + CSS]
HTML[HTML + CSS]
Flutter[Flutter / Dart]
Swift[SwiftUI]
Compose[Jetpack Compose]
RN[React Native]
Design --> Codegen
Codegen --> React
Codegen --> Vue
Codegen --> Svelte
Codegen --> HTML
Codegen --> Flutter
Codegen --> Swift
Codegen --> Compose
Codegen --> RN
```
### 🎨 提示 → 画布
用自然语言描述任何 UI 界面。实时在无限画布上查看它出现。修改现有设计时，选择元素并聊天。
```mermaid
flowchart LR
Prompt[用户提示<br/>SaaS 的登陆页面]
AI[AI 引擎<br/>流式生成]
Canvas[无限画布<br/>实时渲染]
Edit[选择 & 修改<br/>自然语言]
Prompt-- "流式 SSE" -->AI
AI-- "逐块" -->Canvas
Canvas-- "选择元素" -->Edit
Edit-- "使其变暗" -->AI
```
### 🤖 并发代理团队
编排器将复杂的页面分解为空间子任务。多个 AI 代理同时处理不同部分 — 英雄、功能、页脚 — 所有部分并行流式传输，并带有每个成员的画布指示器。
```mermaid
flowchart LR
User[用户提示<br/>SaaS 的登陆页面]
Orchestrator[编排器<br/>空间分解]
subgraph 代理 ["代理团队"]
A1[代理 1<br/>英雄部分]
A2[代理 2<br/>功能网格]
A3[代理 3<br/>页脚]
A4[代理 N<br/>...]
end
Canvas[画布<br/>实时流式传输]
User --> Orchestrator
Orchestrator --> A1
Orchestrator --> A2
Orchestrator --> A3
Orchestrator --> A4
A1 --> Canvas
A2 --> Canvas
A3 --> Canvas
A4 --> Canvas
```
- **委托工具** — 代理可以将子任务委托给专门的对等代理
- **每个成员的画布指示器** — 每个代理进度的可视化反馈
- **回退策略** — 如果代理超时，则优雅降级
### 🧠 多模型智能和代理提供商
自动适应每个模型的 9+ 提供商的能力。
```mermaid
flowchart TB
subgraph 模型 ["模型层级"]
Full[完整层级<br/>Claude]
Standard[标准层级<br/>GPT-4o, Gemini, DeepSeek]
Basic[基础层级<br/>MiniMax, Qwen, Llama, Mistral]
end
subgraph 配置 ["自动配置"]
Thinking[思考模式]
Effort[努力程度]
Prompts[提示形状]
Timeouts[超时]
end
subgraph 提供商 ["9+ 提供商"]
Anthropic[Anthropic]
OpenAI[OpenAI]
Google[Google]
DeepSeek[DeepSeek]
Chinese[中文大语言模型<br/>Kimi, Zhipu, GLM]
end
Models --> Config
Config --> Providers
Providers --> Canvas
```
| 代理 | 设置 |
|-------|-------|
| **内置（9+ 提供商）** | 从具有区域切换器的提供商预设中选择 |
| **Claude Code** | 无需配置 — 使用 Claude Agent SDK 和本地 OAuth |
| **Codex CLI** | 在代理设置（`Cmd+,`）中连接 |
| **OpenCode** | 在代理设置（`Cmd+,`）中连接 |
| **GitHub Copilot** | `copilot login` 然后在代理设置中连接 |
| **Gemini CLI** | 在代理设置（`Cmd+,`）中连接 |
### 🔌 MCP 服务器
用于外部 AI 代理集成的内置 MCP 服务器。
```mermaid
flowchart LR
subgraph 外部 CLI ["外部 CLI"]
Claude[Claude Code]
Codex[Codex CLI]
Gemini[Gemini CLI]
OpenCode[OpenCode]
Copilot[GitHub Copilot]
end
subgraph MCP ["Buildev MCP 服务器"]
Tools[工具<br/>设计、插入、更新]
Layered[分层工作流<br/>骨架 → 内容 → 精炼]
Segmented[分段提示<br/>模式、布局、图标]
end
subgraph 画布 ["Buildev 应用程序"]
Live[实时画布]
API[Nitro API]
end
CLIs-- "MCP 协议" -->Tools
Tools-->Docs
Tools-->Design
Tools-- "HTTP" -->API
API-->Live
```
- **一键安装** 到任何 MCP 兼容的 CLI
- **分层工作流：** `design_skeleton` → `design_content` → `design_refine`
- **分段提示：** 只加载所需的内容（模式、布局、图标、规划）
- **样式指南工具：** `get_style_guide_tags`, `get_style_guide`
- **多页面：** 通过 MCP 创建、重命名、重新排序、复制页面
### 🎨 样式指南
50+ 内置样式，带有基于标签的模糊匹配。将视觉样式应用于 AI 生成的设计。
```mermaid
flowchart LR
Style[样式指南库<br/>50+ 样式]
Matcher[基于标签的模糊匹配器]
AI[AI 生成<br/>结合样式]
Canvas[画布<br/>样式设计]
Style-- "标签： glassmorphism, retro..." -->Matcher
Matcher-- "匹配的样式" -->AI
AI-->Canvas
MCP[MCP 工具<br/>get_style_guide_tags]-->Style
```
- **类别：** glassmorphism, brutalist, retro, modern SaaS, luxury, gaming, fintech, health, editorial, 以及 40+ 更多
- **MCP 工具：** 外部代理可以查询和应用样式指南
### 📦 设计即代码
`.op` 文件是 JSON — 人类可读、Git 友好、可差异化。
```mermaid
flowchart LR
Design[视觉设计]
OpFile[.op 文件<br/>JSON 文档]
Git[Git 版本控制]
Code[代码导出<br/>8 种框架]
Variables[CSS 自定义属性<br/>var(--name)]
Design --> OpFile
OpFile-- "可差异化" -->Git
OpFile --> Code
OpFile --> Variables
```
### 🖥️ 画布和绘图
具有 CanvasKit/Skia WASM 支持的无限画布。
```mermaid
flowchart TB
subgraph 绘图工具 ["绘图工具"]
Rect[矩形]
Ellipse[椭圆]
Line[线条]
Pen[钢笔 / 贝塞尔曲线]
Text[文本]
Frame[框架]
Polygon[多边形]
end
subgraph 画布功能 ["画布功能"]
Pan[平移和缩放]
Align[对齐指南]
Snap[吸附]
Boolean[布尔运算<br/>联合、减去、相交]
Layout[自动布局<br/>类似 Flexbox]
Pages[多页面<br/>选项卡导航]
end
subgraph 导入 ["导入"]
Icons[Iconify 图标]
Images[PNG/JPEG/SVG/WebP/GIF]
end
Drawing --> CanvasFeatures
Import --> CanvasFeatures
```
### 🎨 设计系统和变量
具有多主题支持的完整设计令牌系统。
```mermaid
flowchart TB
subgraph 令牌 ["设计令牌"]
Colors[颜色变量<br/>$color-1, $color-2]
Numbers[数字变量<br/>$spacing-md]
Strings[字符串变量<br/>$font-family]
end
subgraph 主题 ["多主题"]
Theme1[主题轴 1<br/>浅色 / 深色]
Theme2[主题轴 2<br/>紧凑 / 舒适]
end
subgraph 组件 ["组件"]
Reusable[可重用组件]
Instances[实例和重写]
end
subgraph 输出 ["输出"]
CSS[CSS 自定义属性<br/>var(--name)]
UIKit[UIKits<br/>导入/导出 .pen]
end
Tokens --> Themes
Themes --> Components
Components --> Output
```
### 🤖 AI 和代理
- **提示到画布**，带有流式生成和编排器驱动的空间分解
- **并发代理团队** — 多个设计师并行工作，每个成员都有指标
- **分层工作流** — `design_skeleton` → `design_content` → `design_refine`，每个阶段都有聚焦的提示
- **样式指南** — 50+ 内置样式，带有基于标签的模糊匹配
- **多模型能力配置文件** — 自动适应思考、努力、提示形状，每个模型层级
- **内置代理运行时** (`agent-native`, Zig NAPI) + Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, Gemini 提供商
- **中文大语言模型提供商** — Kimi, Zhipu, GLM, DouBao, Ark, Bailian/DashScope, ModelScope, Coding Plans
### 🔗 Git 集成
完整的 Git 版本控制内置编辑器。
```mermaid
flowchart TB
subgraph Git 功能 ["Git 功能"]
Clone[克隆向导<br/>SSH / HTTPS]
Branch[分支管理器<br/>创建、切换、删除、合并]
Sync[推送 / 拉取<br/>身份验证重试]
Merge[三向合并<br/>文件夹模式]
end
subgraph 冲突解决 ["冲突解决"]
Cards[每个节点 / 每个字段的卡片]
Editor[内联 JSON 编辑器]
Diff[内联差异块]
Bulk[批量操作]
end
subgraph 远程 ["远程"]
SSH[SSH 密钥管理]
Settings[远程设置 UI]
end
GitFeatures --> Remote
GitFeatures --> Conflict
```
- **克隆向导**，带有 SSH / HTTPS 身份验证和 SSH 密钥管理
- **分支选择器** — 创建、切换、删除、合并
- **拉取 / 推送 cascades**，带有身份验证重试和非快速转发处理
- **文件夹模式三向合并**，带有磁盘 `MERGE_HEAD` 状态跟踪
- **冲突面板**，每个节点 / 每个字段都有三向卡片、内联 JSON 编辑器、批量操作和内联差异块
- **15 种语言 i18n**，涵盖整个 Git 界面
### 🗄️ 导出
```mermaid
flowchart LR
Canvas[画布导出<br/>PNG / JPEG / WEBP / PDF]
Code[代码导出<br/>8 种框架]
MCP[MCP 管道<br/>计划 → 提交 → 组装 → 清洁]
Design[设计] --> Canvas
Design --> Code
Design --> MCP
```
- 画布导出 — PNG、JPEG、WEBP、PDF (`Cmd+Shift+P`)
- 代码导出 — React + Tailwind、HTML + CSS、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native
- 增量 MCP 代码生成管道 — `codegen_plan`, `codegen_submit_chunk`, `codegen_assemble`, `codegen_clean`
### 🌀 Figma 导入
导入 `.fig` 文件，保留布局、填充、描边、效果、文本、图像和矢量。
```mermaid
flowchart LR
Figma[Figma .fig 文件]
Parser[二进制解析器<br/>pen-figma]
Mapper[节点映射器<br/>Figma → PenNode]
Canvas[画布<br/>可编辑设计]
Figma-- "二进制" -->Parser
Parser-- "Figma 节点" -->Mapper
Mapper-- "PenNode[]" -->Canvas
```
### 🖥️ Electron 桌面原生
原生 macOS、Windows 和 Linux 应用程序。
```mermaid
flowchart TB
subgraph 桌面 ["桌面功能"]
FileAssoc[.op 文件关联<br/>双击打开]
SingleInstance[单实例锁]
AutoUpdater[自动更新<br/>GitHub Releases]
Menu[原生应用程序菜单<br/>保存为、打开最近]
Recent[最近文件<br/>持久化]
Dialog[未保存更改对话框<br/>关闭时]
end
subgraph 技术 ["底层"]
Electron[Electron 35]
Nitro[Nitro 服务器分叉]
IPC[IPC 处理器<br/>文件对话框、主题、首选项]
end
Tech --> Desktop
```
### 🎯 编辑器模式
在 **设计模式** 和 **IDE 模式** 之间切换以适应不同工作流。
```mermaid
flowchart TB
subgraph 编辑器 ["编辑器"]
TopBar[顶部栏<br/>模式选择器]
end
subgraph 设计模式 ["🎨 设计模式"]
Canvas[画布编辑器<br/>CanvasKit/Skia]
Layers[图层面板]
Properties[属性面板]
AI[AI 聊天面板]
Toolbar[绘图工具]
end
subgraph IDE 模式 ["💻 IDE 模式"]
Explorer[资源管理器面板<br/>虚拟文件树]
CodeEditor[代码编辑器<br/>Monaco]
BottomPanel[底部面板<br/>问题 / 输出 / 终端]
StackAssistant[堆栈迁移助手]
end
TopBar-- "切换" -->设计模式
TopBar-- "切换" -->IDE 模式
```
- **设计模式** — 完整的视觉画布，带有绘图工具、图层面板、属性、AI 聊天
- **IDE 模式** — 分割面板代码编辑器，带有虚拟文件树、Monaco 编辑器、诊断、堆栈迁移助手（React/Vue/Astro）
- **预览** — HTML 预览新标签页来自顶部栏
- **代码同步** — 在编辑生成的编辑文件时双向同步
### 🗂️ 项目仪表盘
用于管理项目、工作空间和草稿的全仪表盘系统。
```mermaid
flowchart TB
subgraph 仪表盘 [/]
Nav[侧边栏导航]
Grid[项目网格]
end
subgraph 路由 ["仪表盘路由"]
Home[首页<br/>最近 & 本地项目]
Workspaces["/workspaces<br/>工作空间列表]
Workspace["/workspaces/:id<br/>工作空间详情"]
Drafts["/drafts<br/>未分配项目]
Recents["/recents<br/>所有最近文件"]
Library["/library<br/>组件库"]
end
subgraph 导航项 ["导航"]
Main[主部分<br/>项目、工作空间、草稿、最近]
Lib[库部分<br/>浏览组件]
end
Dashboard --> Routes
Nav --> NavItems
```
- **首页** — 最近的项目、本地项目网格、云项目
- **工作空间** — 列出所有工作空间，创建/重命名/删除
- **工作空间详情** — 查看工作空间项目，创建新项目，移动草稿
- **草稿** — 未分配的项目，尚未归入任何工作空间
- **最近的项目** — 所有最近打开的文件
- **库** — 组件库浏览器
### 🏗️ 新项目向导
使用 3 步向导创建项目，支持多种创建方法。
```mermaid
flowchart LR
subgraph 步骤 1：架构师 [/]
AI[AI 助手<br/>基于提示]
Figma[Figma 导入<br/>上传 .fig]
Reverse[反向 UI<br/>图像转设计]
Import[导入<br/>Git / JSON]
Blank[从空白开始]
end
subgraph 步骤 2：配置 [/]
Name[项目名称]
Type[项目类型<br/>landing / multisite / cms]
Stack[前端栈<br/>React / Vue / Astro]
Backend[后端<br/>静态 / Node / 无服务器]
CMS[CMS 提供商<br/>可选]
end
subgraph 步骤 3：查看 [/]
Summary[查看总结]
Create[创建项目]
end
Step1 --> Step2 --> Step3
```
- **步骤 1 — 架构师：** 选择如何创建：AI 助手、Figma 导入、反向 UI（从图像）、导入 Git/JSON 或从空白开始
- **步骤 2 — 配置：** 设置项目名称、类型（landing/multisite/cms）、前端栈（React/Vue/Astro）、后端（静态/Node/无服务器/边缘）、CMS 提供商
- **步骤 3 — 查看：** 所有选择的总结，然后创建
### 🏷️ 项目类型
每个项目都有一个类型，决定其模板和仪表盘模式。
| 类型 | 描述 | 默认页面 | 栈 |
|------|-------------|---------------|-------|
| **landing** | 单页着陆网站 | 首页 | 任意 |
| **multisite** | 多页网站 | 首页、关于、联系 | 任意 |
| **cms** | 内容管理系统网站 | 首页、博客、文章 | Astro（强制） |
```mermaid
flowchart TB
subgraph 类型 ["项目类型"]
Landing[登陆<br/>单页]
Multisite[多站点<br/>多页]
CMS[CMS<br/>内容管理]
end
subgraph 配置 ["自动配置"]
Pages[页面结构]
Stack[栈选择]
Backend[后端设置]
end
Types --> Config
Config --> Template[模板 & 仪表盘就绪]
```
- **登陆**：单页，任意栈，轻量级设置
- **多站点**：多页带首页/关于/联系，灵活的栈
- **CMS**：强制 Astro 栈，包括内容/管理/管理侧边栏导航，提供商选项
### 📰 CMS 侧边栏
CMS 项目包括用于内容管理的专用侧边栏。
```mermaid
flowchart LR
subgraph CMS ["CMS 侧边栏"]
Content[内容<br/>页面、帖子、媒体]
Manage[管理<br/>设置、用户]
Admin[管理<br/>分析、部署]
end
subgraph 提供商 ["CMS 提供商"]
Directus[Directus]
Strapi[Strapi]
Payload[Payload CMS]
end
Providers --> CMS
CMS --> Editor[编辑器画布]
```
- **内容面板：** 页面、帖子、媒体管理
- **管理面板：** 设置、用户、角色
- **管理面板：** 分析、部署、Webhook
- **提供商选项：** Directus、Strapi、Payload CMS
### 🏢 工作空间
将项目组织到工作空间以便更好地管理。
```mermaid
flowchart TB
subgraph 工作空间 ["工作空间功能"]
Create[创建工作空间]
Rename[重命名工作空间]
Delete[删除工作空间]
Assign[分配/取消分配项目]
end
subgraph 视图 ["视图"]
List[工作空间列表]
Detail[工作空间详情<br/>项目网格]
end
Workspace --> List
Workspace --> Detail
Detail --> Editor[在编辑器中打开]
```
- **创建/重命名/删除** 工作空间
- **分配项目** 到工作空间从草稿
- **移动项目** 在工作空间之间
- **本地存储持久性** 用于工作空间注册表
### 🧩 可嵌入的SDK
`pen-engine`（无头）+ `pen-react`（React UI SDK）— 将设计引擎嵌入您自己的应用程序中。
```mermaid
flowchart TB
subgraph SDK["Buildev SDK"]
Engine[pen-engine<br/>无头设计引擎]
ReactSDK[pen-react<br/>React UI SDK]
end
subgraph ReactComponents["React 组件"]
Provider[设计提供者]
Canvas[设计画布]
Hooks[使用设计引擎<br/>使用文档<br/>使用活动节点]
Panels[属性面板<br/>图层面板<br/>工具栏]
end
Engine --> ReactSDK
ReactSDK --> Provider
ReactSDK --> Canvas
ReactSDK --> Hooks
ReactSDK --> Panels
```
### 🔐 身份验证系统
内置身份验证，支持OAuth和JWT。
```mermaid
flowchart LR
subgraph Providers["身份验证提供者"]
GitHub[GitHub OAuth]
Google[Google OAuth]
end
subgraph Auth["身份验证层"]
JWT[JWT令牌]
Session[会话管理]
Middleware[路由保护]
end
subgraph Features["功能"]
Login[登录/注册]
Profile[用户配置文件]
Permissions[项目权限]
end
Providers --> Auth
Auth --> Features
```
### 👥 多人协作
实时存在和协作。
```mermaid
flowchart LR
subgraph Multiplayer["多人功能"]
Cursors[远程光标]
Presence[用户存在<br/>谁在线]
Sync[实时同步<br/>Y.js]
end
subgraph UI["UI指示器"]
Avatars[用户头像]
Count[在线人数]
Color[颜色编码的光标]
end
Multiplayer --> UI
```
- **远程光标**，具有用户特定的颜色
- **存在头像栈**，显示谁在线
- **实时文档同步**，通过WebSocket
---
## 技术栈
| | |
|---|---|
| **前端** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next |
| **画布** | CanvasKit/Skia (WASM, GPU加速) |
| **引擎** | pen-engine（无头）· pen-react（React UI SDK） |
| **状态** | Zustand v5 |
| **服务器** | Nitro |
| **桌面端** | Electron 35 |
| **命令行工具** | `op` — 终端控制，批量设计DSL |
| **人工智能** | agent-native（Zig NAPI）· Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **运行时** | Bun · Vite 7 |
| **代码检查** | oxlint · oxfmt |
| **文件格式** | `.op` — JSON格式，易读，适合Git |
---
## 项目结构
```text
buildev/
├── apps/
│ ├── web/ TanStack Start 网页应用
│ │ ├── src/
│ │ │ ├── canvas/ CanvasKit/Skia 引擎
│ │ │ ├── components/ React UI — 编辑器，面板，对话框
│ │ │ ├── services/
│ │ │ │ ├── ai/ AI 聊天，协调器，视觉扫描器
│ │ │ │ ├── codegen/ 代码生成包装器
│ │ │ │ ├── code-parsers/ React/Vue/HTML 解析器（反向同步）
│ │ │ │ └── ide/ IDE 工作区服务
│ │ │ ├── stores/ Zustand — 画布，文档，插件，代码同步
│ │ │ ├── project-flow/ 仪表板，引导，用户类型
│ │ │ ├── uikit/ 可重用组件套件系统
│ │ │ ├── hooks/ 快捷键，文件拖放，MCP同步
│ │ │ └── i18n/ 15 种语言
│ │ └── server/
│ │ ├── api/ai/ Nitro API — 流式聊天，视觉
│ │ ├── api/auth/ OAuth + JWT 身份验证
│ │ └── api/mcp/ MCP HTTP传输端点
│ ├── desktop/ Electron 桌面应用
│ └── cli/ 命令行工具 — `op` 命令
├── packages/
│ ├── pen-types/ 类型定义
│ ├── pen-core/ 文档树操作，布局引擎
│ ├── pen-engine/ 无头设计引擎
│ ├── pen-react/ React UI SDK
│ ├── pen-codegen/ 8 个代码生成器
│ ├── pen-figma/ Figma `.fig` 解析器
│ ├── pen-renderer/ 独立的CanvasKit/Skia渲染器
│ ├── pen-mcp/ MCP 服务器
│ ├── pen-sdk/ 集成SDK
│ ├── pen-ai-skills/ AI提示技能引擎 + 插件系统
│ └── agent-native/ 原生AI代理运行时（Zig NAPI）
├── scripts/ 构建和发布脚本
└── .githooks/ 提交前版本同步
```
---
## 快捷键
| 键 | 操作 | | 键 | 操作 |
|-----|--------|---|-----|--------|
| `V` | 选择 | | `Cmd+S` | 保存 |
| `R` | 矩形 | | `Cmd+Z` | 撤销 |
| `O` | 椭圆 | | `Cmd+Shift+Z` | 重做 |
| `L` | 线条 | | `Cmd+C/X/V/D` | 复制/剪切/粘贴/复制 |
| `T` | 文本 | | `Cmd+G` | 分组 |
| `F` | 框架 | | `Cmd+Shift+G` | 解组 |
| `P` | 钢笔工具 | | `Cmd+Shift+P` | 导出（PNG/JPG/WEBP/PDF） |
| `H` | 手（平移） | | `Cmd+Shift+C` | 代码面板 |
| `Del` | 删除 | | `Cmd+Shift+V` | 变量面板 |
| `[ / ]` | 重新排序 | | `Cmd+J` | AI聊天 |
| 箭头键 | 微调1像素 | | `Cmd+,` | 代理设置 |
| `Cmd+Alt+U` | 布尔联合 | | `Cmd+Alt+S` | 布尔减法 |
| `Cmd+Alt+I` | 布尔交集 | | `Cmd+Shift+S` | 另存为 |
---
## 脚本
```bash
bun --bun run dev # 开发服务器（端口3000）
bun --bun run build # 生产环境构建
bun --bun run test # 运行测试（Vitest）
npx tsc --noEmit # 类型检查
bun run lint # 代码检查（oxlint）
bun run format # 代码格式化（oxfmt）
bun run bump <version> # 同步版本号到所有package.json
bun run electron:dev # Electron开发环境
bun run electron:build # Electron打包
bun run cli:dev # 从源码运行CLI
bun run cli:compile # 编译CLI到dist
bun run mcp:dev # 从源码运行MCP服务器
```
---
## 贡献
欢迎贡献！请参阅 [CLAUDE.md](./CLAUDE.md) 获取架构细节和代码风格。
1. 分叉并克隆
2. 设置版本同步：`git config core.hooksPath .githooks`
3. 创建分支：`git checkout -b feat/my-feature`
4. 运行检查：`npx tsc --noEmit && bun --bun run test`
5. 提交并使用[Conventional Commits](https://www.conventionalcommits.org/)：`feat(canvas): add rotation snapping`
6. 对`main`分支发起拉取请求
---
## 路线图
- [x] 设计变量和令牌，支持CSS同步
- [x] 组件系统（实例和覆盖）
- [x] AI设计生成，支持协调器
- [x] MCP服务器集成，支持分层设计工作流
- [x] 多页面支持
- [x] Figma `.fig` 导入
- [x] 布尔运算（联合，减法，交集）
- [x] 多模型能力配置文件
- [x] 单体仓库重构，支持可重用包
- [x] 命令行工具（`op`）用于终端控制
- [x] 内置AI代理SDK，支持多提供商
- [x] i18n — 15种语言
- [x] 无头设计引擎（`pen-engine`）+ React UI SDK（`pen-react`）
- [x] 样式指南，支持标签匹配和MCP工具
- [x] 并发代理团队，支持委托工具和画布指示器
- [x] 原生代理运行时（`agent-native` — Zig NAPI）
- [x] Git集成 — 克隆，分支，推送/拉取，文件夹模式三向合并
- [x] 画布光栅导出（PNG / JPEG / WEBP / PDF）
- [x] AI视觉扫描器 — 图片转设计
- [x] 代码模式自动同步 — 双向代码同步
- [x] 预览模式 — 响应式设备测试
- [x] 插件系统 — 可扩展的钩子
- [ ] 协同编辑
- [ ] 插件市场
---
## 许可证
[MIT](./LICENSE) — Copyright (c) 2026 bryfar
---
<p align="center">
<strong>由Buildev团队 ❤️ 构建</strong>
</p>
MCP 配置
以下是此 MCP Server 的配置信息，可直接复制到 Cursor 或其他 MCP 客户端中使用。
mcp.json
连接信息
猜你喜欢
暂无推荐服务器