About Pencil
Pencil is an agent-driven MCP canvas that lives in your codebase. It enables design to happen directly in your IDE for engineers and designers, keeping design and production code in one place to reduce handoffs and maintain fidelity.
Key Features
Design within the IDE helps teams iterate toward production-ready UI with fewer round-trips. It gives you direct control over the canvas, so you can explore layouts and flows before merging to code:
Bi-directional MCP vector canvas
Read and write access for MCPs, enabling integration with data sources, APIs, and other agents on the canvas.
AI multiplayer
Generate screens or flows in parallel with AI assistance to speed exploration and collaboration.
Design as code
Design files live in your repository and can be versioned, branched, and merged with Git.
Bring over designs from Figma
Copy and paste designs directly; vectors, text, and styles come over intact.
Summary
Best for frontend engineering teams, design systems squads, and product teams shipping UI components.
