Pencil MCP: Projektet e dizajnit shndërrohen në kod në sekonda, efikasiteti i zhvillimit të frontend rritet 8 herë

Përshëndetje të gjithëve, unë jam Liang Xiao nga produktet e huaja. Viti i Ri po vjen së shpejti, dhe unë do të publikoj një artikull para Vitit të Ri për të ndarë zbulimet e mia të fundit me ju.

Gjatë krijimit të faqeve të internetit ose aplikacioneve, a e keni pasur ndonjëherë këtë ndjenjë:

• Dëshironi të krijoni një faqe të bukur, por aftësitë tuaja të dizajnit nuk janë të mira
• Gjetja e një projektuesi është shumë e shtrenjtë, dhe gjetja e shablloneve falas nuk është e përshtatshme
• Pasi të keni finalizuar me vështirësi një projekt dizajni, kthimi i tij në kod krijon një sërë problemesh

Sinqerisht, kur punoja në projekte frontend në të kaluarën, do të më duhej gjysmë dite vetëm për të rregulluar stilet bazuar në projektin e dizajnit. Hapësira ishte 2px larg, ngjyra nuk ishte e saktë, harrova të shtoja cepa të rrumbullakosura... Përsëritur vazhdimisht, ishte jashtëzakonisht e mërzitshme.

Lajmi i mirë është: Tani me Pencil këtë MCP, këto probleme mund të zgjidhen në thelb.

Kohët e fundit e kam përdorur për të krijuar disa faqe dhe e kam gjetur vërtet të dobishme - nga projektimi në kod, efikasiteti është rritur drejtpërdrejt disa herë. Dhe më e rëndësishmja, cilësia e projektit të dizajnit të gjeneruar nga AI është mjaft e mirë, dhe riprodhimi i kodit është gjithashtu shumë i lartë.

Ky artikull do të diskutojë: Çfarë është saktësisht Pencil, pse ia vlen ta përdorni dhe si të filloni shpejt.

01. Çfarë është Pencil? Shpjegohet në terma të thjeshtë

Thjesht, Pencil është një mjet që mund të lidhë dizajnin dhe kodin.

Procesi i mëparshëm ishte si ky:

• Krijoni një projekt dizajni në Figma
• Projektuesi shënon madhësitë, ngjyrat dhe hapësirat
• Zhvilluesi shkruan kodin rresht pas rreshti bazuar në projektin e dizajnit
• Pasi të keni mbaruar së shkruari, krahasoni me projektin e dizajnit dhe zbuloni se riprodhimi është vetëm 70%-80%
• Rregullime dhe komunikime të përsëritura...

Zgjidhja e Pencil është:

Ju vetëm duhet të përshkruani kërkesat në gjuhë natyrore (p.sh. "më ndihmoni të projektoj një luajtës muzike në stilin e Apple"), dhe AI mund të gjenerojë drejtpërdrejt një projekt dizajni në kanavacë, dhe më pas të gjenerojë kodin korrespondues me një klik (Next.js, Flutter, Vue, etj. të gjitha mbështeten).

Dhe çuditërisht, ju mund të rregulloni ndërsa projektoni. Për shembull:

• "Ka shumë vjollcë, ndryshoni në pak jeshile"
• "Hapësira pak më e madhe"
• "Referojuni stilit të kësaj faqeje interneti"

AI do t'ju ndihmojë të rregulloni dizajnin dhe kodin në kohë reale, pa pasur nevojë të bëni asgjë vetë.

02. Pse mendoj se Pencil ia vlen të përdoret?

1) Efikasiteti është vërtet i lartë

Mënyra tradicionale për të krijuar një projekt dizajni për një faqe mund të zgjasë 4-6 orë. Me Pencil, mund ta bëni në 20-40 minuta.

Dhe riprodhimi i kodit mund të arrijë në 98%+, në thelb nuk ka nevojë të rregulloni më stilet.

E provova vetë dhe krijova një faqe të thjeshtë Landing Page, nga dizajni në kod, e gjitha u bë në rreth gjysmë ore.

2) Cilësia e dizajnit është e qëndrueshme

Në të kaluarën, kur lejoja AI të gjeneronte projekte dizajni, shpesh hasja në probleme të tilla:

