Pencil

Pencil is an agent-driven MCP canvas that brings design capabilities directly into your coding environment. It eliminates design handoffs by allowing developers to design with pixel-perfect precision without leaving their IDE. The tool uses an open design format that lives in your codebase, enabling seamless integration between design and development workflows.

• Infinite Design Canvas - Design products with pixel-perfect precision directly in your IDE, with code and design just one tab-click apart
• AI Multiplayer - Generate screens or entire flows in parallel with AI assistance, exploring new design directions faster than ever
• Vibe Designing with Precision - Prompt entire screens or specific parts directly in context using curated actions optimized for speed and quality
• Vectors to Code - Ship production-ready apps where code stays true to the design with pixel-perfect context keeping everything aligned
• Curated Design Kits - Leverage component-based design kits to build beautiful products or plug in your team's existing design system from the codebase
• Fully Open File Format - Read, debug, or extend design files with your own tools without black box or lock-in
• Figma Import - Copy and paste designs directly from Figma with vectors, text, and styles intact
• Design as Code - Design files live in your repo, enabling version control, branching, and merging with git
• Bi-directional MCP Canvas - Full read and write access plus tools to fully operate the canvas, with ability to plug in MCPs, databases, APIs, chart data, and other agents

To get started, request early access on the Pencil website. The tool integrates with Cursor, VSCode, Claude Code, and OpenAI Codex, making it compatible with your preferred development environment.