unknown

Pencil.dev is a free, agent-driven design tool that integrates with AI assistants like Claude Code via MCP to generate Figma-like UI designs from natural language prompts in real time. The tool supports multiple UI kits, CSS variables, and component libraries, and allows manual editing of generated designs just like in Figma. A walkthrough demonstrates building a rover management dashboard and a bohemian French bakery website, then converting the designs into a functioning coded site. While impressive, the tool has some bugs including slow performance and occasional UI glitches. Pencil stores files as pure JSON, making them easy for AI agents to parse and convert to code, and it also supports importing existing Figma designs.

How I Turned Claude Into a Design Tool with Pencil.dev

A community for all things frontend! Share tips, tutorials, and resources on HTML, CSS, JavaScript, frameworks (React, Vue, Next js, Angular, and more), performance, UI/UX, and more. Let’s code, learn, and grow together! 🚀👩‍💻👨‍💻


All Frontend

Pencil (pencil.dev) nails the "Vibe UI" era perfectly—design by feel on an infinite canvas right in your IDE, powered by AI agents like Claude Code. No more Figma handoffs; prompt vibes, tweak visually, land pixel-perfect code in your repo.

<p>Pencil (pencil.dev) nails the &quot;Vibe UI&quot; era perfectly—design by feel on an infinite canvas right in your IDE, powered by AI agents like Claude Code. No more Figma handoffs; prompt vibes, tweak visually, land pixel-perfect code in your repo.</p>