Pencil MCP: Schița de design se transformă instantaneu în cod, eficiența dezvoltării front-end crește de 8 ori

Bună ziua, sunt Liang Xiao, care lucrează la produse pentru piețele externe. Anul Nou Chinezesc se apropie, așa că mai public un articol înainte de sărbători pentru a împărtăși cu voi cele mai recente realizări ale mele.

Când creați pagini web sau aplicații, ați avut vreodată acest sentiment:

Vrei să faci o pagină frumoasă, dar nu te pricepi la design

Angajarea unui designer este prea scumpă, iar găsirea de șabloane gratuite nu este potrivită

După ce în sfârșit ai o schiță de design, transformarea ei în cod ridică o mulțime de probleme

Sincer, când lucram la proiecte front-end, puteam petrece o jumătate de zi doar ajustând stilurile conform schiței de design. Spațierea este cu 2px diferită, culoarea nu este corectă, colțul rotunjit a fost uitat... Repetat iar și iar, enervant de moarte.

Vestea bună este: acum, cu acest Pencil MCP, aceste probleme pot fi practic rezolvate.

L-am folosit recent pentru a crea câteva pagini și am descoperit că este cu adevărat grozav - de la schiță de design la cod, eficiența este direct îmbunătățită de mai multe ori. Și cel mai important, calitatea schiței de design generată de AI este destul de bună, iar fidelitatea codului este, de asemenea, foarte mare.

Acest articol va discuta despre: Ce este Pencil, de ce merită folosit și cum să începeți rapid.

01. Ce este Pencil? Explicat în termeni simpli

Simplu spus, Pencil este un instrument care poate conecta designul și codul.

Procesul anterior era următorul:

Creează o schiță de design în Figma

Designerul notează dimensiunile, culorile și spațierea

Dezvoltatorul scrie cod rând cu rând conform schiței de design

După ce a terminat de scris, compară cu schița de design și constată că fidelitatea este de doar 70%-80%

Ajustări repetate, comunicare...

Soluția Pencil este:

Trebuie doar să descrii cerințele în limbaj natural (de exemplu, "Ajută-mă să proiectez un player muzical în stil Apple"), iar AI poate genera direct o schiță de design pe pânză, apoi poate genera codul corespunzător cu un singur clic (Next.js, Flutter, Vue etc. sunt toate acceptate).

Și, în mod miraculos, poți ajusta în timp ce proiectezi. De exemplu:

"Prea mult violet, schimbă cu puțin verde"

"Spațierea să fie puțin mai mare"

"Consultă stilul acestui site web"

AI te va ajuta să ajustezi designul și codul în timp real, fără a fi nevoie să faci nimic singur.

02. De ce cred că Pencil merită folosit?

1) Eficiența este cu adevărat ridicată

În modul tradițional, crearea unei schițe de design pentru o pagină poate dura 4-6 ore. Cu Pencil, poate fi făcută în 20-40 de minute.

Și fidelitatea codului poate ajunge la 98%+, practic fără a fi nevoie să mai ajustezi stilurile.

Am încercat eu însumi și am creat o pagină de destinație simplă, de la design la cod, totul a fost făcut în aproximativ o jumătate de oră.

2) Calitate stabilă a designului

În trecut, când lăsam AI să genereze schițe de design, întâmpinam adesea aceste probleme:

Combinații de culori necoordonate

Spațiere haotică

Dimensiuni de font inconsistente

Pencil are un sistem de design și standarde estetice în spate, iar calitatea schițelor de design generate este relativ stabilă. Deși nu este neapărat perfect, cel puțin nu este prea urât.

3) Suportă diverse stive tehnologice

Indiferent dacă lucrezi cu Next.js, Flutter, Vue sau SwiftUI, Pencil poate genera automat codul corespunzător.

Acest lucru este cu adevărat convenabil pentru cineva ca mine, care face dezvoltare multi-platformă - o schiță de design, cod pentru mai multe platforme, totul este disponibil.

03. Cum se instalează și se utilizează Pencil?

Mai jos, voi împărtăși propriul meu proces de instalare și utilizare, care ar trebui să fie cea mai simplă metodă în prezent.

Primul pas: Instalați Pencil MCP

Căutați direct "pencil" în IDE-ul dvs. (VS Code, Cursor etc.)

Faceți clic pe instalare, nu descărcați din alte locuri (pentru a evita descărcarea unei versiuni piratate)

Notă: Căutarea direct în IDE este cea mai sigură metodă.

Al doilea pas: Lăsați AI să vă ajute să configurați

Cum se configurează după instalare?

Sincer, nici eu nu am înțeles prea bine la început. Mai târziu, am descoperit că cea mai simplă metodă este: lasă AI să te ajute să configurezi direct.

Deschideți asistentul dvs. de programare AI (Claude Code sau Codex) și spuneți-i:

Am instalat deja acest MCP "pencil" în acest IDE, vă rog să mă ajutați să-l configurez, astfel încât Claude Code, Codex, VS Code să poată utiliza acest MCP

Și apoi așteptați să vă ajute să configurați.

Al treilea pas: Începeți să utilizați Pencil pentru a crea design

