Pencil

Pencil (pencil.dev) is an AI-native design tool that runs inside VS Code and Cursor as an extension. It solves the costly design-to-development handoff problem by keeping design files directly inside the Git repository.

Features

• Infinite Vector Canvas in the IDE: Pencil embeds a full vector canvas inside VS Code and Cursor. Developers design visually without switching to external tools like Figma.
• .pen File Format: Designs are saved as .pen files directly in the project repo. Both humans and AI agents can read these files natively.
• AI Prompt-to-UI Generation: Users type natural language prompts to generate UI components. Commands like "create a login form" produce structured layout output instantly.
• Figma Import via Copy-Paste: Teams can copy designs from Figma and paste them into Pencil. Layers, styles, and spacing are preserved during the transfer.
• MCP Integration for AI Coding Tools: Pencil supports Model Context Protocol (MCP) connections. Users can plug in tools like Claude Code to implement designs into their own tech stack.

Use Cases

• For Solo Developers: Build and iterate on UI screens without hiring a designer or leaving the IDE environment.
• For Small Dev Teams: One person can handle design and development together, reducing handoff delays and miscommunication.
• For Vibe Coders: Quickly explore product ideas using AI prompts and canvas-based editing without writing manual CSS.
• For Teams Migrating from Figma: Import existing Figma components and continue working inside a Git-native, code-first workflow.

Pencil.dev is a focused IDE-native design tool that connects visual design directly to code through AI and version-controlled .pen files. It currently requires a Claude Code subscription ($20/month) to access AI generation features, though the Pencil extension itself is free.