Pencil – Design on canvas. Land in code.
Source: https://www.pencil.dev/
Meta
- OG description: "Pencil fundamentally increases your engineering speed by bringing designing directly into your preferred IDE."
- Company: High agency, inc. (copyright 2026)
- Pricing: Currently free. "In the future, we may introduce paid features or plans. If we do, we'll clearly describe the terms and pricing before you're charged."
Full Page Content (extracted via surf from client-rendered Next.js app)
Hero
Dream on canvas. Land in code.
Introducing a new way to design right where you code.
[Request Access] [Download Pencil] [Join our Discord] [Watch 1 min demo]
Backed by [unspecified backers].
Core Positioning
Design right where you code. No more design handoffs.
Pencil is an agent-driven MCP canvas built around an open design format that lives in your codebase.
Supported IDEs: Cursor, VSCode, Claude Code, OpenAI Codex, "Any IDE of your choice"
Feature Sections
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.
Output formats: Pencil file, HTML, CSS, React
Brand kits — 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 MCP Angle
The bi-directional MCP vector canvas you've been dreaming about.
Pencil doesn't just provide 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 plug in other agents easily. You're in charge!
[Prompt Gallery]
Distribution
- Add to Cursor
- Add to VSCode
- Pencil on OPENVSX
Footer
Privacy Policy | Terms of use | EULA © 2026 High agency, inc.