Pencil MCP: Dizajn se u sekundi pretvara u kod, učinkovitost razvoja front-enda raste 8 puta

Pozdrav svima, ja sam Liang Xiao koji radi na proizvodima za inozemna tržišta. Uskoro je kineska Nova godina, pa ću prije praznika objaviti još jedan članak kako bih podijelio svoja nedavna postignuća.

Kada radite 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 besplatni predlošci nisu prikladni Kada konačno dobijete dizajn, pretvaranje u kod stvara hrpu problema

Iskreno, kada sam radio na front-end 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 kutove... Stalno se ponavlja, užasno dosadno.

Dobra vijest je: sada s Pencil MCP-om, ovi se problemi mogu riješiti.

Nedavno sam ga koristio za izradu nekoliko stranica i otkrio sam da je stvarno dobar - od dizajna do koda, učinkovitost se izravno povećala nekoliko puta. A najvažnije je da je kvaliteta dizajna koji generira AI prilično dobra, a vjernost reprodukcije koda također je vrlo visoka.

Ovaj članak će govoriti o: Što je Pencil, zašto ga vrijedi koristiti i kako brzo započeti.

01. Što je Pencil? Objasnimo to jednostavnim riječima

Jednostavno rečeno, Pencil je alat koji može povezati dizajn i kod.

Prijašnji proces 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 vjernost reprodukcije samo 70%-80% Ponavljano podešavanje, komunikacija...

Rješenje Pencilsa 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 (podržani su Next.js, Flutter, Vue itd.).

I što je čudno, možete dizajnirati i podešavati u isto vrijeme. Na primjer:

"Previše je ljubičaste, promijenite u 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 se sami morate potruditi.

02. Zašto mislim da Pencil vrijedi koristiti?

1) Učinkovitost 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 vjernost reprodukcije 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) Stabilna kvaliteta dizajna

Prije, kada sam dopustio AI-u da generira dizajn, često sam nailazio na ove probleme:

Nekoordinirana shema boja Nasumični razmaci Neujednačena veličina fonta

Pencil ima sustav dizajna i estetske standarde, tako da je kvaliteta generiranog dizajna relativno stabilna. Iako nije savršen, barem nije previše ružan.

3) Podržava više tehnoloških stogova

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 više platformi je dostupan.

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 pretražite "pencil" u svom IDE-u (VS Code, Cursor itd.)

Samo kliknite instaliraj, 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 pomoćnika za programiranje (Claude Code ili Codex) i recite mu:

Već sam instalirao "pencil" MCP u ovaj IDE, molim vas da mi pomognete da ga konfiguriram, tako da moj Claude Code, Codex, VS Code mogu 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 da biste otvorili Pencil platno.

Zatim u desnom AI dijaloškom okviru, recite mu što želite dizajnirati.

Na primjer:

"Dizajniraj mi glazbeni player u stilu Applea"

"Napravi jednostavnu Landing Page, glavna boja je plava"

"Napravi mi nešto slično ovom web mjestu, koristeći njegov stil kao referencu"

AI će generirati nacrt dizajna na platnu. Ako niste zadovoljni, možete ga nastaviti podešavati:

"Font je premalen, povećaj ga malo"

"Razmak neka bude veći"

"Promijeni u nježniju boju"

Podešavajte dok ne budete zadovoljni.

Četvrti korak: Generiranje koda

Nakon što je nacrt dizajna gotov, možete dopustiti AI-u da vam pomogne generirati kod.

Možete izravno reći:

"Generiraj mi Next.js kod"

"Generiraj Flutter kod"

"Generiraj Vue 3 kod"

AI će automatski generirati odgovarajući kod prema vašem nacrtu dizajna.

Stvarni učinak:

04. Neka stvarna iskustva korištenja

Nakon nekoliko korištenja, imam nekoliko dojmova koje želim podijeliti:

1) Opis zahtjeva mora biti konkretan

U početku bih rekao "Napravi mi web stranicu", ali ono što je AI generirao uopće nije bilo ono što sam želio.

Kasnije sam otkrio da što je opis konkretniji, to je bolji učinak.

Na primjer:

Loš opis: "Napravi mi stranicu za prijavu"

Dobar opis: "Napravi mi jednostavnu stranicu za prijavu, s logotipom na vrhu, poljima za unos e-pošte i lozinke u sredini i gumbom za prijavu na dnu, stilom sličnim Appleovoj službenoj web stranici"

2) Možete prenijeti referentne slike

Ako vidite dobar dizajn na nekoj web stranici, možete snimiti zaslon i prenijeti ga AI-u kao referencu.

Na taj će način generirani nacrt dizajna biti bliži vašim očekivanjima.

3) Iteracija je važnija od savršenstva iz prve

Nemojte misliti da ćete generirati savršen dizajn iz prve, to nije realno.

Pravi način je: prvo generirati nešto grubo, a zatim ga podešavati malo po malo.

Podešavajte samo jedno ili dva mjesta svaki put, na primjer "Povećaj razmak" "Učini boju nježnijom", to je najučinkovitije.

4) Kvaliteta koda je prilično dobra

Isprobao sam nekoliko puta i kvaliteta generiranog koda je prilično visoka:

• Struktura koda je jasna
• Visok stupanj obnove stila (98% +)
• Responzivni izgled je također dobro napravljen

U osnovi ga možete uzeti i malo ga izmijeniti da biste ga mogli koristiti.

05. Nekoliko točaka na koje treba obratiti pozornost

Iako je Pencil vrlo koristan, postoje neke stvari na koje treba obratiti pozornost:

1) Estetika i dalje ovisi o vama

AI vam može pomoći generirati nacrt dizajna, ali morate sami procijeniti je li dobar ili ne.

Stoga, gledajte više dobrih dizajna u slobodno vrijeme kako biste poboljšali svoju estetiku, tako da možete dati bolje smjernice kada koristite Pencil.

Preporučujem nekoliko mjesta za pronalaženje referenci dizajna:

• Dribbble
• Mobbin (specijaliziran za prikupljanje UI-a za mobilne uređaje)
• Snimke zaslona raznih izvrsnih web stranica

2) Složene interakcije i dalje morate sami napisati

Pencil je prikladan za izradu statičkih stranica i uobičajenih interakcija, ali ako su uključene složene animacije, geste itd., i dalje 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 najbolju vizualnu izvedbu.

Ako koristite druge modele, kvaliteta generiranog nacrta dizajna može biti lošija.

06. Podaci o usporedbi učinkovitosti

Na kraju, podijelit ću skup podataka koje sam sam testirao:

Za mene je najveća vrijednost: prebacivanje energije s "kako implementirati" na "koju funkciju napraviti".

07. Zaključak

Pencil u biti povezuje dizajn i razvoj, omogućujući vam da prirodnim jezikom pokrećete cijeli proces.

Ako se također bavite razvojem prednjeg sučelja, radite na vlastitim proizvodima, toplo preporučujem da isprobate Pencil:Kvaliteta koda stabilna: točnost 98%+, u osnovi nema potrebe za podešavanjem stilova

Podržava više tehnoloških stogova: Next.js, Flutter, Vue itd. mogu se koristiti

Pokretano prirodnim jezikom: opišite zahtjeve ljudskim jezikom, AI automatski generira

Na kraju, ako se također bavite samostalnim razvojem, AI programiranjem, dobrodošli ste da ostavite komentar:

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.