Claude Code Powers New AI Design Canvas
The design tool Pencil.dev has launched a new "Design Canvas" with built-in Figma-like capabilities, tightly integrated with the Claude Code AI model. The free tool allows for real-time collaborative iteration on UI/UX and code generation in a single environment, blurring the lines between design mockup and functional prototype.
- The core idea is to treat design artifacts as code by storing them in a Git repository using a JSON-based `.pen` file format, allowing for versioning, branching, and merging of designs alongside the codebase. - Founder Tom Krcha has a background that includes work on Adobe XD and two prior company acquisitions by Miro and Google, and Pencil.dev was part of Andreessen Horowitz's (a16z) Speedrun accelerator. - Unlike read-only integrations from tools like Figma, Pencil.dev provides AI agents with full read-write access to the design canvas via the Model Context Protocol (MCP), enabling direct manipulation of the design as structured data. - While currently free, the tool operates as an "overlay" for the Claude Code API, meaning users are responsible for the token costs associated with AI generation on their own Anthropic account. - The workflow differs from autonomous agents like Devin AI; Pencil.dev focuses on an in-IDE, collaborative "co-editing" experience for UI/UX, whereas Devin is designed for broader, more delegated software engineering tasks, often in a separate environment. - The `.pen` file format is an open, JSON-based structure that represents objects on the canvas, their styling (fills, strokes), and their layout using a flexbox-like system, making it human-readable and debuggable. - Early developer feedback highlights the significant reduction in the "handoff problem" between design and code and the value of versioning designs, though some users on Reddit note a learning curve and high Claude token consumption for complex tasks. - It supports copy-pasting designs directly from Figma, preserving vectors, styles, and text, which is positioned as a practical onboarding path for teams with existing design systems.
