AI Tool Pencil.dev Generates React Code from Figma-like Canvas
A new AI-powered tool called Pencil.dev has been released, featuring a free, cloud-based design canvas similar to Figma. The tool utilizes Claude Code to instantly generate production-ready React and Next.js code from user-created UI designs, aiming to streamline the process from prototype to MVP.
- The tool was created by Tom Krcha and is officially a product of High Agency, Inc. - While Pencil.dev is currently free during its early access period, it requires a subscription to Claude Code, which starts at $20/month, as it functions as an interface for Anthropic's models. - A key feature is its "design as code" approach, where design files reside directly in your codebase, allowing for version control, branching, and merging with Git. - It integrates into existing developer workflows by running as an extension inside IDEs like VS Code and Cursor, or as a standalone desktop application. - To streamline the transition from design to development, users can directly copy and paste vectors, styles, and text from Figma into the Pencil.dev canvas. - The platform is built on the Model Context Protocol (MCP), which allows it to connect with other tools, APIs, and databases, creating a bi-directional canvas. - This approach aims to solve the inefficiency of the traditional design-to-development handoff, which can take up 15-20% of total project time for mid-sized teams. - Competitors in the AI design-to-code space include tools like Vercel's v0, Anima, and Locofy, which also generate code from design inputs.
