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.