Pencil.dev - Infinite Design Canvas for Claude Code

Research Date: 2026-01-28 Source URL: https://x.com/tomkrcha/status/2014028990810300498

Reference URLs

• Pencil.dev Official Website
• Tom Krcha LinkedIn Announcement
• Tom Krcha Threads Post
• a16z Speedrun Company Profile
• The Rundown AI - Pencil Tool Entry
• Stacker News Discussion

Summary

Pencil.dev is an agent-driven infinite design canvas that integrates directly into code editors, eliminating the traditional handoff between design and development workflows. Founded by Tom Krcha in 2025 and backed by Andreessen Horowitz through their Speedrun accelerator program, Pencil operates as an MCP (Model Context Protocol) server that enables AI coding agents to create, read, and modify design files stored in version-controlled JSON format.

The tool addresses a persistent friction point in software development: the separation between visual design tools and code editors. By embedding a WebGL-powered canvas directly within IDEs like Claude Code, Cursor, and VSCode, Pencil allows developers to design interfaces and immediately generate corresponding code through the same AI agent that handles their programming tasks. Design files use a JSON-based .pen format that lives alongside source code in git repositories, enabling version control, code review, and collaborative workflows identical to those used for code.

The January 2026 launch announcement highlighted parallel design agents, a feature suggesting Pencil can spawn multiple concurrent design operations similar to how Claude Code manages parallel task execution. This positions Pencil as infrastructure for agentic UI development rather than a traditional design tool.

Main Analysis

Technical Architecture

Pencil operates through the Model Context Protocol, Anthropic’s open standard for connecting AI models to external tools and data sources. This architecture enables bidirectional communication between the AI agent and the design canvas.

The MCP integration requires minimal configuration. For Cursor, developers create a .cursor/mcp.json file pointing to Pencil’s MCP server URL. The server connects via local stdio, avoiding complex deployment requirements. Once configured, users can invoke the canvas through natural language commands such as “Open pencil canvas” in the chat interface.

WebGL Canvas Engine

The canvas layer uses WebGL for rendering, providing hardware-accelerated graphics performance. A notable community question from the LinkedIn announcement asked why Pencil chose vector/WebGL over DOM-based rendering. While the response was not captured in available sources, WebGL offers advantages for infinite canvas applications:

The “infinite canvas” paradigm follows established patterns from tools like Figma, Miro, and Excalidraw, where the viewport represents a window into a theoretically unbounded coordinate space.

The .pen File Format

Design files use a JSON-based .pen format. Specific schema documentation was not publicly available at research time, but the format’s characteristics can be inferred from the product description:

1. JSON foundation: Human-readable and diff-friendly for version control
2. Git-compatible: Files reside in repositories alongside source code
3. Agent-readable: AI models can parse and generate design content programmatically
4. Open specification: Described as an “open design format” in marketing materials

This approach contrasts with proprietary binary formats used by traditional design tools. A JSON foundation enables several agentic workflows:

• AI agents can read design specifications to understand UI intent
• Agents can modify designs programmatically in response to natural language requests
• Changes appear in git diffs, enabling design review alongside code review
• Multiple agents can potentially operate on different portions of a design file

Parallel Design Agents

The launch announcement referenced “running parallel design agents,” suggesting Pencil supports concurrent design operations. This aligns with Claude Code’s Task tool architecture, which can spawn multiple specialized subagents for parallel work.

Parallel design agents could enable scenarios such as:

• Simultaneous work on multiple UI components
• Concurrent exploration of design variations
• Parallel implementation of responsive breakpoints
• Distributed work across large design systems

The exact mechanism for agent coordination and conflict resolution was not documented in available sources.

IDE Integration Matrix

Pencil supports multiple development environments through its MCP-based architecture:

A LinkedIn comment confirmed functionality: “Works perfectly in VSCode for me!” This cross-IDE compatibility stems from MCP’s design as a universal protocol rather than IDE-specific plugin architecture.

Design-to-Code Workflow

The core value proposition centers on eliminating design handoffs. Traditional workflows require:

