Pencil MCP: Dizajn se u sekundi pretvara u kod, efikasnost razvoja frontenda se povećava 8 puta

Pozdrav svima, ja sam Liang Xiao koji radi na proizvodima za inozemno tržište. Uskoro je kineska Nova godina, pa ću prije praznika objaviti još jedan članak da podijelim s vama svoja nedavna postignuća. Kada pravite web stranice ili aplikacije, jeste li ikada imali ovaj osjećaj: Želite napraviti lijepu stranicu, ali vaš dizajn nije dobar Traženje dizajnera je preskupo, a pronalaženje besplatnih predložaka nije prikladno Kada konačno dobijete dizajn, pretvaranje u kod je gomila problema Iskreno, kada sam radio na frontend projektima, mogao sam provesti pola dana samo podešavajući stilove prema dizajnu. Razmak je 2px drugačiji, boja nije sasvim ispravna, zaboravio sam dodati zaobljene uglove... Iznova i iznova, to je bilo užasno. Dobra vijest je: sada s Pencil MCP-om, ovi se problemi mogu u osnovi riješiti. Nedavno sam ga koristio za izradu nekoliko stranica i otkrio sam da je stvarno dobar - od dizajna do koda, efikasnost se izravno povećala nekoliko puta. A najvažnije je da je kvaliteta dizajna koju generira AI prilično dobra, a stupanj obnove koda također je vrlo visok. Ovaj će članak govoriti o: Što je Pencil, zašto ga vrijedi koristiti i kako ga brzo početi koristiti. ## 01. Što je Pencil? Objasnimo to jednostavnim riječima Jednostavno rečeno, Pencil je alat koji može povezati dizajn i kod. Prijašnji postupak je bio ovakav: Napravite dizajn u Figmi Dizajner označava dimenzije, boje, razmake Programer piše kod redak po redak prema dizajnu Nakon pisanja usporedite s dizajnom i otkrijte da je stupanj obnove samo 70%-80% Ponavljano podešavanje, komunikacija... Pencil-ovo rješenje je: Samo trebate opisati zahtjeve prirodnim jezikom (na primjer, "dizajnirajte mi glazbeni player u stilu Applea"), a AI može izravno generirati dizajn na platnu, a zatim jednim klikom generirati odgovarajući kod (Next.js, Flutter, Vue itd. su podržani). I čarobno je što možete dizajnirati i podešavati u isto vrijeme. Na primjer: "Previše je ljubičaste, dodajte malo zelene" "Povećajte razmak" "Pogledajte stil ove web stranice" AI će vam pomoći da prilagodite dizajn i kod u stvarnom vremenu, bez da sami išta radite. ## 02. Zašto mislim da Pencil vrijedi koristiti? ### 1) Efikasnost je stvarno visoka Tradicionalni način izrade dizajna stranice može trajati 4-6 sati. S Pencilom se to može obaviti za 20-40 minuta. A stupanj obnove koda može doseći 98%+, tako da u osnovi ne morate podešavati stilove. I sam sam isprobao i napravio jednostavnu Landing Page, od dizajna do koda, sve je gotovo za pola sata. ### 2) Kvaliteta dizajna je stabilna Prije sam često nailazio na ove probleme kada sam dopuštao AI-u da generira dizajn: Nekoordinirane boje Kaotični razmaci Neujednačene veličine fontova Pencil ima sustav dizajna i estetske standarde, a kvaliteta generiranog dizajna je relativno stabilna. Iako nije savršen, barem nije previše ružan. ### 3) Podržava različite tehnološke stackove Bez obzira radite li na Next.js, Flutter, Vue ili SwiftUI, Pencil može automatski generirati odgovarajući kod. Ovo je stvarno zgodno za ljude poput mene koji rade na razvoju za više platformi - jedan dizajn, kod za sve platforme. ## 03. Kako instalirati i koristiti Pencil? U nastavku ću podijeliti vlastiti postupak instalacije i korištenja, koji bi trebao biti najjednostavniji način trenutno. ### Prvi korak: Instalirajte Pencil MCP Izravno potražite "pencil" u svom IDE-u (VS Code, Cursor itd.) Kliknite za instalaciju, nemojte preuzimati s drugih mjesta (izbjegavajte preuzimanje piratske verzije)  Napomena: Izravno pretraživanje u IDE-u je najsigurniji način. ### Drugi korak: Neka vam AI pomogne u konfiguraciji Kako konfigurirati nakon instalacije? Iskreno, u početku nisam razumio. Kasnije sam otkrio da je najjednostavniji način: dopustiti AI-u da vam pomogne u konfiguraciji. Otvorite svog AI programskog pomoćnika (Claude Code ili Codex) i recite mu: Već sam instalirao "pencil" MCP u ovaj IDE, molim vas da mi pomognete da ga konfiguriram kako bi moj Claude Code, Codex, VS Code mogli koristiti ovaj MCP Zatim pričekajte da vam pomogne u konfiguraciji. ### Treći korak: Počnite koristiti Pencil za dizajn Nakon konfiguracije, vidjet ćete ikonu olovke s lijeve strane IDE-a, kliknite je da biste otvorili Pencil platno. Zatim, u AI dijalog prozoru s desne strane, recite mu kakav dizajn želite. Na primjer: "Dizajniraj mi muzički plejer u stilu Apple-a" "Napravi jednostavnu Landing Page, glavna boja je plava" "Napravi mi nešto slično ovom web sajtu, koristeći njegov stil" AI će generisati nacrt dizajna na platnu. Ako niste zadovoljni, možete nastaviti da ga podešavate: "Font je premali, povećaj ga malo" "Razmak neka bude veći" "Promijeni u nježniju boju" Nastavite podešavati dok ne budete zadovoljni. ### Četvrti korak: Generisanje koda Kada je nacrt dizajna gotov, možete pustiti AI da vam generiše kod. Možete direktno reći: "Generiši mi Next.js kod" "Generiši Flutter kod" "Generiši Vue 3 kod" AI će automatski generisati odgovarajući kod na osnovu vašeg nacrta dizajna. Stvarni efekat: ## 04. Neka stvarna iskustva korištenja Nakon nekoliko korištenja, imam nekoliko utisaka koje bih podijelio: ### 1) Opis zahtjeva treba biti konkretan U početku bih rekao "Napravi mi web sajt", a rezultat koji bi AI generisao uopšte nije bio ono što sam želio. Kasnije sam shvatio da što je opis konkretniji, to je bolji efekat. Na primjer: Loš opis: "Napravi mi stranicu za prijavu" Dobar opis: "Napravi mi jednostavnu stranicu za prijavu, sa logom na vrhu, poljima za unos e-pošte i lozinke u sredini, dugmetom za prijavu na dnu, u stilu Apple-ove web stranice" ### 2) Možete učitati referentne slike Ako vidite dobar dizajn na nekom web sajtu, možete napraviti snimak ekrana i učitati ga u AI, kako bi ga koristio kao referencu. Na taj način će generisani nacrt dizajna biti bliži vašim očekivanjima. ### 3) Iteracija je važnija od savršenstva iz prvog pokušaja Nemojte misliti da ćete generisati savršen dizajn iz prvog pokušaja, to nije realno. Pravi način je: prvo generisati nešto približno, a zatim to podešavati malo po malo. Podešavajte samo jednu ili dvije stvari svaki put, na primjer "razmak neka bude veći", "boja neka bude nježnija", to je najefikasniji način. ### 4) Kvalitet koda je prilično dobar Probao sam nekoliko puta, i kvalitet generisanog koda je prilično visok:

