# 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 (`<header>`, `<nav>`, `<section>`), nu gunoi ca la no-code tools
- **Responsive out-of-the-box:** tablet + mobile breakpoints

### Limitări curente

- **Nu are libraries** (doar componente locale per fișier)
- **Lansat de 2-3 săptămâni**, early stage
- **Necesită Claude Code Pro** (token limits)
- **Uneori trebuie corectat manual** (ex: search bar în demo)

---

## Quote-uri relevante

> "This potentially is a paradigm shift in how we design, going from static screens in Figma to actually putting together designs in a very agentic way that translates to code and back really well."

> "If I was designing this manually, I wouldn't have gotten this far this fast."

> "Seeing code from no-code tools and this is cleaner than that."

> "That is ridiculous to me how it put this together, knows that there's a tablet breakpoint. We go down, things are starting to stack nicely, and then also switches over to mobile."

> "Generated something just out of like a one sentence prompt, and then it spat this out and we converted that to code all in a reasonable amount of time. Like that was quite fast actually."

---

## Setup (din video)

1. Download de pe pencil.dev
2. Instalare + autentificare email
3. Claude Code local (docs.pencil.dev pentru instructiuni)
4. VS Code extension "Pencil" (optional dar recomandat)
5. Test: prompt simplu → design → "convert to HTML/CSS responsive"

---

## Use case pentru Marius

### Potențial pentru roa2web (Vue.js + FastAPI)

- **Generare rapidă UI components** pentru dashboards/rapoarte
- **Prototipare interfețe noi** (ex: rapoarte ROA, notificări) în minute
- **Export cod** → adaptare pentru Vue.js
- **Design system** cu variabile CSS (light/dark mode)

### Trade-off

**✅ Pro:**
- Rapid: prompt → design → cod în <10 min
- Cod clean, semantic, responsive
- Integrare Claude Code (deja folosit)

**⚠️ Con:**
- Early stage (2-3 săptămâni)
- Necesită ajustări manuale ocazional
- Token limits (Claude Code Pro)

### Recomandare: ⚠️ AȘTEPT

- **Prea nou** (2-3 săptămâni) pentru producție
- **Util pentru prototipare rapidă**, NU pentru cod final roa2web (Vue.js diferit de HTML/CSS static)
- **Poate economisi timp** la design mockups pentru discuții cu echipa

---

## Transcript complet

[Vezi tool log pentru detalii complete]

---

**Salvat:** 2026-03-05  
**Link web:** https://moltbot.tailf7372d.ts.net/echo/files.html#memory/kb/youtube/2026-03-05-pencil-claude-code.md
