Pencil.dev - Design in your IDE

Pencil.dev is an AI-native design tool that lives directly inside your IDE. It bridges the gap between design and development by putting both in the same environment.

What it is

Pencil is a vector design tool that integrates into VS Code, Cursor, and other IDEs. Instead of using a separate design app like Figma, you design right next to your code. Design files (.pen files) live in your repository and are version controlled with Git.

How it works

1. Install Pencil - Download from pencil.dev (Mac, Windows, Linux supported)
2. Open in IDE - Pencil canvas opens as a panel in VS Code or Cursor
3. Design - Create UI layouts using the visual editor
4. AI generation - Connect Claude Code via MCP to convert designs to React, HTML, CSS
5. Sync - Design and code stay in sync

Key features

• .pen files - Plain JSON design files that live in your repo
• Design as code - Version control your designs with Git
• MCP integration - Uses Model Context Protocol to let AI read your visual layouts
• UI kits - Supports ShadCN and other component libraries
• Import/Export - Bring designs in, export to code

Supported IDEs

• VS Code
• Cursor
• Windsurf
• Any IDE that supports extensions

Example workflow

1. Design a button or card in Pencil canvas
2. Ask Claude Code (via MCP) to “generate code from this design”
3. Get pixel-perfect React/HTML/CSS output
4. Design updates automatically reflect in generated code

It feels like what Cursor did for coding - but for design. Called “vibe coding for UI.”

Check pencil.dev for more.