• Struktura koda je jasna
• Visok stepen reprodukcije stila (98%+)
• Responzivni dizajn je takođe dobro urađen
• U osnovi, može se preuzeti i malo izmijeniti i koristiti.

## 05. Nekoliko stvari na koje treba obratiti pažnju Iako je Pencil vrlo koristan, postoje neke stvari na koje treba obratiti pažnju: ### 1) Estetika ipak zavisi od vas AI vam može pomoći da generišete nacrt dizajna, ali da li je to lijepo ili ne, morate sami procijeniti. Stoga, gledajte više dobrih dizajna, poboljšajte svoju estetiku, tako da možete dati bolje smjernice kada koristite Pencil. Preporučujem nekoliko mjesta za pronalaženje dizajnerskih referenci:

• Dribbble
• Mobbin (specijalizovan za prikupljanje UI za mobilne uređaje)
• Snimci ekrana raznih odličnih web stranica

### 2) Kompleksne interakcije ipak morate sami pisati Pencil je pogodan za izradu statičkih stranica i uobičajenih interakcija, ali ako se radi o složenim animacijama, gestama itd., ipak morate sami pisati kod. Međutim, za većinu scenarija, Pencil je već dovoljan. ### 3) Odabir pravog AI modela je vrlo važan Isprobao sam nekoliko modela i otkrio da Claude Opus 4.5 ima najbolji vizuelni prikaz. Ako koristite druge modele, kvalitet generisanog nacrta dizajna može biti lošiji. ## 06. Podaci o poređenju efikasnosti Na kraju, dijelim grupu podataka koje sam lično testirao:

Indikator	Tradicionalni način	Korištenje Pencil-a	Poboljšanje efikasnosti
Izrada nacrta dizajna	4-6 sati	20-40 minuta	8 puta
Stepen reprodukcije koda	70%-85%	98%+
Vrijeme za ispravljanje grešaka		Smanjenje za 90%
Adaptacija za više platformi	Potrebno ponovno razvijanje	Automatsko generisanje	Ušteda 75% vremena

Za mene, najveća vrijednost je: prebacivanje energije sa "kako implementirati" na "koju funkciju napraviti". ## 07. Zaključak Pencil u suštini povezuje dizajn i razvoj, omogućavajući vam da prirodnim jezikom pokrećete cijeli proces. Ako se bavite frontend razvojem, pravite vlastite proizvode, toplo preporučujem da isprobate Pencil: Kvalitet koda stabilan: Vjerodostojnost 98%+, osnovno podešavanje stila nije potrebno Podrška za više tehnoloških stogova: Next.js, Flutter, Vue itd. su podržani Pokretano prirodnim jezikom: Opisujte zahtjeve ljudskim jezikom, AI automatski generiše Na kraju, ako se i vi bavite nezavisnim razvojem, AI programiranjem, dobrodošli ste da ostavite komentar i porazgovarate: Kako obično radite dizajn? Jeste li koristili Pencil? Kakvi su rezultati? Pažljivo ću pročitati svaki komentar. Vidimo se u sljedećem članku.