Design Mode for Cursor

Introducing a new way to design right where you code.

Available soon. Be first to get access.

We’ll be in touch.

Something went wrong. Please try again.

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

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!