pencil

What is Pencil?

Pencil is an infinite design canvas designed to bridge the gap between design and development. It is an agent-driven MCP (Model Context Protocol) canvas that allows developers and designers to work directly within their IDE (like Cursor or VSCode). It uses an open design format that resides directly in the codebase, eliminating traditional "design handoffs."

Key Features

• Infinite Design Canvas: A pixel-perfect canvas integrated into your IDE, keeping code and design one tab-click apart.
• AI Singleplayer/Multiplayer: Uses AI agents to help generate screens or entire flows in parallel, acting as a "crew of extra hands."
• Vibe Designing: Allows users to prompt entire screens or specific components directly in context using curated actions.
• Bi-directional MCP Access: Provides full read/write access to the canvas, allowing integration with databases, APIs, and other agents.
• Figma Integration: Supports copying and pasting designs directly from Figma while maintaining vectors, text, and styles.
• Design as Code: Design files are versioned, branched, and merged using Git, just like standard source code.

Use Cases

• Rapid Prototyping: Quickly generating UI flows using AI prompts inside the development environment.
• Closing the Handoff Gap: Engineering teams can maintain design systems and UI layouts within the same repository as the application code.
• AI-Augmented Design: Using MCP-connected agents to pull real data from APIs or databases directly onto the design canvas.
• Collaborative Development: Teams can "vibe design" together with AI to explore multiple directions faster than traditional manual editing.

FAQ (Inferred from Content)

• Which IDEs are supported? It supports Cursor, VSCode, Claude Code, and any IDE of your choice via MCP.
• Is there vendor lock-in? No. Pencil uses a fully open file format, allowing you to read, debug, or extend design files with your own tools.
• How do I ship designs to production? Pencil focuses on "From vectors to code," ensuring that the generated code (HTML/CSS/React) stays true to the design.