Pencil

WHAT IS IT?

Pencil is a vector design tool available as an IDE extension (VS Code, Cursor) or a standalone desktop app (macOS, Linux, Windows). It brings an infinite design canvas with AI-driven pixel-perfect HTML/CSS/React component generation. Design files use the open .pen format, live in your repo, and version with Git just like any other source file.

WHY IS IT INTERESTING?

• Design inside your IDE: No more juggling between Figma and your editor. The canvas is one tab away from your code, zero friction.
• Bidirectional MCP: Pencil runs a local MCP server with full read AND write access. You can plug in other MCPs, databases, APIs, or external agents directly into the canvas.
• Open file format: .pen files are readable, debuggable, and extensible. No black box, no vendor lock-in. Everything lives in the repo.
• AI multiplayer: Spin up multiple agents in parallel to generate screens or explore design directions simultaneously.
• Figma import: Copy-paste designs straight from Figma. Vectors, text, and styles come over intact.
• Built-in brand kits: Curated component-based design kits ready to use, or plug in your own design system from the codebase.

USE CASES

• Prototype interfaces directly in Cursor or VS Code without leaving your development context
• Generate production-ready React/HTML/CSS code from vector mockups
• Version design files with Git alongside your source code
• Connect external data sources (APIs, databases) to the canvas via MCP for dynamic mockups