Buildev

The open-source AI-native design-to-code platform.
_{Visual Canvas + IDE Mode • Design-as-Code • Multi-framework Export • Concurrent AI Agents}

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

---

Why Buildev

🎨 Prompt → Canvas Describe 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.	🤖 Concurrent Agent Teams The 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.
🧠 Multi-Model Intelligence Automatically adapts to each model's capabilities. Claude gets full prompts with thinking; GPT-4o/Gemini disable thinking; smaller models (MiniMax, Qwen, Llama) get simplified prompts for reliable output.	🔌 MCP Server One-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.
🎨 Style Guides Built-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.	📦 Design-as-Code .op files are JSON — human-readable, Git-friendly, diffable. Design variables generate CSS custom properties. Code export to React + Tailwind or HTML + CSS.
🖥️ Runs Everywhere Web app + native desktop on macOS, Windows, and Linux via Electron. Auto-updates from GitHub Releases. .op file association — double-click to open.	⌨️ CLI — op Control the design tool from your terminal. op design, op insert — batch design DSL, node manipulation. Pipe in from files or stdin. Works with desktop app or web server.
🎯 Multi-Platform Code Export Export to React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native — all from one .op file. Design variables become CSS custom properties.	🧩 Embeddable SDK 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.
✨ AI Vision Scanner Drop a screenshot or mockup and convert it into editable PenNode AST nodes instantly. Powered by Claude/GPT-4o vision.	🔁 Code Mode Autosync Edit generated code and sync changes back to the visual canvas bidirectionally. React, Vue, HTML parsers included.
🧩 Plugin System Extensible plugin architecture with 9 built-in plugins. Hooks for before/after generate, export, import. Custom plugin API.	🖥️ Preview Mode Dedicated device preview for responsive testing. Mobile, Tablet, Desktop simulation with fullscreen and auto-scale.

---

Architecture Overview

Buildev is a Design-as-Code platform. Unlike traditional design tools that export static images, every design is a living .op JSON document that can be version-controlled, AI-generated, and exported to production code.

