{"product_id":"pencil","title":"Pencil","description":"\u003cp\u003ePencil (pencil.dev) is an AI-native design tool that runs inside VS Code and Cursor as an extension. It solves the costly design-to-development handoff problem by keeping design files directly inside the Git repository.\u003c\/p\u003e\n\n\u003ch2\u003eFeatures\u003c\/h2\u003e\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eInfinite Vector Canvas in the IDE:\u003c\/strong\u003e Pencil embeds a full vector canvas inside VS Code and Cursor. Developers design visually without switching to external tools like Figma.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003e.pen File Format:\u003c\/strong\u003e Designs are saved as \u003ccode\u003e.pen\u003c\/code\u003e files directly in the project repo. Both humans and AI agents can read these files natively.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eAI Prompt-to-UI Generation:\u003c\/strong\u003e Users type natural language prompts to generate UI components. Commands like \"create a login form\" produce structured layout output instantly.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eFigma Import via Copy-Paste:\u003c\/strong\u003e Teams can copy designs from Figma and paste them into Pencil. Layers, styles, and spacing are preserved during the transfer.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eMCP Integration for AI Coding Tools:\u003c\/strong\u003e Pencil supports Model Context Protocol (MCP) connections. Users can plug in tools like Claude Code to implement designs into their own tech stack.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch2\u003eUse Cases\u003c\/h2\u003e\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eFor Solo Developers:\u003c\/strong\u003e Build and iterate on UI screens without hiring a designer or leaving the IDE environment.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eFor Small Dev Teams:\u003c\/strong\u003e One person can handle design and development together, reducing handoff delays and miscommunication.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eFor Vibe Coders:\u003c\/strong\u003e Quickly explore product ideas using AI prompts and canvas-based editing without writing manual CSS.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eFor Teams Migrating from Figma:\u003c\/strong\u003e Import existing Figma components and continue working inside a Git-native, code-first workflow.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003cp\u003ePencil.dev is a focused IDE-native design tool that connects visual design directly to code through AI and version-controlled \u003ccode\u003e.pen\u003c\/code\u003e files. It currently requires a Claude Code subscription ($20\/month) to access AI generation features, though the Pencil extension itself is free.\u003c\/p\u003e","brand":"Listed Tools","offers":[{"title":"Default Title","offer_id":53252614947123,"sku":"LT372","price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0826\/2638\/0083\/files\/lt372-pencil-listed-tools-ui-ux-tools.png?v=1776414632","url":"https:\/\/listedtools.com\/products\/pencil","provider":"Listed Tools","version":"1.0","type":"link"}