BACKED BY
Design Mode
for Cursor
Introducing a new way to design right where you code.
Available soon. Be first to get access.
Design right where you code. No more design handoffs.
Pencil is agent driven MCP canvas built around open design format that lives in your codebase.
Cursor
VSCode
Claude Code
OpenAI Codex
Any IDE of
your choice
DESIGN CANVAS
Infinite design canvas
Design your products with pixel-perfect precision without ever leaving your IDE. Code and design are always just one tab-click apart.
AI MULTIPLAYER
A crew of extra hands that's got your back.
AI singleplayer is the new multiplayer.
Get extra hands to help you generate screens or entire flows in parallel. Work side by side to explore new directions faster than ever.
SPEED & PRECISION
Vibe designing
with precision
Prompt entire screens or specific parts directly in context. Use curated actions optimized for speed and quality, or write your own from scratch.
From vectors
to code.
Pixel perfect.
Ship production ready apps where code stays true to the design. Pixel perfect context keeps everything aligned. Design and code live under one roof—in your repo.
Pencil
HTML/CSS/React/<code of choice>
Curated design kits packed in or bring your own
Leverage curated, component based design kits to build beautiful products. Get the craft and taste of a senior designer at your fingertips, or plug in your team's existing design system straight from the codebase.
Fully open file format
Read, debug, or extend design files with your own tools. No black box, no lock-in.
Bring over designs from Figma
Copy and paste designs directly from Figma. Vectors, text, and styles come over intact.
Design as code
Design files live in your repo. Version, branch, and merge with git just like you do in development.
The bi-directional MCP vector canvas you've been dreaming about
Pencil doesn't provide just MCP reading tools, but also full write access + many other handy tools to fully operate the canvas. This is the real magic. You can plug-in the whole world of MCPs, bring in data from other sources like databases, APIs, chart data, Playwright/Puppeteer or plugin other agents easily. You are in charge!