Pencil.dev Releases Free, AI-Integrated Design Canvas
Pencil.dev has launched a new design canvas with a Figma-like user interface that is available for free. The tool is built to integrate with Anthropic's Claude Code, enabling a workflow where AI can assist directly with design and prototyping tasks. A demonstration video showcases how the tool can accelerate iteration cycles for product teams by bridging design and code generation.
- Pencil.dev aims to solve the design-to-development handoff problem, which can consume 15–20% of total project timelines in mid-sized teams according to 2024 research from McKinsey. It does this by embedding its design canvas directly into a developer's existing IDE. - Unlike many AI design tools that generate static images or incomplete code, Pencil.dev outputs production-ready HTML, CSS, and React components in real time as a user designs. The design files use an open `.pen` format and are stored directly in the code repository, allowing them to be versioned, branched, and merged using Git. - The tool integrates with AI coding assistants like Claude Code, Cursor, and OpenAI Codex through a locally running Model Context Protocol (MCP) server. This protocol gives the AI agents direct "write access" to the design canvas, allowing them to programmatically modify designs based on prompts. - To bridge the gap with existing workflows, Pencil.dev supports copy-pasting designs directly from Figma while preserving style properties, vectors, and text. - The founder, Tom Krcha, has a background in product, design, and machine learning, with two previous successful exits: video call company Around (acquired by Miro) and avatar startup Alter (acquired by Google). - Pencil.dev is part of Andreessen Horowitz's (a16z) Speedrun accelerator program. Its free-to-use model is a common strategy in the competitive AI developer tool market to accelerate user adoption and gather usage data for product refinement. - The tool operates as an extension for IDEs like VS Code and Cursor, rather than a standalone application, a choice made to integrate into existing developer habits. While the tool itself is currently free, using the AI features requires a subscription to an underlying service like Claude Code, which starts at $20/month. - Beyond generating UI from prompts, the canvas can be used as an "agent workspace" where sticky notes can be converted into runnable prompts to implement design edits, differentiating it from a static design file with a simple chat interface.
