# Pencil.dev + Claude Code - Workflow Design-to-Code **Sursă:** https://youtu.be/DSow83bnO4g **Dată:** 2026-03-05 **Tag-uri:** @work @project --- ## TL;DR Pencil.dev e un MCP (Model Context Protocol) cu canvas vizual pentru generare design-uri cu Claude Code, lansat de High Agency. Funcționează ca Figma condus de AI - generezi design-uri din prompt-uri text, apoi le convertești în cod HTML/CSS responsive, clean, semantic. Are componente, variabile CSS, dark mode, export. Gratuit acum, dar creator-ul ar plăti $20/lună dacă ar costa. --- ## Puncte cheie ### Ce e Pencil.dev - **MCP cu canvas vizual** pentru design agentic - **Generează design-uri** din prompt-uri simple ("marketplace pentru AI prompts") - **Conversie directă în cod** HTML/CSS self-contained, responsive - **Interfață familiar:** layers, components, auto-layout, variables, dark mode - **Import Figma** posibil ### Workflow demonstrat 1. **Desktop app** → instalare, autentificare cu email 2. **Claude Code local** → conectat la Pencil pentru control canvas 3. **VS Code extension** → preferința creator-ului (acces la context files din codebase) 4. **Prompt → Design → Cod** în ~minute: - Prompt: "marketplace website where people can sell AI prompts" - Generează: hero, grid produse, categorii, footer, etc. - Conversie: "convert desktop and mobile screens into self-contained HTML CSS file that's responsive" - Rezultat: cod semantic, variabile CSS, responsive (tablet + mobile breakpoints) ### Features tehnice - **Componente reutilizabile:** buttons, cards, table cells - **Variables CSS:** light/dark mode, spacing, typography - **Auto-layout** cu "hug" width - **Self-healing:** Claude corectează singur când elementele sunt clipped - **Cod clean:** semantic HTML (`
`, `