Pencil

Product Overview

Pencil.dev is a pioneering design tool built for the "Vibe Coding" era. Rather than being a standalone drawing app, it functions as an extension within IDEs like Cursor and VS Code. It brings an infinite design canvas into the development environment, allowing design files to be stored in the repository and managed with Git versioning, branching, and merging. Key Features: In-IDE Design Canvas: Design with pixel-perfect precision without leaving your editor, keeping code and design just one tab-click apart. AI-Driven Generation: Use AI agents and prompts to generate screens or entire flows directly on the canvas, leveraging the Model Context Protocol (MCP) for full AI interaction. Seamless Figma Import: Supports direct copy-pasting from Figma, bringing over vectors, text, and styles intact. Design as Code: Design files reside in your repo, syncing with React/HTML code to ensure the production app stays true to the design.

Best For

Best for design-minded developers and vibe-coders who want to create and iterate on designs directly inside their code editor without switching between standalone design tools.

Key Features

• Infinite design canvas embedded directly inside VS Code and Cursor IDEs, enabling designers to create and edit within the development environment
• Design files stored as code in the repository, allowing version control, code review, and branching for design iterations alongside engineering work
• Component-linked design layers that automatically reflect changes from code updates and vice versa, maintaining bidirectional synchronization
• Export to standard design formats including SVG, PNG, and design tokens for handoff to external tools when needed
• Built specifically for the vibe coding era, enabling real-time preview of design changes alongside live code execution in the same window
• Lightweight performance-focused architecture that operates smoothly within the IDE without the bloat of standalone design applications