Pencil MCP: kujundusest saab kohe kood, esiotsa arenduse efektiivsus tõuseb 8 korda

Tere kõigile, olen良逍, kes teeb välismaale suunatud tooteid. Kohe on uusaasta, enne seda jagan teiega oma viimaseid saavutusi.

Kas teil on veebilehti või rakendusi tehes selline tunne olnud:

Tahaks teha kena lehe, aga enda disain ei ole hea Disaineri otsimine on liiga kallis, tasuta mallid ei sobi Raske vaevaga saadud kujundusest koodi tegemine on jälle probleemide hunnik

Ausalt öeldes, kui ma varem esiotsa projekte tegin, siis ma ainult vaatasin kujundust ja reguleerisin stiile pool päeva. Vahe on 2 pikslit, värv on vale, ümar nurk ununes lisada... Korduvalt ja korduvalt, see on kohutav.

Hea uudis on see, et nüüd on olemas Pencil MCP, mis suudab need probleemid põhimõtteliselt lahendada.

Viimasel ajal olen sellega mõned lehed teinud ja avastanud, et see on tõesti hea – kujundusest koodini on efektiivsus otse mitu korda suurem. Ja kõige olulisem on see, et AI abil genereeritud kujunduse kvaliteet on üsna hea ja koodi taasesitus on samuti väga kõrge.

See artikkel räägib sellest: mis on Pencil, miks seda tasub kasutada ja kuidas seda kiiresti kasutama hakata.

01. Mis on Pencil? Selgitame seda lihtsas keeles

Lihtsamalt öeldes on Pencil tööriist, mis suudab disaini ja koodi ühendada.

Varem oli protsess selline:

Tehke Figma's kujundus Disainer märgib mõõtmed, värvid ja vahed Arendaja kirjutab koodi rida rea haaval vastavalt kujundusele Pärast kirjutamist võrreldakse kujundusega ja leitakse, et taasesitus on ainult 70–80% Korduv reguleerimine, suhtlemine...

Pencili lahendus on:

Sa pead ainult loomulikus keeles kirjeldama nõudeid (näiteks "aidake mul kujundada Apple'i stiilis muusikapleier") ja AI saab otse lõuendile kujunduse genereerida ning seejärel ühe klõpsuga vastava koodi genereerida (toetatud on Next.js, Flutter, Vue jne).

Ja imelik on see, et saate kujundada ja reguleerida samal ajal. Näiteks:

"Lillat on liiga palju, vahetage natuke rohelise vastu" "Suurendage vahet" "Vaadake selle veebisaidi stiili"

AI aitab teil reaalajas disaini ja koodi reguleerida, ilma et peaksite ise midagi tegema.

02. Miks ma arvan, et Pencili tasub kasutada?

1) Efektiivsus on tõesti kõrge

Traditsioonilisel viisil võib lehe kujunduse tegemine võtta 4–6 tundi. Penciliga saab sellega hakkama 20–40 minutiga.

Ja koodi taasesitus võib ulatuda 98%+ni, põhimõtteliselt ei pea te enam stiile reguleerima.

Ma proovisin ise ja lihtsa Landing Page'i tegemine, alates disainist kuni koodini, võttis aega umbes pool tundi.

2) Disaini kvaliteet on stabiilne

Varem, kui lasin AI-l kujunduse genereerida, tekkis sageli selline probleem:

Värvide sobitamine ei ole kooskõlas Vahed on sassis Fondisuurused on ebajärjekindlad

Pencilil on taga disainisüsteem ja esteetilised standardid, genereeritud disaini kvaliteet on suhteliselt stabiilne. Kuigi see ei pruugi olla täiuslik, ei ole see vähemalt liiga kole.

3) Toetab mitut tehnoloogiapaketti

Ükskõik, kas teete Next.js, Flutter, Vue või SwiftUI, Pencil saab automaatselt genereerida vastava koodi.

See on minu jaoks, kes ma tegelen mitme otsaga arendusega, tõesti väga mugav – üks kujundus, mitme platvormi kood on olemas.

03. Kuidas Pencili installida ja kasutada?

Allpool jagan oma installimis- ja kasutusprotsessi, mis peaks olema praegu kõige lihtsam viis.

Esimene samm: installige Pencil MCP

Otsige otse oma IDE-s (VS Code, Cursor jne) "pencil"

Klõpsake installimiseks, ärge laadige alla mujalt (vältige piraatkoopia allalaadimist)

Tähelepanu: otse IDE-s otsimine on kõige turvalisem viis.

Teine samm: laske AI-l teid konfigureerida

Kuidas pärast installimist konfigureerida?

Ausalt öeldes ma alguses ei saanud aru. Hiljem avastasin, et kõige lihtsam viis on: laske AI-l teid konfigureerida.

Avage oma AI programmeerimisabiline (Claude Code või Codex) ja öelge sellele:

Olen sellesse IDE-sse installinud "pencil" MCP, palun aidake mul seda konfigureerida, et minu Claude Code, Codex ja VS Code saaksid seda MCP-d kasutada

Seejärel oodake, kuni see teid konfigureerib.

Kolmas samm: alustage Pencili abil kujundamist

Pärast konfigureerimist näete IDE vasakul küljel pliiatsiikooni, klõpsake sellel, et avada Pencili lõuend.

Seejärel ütle paremal asuvas AI dialoogiboksis, millist disaini sa soovid.

