Pencil (pen.dev)

Design canvas wired to your agent via MCP

FreeAI design builderspen.dev

What it is

A Figma-like canvas inside Cursor/VS Code/Windsurf, storing designs as JSON .pen files inside your project folder so they are git-versioned next to the code. Runs as an MCP server, so the agent reads the canvas as structured design context rather than as an image. Two-way: you can import existing components back onto the canvas.

Why it earns a slot

Names your exact stack as a first-class target — React + Tailwind + shadcn/ui. Draw the article template, and the drawing becomes real components. Because the .pen file lives beside the code, the design and the build cannot silently drift.

Know before you commit

Requires a local checkout via Lovable's GitHub sync — cannot touch the browser editor. Domain is mid-rename (pencil.dev → pen.dev), early access, no published pricing commitment.

Getting started

MCP server; assumes Claude Code as the agent

Field notes

0 from the community

Loading notes…

Field check

Unverified

Pricing snapshot

Free during early access

Snapshots move fast — verify at checkout, and post a field note if it changed.

Drop into your Lovable chat

Evaluate Pencil (pen.dev) (https://www.pen.dev/) for this project, then use it only if it fits what we are already building.
Context: Design canvas wired to your agent via MCP. A Figma-like canvas inside Cursor/VS Code/Windsurf, storing designs as JSON .pen files inside your project folder so they are git-versioned next to the code. Runs as an MCP server, so the agent reads the canvas as structured design context rather than as an image. Two-way: you can import existing components back onto the canvas.
Reviewer notes (general, not written for this codebase): Names your exact stack as a first-class target — React + Tailwind + shadcn/ui. Draw the article template, and the drawing becomes real components. Because the .pen file lives beside the code, the design and the build cannot silently drift.
Watch out for: Requires a local checkout via Lovable's GitHub sync — cannot touch the browser editor. Domain is mid-rename (pencil.dev → pen.dev), early access, no published pricing commitment.
Pricing: Free during early access
Setup: MCP server; assumes Claude Code as the agent
Rules: treat the notes above as background only. Do not assume a theme, style, layout or feature that is not already in this project — inspect the existing code first and ask me before changing visual direction.

/api/public/tools/pencil

Neighbourhood

How Pencil (pen.dev) sits against the rest of the atlas — swaps, companions and the tools builders actually save alongside it.