flowchart TB
    subgraph Frontend["Frontend (React 19 + TanStack Start)"]
        UI[Editor UI<br/>Toolbar, Panels, Canvas]
        Stores[Zustand Stores<br/>canvas, document, ai, git]
        Canvas[CanvasKit/Skia Engine<br/>GPU-Accelerated WASM]
        Preview[Preview Mode<br/>Device Simulation]
        CodeSync[Code Sync<br/>Bidirectional]
    end

    subgraph AI["AI Layer"]
        Orchestrator[Orchestrator<br/>Spatial Decomposition]
        AgentTeams[Agent Teams<br/>Concurrent Generation]
        VisionScanner[Vision Scanner<br/>Image to Design]
        MCP[MCP Server<br/>External Agent Interface]
        Plugins[Plugin System<br/>Extensible Hooks]
    end

    subgraph Backend["Backend (Nitro Server)"]
        API[AI API<br/>Streaming Chat]
        Codegen[Code Generators<br/>8 Frameworks]
        Git[Git Integration<br/>Clone, Branch, Merge]
        Auth[Auth System<br/>OAuth + JWT]
    end

    subgraph Outputs["Outputs"]
        React[React + Tailwind]
        Vue[Vue 3]
        HTML[HTML + CSS]
        Flutter[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 -.-> AI
    Plugins -.-> Codegen
    Git --> Backend

---

How the IDE Works

flowchart LR
    subgraph Inputs["Input Methods"]
        Prompt[Text Prompt]
        Image[Screenshot<br/>Upload]
        Code[Code Editor]
        Voice[Voice Command]
    end

    subgraph Processing["Processing"]
        Vision[Vision Scanner]
        AI[AI Engine]
    end

    subgraph CanvasArea["Canvas Engine"]
        Document[PenDocument<br/>.op JSON]
        Render[CanvasKit<br/>Renderer]
        Layout[Auto Layout<br/>Engine]
    end

    subgraph Output["Output"]
        Export[Export Code<br/>8 Frameworks]
        PreviewModal[Preview Mode]
        Deploy[Git Deploy]
        Save[Save .op File]
    end

    Prompt --> AI
    Image --> Vision --> AI
    Code --> AI
    Voice --> AI
    AI --> Document
    Document --> Render
    Document --> Layout
    Layout --> Render
    Document --> Export
    Document --> PreviewModal
    Document --> Deploy
    Document --> Save

The IDE has three main panels:

flowchart TB
    subgraph EditorLayout["Editor Layout"]
        TopBar[Top Bar<br/>File, AI, Viewport Controls]
        
        subgraph LeftPanel["Left Panel"]
            Layers[Layer Panel<br/>Node Tree]
            Components[Component Browser<br/>UIKit]
        end

        subgraph Center["Center"]
            CanvasArea[Infinite Canvas<br/>CanvasKit/Skia WASM]
            TabBar[Page Tabs<br/>Multi-Page Navigation]
        end

        subgraph RightPanel["Right Panel"]
            Properties[Properties<br/>Position, Size, Style]
            AI[AI Chat<br/>Generate & Modify]
            Code[Code Panel<br/>Live Preview & Export]
            Variables[Variables<br/>Design Tokens]
        end

        StatusBar[Status Bar<br/>Zoom, Selection Info]
    end

    TopBar --> LeftPanel
    TopBar --> Center
    TopBar --> RightPanel
    CanvasArea --> StatusBar

---

Install

macOS (Homebrew):

brew tap zseven-w/buildev
brew install --cask buildev

Windows (Scoop):

scoop bucket add buildev https://github.com/zseven-w/scoop-buildev
scoop install buildev

Linux / Windows direct download: GitHub Releases — .exe (Windows), .AppImage / .deb (Linux)

CLI (op):

npm install -g @bryfar/buildev

Quick Start (Development)

# Install dependencies
bun install

# Start dev server at http://localhost:3000
bun --bun run dev

Or run as a desktop app:

bun run electron:dev

Prerequisites: Bun >= 1.0 and Node.js >= 18. Optional: Zig >= 0.14 for building agent-native from source (a prebuilt binary will be downloaded automatically if Zig is not installed).

Docker

Multiple image variants are available — pick the one that fits your needs:

Image	Size	Includes
buildev:latest	~226 MB	Web app only
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	All CLI tools

Run (web only):

docker run -d -p 3000:3000 ghcr.io/bryfar/buildev:latest

Run with AI CLI (e.g. Claude Code):

The AI chat relies on Claude CLI OAuth login. Use a Docker volume to persist the login session:

# Step 1 — Login (one-time)
docker volume create buildev-claude-auth
docker run -it --rm \
  -v buildev-claude-auth:/root/.claude \
  ghcr.io/bryfar/buildev-claude:latest claude login

# Step 2 — Start
docker run -d -p 3000:3000 \
  -v buildev-claude-auth:/root/.claude \
  ghcr.io/bryfar/buildev-claude:latest

Build locally:

# Base (web only)
docker build --target base -t buildev .

# With a specific CLI
docker build --target with-claude -t buildev-claude .

# Full (all CLIs)
docker build --target full -t buildev-full .

---

AI-Native Design

Prompt to UI

• Text-to-design — describe a page, get it generated on canvas in real-time with SSE streaming animation
• Orchestrator — decomposes complex pages into spatial sub-tasks for parallel generation
• Agent Teams — concurrent team members with delegate tool, per-member canvas indicators, and fallback strategies
• Design modification — select elements, then describe changes in natural language
• Vision input — attach screenshots or mockups for reference-based design
• Style Guides — apply visual styles (glassmorphism, brutalist, retro, etc.) via tag-based fuzzy matching
• Anti-slop — cross-generation diversity tracking to avoid repetitive AI output

Multi-Agent Support

Agent	Setup
Built-in (9+ providers)	Select from provider presets with region switcher — Anthropic, OpenAI, Google, DeepSeek, and more
Claude Code	No config — uses Claude Agent SDK with local OAuth
Codex CLI	Connect in Agent Settings (Cmd+,)
OpenCode	Connect in Agent Settings (Cmd+,)
GitHub Copilot	copilot login then connect in Agent Settings (Cmd+,)
Gemini CLI	Connect in Agent Settings (Cmd+,)

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.

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

MCP Server

• Built-in MCP server (pen-mcp package) — one-click install into Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs
• Auto-detects Node.js — if not installed, falls back to HTTP transport and auto-starts the MCP HTTP server
• Design automation from terminal: read, create, and modify .op files via any MCP-compatible agent
• Layered design workflow — design_skeleton → design_content → design_refine for higher-fidelity multi-section designs
• Segmented prompt retrieval — load only the design knowledge you need (schema, layout, roles, icons, planning, etc.)
• Style guide tools — get_style_guide_tags and get_style_guide for applying visual styles via MCP
• Multi-page support — create, rename, reorder, and duplicate pages via MCP tools

Code Generation

• React + Tailwind CSS, HTML + CSS, CSS Variables
• Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native

---

Features

✨ AI Vision Scanner

Drop a screenshot or mockup and convert it into editable PenNode AST nodes instantly.

flowchart LR
    Upload[Upload<br/>Screenshot/PNG/JPG]
    AI[Vision AI<br/>Claude/GPT-4o]
    Parser[JSON Parser<br/>→ PenNode AST]
    Canvas[Canvas<br/>Editable Design]

    Upload-- "base64 image" -->AI
    AI-- "structured JSON" -->Parser
    Parser-- "PenNode[]" -->Canvas

• File: apps/web/src/services/ai/vision-scanner.ts
• Accepts image data via AI chat attachments
• Returns structured PenNode[] with positions, sizes, colors, and text
• Supports context hints for better accuracy

🔁 Code Mode Autosync

Edit generated code and sync changes back to the visual canvas bidirectionally.

flowchart LR
    subgraph CanvasSide["Canvas"]
        Doc[PenDocument<br/>.op JSON]
        Renderer[CanvasKit<br/>Renderer]
    end

    subgraph CodeSide["Code Editor"]
        React[React Code<br/>src/App.tsx]
        Vue[Vue Code<br/>App.vue]
        HTML[HTML + CSS]
    end

    subgraph SyncEngine["Sync Engine"]
        Forward[Forward Sync<br/>Design → Code]
        Backward[Reverse Sync<br/>Code → Design]
    end

    Doc --> Forward --> React
    Doc --> Forward --> Vue
    Doc --> Forward --> HTML
    React --> Backward --> Doc
    Vue --> Backward --> Doc
    HTML --> Backward --> Doc
    Doc --> Renderer
    Backward -."updates canvas"-> Renderer

• Reverse parsers: React, Vue 3, HTML, generic
• Sync state: dirty/clean tracking per file
• Conflict detection: warns on simultaneous edits

🧩 Plugin System

Extensible plugin architecture built on top of the AI Skills engine.

flowchart TB
    subgraph Core["Plugin Manager"]
        Registry[Plugin Registry]
        Lifecycle[Plugin Lifecycle<br/>Init → Activate → Deactivate]
    end

    subgraph Hooks["Plugin Hooks"]
        Gen[beforeGenerate<br/>afterGenerate]
        Export[beforeExport<br/>afterExport]
        Import[beforeImport<br/>afterImport]
    end

    subgraph BuiltIn["Built-in Plugins"]
        DS[Design System]
        CG[Code Generator]
        AI[AI Skills]
        UK[UIKit]
        VS[Vision Scanner]
        CS[Code Sync]
        PV[Preview Mode]
        GT[Git Integration]
        MCP[MCP Server]
    end

    subgraph Custom["Custom Plugins"]
        P1[Marketing Plugin]
        P2[CRM Plugin]
        P3[SEO Analyzer]
        PN[...]
    end

    Registry --> Hooks
    Registry --> BuiltIn
    Registry-- "Developer API" -->Custom
    Hooks-->Lifecycle

• 9 built-in plugins pre-installed
• Phase hooks: before/after generate, export, import
• Capability system: plugins advertise what they offer
• Store: apps/web/src/stores/plugin-store.ts
• Engine: packages/pen-ai-skills/src/plugin-system.ts

🖥️ Preview Mode

Dedicated device preview for responsive testing.

flowchart LR
    Doc[PenDocument]
    HTMLGen[HTML Generator<br/>Node → HTML]
    Iframe[Preview Iframe]
    Devices[Device Simulation<br/>Mobile / Tablet / Desktop]

    Doc --> HTMLGen --> Iframe
    Devices --> Iframe

• Devices: Mobile (375px), Tablet (768px), Desktop (1280px)
• Features: Fullscreen, Auto-scale, Refresh
• File: apps/web/src/components/editor/preview-mode.tsx

🖥️ Runs Everywhere

Web app + native desktop on macOS, Windows, and Linux via Electron. Auto-updates from GitHub Releases.

flowchart LR
    subgraph Platforms["Supported Platforms"]
        Web[Web App<br/>Vite + Nitro]
        Mac[macOS<br/>Electron]
        Win[Windows<br/>Electron]
        Linux[Linux<br/>Electron]
    end

    subgraph Features["Desktop Features"]
        FileAssoc[.op File Association<br/>Double-click to open]
        AutoUpdate[Auto-update<br/>GitHub Releases]
        NativeMenu[Native Menu<br/>Save As, Open Recent]
        RecentFiles[Recent Files<br/>Persistence]
    end

    Platforms --> Features

⌨️ CLI — op

npm install -g @bryfar/buildev

op start                     # Launch desktop app
op design @landing.txt       # Batch design from file
op insert '{"type":"RECT"}'  # Insert a node
op import:figma design.fig   # Import Figma file
cat design.dsl | op design - # Pipe from stdin

flowchart LR
    subgraph Commands["CLI Commands"]
        Start[op start]
        Design[op design]
        Insert[op insert]
        Import[op import:figma]
        Export[op export]
    end

    subgraph Input["Input Methods"]
        Inline[Inline String]
        File["@filepath"]
        Stdin["- (stdin)"]
    end

    subgraph Target["Target"]
        Desktop[Desktop App<br/>Electron]
        Web[Web Server<br/>localhost:3000]
    end

    Input --> Commands
    Commands --> Target

Supports three input methods: inline string, @filepath (read from file), or - (read from stdin). Works with desktop app or web dev server. See CLI README for full command reference.

LLM Skill — install the Buildev Skill plugin to teach AI agents (Claude Code, Cursor, Codex, Gemini CLI, etc.) how to design with op.

🎯 Multi-Platform Code Export

8 frameworks from one design:

flowchart TB
    Design[One Design<br/>.op File]
    Codegen[Code Generation Engine<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

🎨 Prompt → Canvas

Describe any UI in natural language. Watch it appear on the infinite canvas in real-time with SSE streaming animation. Modify existing designs by selecting elements and chatting.

flowchart LR
    Prompt[User Prompt<br/>A landing page for SaaS]
    AI[AI Engine<br/>Streaming Generation]
    Canvas[Infinite Canvas<br/>Real-time Rendering]
    Edit[Select & Modify<br/>Natural Language]

    Prompt-- "Streaming SSE" -->AI
    AI-- "Chunk-by-chunk" -->Canvas
    Canvas-- "Select element" -->Edit
    Edit-- "Make it darker" -->AI

🤖 Concurrent Agent Teams

The 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.

flowchart LR
    User[User Prompt<br/>Landing page for SaaS]
    Orchestrator[Orchestrator<br/>Spatial Decomposition]
    
    subgraph Agents["Agent Teams"]
        A1[Agent 1<br/>Hero Section]
        A2[Agent 2<br/>Features Grid]
        A3[Agent 3<br/>Footer]
        A4[Agent N<br/>...]
    end
    
    Canvas[Canvas<br/>Real-time Streaming]

    User --> Orchestrator
    Orchestrator --> A1
    Orchestrator --> A2
    Orchestrator --> A3
    Orchestrator --> A4
    A1 --> Canvas
    A2 --> Canvas
    A3 --> Canvas
    A4 --> Canvas

• Delegate tool — agents can hand off sub-tasks to specialized peers
• Per-member canvas indicators — visual feedback for each agent's progress
• Fallback strategies — graceful degradation if an agent times out

🧠 Multi-Model Intelligence & Agent Providers

Automatically adapts to each model's capabilities across 9+ providers.

flowchart TB
    subgraph Models["Model Tiers"]
        Full[Full Tier<br/>Claude]
        Standard[Standard Tier<br/>GPT-4o, Gemini, DeepSeek]
        Basic[Basic Tier<br/>MiniMax, Qwen, Llama, Mistral]
    end

    subgraph Config["Auto-Configuration"]
        Thinking[Thinking Mode]
        Effort[Effort Level]
        Prompts[Prompt Shape]
        Timeouts[Timeouts]
    end

    subgraph Providers["9+ Providers"]
        Anthropic[Anthropic]
        OpenAI[OpenAI]
        Google[Google]
        DeepSeek[DeepSeek]
        Chinese[Chinese LLMs<br/>Kimi, Zhipu, GLM]
    end

    Models --> Config
    Config --> Providers
    Providers --> Canvas

Agent	Setup
Built-in (9+ providers)	Select from provider presets with region switcher
Claude Code	No config — uses Claude Agent SDK with local OAuth
Codex CLI	Connect in Agent Settings (Cmd+,)
OpenCode	Connect in Agent Settings (Cmd+,)
GitHub Copilot	copilot login then connect in Agent Settings
Gemini CLI	Connect in Agent Settings (Cmd+,)

🔌 MCP Server

Built-in MCP server for external AI agent integration.

flowchart LR
    subgraph CLIs["External CLIs"]
        Claude[Claude Code]
        Codex[Codex CLI]
        Gemini[Gemini CLI]
        OpenCode[OpenCode]
        Copilot[GitHub Copilot]
    end

    subgraph MCP["Buildev MCP Server"]
        Tools[Tools<br/>design, insert, update]
        Layered[Layered Workflow<br/>skeleton → content → refine]
        Segmented[Segmented Prompts<br/>schema, layout, icons]
    end

    subgraph Canvas["Buildev App"]
        Live[Live Canvas]
        API[Nitro API]
    end

    CLIs-- "MCP Protocol" -->Tools
    Tools-->Docs
    Tools-->Design
    Tools-- "HTTP" -->API
    API-->Live

• One-click install into any MCP-compatible CLI
• Layered workflow: design_skeleton → design_content → design_refine
• Segmented prompts: load only what you need (schema, layout, icons, planning)
• Style guide tools: get_style_guide_tags, get_style_guide
• Multi-page: create, rename, reorder, duplicate pages via MCP

🎨 Style Guides

50+ built-in styles with tag-based fuzzy matching. Apply visual styles to AI-generated designs.

flowchart LR
    Style[Style Guide Library<br/>50+ Styles]
    Matcher[Tag-based Fuzzy Matcher]
    AI[AI Generation<br/>Incorporates Style]
    Canvas[Canvas<br/>Styled Design]

    Style-- "tags: glassmorphism, retro..." -->Matcher
    Matcher-- "matched styles" -->AI
    AI-->Canvas
    MCP[MCP Tools<br/>get_style_guide_tags]-->Style

• Categories: glassmorphism, brutalist, retro, modern SaaS, luxury, gaming, fintech, health, editorial, and 40+ more
• MCP tools: external agents can query and apply style guides

📦 Design-as-Code

.op files are JSON — human-readable, Git-friendly, diffable.

flowchart LR
    Design[Visual Design]
    OpFile[.op File<br/>JSON Document]
    Git[Git Version Control]
    Code[Code Export<br/>8 Frameworks]
    Variables[CSS Custom Properties<br/>var(--name)]

    Design --> OpFile
    OpFile-- "Diffable" -->Git
    OpFile --> Code
    OpFile --> Variables

🖥️ Canvas & Drawing

Infinite canvas with GPU-accelerated rendering via CanvasKit/Skia WASM.

flowchart TB
    subgraph Drawing["Drawing Tools"]
        Rect[Rectangle]
        Ellipse[Ellipse]
        Line[Line]
        Pen[Pen / Bezier]
        Text[Text]
        Frame[Frame]
        Polygon[Polygon]
    end

    subgraph CanvasFeatures["Canvas Features"]
        Pan[Pan & Zoom]
        Align[Alignment Guides]
        Snap[Snapping]
        Boolean[Boolean Ops<br/>Union, Subtract, Intersect]
        Layout[Auto-layout<br/>Flexbox-like]
        Pages[Multi-page<br/>Tab Navigation]
    end

    subgraph Import["Import"]
        Icons[Iconify Icons]
        Images[PNG/JPEG/SVG/WebP/GIF]
    end

    Drawing --> CanvasFeatures
    Import --> CanvasFeatures

🎨 Design System & Variables

Full design token system with multi-theme support.

flowchart TB
    subgraph Tokens["Design Tokens"]
        Colors[Color Variables<br/>$color-1, $color-2]
        Numbers[Number Variables<br/>$spacing-md]
        Strings[String Variables<br/>$font-family]
    end

    subgraph Themes["Multi-Theme"]
        Theme1[Theme Axis 1<br/>Light / Dark]
        Theme2[Theme Axis 2<br/>Compact / Comfortable]
    end

    subgraph Components["Components"]
        Reusable[Reusable Components]
        Instances[Instances & Overrides]
    end

    subgraph Output["Output"]
        CSS[CSS Custom Properties<br/>var(--name)]
        UIKit[UIKits<br/>Import/Export .pen]
    end

    Tokens --> Themes
    Themes --> Components
    Components --> Output

🤖 AI & Agents

• Prompt-to-canvas with streaming generation and orchestrator-driven spatial decomposition
• Concurrent Agent Teams — multiple designers work in parallel with per-member indicators
• Layered workflow — design_skeleton → design_content → design_refine with focused prompts per phase
• Style Guides — 50+ built-in styles with tag-based fuzzy matching
• Multi-model capability profiles — auto-adapts thinking, effort, prompt shape per model tier
• Built-in agent runtime (agent-native, Zig NAPI) + Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, Gemini providers
• Chinese LLM providers — Kimi, Zhipu, GLM, DouBao, Ark, Bailian/DashScope, ModelScope, Coding Plans

🔗 Git Integration

Full Git version control built into the editor.

flowchart TB
    subgraph GitFeatures["Git Features"]
        Clone[Clone Wizard<br/>SSH / HTTPS]
        Branch[Branch Manager<br/>Create, Switch, Delete, Merge]
        Sync[Push / Pull<br/>Auth Retry]
        Merge[Three-way Merge<br/>Folder-mode]
    end

    subgraph Conflict["Conflict Resolution"]
        Cards[Per-node / Per-field Cards]
        Editor[Inline JSON Editor]
        Diff[Inline Diff Block]
        Bulk[Bulk Actions]
    end

    subgraph Remote["Remote"]
        SSH[SSH Key Management]
        Settings[Remote Settings UI]
    end

    GitFeatures --> Remote
    GitFeatures --> Conflict

• Clone wizard with SSH / HTTPS auth and SSH key management
• Branch picker — create, switch, delete, merge
• Pull / push cascades with auth retry and non-fast-forward handling
• Folder-mode three-way merge with on-disk MERGE_HEAD state tracking
• Conflict panel with per-node / per-field three-way cards, inline JSON editor, bulk actions, and inline diff block
• 15-locale i18n across the whole Git surface

🗄️ Export

flowchart LR
    Canvas[Canvas Export<br/>PNG / JPEG / WEBP / PDF]
    Code[Code Export<br/>8 Frameworks]
    MCP[MCP Pipeline<br/>plan → submit → assemble → clean]

    Design[Design] --> Canvas
    Design --> Code
    Design --> MCP

• Canvas export — PNG, JPEG, WEBP, PDF (Cmd+Shift+P)
• Code export — React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native
• Incremental MCP codegen pipeline — codegen_plan, codegen_submit_chunk, codegen_assemble, codegen_clean

🌀 Figma Import

Import .fig files with layout, fills, strokes, effects, text, images, and vectors preserved.

flowchart LR
    Figma[Figma .fig File]
    Parser[Binary Parser<br/>pen-figma]
    Mapper[Node Mapper<br/>Figma → PenNode]
    Canvas[Canvas<br/>Editable Design]

    Figma-- "binary" -->Parser
    Parser-- "Figma nodes" -->Mapper
    Mapper-- "PenNode[]" -->Canvas

🖥️ Electron Desktop

Native macOS, Windows, and Linux app.

flowchart TB
    subgraph Desktop["Desktop Features"]
        FileAssoc[.op File Association<br/>Double-click to open]
        SingleInstance[Single-instance Lock]
        AutoUpdater[Auto-update<br/>GitHub Releases]
        Menu[Native Application Menu<br/>Save As, Open Recent]
        Recent[Recent Files<br/>Persistence]
        Dialog[Unsaved Changes Dialog<br/>On Close]
    end

    subgraph Tech["Under the Hood"]
        Electron[Electron 35]
        Nitro[Nitro Server Fork]
        IPC[IPC Handlers<br/>File Dialogs, Theme, Prefs]
    end

    Tech --> Desktop

🎯 Editor Modes

Switch between Design Mode and IDE Mode for different workflows.

flowchart TB
    subgraph Editor["Editor"]
        TopBar[Top Bar<br/>Mode Selector]
    end

    subgraph DesignMode["🎨 Design Mode"]
        Canvas[Canvas Editor<br/>CanvasKit/Skia]
        Layers[Layer Panel]
        Properties[Properties Panel]
        AI[AI Chat Panel]
        Toolbar[Drawing Tools]
    end

    subgraph IDEMode["💻 IDE Mode"]
        Explorer[Explorer Panel<br/>Virtual File Tree]
        CodeEditor[Code Editor<br/>Monaco]
        BottomPanel[Bottom Panel<br/>Problems / Output / Terminal]
        StackAssistant[Stack Migration<br/>Assistant]
    end

    TopBar-- "Toggle" -->DesignMode
    TopBar-- "Toggle" -->IDEMode

• Design Mode — Full visual canvas with drawing tools, layer panel, properties, AI chat
• IDE Mode — Split-panel code editor with virtual file tree, Monaco editor, diagnostics, stack migration assistant (React/Vue/Astro)
• Preview — HTML preview in new tab from the top bar
• Code Sync — Bidirectional sync between code and canvas when editing generated files

🗂️ Project Dashboard

A full dashboard system for managing projects, workspaces, and drafts.

flowchart TB
    subgraph Dashboard["Dashboard (/)"]
        Nav[Sidebar Navigation]
        Grid[Project Grid]
    end

    subgraph Routes["Dashboard Routes"]
        Home[Home<br/>Recent & Local Projects]
        Workspaces["/workspaces<br/>Workspace List"]
        Workspace["/workspaces/:id<br/>Workspace Detail"]
        Drafts["/drafts<br/>Unassigned Projects"]
        Recents["/recents<br/>All Recent Files"]
        Library["/library<br/>Component Library"]
    end

    subgraph NavItems["Navigation"]
        Main[Main Section<br/>Projects, Workspaces, Drafts, Recents]
        Lib[Library Section<br/>Browse Components]
    end

    Dashboard --> Routes
    Nav --> NavItems

• Home (/) — Recent projects, local project grid, cloud projects
• Workspaces (/workspaces) — List all workspaces, create/rename/delete
• Workspace Detail (/workspaces/:id) — View workspace projects, create new, move drafts
• Drafts (/drafts) — Unassigned projects not yet in any workspace
• Recents (/recents) — All recently opened files
• Library (/library) — Component library browser

🏗️ New Project Wizard

Create projects with a 3-step wizard supporting multiple creation methods.

flowchart LR
    subgraph Step1["Step 1: Architect"]
        AI[AI Assistant<br/>Prompt-based]
        Figma[Figma Import<br/>Upload .fig]
        Reverse[Reverse UI<br/>Image to Design]
        Import[Import<br/>Git / JSON]
        Blank[Start Blank]
    end

    subgraph Step2["Step 2: Configure"]
        Name[Project Name]
        Type[Project Type<br/>landing / multisite / cms]
        Stack[Frontend Stack<br/>React / Vue / Astro]
        Backend[Backend<br/>Static / Node / Serverless]
        CMS[CMS Provider<br/>Optional]
    end

    subgraph Step3["Step 3: Review"]
        Summary[Review Summary]
        Create[Create Project]
    end

    Step1 --> Step2 --> Step3

• Step 1 — Architect: Choose how to create: AI Assistant, Figma import, Reverse UI (from image), Import from Git/JSON, or Start blank
• Step 2 — Configure: Set project name, type (landing/multisite/cms), frontend stack (React/Vue/Astro), backend (static/Node/serverless/edge), CMS provider
• Step 3 — Review: Summary of all choices before creating

🏷️ Project Types

Each project has a type that determines its template and dashboard mode.

Type	Description	Default Pages	Stack
landing	Single-page landing site	Home	Any
multisite	Multi-page website	Home, About, Contact	Any
cms	Content-managed site	Home, Blog, Article	Astro (forced)

flowchart TB
    subgraph Types["Project Types"]
        Landing[Landing<br/>Single Page]
        Multisite[Multisite<br/>Multi-page]
        CMS[CMS<br/>Content Managed]
    end

    subgraph Config["Auto-Configuration"]
        Pages[Page Structure]
        Stack[Stack Selection]
        Backend[Backend Setup]
    end

    Types --> Config
    Config --> Template[Template & Dashboard Ready]

• Landing: Single-page, any stack, lightweight setup
• Multisite: Multi-page with Home/About/Contact, flexible stack
• CMS: Forces Astro stack, includes Content/Manage/Admin sidebar navigation, provider options

📰 CMS Sidebar

CMS projects include a dedicated sidebar for content management.

flowchart LR
    subgraph CMS["CMS Sidebar"]
        Content[Content<br/>Pages, Posts, Media]
        Manage[Manage<br/>Settings, Users]
        Admin[Admin<br/>Analytics, Deploy]
    end

    subgraph Providers["CMS Providers"]
        Directus[Directus]
        Strapi[Strapi]
        Payload[Payload CMS]
    end

    Providers --> CMS
    CMS --> Editor[Editor Canvas]

• Content panel: Pages, Posts, Media management
• Manage panel: Settings, Users, Roles
• Admin panel: Analytics, Deployment, Webhooks
• Provider options: Directus, Strapi, Payload CMS

🏢 Workspaces

Organize projects into workspaces for better management.

flowchart TB
    subgraph Workspace["Workspace Features"]
        Create[Create Workspace]
        Rename[Rename Workspace]
        Delete[Delete Workspace]
        Assign[Assign / Unassign Projects]
    end

    subgraph Views["Views"]
        List[Workspaces List]
        Detail[Workspace Detail<br/>Project Grid]
    end

    Workspace --> List
    Workspace --> Detail
    Detail --> Editor[Open in Editor]

• Create/rename/delete workspaces
• Assign projects to workspaces from drafts
• Move projects between workspaces
• LocalStorage persistence for workspace registry

🧩 Embeddable SDK

pen-engine (headless) + pen-react (React UI SDK) — embed the design engine in your own app.

flowchart TB
    subgraph SDK["Buildev SDK"]
        Engine[pen-engine<br/>Headless Design Engine]
        ReactSDK[pen-react<br/>React UI SDK]
    end

    subgraph ReactComponents["React Components"]
        Provider[DesignProvider]
        Canvas[DesignCanvas]
        Hooks[useDesignEngine<br/>useDocument<br/>useActiveNode]
        Panels[PropertyPanel<br/>LayerPanel<br/>Toolbar]
    end

    Engine --> ReactSDK
    ReactSDK --> Provider
    ReactSDK --> Canvas
    ReactSDK --> Hooks
    ReactSDK --> Panels

🔐 Auth System

Built-in authentication with OAuth + JWT.

flowchart LR
    subgraph Providers["Auth Providers"]
        GitHub[GitHub OAuth]
        Google[Google OAuth]
    end

    subgraph Auth["Auth Layer"]
        JWT[JWT Tokens]
        Session[Session Management]
        Middleware[Route Protection]
    end

    subgraph Features["Features"]
        Login[Login / Register]
        Profile[User Profile]
        Permissions[Project Permissions]
    end

    Providers --> Auth
    Auth --> Features

👥 Multiplayer Collaboration

Real-time presence and collaboration.

flowchart LR
    subgraph Multiplayer["Multiplayer Features"]
        Cursors[Remote Cursors]
        Presence[User Presence<br/>Who's online]
        Sync[Real-time Sync<br/>Y.js]
    end

    subgraph UI["UI Indicators"]
        Avatars[User Avatars]
        Count[Online Count]
        Color[Color-coded Cursors]
    end

    Multiplayer --> UI

• Remote cursors with user-specific colors
• Presence avatar stack showing who's online
• Real-time document sync via WebSocket

---

Tech Stack

Frontend	React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next
Canvas	CanvasKit/Skia (WASM, GPU-accelerated)
Engine	pen-engine (headless) · pen-react (React UI SDK)
State	Zustand v5
Server	Nitro
Desktop	Electron 35
CLI	op — terminal control, batch design DSL
AI	agent-native (Zig NAPI) · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK
Runtime	Bun · Vite 7
Lint	oxlint · oxfmt
File format	.op — JSON-based, human-readable, Git-friendly

---

Project Structure

buildev/
├── apps/
│   ├── web/                    TanStack Start web app
│   │   ├── src/
│   │   │   ├── canvas/         CanvasKit/Skia engine
│   │   │   ├── components/     React UI — editor, panels, dialogs
│   │   │   ├── services/
│   │   │   │   ├── ai/         AI chat, orchestrator, vision scanner
│   │   │   │   ├── codegen/    Code generation wrappers
│   │   │   │   ├── code-parsers/  React/Vue/HTML parsers (reverse sync)
│   │   │   │   └── ide/        IDE workspace services
│   │   │   ├── stores/         Zustand — canvas, document, plugin, code-sync
│   │   │   ├── project-flow/   Dashboard, onboarding, project types
│   │   │   ├── uikit/          Reusable component kit system
│   │   │   ├── hooks/          Keyboard shortcuts, file drop, MCP sync
│   │   │   └── i18n/           15 locales
│   │   └── server/
│   │       ├── api/ai/         Nitro API — streaming chat, vision
│   │       ├── api/auth/       OAuth + JWT authentication
│   │       └── api/mcp/        MCP HTTP transport endpoints
│   ├── desktop/                Electron desktop app
│   └── cli/                    CLI tool — `op` command
├── packages/
│   ├── pen-types/              Type definitions
│   ├── pen-core/               Document tree ops, layout engine
│   ├── pen-engine/             Headless design engine
│   ├── pen-react/              React UI SDK
│   ├── pen-codegen/            8 code generators
│   ├── pen-figma/              Figma .fig parser
│   ├── pen-renderer/           Standalone CanvasKit/Skia renderer
│   ├── pen-mcp/                MCP server
│   ├── pen-sdk/                Umbrella SDK
│   ├── pen-ai-skills/          AI prompt skill engine + Plugin System
│   └── agent-native/           Native AI agent runtime (Zig NAPI)
├── scripts/                    Build and publish scripts
└── .githooks/                  Pre-commit version sync

---

Keyboard Shortcuts

Key	Action		Key	Action
V	Select		Cmd+S	Save
R	Rectangle		Cmd+Z	Undo
O	Ellipse		Cmd+Shift+Z	Redo
L	Line		Cmd+C/X/V/D	Copy/Cut/Paste/Duplicate
T	Text		Cmd+G	Group
F	Frame		Cmd+Shift+G	Ungroup
P	Pen tool		Cmd+Shift+P	Export (PNG/JPG/WEBP/PDF)
H	Hand (pan)		Cmd+Shift+C	Code panel
Del	Delete		Cmd+Shift+V	Variables panel
[ / ]	Reorder		Cmd+J	AI chat
Arrows	Nudge 1px		Cmd+,	Agent settings
Cmd+Alt+U	Boolean union		Cmd+Alt+S	Boolean subtract
Cmd+Alt+I	Boolean intersect		Cmd+Shift+S	Save As

---

Scripts

bun --bun run dev          # Dev server (port 3000)
bun --bun run build        # Production build
bun --bun run test         # Run tests (Vitest)
npx tsc --noEmit           # Type check
bun run lint               # Lint (oxlint)
bun run format             # Format (oxfmt)
bun run bump <version>     # Sync version across all package.json
bun run electron:dev       # Electron dev
bun run electron:build     # Electron package
bun run cli:dev            # Run CLI from source
bun run cli:compile        # Compile CLI to dist
bun run mcp:dev            # Run MCP server from source

---

Contributing

Contributions are welcome! See CLAUDE.md for architecture details and code style.

1. Fork and clone
2. Set up version sync: git config core.hooksPath .githooks
3. Create a branch: git checkout -b feat/my-feature
4. Run checks: npx tsc --noEmit && bun --bun run test
5. Commit with Conventional Commits: feat(canvas): add rotation snapping
6. Open a PR against main

---

Roadmap

• Design variables & tokens with CSS sync
• Component system (instances & overrides)
• AI design generation with orchestrator
• MCP server integration with layered design workflow
• Multi-page support
• Figma .fig import
• Boolean operations (union, subtract, intersect)
• Multi-model capability profiles
• Monorepo restructure with reusable packages
• CLI tool (op) for terminal control
• Built-in AI agent SDK with multi-provider support
• i18n — 15 languages
• Headless design engine (pen-engine) + React UI SDK (pen-react)
• Style Guides with tag-based matching and MCP tools
• Concurrent Agent Teams with delegate tool and canvas indicators
• Native agent runtime (agent-native — Zig NAPI)
• Git integration — clone, branch, push/pull, folder-mode three-way merge
• Canvas raster export (PNG / JPEG / WEBP / PDF)
• AI Vision Scanner — image to design
• Code Mode Autosync — bidirectional code sync
• Preview Mode — responsive device testing
• Plugin System — extensible hooks
• Collaborative editing
• Plugin marketplace

---

License

MIT — Copyright (c) 2026 bryfar

---

Built with ❤️ by the Buildev Team