După configurare, veți vedea o pictogramă de creion în partea stângă a IDE-ului, faceți clic pentru a deschide pânza Pencil.

Și apoi, în caseta de dialog AI din dreapta, spune-i ce design vrei.

De exemplu:

"Ajută-mă să proiectez un player muzical în stil Apple"

"Fă o Landing Page concisă, cu culoarea principală albastră"

"Referă-te la stilul acestui site web și ajută-mă să fac unul similar"

AI va genera schițe de design pe pânză. Dacă nu ești mulțumit, poți continua să-l lași să ajusteze:

"Fontul este prea mic, mărește-l puțin"

"Spațierea să fie mai mare"

"Schimbă cu o culoare mai moale"

Ajustează până când ești mulțumit.

Pasul 4: Generarea codului

După ce schița de design este finalizată, poți lăsa AI să te ajute să generezi codul.

Poți spune direct:

"Ajută-mă să generez cod Next.js"

"Generează cod Flutter"

"Generează cod Vue 3"

AI va genera automat codul corespunzător în funcție de schița ta de design.

Efect real:

04. Câteva experiențe practice de utilizare

După ce l-am folosit de câteva ori, am câteva sentimente de împărtășit:

1) Descrie cerințele în mod specific

La început, aș spune "Ajută-mă să fac un site web", dar ceea ce a generat AI nu era deloc ceea ce voiam.

Mai târziu, am descoperit că cu cât descrierea este mai specifică, cu atât efectul este mai bun.

De exemplu:

Descriere proastă: "Ajută-mă să fac o pagină de conectare"

Descriere bună: "Ajută-mă să fac o pagină de conectare concisă, cu un logo în partea de sus, o casetă de introducere a e-mailului și a parolei în mijloc și un buton de conectare în partea de jos, cu un stil similar cu site-ul web oficial Apple"

2) Poți încărca imagini de referință

Dacă vezi un design bun pe un anumit site web, poți face o captură de ecran și o poți încărca în AI pentru a o folosi ca referință.

Schița de design generată în acest fel va fi mai aproape de așteptările tale.

3) Iterarea este mai importantă decât obținerea unui rezultat perfect dintr-o singură încercare

Nu te gândi să generezi un design perfect dintr-o singură încercare, nu este realist.

Modul corect este: mai întâi generează unul aproximativ, apoi ajustează-l puțin câte puțin.

Ajustează doar unul sau două locuri de fiecare dată, cum ar fi "Spațierea să fie mai mare" "Culoarea să fie mai moale", aceasta este cea mai eficientă modalitate.

4) Calitatea codului este destul de bună

Am încercat de câteva ori și calitatea codului generat este destul de ridicată:

Structura codului este clară

Gradul de restaurare a stilului este ridicat (98% +)

Aspectul responsiv este, de asemenea, bine realizat

Practic, poate fi folosit după mici modificări.

05. Câteva puncte de care trebuie să fii atent

Deși Pencil este foarte util, există și câteva lucruri de care trebuie să fii atent:

1) Estetica depinde totuși de tine

AI te poate ajuta să generezi schițe de design, dar trebuie să judeci singur dacă este frumos sau nu.

Așa că, de obicei, uită-te la câteva design-uri bune, îmbunătățește-ți estetica, astfel încât să poți oferi o îndrumare mai bună atunci când folosești Pencil.

Recomand câteva locuri pentru a găsi referințe de design:

Dribbble

Mobbin (specializat în colectarea UI-ului mobil)

Capturi de ecran ale diferitelor site-uri web excelente

2) Interacțiunile complexe trebuie totuși scrise singur

Pencil este potrivit pentru realizarea de pagini statice și interacțiuni convenționale, dar dacă sunt implicate animații complexe, gesturi etc., trebuie totuși să scrii singur codul.

Cu toate acestea, pentru majoritatea scenariilor, Pencil este deja suficient.

3) Alegerea modelului AI potrivit este foarte importantă

Am încercat mai multe modele și am descoperit că Claude Opus 4.5 are cea mai bună performanță vizuală.

Dacă folosești alte modele, calitatea schiței de design generate poate fi mai slabă.

06. Date de comparație a eficienței

În cele din urmă, împărtășesc un set de date pe care le-am testat eu însumi:

Pentru mine, cea mai mare valoare este: transferarea energiei de la "cum să implementez" la "ce funcții să fac".

07. Rezumat

Pencil, în esență, conectează designul și dezvoltarea, permițându-ți să conduci întregul proces cu limbaj natural.

Dacă dezvolți și tu front-end, îți faci propriile produse, îți recomand cu tărie să încerci Pencil: Calitate stabilă a codului: Fidelitate de peste 98%, practic nu este nevoie de ajustări de stil

Suportă mai multe stive tehnologice: Next.js, Flutter, Vue etc. pot fi utilizate

Bazat pe limbaj natural: Descrieți cerințele în termeni umani, iar AI generează automat

În cele din urmă, dacă sunteți, de asemenea, implicat în dezvoltare independentă, programare AI, vă invităm să lăsați un comentariu pentru a discuta:

Cum faceți de obicei designul?

Ați folosit Pencil? Cât de bine funcționează?

Voi citi cu atenție fiecare comentariu. Ne vedem în următorul articol.