Pencil MCP: Osnutek dizajna se v trenutku spremeni v kodo, učinkovitost razvoja sprednjega dela se poveča za 8-krat

Pozdravljeni vsi, jaz sem Liang Xiao, ki ustvarja izdelke za čezmorske trge. Kmalu bo novo leto, zato bom pred novim letom objavil še en članek, da delim z vami svoje nedavne pridobitve.

Ali ste pri ustvarjanju spletnih strani ali aplikacij kdaj imeli tak občutek:

Želite ustvariti lepo stran, vendar niste dobri v oblikovanju Iskanje oblikovalca je predrago, iskanje brezplačnih predlog pa ni primerno Ko končno dobite osnutek dizajna, je pretvorba v kodo spet polna težav Iskreno povedano, ko sem prej delal na projektih sprednjega dela, sem lahko urejal sloge glede na osnutek dizajna pol dneva. Razmik je za 2 px drugačen, barva ni povsem prava, pozabil sem dodati zaobljene vogale ... Znova in znova, do smrti mi je šlo na živce.

Dobra novica je: zdaj, ko imamo Pencil MCP, je mogoče rešiti skoraj vse te težave.

V zadnjem času sem z njim ustvaril nekaj strani in ugotovil, da je res dober – od osnutka dizajna do kode se učinkovitost neposredno poveča za večkratnik. In kar je najpomembneje, kakovost osnutka dizajna, ki ga ustvari AI, je precej dobra, prav tako pa je zelo visoka stopnja obnovitve kode.

V tem članku bomo govorili o tem: kaj je Pencil, zakaj ga je vredno uporabljati in kako ga hitro začeti uporabljati.

01. Kaj je Pencil? Pojasnilo v preprostem jeziku

Preprosto povedano, Pencil je orodje, ki lahko poveže dizajn in kodo.

Prejšnji postopek je bil tak:

Ustvarjanje osnutka dizajna v Figmi Oblikovalec označi velikosti, barve in razmike Razvijalec piše kodo vrstico za vrstico glede na osnutek dizajna Po pisanju primerjava z osnutkom dizajna pokaže, da je stopnja obnovitve le 70–80 % Ponavljajoče se prilagajanje, komunikacija ...

Pencilova rešitev je:

Potrebujete le naravni jezik za opis zahtev (na primer »Oblikujte mi predvajalnik glasbe v slogu Apple«), AI lahko neposredno ustvari osnutek dizajna na platnu in nato z enim klikom ustvari ustrezno kodo (podprti so Next.js, Flutter, Vue itd.).

In kar je neverjetno, lahko oblikujete in prilagajate hkrati. Na primer:

»Preveč je vijolične, zamenjajte jo z malo zelene« »Povečajte razmik« »Glejte slog tega spletnega mesta« AI vam bo sproti pomagal prilagajati dizajn in kodo, brez da bi se morali sami dotakniti.

02. Zakaj mislim, da je Pencil vreden uporabe?

1) Učinkovitost je res visoka

Tradicionalni način ustvarjanja osnutka dizajna strani lahko traja 4–6 ur. S Pencilom ga lahko dokončate v 20–40 minutah.

In stopnja obnovitve kode lahko doseže 98 %+, v bistvu vam ni treba več prilagajati slogov.

Sam sem poskusil in ustvaril preprosto ciljno stran, od dizajna do kode, vse je bilo končano v približno pol ure.

2) Stabilna kakovost dizajna

Prej, ko sem pustil AI ustvariti osnutek dizajna, sem pogosto naletel na te težave:

Nekoordinirana barvna shema Kaotični razmiki Neenotna velikost pisave

Pencil ima v ozadju sistem oblikovanja in estetske standarde, kakovost ustvarjenega osnutka dizajna pa je razmeroma stabilna. Čeprav ni nujno popoln, vsaj ni preveč grd.

3) Podpira različne tehnološke sklade

Ne glede na to, ali ustvarjate Next.js, Flutter, Vue ali SwiftUI, lahko Pencil samodejno ustvari ustrezno kodo.

To je res priročno za ljudi, kot sem jaz, ki razvijajo za več platform – en osnutek dizajna, kode za vse platforme.

03. Kako namestiti in uporabljati Pencil?

V nadaljevanju bom delil svoj postopek namestitve in uporabe, ki bi moral biti trenutno najpreprostejši način.

Prvi korak: Namestite Pencil MCP

Neposredno v svojem IDE (VS Code, Cursor itd.) poiščite »pencil«

Kliknite za namestitev, ne prenašajte ga drugje (da se izognete prenosu piratske različice)

Opomba: Iskanje neposredno v IDE je najvarnejši način.

Drugi korak: Naj vam AI pomaga pri konfiguraciji

Kako ga konfigurirati po namestitvi?

Iskreno povedano, sprva nisem razumel. Kasneje sem ugotovil, da je najpreprostejši način: naj vam AI pomaga pri konfiguraciji.

Odprite svojega pomočnika za programiranje AI (Claude Code ali Codex) in mu recite:

V tem IDE sem že namestil ta MCP »pencil«, prosim, pomagajte mi ga konfigurirati, da bodo lahko ta MCP uporabljali moj Claude Code, Codex, VS Code

Nato počakajte, da vam ga konfigurira.

Tretji korak: Začnite uporabljati Pencil za oblikovanje

