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

Desktop app → instalare, autentificare cu email
Claude Code local → conectat la Pencil pentru control canvas
VS Code extension → preferința creator-ului (acces la context files din codebase)
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)

Download de pe pencil.dev
Instalare + autentificare email
Claude Code local (docs.pencil.dev pentru instructiuni)
VS Code extension "Pencil" (optional dar recomandat)
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

4.2 KiB Raw Blame History