Pencil MCP: dizainas akimirksniu virsta kodu, priekinės dalies kūrimo efektyvumas padidėja 8 kartus

Sveiki visi, aš esu Liang Xiao, kuriu produktus užsienio rinkoms. Artėja Naujieji metai, prieš juos dar pasidalinsiu straipsniu apie savo naujausius atradimus.

Kuriant tinklalapius ar programėles, ar kada nors jautėte:

Norisi sukurti gražų puslapį, bet pats dizainas nepavyksta

Dizaineris per brangus, o nemokami šablonai netinka

Vargais negalais sutvarkai dizainą, o pavertus jį kodu, vėl krūva problemų

Atvirai kalbant, anksčiau, kai dirbdavau su priekinės dalies projektais, vien tik žiūrėdamas į dizainą, pusę dienos reguliuodavau stilius. Tarpas per mažas 2 pikseliais, spalva ne visai ta, užapvalinimas pamirštas... Kartojasi vėl ir vėl, užknisa mirtinai.

Gera žinia: dabar, kai yra Pencil MCP, šios problemos iš esmės išsprendžiamos.

Pastaruoju metu su juo sukūriau kelis puslapius ir supratau, kad jis tikrai geras – nuo dizaino iki kodo, efektyvumas tiesiogiai padidėja kelis kartus. Ir svarbiausia, kad AI sugeneruotas dizainas yra gana geros kokybės, o kodo atkūrimo tikslumas taip pat labai didelis.

Šiame straipsnyje pakalbėsime apie tai: kas iš tikrųjų yra Pencil, kodėl verta jį naudoti ir kaip greitai pradėti.

01. Kas yra Pencil? Paaiškinimas paprastais žodžiais

Paprastai tariant, Pencil yra įrankis, galintis sujungti dizainą ir kodą.

Ankstesnis procesas buvo toks:

Dizaino kūrimas Figma

Dizaineris pažymi matmenis, spalvas, tarpus

Kūrėjas eilutė po eilutės rašo kodą pagal dizainą

Parašius, lyginama su dizainu ir nustatoma, kad atkūrimo tikslumas yra tik 70–80%

Pakartotinis reguliavimas, bendravimas...

Pencil sprendimas yra:

Jums tereikia natūralia kalba aprašyti poreikius (pvz., „padėkite man sukurti Apple stiliaus muzikos grotuvą“), o AI gali tiesiogiai sugeneruoti dizainą drobėje ir vienu spustelėjimu sugeneruoti atitinkamą kodą (palaikomi Next.js, Flutter, Vue ir kt.).

Ir stebėtina, kad galite kurti ir reguliuoti vienu metu. Pavyzdžiui:

„Per daug violetinės, pakeiskite šiek tiek žalia“

„Padidinkite tarpus“

„Pasinaudokite šios svetainės stiliumi“

AI realiuoju laiku padės jums reguliuoti dizainą ir kodą, jums visiškai nereikės nieko daryti patiems.

02. Kodėl manau, kad Pencil verta naudoti?

1) Efektyvumas tikrai didelis

Tradiciniu būdu sukurti puslapio dizainą gali užtrukti 4–6 valandas. Su Pencil tai galima padaryti per 20–40 minučių.

Be to, kodo atkūrimo tikslumas gali siekti 98%+, iš esmės nereikia reguliuoti stilių.

Aš pats išbandžiau ir sukūriau paprastą Landing Page, nuo dizaino iki kodo, viskas buvo padaryta per pusvalandį.

2) Stabilus dizaino kokybė

Anksčiau, kai AI generuodavo dizainą, dažnai susidurdavau su tokiomis problemomis:

Nesuordinuotos spalvos

Chaotiški tarpai

Nesuienodintas šrifto dydis

Pencil turi dizaino sistemą ir estetinius standartus, todėl sugeneruoto dizaino kokybė yra gana stabili. Nors ir nebūtinai tobula, bet bent jau ne per daug bjauri.

3) Palaiko įvairius technologijų rinkinius

Nesvarbu, ar kuriate Next.js, Flutter, Vue ar SwiftUI, Pencil gali automatiškai sugeneruoti atitinkamą kodą.

Tai tikrai patogu tiems, kurie kuria kelioms platformoms, kaip aš – vienas dizainas, o kodas visoms platformoms.

03. Kaip įdiegti ir naudoti Pencil?

Žemiau pasidalinsiu savo diegimo ir naudojimo procesu, tai turėtų būti paprasčiausias būdas šiuo metu.

Pirmas žingsnis: įdiekite Pencil MCP

Tiesiog ieškokite „pencil“ savo IDE (VS Code, Cursor ir kt.)

Spustelėkite įdiegti, neatsisiųskite iš kitų vietų (kad neatsisiųstumėte piratinės versijos)

Dėmesio: tiesiogiai ieškoti IDE yra saugiausias būdas.

Antras žingsnis: leiskite AI jums sukonfigūruoti

Kaip sukonfigūruoti po įdiegimo?

Atvirai kalbant, iš pradžių nelabai supratau. Vėliau supratau, kad paprasčiausias būdas yra: tiesiog leiskite AI jums sukonfigūruoti.

Atidarykite savo AI programavimo asistentą (Claude Code arba Codex) ir pasakykite jam:

Aš jau įdiegiau „pencil“ MCP šiame IDE, prašau padėkite man jį sukonfigūruoti, kad mano Claude Code, Codex, VS Code galėtų naudoti šį MCP

Ir palaukite, kol jis jums sukonfigūruos.

Trečias žingsnis: pradėkite kurti dizainą su Pencil

Sukonfigūravę, IDE kairėje pusėje pamatysite pieštuko piktogramą, spustelėkite ją, kad atidarytumėte Pencil drobę.