Po konfiguraciji boste na levi strani IDE videli ikono svinčnika, kliknite jo, da odprete Pencilovo platno.

Nato v desnem pogovornem oknu AI povejte, kakšno obliko želite.

Na primer:

"Oblikuj mi predvajalnik glasbe v slogu Apple"

"Naredi preprosto ciljno stran z modro barvno shemo"

"Naredi mi nekaj podobnega v slogu te spletne strani"

AI bo ustvaril osnutek dizajna na platnu. Če niste zadovoljni, ga lahko še naprej prilagajate:

"Pisava je premajhna, povečaj jo"

"Povečaj razmik"

"Uporabi bolj nežno barvo"

Prilagajajte, dokler niste zadovoljni.

Četrti korak: Ustvarjanje kode

Ko je osnutek dizajna končan, lahko AI ustvari kodo za vas.

Lahko rečete neposredno:

"Ustvari Next.js kodo"

"Ustvari Flutter kodo"

"Ustvari Vue 3 kodo"

AI bo samodejno ustvaril ustrezno kodo glede na vaš osnutek dizajna.

Dejanski učinek:

04. Nekatere dejanske izkušnje z uporabo

Po nekaj uporabah bi rad delil nekaj občutkov:

1) Zahteve morajo biti podrobne

Na začetku sem rekel "Naredi mi spletno stran", rezultat pa je bil, da je AI ustvaril nekaj, kar sploh ni bilo to, kar sem želel.

Kasneje sem ugotovil, da bolj ko je opis podroben, boljši je učinek.

Na primer:

Slab opis: "Naredi mi stran za prijavo"

Dober opis: "Naredi mi preprosto stran za prijavo z logotipom na vrhu, polji za vnos e-pošte in gesla na sredini ter gumbom za prijavo na dnu, v slogu spletne strani Apple"

2) Lahko naložite referenčne slike

Če vidite, da je oblika neke spletne strani dobra, lahko posnamete posnetek zaslona in ga naložite v AI, da ga uporabi kot referenco.

Na ta način bo ustvarjen osnutek dizajna bližje vašim pričakovanjem.

3) Iteracija je pomembnejša od enkratnega doseganja cilja

Ne pričakujte, da boste ustvarili popoln dizajn naenkrat, to ni realno.

Pravilen način je: najprej ustvarite približen dizajn, nato pa ga postopoma prilagajajte.

Vsakič prilagodite samo eno ali dve stvari, na primer "Povečaj razmik" ali "Uporabi bolj nežno barvo", to je najučinkovitejši način.

4) Kakovost kode je precej dobra

Poskusil sem nekajkrat in ugotovil, da je kakovost ustvarjene kode precej visoka:

Jasna struktura kode

Visoka stopnja obnovitve sloga (98 % +)

Dobra odzivna postavitev

V bistvu jo lahko vzamete in jo malo spremenite, da jo lahko uporabite.

05. Nekaj ​​točk, na katere morate biti pozorni

Čeprav je Pencil zelo uporaben, je treba upoštevati nekaj stvari:

1) Estetika je še vedno odvisna od vas

AI vam lahko pomaga ustvariti osnutek dizajna, vendar morate sami presoditi, ali je dober ali ne.

Zato si oglejte nekaj dobrih dizajnov, da izboljšate svojo estetiko, da boste lahko dali boljše smernice pri uporabi Pencila.

Priporočam nekaj mest za iskanje referenc za oblikovanje:

Dribbble

Mobbin (specializiran za zbiranje mobilnega UI)

Posnetki zaslona različnih odličnih spletnih mest

2) Zapletene interakcije morate napisati sami

Pencil je primeren za izdelavo statičnih strani in običajnih interakcij, če pa gre za zapletene animacije, poteze itd., morate kodo napisati sami.

Vendar pa je Pencil dovolj dober za večino scenarijev.

3) Izbira pravega modela AI je zelo pomembna

Preizkusil sem nekaj modelov in ugotovil, da ima Claude Opus 4.5 najboljšo vizualno zmogljivost.

Če uporabljate druge modele, je lahko kakovost ustvarjenega osnutka dizajna slabša.

06. Podatki o primerjavi učinkovitosti

Na koncu delim nabor podatkov, ki sem jih sam preizkusil:

Zame je največja vrednost: preusmeritev energije iz "kako implementirati" na "kaj narediti".

07. Povzetek

Pencil v bistvu povezuje oblikovanje in razvoj, kar vam omogoča, da celoten proces poganjate z naravnim jezikom.

Če se ukvarjate tudi z razvojem sprednjega dela, izdelujete lastne izdelke, vam toplo priporočam, da preizkusite Pencil:Kakovost kode je stabilna: natančnost reprodukcije 98%+, v bistvu ni treba prilagajati slogov

Podpora za več tehnoloških skladov: Next.js, Flutter, Vue itd. so vsi podprti

Naravnojezikovno vodeno: opišite zahteve v človeškem jeziku, AI samodejno ustvari kodo

Na koncu, če se tudi vi ukvarjate z neodvisnim razvojem, programiranjem z umetno inteligenco, vas vabim, da se o tem pogovorimo v komentarjih:

Kako običajno oblikujete?

Ste že uporabljali Pencil? Kakšni so rezultati?

Pozorno bom prebral vsak komentar. Se vidimo v naslednjem članku.