← all repositories
ZSeven-W/openpencil

Figma meets CI/CD: a design tool you can pipe from stdin

OpenPencil turns natural language prompts into live UI on an infinite canvas, then exports to React, Flutter, or whatever your stack demands.

3.3k stars TypeScript Creative · DesignAgentsApp Builders
openpencil
Velocity · 7d
+30
★ / day
Trend
steady
star history

What it does OpenPencil is an open-source vector design tool built around AI generation rather than manual drawing. You describe a UI in plain text, watch it stream onto an infinite canvas, then tweak by chatting with the selection. It exports to React + Tailwind, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, or React Native. There’s also a CLI (op) that accepts piped input, an MCP server for terminal-based agents, and an embeddable SDK (pen-engine / pen-react) if you want the renderer in your own app.

The interesting bit The “Agent Teams” feature splits a complex page into spatial sub-tasks—hero, features, footer—and dispatches multiple AI agents to work in parallel, each with its own canvas indicator. The orchestrator also adapts prompts per model capability: Claude gets full reasoning prompts, GPT-4o and Gemini lose the thinking tags, and smaller models (Qwen, Llama, MiniMax) receive simplified nested-JSON instructions. It’s a pragmatic admission that not all LLMs are created equal.

Key highlights

  • .op files are plain JSON—diffable, Git-friendly, and generate CSS custom properties on export
  • One-click MCP server install into Claude Code, Codex, Gemini CLI, OpenCode, Kiro, or Copilot CLI
  • Docker variants bundling specific AI CLIs (Claude, Codex, Copilot, etc.), up to ~1 GB for the full kitchen sink
  • Desktop builds via Electron for macOS, Windows, Linux; web app runs on Bun
  • 15-language UI localization, which is unusually thorough for a 3k-star project

Caveats

  • The README notes a name collision: another “OpenPencil” project exists with Figma-compatible real-time collaboration, so check which repo you’re actually starring
  • Several Docker image sizes are listed as “—” rather than actual numbers, and the agent-native component optionally requires Zig 0.14 to build from source
  • The canvas feature list trails off mid-sentence in the provided README (“Auto-layout — vertical/horizontal with gap,”), suggesting the docs are still being written

Verdict Worth a look if you treat design as a generative step in your build pipeline rather than a handcrafted artifact. Skip it if you need mature real-time multiplayer editing or deeply precise vector tooling—this is AI-native first, traditional-design second.

heatdrop uses Google Analytics to see which pages get read — nothing else. Your call. How we handle data.