Pencil puts Claude Code on an infinite canvas

For years, the handoff between design and engineering has felt like translating between two different planets. Designers tweak pixels in a separate app, engineers squint at specs in VS Code, and minor copy changes trigger endless Slack threads.

A new tool called Pencil wants to end that friction for good. It brings a full vector-based infinite canvas straight into your development environment (IDE), powered under the hood by Claude Code. You do need to log in with Claude Code to run it, but once inside, design and codebase finally share the exact same room.

Designing inside the codebase

Traditional design apps live completely detached from production code. Pencil flips that around by embedding an infinite canvas directly where developers actually work.

Because the canvas is infinite, teams are not boxed in by fixed artboards. You can sketch out multi-page user flows, zoom out to view an entire design system, or zoom in to inspect a single component. It lets you import existing Figma files or simply start drawing from scratch.

Crucially, it is interactive. If a button color looks off or some body copy needs tweaking, you just click and edit it manually right on the canvas. Claude Code takes care of syncing those visual adjustments directly back to your live codebase, while tossing in suggestions for responsiveness, performance, and accessibility along the way.

Fixing Claude's blue-purple habit

Anyone who has prompted Claude to build a landing page knows its stubborn design quirk: left to its own devices, it almost always defaults to a generic blue-and-purple palette.

Pencil dodges this by shipping with several pre-built UI component libraries. When Claude generates frontend code, it is forced to stay within the boundaries of the chosen kit, keeping layouts clean and production-ready.

There is an interesting comparison to be made with Google's Stitch. Stitch forces developers to jump into raw code whenever something needs changing, whereas Pencil gives you visual, hands-on canvas manipulation. On the flip side, Pencil's current style options are fairly limited, while Gemini inside Stitch tends to deliver higher aesthetic variety. Still, the buzz on X and LinkedIn has been loud, with engineers praising how much faster prototype cycles feel.

Why it matters

We think Pencil nails a fundamental truth: frontend development has always suffered inside pure chat boxes and terminal prompts. Code that produces visual interfaces needs visual manipulation.

For solo builders and full-stack developers, this is an immediate win. You no longer have to waste hours wrestling with CSS margins or manually translating design tokens. Being able to drop in a Figma file, tweak copy on a canvas, and trust the AI to write clean, synced code makes rapid prototyping genuinely fun again. It is definitely worth testing if you spend heavy hours in the IDE.

Across the industry, the race is shifting from generative text prompts to bidirectional, canvas-first workflows, often dubbed Vibe Design. Pencil's decision to constrain Claude within vetted component libraries is smart because it prevents hallucinated styling.

The real test will be whether the team can expand its component catalog fast enough before apps built with it start looking repetitive. Tethering the entire utility to Claude Code logins is also a friction point. But bridging the gap between visual design and IDE code in a single window is unquestionably the right trajectory.