New Browser-Based Design Tool Pencil.dev Launched
A new browser-based design tool called Pencil.dev has been released, featuring a collaborative canvas with Figma-like interface elements. The free platform also integrates an AI assistant named "Claude Code" to support code generation. Such tools could influence future Model-Based Systems Engineering (MBSE) workflows by enabling rapid, cloud-native prototyping and architecture visualization.
- Pencil.dev is not a standalone browser-based application, but rather an extension that integrates directly into IDEs like VS Code and Cursor, or runs as a desktop app. This embeds the design canvas within the developer's existing coding environment, generating production-ready code in real-time. - The founder of Pencil.dev is Tom Krcha, who previously co-founded Alter (acquired by Google) and worked on the video collaboration tool Around (acquired by Miro). The company is backed by the venture capital firm Andreessen Horowitz (a16z). - A core technical feature is that designs are saved as `.pen` files directly within a project's repository, allowing visual designs to be version-controlled, branched, and merged using Git, just like source code. - The tool allows direct copy-pasting of design assets from Figma while preserving style properties, colors, and layer hierarchies. One test of a button component with eight variants showed that padding and border-radius were accurate to within a 1px tolerance after being imported. - While the Pencil.dev tool is currently free during its early access period, the AI-driven code generation relies on the user's own subscription to an underlying large language model. For example, using the "Claude Code" assistant requires a paid subscription to Anthropic's services, which starts at $20/month. - The platform operates on a Model Context Protocol (MCP) architecture, which allows the design canvas to programmatically interact with various AI coding agents, not just Claude Code. This enables developers to use natural language prompts to generate and modify UI components from different design systems. - The tool is positioned as a bridge to reduce friction in the design-to-development handoff, a phase that can consume 15-20% of total project timelines according to 2024 research from McKinsey.