Näiteks:

"Aita mul kujundada Apple'i stiilis muusikapleier"

"Tee lihtne maandumisleht, mille põhivärv on sinine"

"Võta eeskuju selle veebisaidi stiilist ja tee midagi sarnast"

AI genereerib lõuendile disainikavandi. Kui sa pole rahul, võid lasta sellel jätkata kohandamist:

"Font on liiga väike, tee see suuremaks"

"Vahed on liiga väikesed, tee need suuremaks"

"Vali pehmem värv"

Jätka kohandamist, kuni oled rahul.

Neljas samm: genereeri kood

Kui disainikavand on valmis, saad lasta AI-l genereerida koodi.

Sa võid otse öelda:

"Genereeri mulle Next.js kood"

"Genereeri Flutter kood"

"Genereeri Vue 3 kood"

AI genereerib vastava koodi vastavalt sinu disainikavandile.

Reaalne efekt:

04. Mõned tegelikud kasutuskogemused

Pärast mitmekordset kasutamist on mul mõned muljed, mida jagada:

1) Kirjelda nõudeid konkreetselt

Alguses ütlesin "Aita mul teha veebisait", kuid AI genereeris midagi, mis polnud üldse see, mida ma tahtsin.

Hiljem avastasin, et mida konkreetsem on kirjeldus, seda parem on efekt.

Näiteks:

Halb kirjeldus: "Aita mul teha sisselogimisleht"

Hea kirjeldus: "Aita mul teha lihtne sisselogimisleht, mille ülaosas on logo, keskel e-posti ja parooli sisestuskastid ning allosas sisselogimisnupp, stiililt sarnane Apple'i ametlikule veebisaidile"

2) Saad üles laadida viitepilte

Kui näed mõnda veebisaiti, mille disain on hea, saad teha sellest ekraanipildi ja laadida selle AI-sse, et see saaks seda kasutada.

Nii on genereeritud disainikavand sinu ootustele lähemal.

3) Iteratsioon on olulisem kui kohe valmis saamine

Ära arva, et saad kohe täiusliku disaini genereerida, see pole realistlik.

Õige viis on: kõigepealt genereeri ligikaudne disain ja seejärel kohanda seda natukehaaval.

Kohanda iga kord ainult ühte või kahte asja, näiteks "Tee vahed suuremaks" "Tee värv pehmemaks", nii on efektiivsus kõige suurem.

4) Koodi kvaliteet on üsna hea

Ma proovisin mitu korda ja genereeritud koodi kvaliteet on üsna kõrge:

Koodi struktuur on selge

Stiili taasesitus on kõrge (98% +)

Reageeriv paigutus on samuti hästi tehtud

Põhimõtteliselt saab selle kätte võtta ja veidi muuta, et seda kasutada.

05. Mõned punktid, mida tuleb arvestada

Kuigi Pencil on väga kasulik, on mõned asjad, mida tuleb arvestada:

1) Esteetika peab ikkagi sinu enda oma olema

AI saab aidata sul disainikavandi genereerida, kuid sina pead otsustama, kas see on hea või mitte.

Seega vaata tavaliselt rohkem häid disainilahendusi, et parandada oma esteetikat, et saaksid Pencili kasutamisel paremaid juhiseid anda.

Soovitan mõned kohad, kust disaini viiteid leida:

Dribbble

Mobbin (spetsialiseerunud mobiilseadmete kasutajaliidese kogumisele)

Ekraanipildid erinevatest suurepärastest veebisaitidest

2) Keerulise interaktsiooni pead ise kirjutama

Pencil sobib staatiliste lehtede ja tavalise interaktsiooni jaoks, kuid kui tegemist on keeruliste animatsioonide, žestide jms-ga, pead ikkagi ise koodi kirjutama.

Kuid enamiku stsenaariumide puhul on Pencil juba piisav.

3) Õige AI mudeli valimine on väga oluline

Ma proovisin mitut mudelit ja leidsin, et Claude Opus 4.5 visuaalne esitus on parim.

Kui kasutad mõnda muud mudelit, võib genereeritud disainikavandi kvaliteet olla halvem.

06. Efektiivsuse võrdlusandmed

Lõpuks jagan rühma andmeid, mida ma ise testisin:

Minu jaoks on suurim väärtus see, et saan suunata oma energia "kuidas realiseerida" asemel "millist funktsiooni teha".

07. Kokkuvõte

Pencil on sisuliselt disaini ja arenduse ühendamine, mis võimaldab sul juhtida kogu protsessi loomuliku keele abil.

Kui sa tegeled ka esiotsa arendusega, teed oma tooteid, siis soovitan tungivalt Pencilit proovida:Koodi kvaliteet on stabiilne: taasesitus täpsus 98%+, põhimõtteliselt pole vaja stiile kohandada

Toetab mitut tehnoloogiapinu: Next.js, Flutter, Vue jne on kõik kasutatavad

Loomuliku keele põhine: kirjelda nõudeid inimkeeles, AI genereerib automaatselt

Lõpetuseks, kui sa tegeled ka iseseisva arenduse ja AI programmeerimisega, siis oled oodatud kommenteerima:

Kuidas sa tavaliselt disaini teed?

Kas oled Pencil'it kasutanud? Kuidas on tulemused?

Ma loen hoolikalt iga kommentaari. Näeme järgmises postituses.