toolspool
Pencil logo

Pencil

pencil.dev

Agent-driven design canvas integrated into your IDE for speed and pixel-perfect code alignment.

What it does

Pencil is an agent-driven Multi-Channel Platform (MCP) canvas designed to fundamentally increase engineering speed by integrating design directly into the preferred Integrated Development Environment (IDE), such as VSCode and Cursor. It promotes 'Design right where you code' by utilizing an open design format that lives within the codebase. Pencil offers an infinite design canvas, AI multiplayer capabilities for parallel screen generation, precision tools for prompting, and a vector-to-code workflow to ship pixel-perfect, production-ready applications where code and design are always aligned and versioned with Git.

Core features

Design canvas integrated directly into the IDE (VSCode/Cursor)
Agent-driven MCP canvas based on open design format
AI Multiplayer for generating screens and flows in parallel
Design as Code: Design files live in repo, versioned with Git
Pixel-perfect vector-to-code workflow

Best for

→Designing new products and features with pixel-perfect precision without leaving the development environment.
→Eliminating design handoffs by having design and code live under one roof.
→Accelerating workflow by using AI multiplayer to generate UI components and flows.
→Shipping production-ready apps with guaranteed code-design alignment.
→Integrating existing design systems directly from the codebase.
Toolspool rankingby monthly traffic

Reviews

Big-picture takes: what it's for and whether it delivers. High-engagement YouTube videos — not sponsored.

How I Turned Claude Into a Design Tool with Pencil.dev
Better Stack · 84K views
Pencil: 01 Vibe Design with Pencil and Claude Code
Christopher Deane · 76K views
The Greatest AI Design System I've Ever Used! (Pencil.dev)
WorldofAI · 71K views