• Skema e ngjyrave nuk është e harmonishme
• Hapësira është e çrregullt
• Madhësitë e shkronjave nuk janë të unifikuara

Pencil ka një sistem dizajni dhe standarde estetike prapa tij, dhe cilësia e projekteve të dizajnit të gjeneruara është relativisht e qëndrueshme. Edhe pse nuk është domosdoshmërisht e përsosur, të paktën nuk do të jetë shumë e shëmtuar.

3) Mbështet teknologji të ndryshme

Pavarësisht nëse jeni duke punuar në Next.js, Flutter, Vue ose SwiftUI, Pencil mund të gjenerojë automatikisht kodin korrespondues.

Kjo është vërtet e përshtatshme për njerëz si unë që bëjnë zhvillim multi-platformë - një projekt dizajni, kodi për platforma të shumta është i gjithi atje.

03. Si të instaloni dhe përdorni Pencil?

Më poshtë do të ndaj procesin tim të instalimit dhe përdorimit, i cili duhet të jetë mënyra më e thjeshtë aktualisht.

Hapi i parë: Instaloni Pencil MCP

Kërkoni drejtpërdrejt "pencil" në IDE-në tuaj (VS Code, Cursor, etj.)

Thjesht klikoni për të instaluar, mos shkarkoni nga vende të tjera (për të shmangur shkarkimin e një versioni të piratuar)

Shënim: Kërkimi drejtpërdrejt në IDE është mënyra më e sigurt.

Hapi i dytë: Lëreni AI t'ju ndihmojë të konfiguroni

Si ta konfiguroni pasi ta keni instaluar?

Sinqerisht, nuk e kuptoja shumë në fillim. Më vonë zbulova se mënyra më e thjeshtë është: lëreni AI t'ju ndihmojë ta konfiguroni.

Hapni asistentin tuaj të programimit AI (Claude Code ose Codex), dhe i thoni:

Kam instaluar tashmë këtë MCP "pencil" në këtë IDE, ju lutem më ndihmoni ta konfiguroj në mënyrë që Claude Code, Codex, VS Code të mund ta përdorin këtë MCP

Më pas prisni që ajo t'ju ndihmojë ta konfiguroni.

Hapi i tretë: Filloni të përdorni Pencil për të projektuar

Pasi të keni konfiguruar, do të shihni një ikonë lapsi në anën e majtë të IDE-së, klikoni për ta hapur dhe do të jetë kanavaca e Pencil.

Dhe më pas, në kutinë e dialogut AI në anën e djathtë, tregojini asaj se çfarë dizajni dëshironi.

Për shembull:

"Më ndihmo të dizajnoj një luajtës muzike në stilin e Apple"

"Bëj një Landing Page të thjeshtë, ngjyra kryesore është blu"

"Referojuni stilit të kësaj faqeje interneti dhe më ndihmo të bëj një të ngjashme"

AI do të gjenerojë një draft dizajni në kanavacë. Nëse nuk jeni të kënaqur, mund ta lini të vazhdojë ta rregullojë:

"Shkronjat janë shumë të vogla, zmadhoji pak"

"Hapësira midis tyre të jetë më e madhe"

"Ndryshoje në një ngjyrë më të butë"

Vazhdoni ta rregulloni derisa të jeni të kënaqur.

Hapi i katërt: Gjenerimi i kodit

Pasi të keni përfunduar draftin e dizajnit, mund ta lini AI t'ju ndihmojë të gjeneroni kodin.

Mund të thoni drejtpërdrejt:

"Më ndihmo të gjeneroj kodin Next.js"

"Gjenero kodin Flutter"

"Gjenero kodin Vue 3"

AI do të gjenerojë automatikisht kodin përkatës bazuar në draftin tuaj të dizajnit.

Efekti aktual:

04. Disa përvoja praktike përdorimi

Pasi e përdora disa herë, kam disa ndjesi për të ndarë:

1) Përshkruani nevojat në mënyrë specifike

Në fillim do të thoja "Më ndihmo të bëj një faqe interneti", por gjërat që gjeneroi AI nuk ishin aspak ato që doja.

Më vonë zbulova se sa më specifik të jetë përshkrimi, aq më i mirë është efekti.

