115 lines
4.2 KiB
Markdown
115 lines
4.2 KiB
Markdown
# 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
|