Pencil
Officially listedAn agent-driven design canvas inside Cursor, VSCode, and Claude Code that converts vector designs into production HTML, CSS, and React code.
Pencil
Pencil is an agent-driven MCP design canvas integrated directly into mainstream IDEs like Cursor, VSCode, and Claude Code. Developers can design without leaving the code editor, with design files stored in the code repository and git version control.
Core Capabilities
- Infinite canvas: Pixel-precise design inside the IDE, switching between design and code in one click
- AI multi-agent collaboration: AI generates multiple screens and flows in parallel, accelerating design exploration
- Vector-to-code: Automatically converts designs into production-grade HTML, CSS, and React code
- Design kits: Built-in curated component library, or import your own design system
- Open format: Design files are readable and extensible, with no black-box lock-in
Use Cases Rapid prototyping, product design, front-end development. Especially suited to full-stack developers, indie developers, and teams using AI coding tools.
Unique Advantages Bidirectional MCP support is the core highlight: AI agents can not only read designs but fully control the canvas. Connect databases, APIs, Playwright, and other external tools to truly achieve design-as-code.
Editor's Recommendation For developers fed up with design handoff processes, Pencil offers a revolutionary solution. Design files and code living together in a git repository is the future of design workflows in the AI era.
Pricing
### 定价模式：早期访问 **起步价**：免费下载 目前处于早期访问阶段，可免费使用。
FAQ
Is Pencil free?
It is currently in early access and free to download and use. Paid features may be introduced in the future.
What are Pencil's main features?
Core features include an infinite design canvas, AI multi-agent collaboration, vector-to-code conversion (HTML/CSS/React), design kits, Figma import, and git version control.
Which IDEs does Pencil support?
It supports mainstream AI coding IDEs such as Cursor, VSCode, Claude Code, and OpenAI Codex.
How does Pencil differ from Figma?
Pencil deeply integrates with the IDE, storing design files in the code repository with git version control. Bidirectional MCP support lets AI agents fully control the canvas rather than merely read designs.
Is Pencil suitable for developers?
It is built for developers. Design without leaving the IDE, with designs automatically converted into production-grade code, eliminating the design handoff process.
What's special about Pencil's MCP support?
It provides bidirectional MCP read/write, so AI agents can fully control the canvas. It also supports connecting databases, APIs, Playwright, and other external tools for a high degree of automation.