Për shembull:

Përshkrim i keq: "Më ndihmo të bëj një faqe hyrjeje"

Përshkrim i mirë: "Më ndihmo të bëj një faqe hyrjeje të thjeshtë, me një Logo në krye, një kuti hyrëse për email dhe fjalëkalim në mes dhe një buton hyrjeje në fund, stili i referohet faqes zyrtare të Apple"

2) Mund të ngarkoni imazhe referuese

Nëse shihni një dizajn të mirë në një faqe interneti, mund të bëni një pamje të ekranit dhe ta ngarkoni në AI për referencë.

Drafti i dizajnit i gjeneruar në këtë mënyrë do të jetë më afër pritjeve tuaja.

3) Përsëritja është më e rëndësishme se të bësh gjithçka njëherësh

Mos mendoni se mund të gjeneroni një dizajn të përsosur në një hap, kjo nuk është realiste.

Mënyra e duhur është: së pari gjeneroni një përafërsi dhe më pas rregullojeni pak nga pak.

Rregulloni vetëm një ose dy vende çdo herë, si p.sh. "Hapësira midis tyre të jetë më e madhe" "Ngjyra të jetë më e butë", kjo është mënyra më efikase.

4) Cilësia e kodit është ende e mirë

E provova disa herë dhe cilësia e kodit të gjeneruar është ende mjaft e lartë:

Struktura e kodit është e qartë

Shkalla e restaurimit të stilit është e lartë (98% +)

Paraqitja responsive është gjithashtu e mirë

Në thelb mund ta merrni dhe ta modifikoni pak për ta përdorur.

05. Disa pika për t'u vënë re

Edhe pse Pencil është shumë i dobishëm, ka disa gjëra që duhen vënë re:

1) Estetika varet ende nga ju

AI mund t'ju ndihmojë të gjeneroni drafte dizajni, por ju duhet të gjykoni nëse është e bukur apo jo.

Pra, shikoni më shumë dizajne të mira në kohën e lirë për të përmirësuar estetikën tuaj, në mënyrë që të jepni udhëzime më të mira kur përdorni Pencil.

Këtu janë disa vende për të gjetur referenca dizajni:

Dribbble

Mobbin (specializuar në mbledhjen e UI-së mobile)

Pamje të ekranit të faqeve të ndryshme të shkëlqyera të internetit

2) Ndërveprimet komplekse duhet të shkruhen vetë

Pencil është i përshtatshëm për krijimin e faqeve statike dhe ndërveprimeve të rregullta, por nëse përfshihen animacione komplekse, gjeste, etj., ju ende duhet të shkruani vetë kodin.

Megjithatë, për shumicën e skenarëve, Pencil është tashmë i mjaftueshëm.

3) Zgjedhja e modelit të duhur të AI është shumë e rëndësishme

Kam provuar disa modele dhe kam zbuluar se Claude Opus 4.5 ka performancën vizuale më të mirë.

Nëse përdorni modele të tjera, cilësia e draftit të dizajnit të gjeneruar mund të jetë më e keqe.

06. Të dhënat e krahasimit të efikasitetit

Së fundi, ndaj një grup të dhënash që kam testuar vetë:

07. Përmbledhje

Në thelb, Pencil ka lidhur dizajnin dhe zhvillimin, duke ju lejuar të drejtoni të gjithë procesin me gjuhë natyrore.

Nëse jeni gjithashtu duke bërë zhvillim frontend, duke bërë produktet tuaja, rekomandoj fuqimisht të provoni Pencil: Cilësi e qëndrueshme e kodit: Besnikëri 98%+, praktikisht nuk ka nevojë për rregullime të stilit

Mbështetje për shumë teknologji: Next.js, Flutter, Vue etj. mund të përdoren

Drejtues nga gjuha natyrore: Përshkruani kërkesat me fjalë të thjeshta, AI gjeneron automatikisht

Së fundi, nëse jeni duke bërë zhvillim të pavarur, programim AI, jeni të mirëpritur të lini një koment për të diskutuar:

Si e bëni zakonisht dizajnin?

E keni përdorur Pencil? Si janë rezultatet?

Do t'i lexoj me kujdes çdo koment. Shihemi në artikullin e ardhshëm.