1. Designer creates mockup in Figma or similar tool
2. Developer interprets design visually
3. Developer writes code approximating the design
4. Multiple rounds of revision to match design intent

Pencil’s workflow compresses this cycle:

Users report that prototyping and initial code generation that previously required an hour can be completed in approximately twenty minutes. The canvas and code window can operate in split-screen mode, enabling real-time observation of how visual changes translate to code.

Interaction Logic Visualization

Beyond static design, Pencil supports interaction flow specification. Developers can draw arrows labeled with actions such as “Click to open modal,” and the AI agent generates corresponding event-binding code. This represents a shift from designing appearance alone to designing behavior.

Founder Background

Tom Krcha brings relevant experience to Pencil’s development:

This background spans video communication, avatar technology, and design tooling. The Around acquisition by Miro and Alter acquisition by Google demonstrate track record with successful exits. Adobe XD involvement indicates direct experience building professional design software.

Krcha’s stated expertise areas include product development, UX/UI design, machine learning, 3D graphics, AR, and audio/video technologies. The combination of design tool experience and ML knowledge positions him to understand both the design workflow problems and the AI agent capabilities relevant to Pencil’s solution.

Funding and Company Details

Pencil.dev participated in a16z Speedrun’s fifth cohort (SR005), Andreessen Horowitz’s early-stage accelerator. The program provides:

The company operates from California with a nine-person team as of the Speedrun profile publication. The “AI,” “Developer Tools,” and “Creative Tools” industry tags reflect the product’s positioning at the intersection of these domains.

Market Context

Pencil enters a market with established design tools (Figma, Sketch, Adobe XD) and emerging AI-native alternatives. The differentiation centers on several factors:

Integration point: Unlike standalone design tools, Pencil lives inside the code editor. This eliminates context switching and enables the AI agent to maintain continuous awareness of both design and code state.

File format philosophy: Open JSON format versus proprietary binary formats. This enables version control, AI readability, and ecosystem extensibility.

Agent-native architecture: Built for AI agent operation rather than retrofitted with AI features. The MCP foundation assumes AI agents as primary users alongside human operators.

Local execution: Runs locally with Claude Code, addressing data privacy concerns compared to cloud-only design tools.

Technical Questions from Community

The LinkedIn announcement generated technical questions revealing areas of interest:

1. Vector/WebGL choice over DOM: The architectural decision for WebGL rendering drew curiosity. WebGL enables performance and flexibility advantages for infinite canvas rendering.

2. Local LLM integration: Questions about whether local language models could power the design agents suggest interest in fully offline or private deployment scenarios.

3. Mobile app design support: Queries about whether Pencil supports mobile application design workflows indicate demand beyond web development.

4. Format pipeline details: Czech-language questions about how the .pen descriptor translates to CSS, JavaScript, and HTML suggest interest in the code generation mechanics.

5. JSON-to-web conversion: Questions about whether Claude Code converts JSON representations to web output clarify the code generation architecture.

Key Findings

• Pencil.dev operates as an MCP server providing AI agents with design canvas capabilities directly within code editors
• The .pen file format uses JSON for git-compatible, agent-readable design storage
• WebGL powers the infinite canvas for hardware-accelerated rendering at scale
• Parallel design agents enable concurrent work on multiple design elements
• Tom Krcha’s background includes two successful acquisitions (Around to Miro, Alter to Google) and Adobe XD co-founding
• a16z Speedrun investment provides 500K initial plus 500K follow-on commitment with over 5M in credits
• Cross-IDE support via MCP enables Cursor, VSCode, Claude Code, and Windsurf integration
• Design-to-code workflow eliminates traditional handoff, with users reporting 3x speedup on prototyping tasks

References

1. Pencil.dev Official Website - Primary product site
2. Tom Krcha LinkedIn Post - Launch announcement with 2,671 likes and 357 comments
3. a16z Speedrun Company Profile - Accelerator program details
4. Stacker News Discussion - Community discussion on Pencil for Cursor
5. The Rundown AI Tool Entry - Tool directory listing
6. Tom Krcha Threads Post - Video announcement