Ir tada dešinėje esančiame AI dialogo lange pasakykite jam, kokio dizaino norite.

Pavyzdžiui:

"Padėkite man sukurti Apple stiliaus muzikos grotuvą"

"Sukurkite paprastą Landing Page, kurio pagrindinė spalva yra mėlyna"

"Remdamiesi šios svetainės stiliumi, padėkite man sukurti panašią"

AI generuos dizaino maketus drobėje. Jei nesate patenkinti, galite toliau leisti jam koreguoti:

"Šriftas per mažas, padidinkite jį"

"Padidinkite tarpus"

"Pakeiskite į švelnesnę spalvą"

Koreguokite tol, kol būsite patenkinti.

Ketvirtas žingsnis: generuokite kodą

Kai dizaino maketas bus baigtas, galite leisti AI padėti jums generuoti kodą.

Galite tiesiogiai pasakyti:

"Padėkite man generuoti Next.js kodą"

"Generuoti Flutter kodą"

"Generuoti Vue 3 kodą"

AI automatiškai generuos atitinkamą kodą pagal jūsų dizaino maketą.

Realus efektas:

04. Kai kurios realaus naudojimo patirtys

Po kelių naudojimo kartų noriu pasidalinti keliais įspūdžiais:

1) Aprašykite reikalavimus konkrečiai

Iš pradžių sakyčiau "Padėkite man sukurti svetainę", bet AI sugeneruoti dalykai visiškai neatitiko to, ko norėjau.

Vėliau pastebėjau, kad kuo konkretesnis aprašymas, tuo geresnis efektas.

Pavyzdžiui:

Blogas aprašymas: "Padėkite man sukurti prisijungimo puslapį"

Geras aprašymas: "Padėkite man sukurti paprastą prisijungimo puslapį, viršuje yra logotipas, centre yra el. pašto ir slaptažodžio įvedimo laukai, apačioje yra prisijungimo mygtukas, stilius remiasi Apple oficialia svetaine"

2) Galite įkelti nuotraukas

Jei matote, kad kurios nors svetainės dizainas yra geras, galite nufotografuoti ir įkelti ją į AI, kad ji remtųsi.

Tokiu būdu sugeneruotas dizaino maketas bus artimesnis jūsų lūkesčiams.

3) Iteracijos yra svarbesnės nei vienas žingsnis

Nemanykite, kad galite sugeneruoti tobulą dizainą vienu ypu, tai nerealu.

Tinkamas būdas yra: pirmiausia sugeneruokite apytikslį, o tada koreguokite po truputį.

Kiekvieną kartą koreguokite tik vieną ar dvi vietas, pavyzdžiui, "Padidinkite tarpus" "Švelnesnė spalva", tai yra efektyviausia.

4) Kodo kokybė yra gana gera

Išbandžiau kelis kartus, sugeneruoto kodo kokybė yra gana aukšta:

Aiškiai struktūruotas kodas

Didelis stiliaus atkūrimo laipsnis (98% +)

Reaguojantis išdėstymas taip pat gerai padarytas

Iš esmės jį galima naudoti šiek tiek pakeitus.

05. Keletas dalykų, į kuriuos reikia atkreipti dėmesį

Nors Pencil yra labai naudingas, tačiau yra keletas dalykų, į kuriuos reikia atkreipti dėmesį:

1) Estetika vis dar priklauso nuo jūsų

AI gali padėti jums sugeneruoti dizaino maketą, bet ar jis gražus, ar ne, turite nuspręsti patys.

Todėl dažniau žiūrėkite į gerus dizainus, pagerinkite savo estetiką, kad galėtumėte pateikti geresnes gaires naudodami Pencil.

Rekomenduoju keletą vietų, kur galite rasti dizaino nuorodų:

Dribbble

Mobbin (specializuojasi mobiliųjų įrenginių UI rinkime)

Įvairių puikių svetainių ekrano kopijos

2) Sudėtingą sąveiką vis dar reikia rašyti patiems

Pencil tinka statiniams puslapiams ir įprastai sąveikai, tačiau jei tai susiję su sudėtingomis animacijomis, gestais ir pan., vis dar reikia rašyti kodą patiems.

Tačiau daugeliui scenarijų Pencil jau yra pakankamai geras.

3) Teisingo AI modelio pasirinkimas yra labai svarbus

Išbandžiau kelis modelius ir nustačiau, kad Claude Opus 4.5 turi geriausią vizualinį našumą.

Jei naudojate kitus modelius, sugeneruoto dizaino maketo kokybė gali būti prastesnė.

06. Efektyvumo palyginimo duomenys

Pagaliau pasidalinsiu grupe duomenų, kuriuos pats išbandžiau:

Man didžiausia vertė yra ta, kad energija perkeliama nuo "kaip įgyvendinti" prie "kokią funkciją atlikti".

07. Santrauka

Pencil iš esmės sujungia dizainą ir kūrimą, leidžiantį jums valdyti visą procesą natūralia kalba.

Jei taip pat užsiimate priekinės dalies kūrimu, kuriate savo produktus, primygtinai rekomenduoju išbandyti Pencil:Stabili kodo kokybė: atkūrimo tikslumas 98%+, beveik nereikia koreguoti stiliaus

Palaiko įvairias technologijų platformas: Next.js, Flutter, Vue ir kt. gali būti naudojami

Valdomas natūralia kalba: aprašykite reikalavimus žmonių kalba, AI automatiškai generuoja

Pagaliau, jei taip pat užsiimate nepriklausomu kūrimu, AI programavimu, kviečiame palikti komentarą ir pasikalbėti:

Kaip paprastai kuriate dizainą?

Ar naudojote Pencil? Kaip rezultatai?

Aš atidžiai perskaitysiu kiekvieną komentarą. Iki kito karto.