.png)
1 month ago
4
Introducing a new way to design right where you code.
Available soon. Be first to get access.
Something went wrong. Please try again.
Watch 1 min demo
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
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
Design your products with pixel-perfect precision without ever leaving your IDE. Code and design are always just one tab-click apart.
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!
