Name: Pencil.dev
Price: Free

What is Pencil.dev?

Pencil.dev is a Figma-like vector canvas that runs inside your IDE or as a desktop app. Designs live as .pen files in the same workspace as your code, so they version with Git like any other file. A local MCP server lets Claude Code, Cursor and Codex read and modify those files directly, and the loop runs both ways: export to React, Next.js, Vue or Svelte, import existing components back onto the canvas, and sync design tokens with your codebase. Pencil is free because it is still in early access with no paid tiers published, so expect that to change. Your real cost is the coding agent you bring, typically around $20 a month plus API usage. There is no browser version, desktop builds target Mac and Linux, and setup means configuring an MCP.json file before anything works. Complex auto-layout arrangements often need manual adjustment after transfer, so treat exports as a strong starting point.

Key Features

IDE-integrated CanvasMCP Server IntegrationGit-versioned Design FilesFigma ImportReact Code GenerationHTML and CSS ExportClaude Code CompatibleCursor CompatibleVS Code CompatibleDesign System SupportSticky Notes as PromptsLayer PanelCSS Property EditorInfinite CanvasComponent GenerationOpen File FormatNo Cloud DependencyPixel Perfect OutputMulti-agent SupportText Manipulation

Integrations

Design

Figma

Development

GitHubCursorVS Code

How to Use Pencil.dev

1Visit pencil.dev and download or install the Pencil extension for VS Code or Cursor

2Configure the MCP.json file in your IDE settings to connect Pencil as an MCP server

3Create a new .pen file in your project directory to open the infinite design canvas

4Design your UI components visually using the canvas, layer panel, and property editor

5Optionally copy and paste existing frames from Figma to preserve styles and layout

6Open Claude Code or your AI coding assistant and describe what to build using your Pencil design as context

7The AI reads your .pen file via MCP and generates pixel-perfect production code

8Commit both your .pen design file and generated code to Git for versioned design-to-code history

✅ Best For

Frontend developers who want to design and code in the same environment
Solo developers handling both design and implementation without context switching
Teams using Claude Code or Cursor wanting visual design as AI context
Developers who want Git-versioned design files alongside code
Projects needing rapid UI iteration without switching between Figma and IDE
Design-to-code workflows requiring high fidelity between design intent and production output

❌ Not For

Designers not using an IDE-based workflow
Teams requiring real-time collaborative multiplayer design editing
Projects with complex backend logic needs beyond UI generation
Organizations needing enterprise design governance and design token management at scale

Reviews

No reviews yet. Be the first to review Pencil.dev!

Pricing

Free$0

✓Full access during early access period
✓all features included
✓requires Claude Code subscription from $20/month separately

Prompts to Try

Create a login form with email, password, and remember me checkbox using Tailwind CSS components from my design system

Build a responsive pricing table with three columns matching the layout in my Pencil canvas, output as React with TypeScript

Generate a card component with image, title, description, and CTA button based on the design in design.pen

Use Cases

A solo developer opens Pencil inside Cursor, sketches a SaaS dashboard layout on the canvas, and asks Claude Code to build all components matching the design, getting pixel-perfect React code in minutes

A frontend team imports their Figma design system components into Pencil, commits the .pen file to Git, and uses it as the single source of truth for all UI generation

A freelancer designs a client landing page in Pencil during a meeting and deploys a working prototype before the call ends

An agency manages multiple client design files as Git branches in Pencil, merging design changes alongside code changes in standard pull requests

Alternatives to Pencil.dev

Builder.ioAI Coding

Freemium

AI frontend engineer that converts Figma designs into production-ready code and lets engineering, design, and content teams ship visuals without handoffs.

Visit Website →

ConvexAI Coding

Freemium

TypeScript backend platform that keeps your app always in sync, with real-time queries, built-in auth, and AI-optimized code generation for full-stack developers.

Visit Website →

KiroAI Coding

Freemium

Agentic AI IDE by Amazon with spec-driven development, structured requirements, agent hooks, and CLI support for building production-quality software.

Visit Website →