Pencil MCP: Dizaina skices acumirklī pārvēršas kodā, front-end izstrādes efektivitāte palielinās 8 reizes

Sveiki visiem, esmu Liang Xiao, kurš veido produktus starptautiskajam tirgum. Drīz būs Jaunais gads, un pirms tā vēlos padalīties ar jums par saviem jaunākajiem atklājumiem.\n\nVeidojot tīmekļa vietnes vai lietotnes, vai jums ir bijusi šāda sajūta:\n\nGribu izveidot skaistu lapu, bet man nav dizaina prasmes\n\nDizaineru algošana ir pārāk dārga, un bezmaksas veidnes nav piemērotas\n\nBeidzot esmu ticis galā ar dizaina skici, bet tās pārvēršana kodā rada daudz problēmu\n\Atklāti sakot, kad esmu strādājis pie front-end projektiem, esmu pavadījis ilgu laiku, pielāgojot stilus atbilstoši dizaina skicei. Atstarpe ir par 2 pikseļiem atšķirīga, krāsa nav īsti pareiza, aizmirsts pievienot noapaļotus stūrus... Atkal un atkal, tas ir ārkārtīgi kaitinoši.\n\nLabā ziņa ir tā, ka tagad ir Pencil MCP, un šīs problēmas var atrisināt. \n\nNesen esmu to izmantojis, lai izveidotu dažas lapas, un esmu atklājis, ka tas ir patiešām lieliski – no dizaina skices līdz kodam, efektivitāte ir tieši palielinājusies vairākas reizes. Un pats galvenais, AI ģenerētā dizaina skice ir diezgan laba, un koda atveidošanas precizitāte ir ļoti augsta.\n\nŠajā rakstā es runāšu par to: kas īsti ir Pencil, kāpēc to ir vērts izmantot un kā ātri sākt darbu.\n\n## 01. Kas ir Pencil? Vienkāršiem vārdiem izskaidrojot\n\nVienkārši sakot, Pencil ir rīks, kas var savienot dizainu un kodu.\n\nIepriekšējais process bija šāds:\n\nDizaina skices veidošana Figma\n\nDizaineris atzīmē izmērus, krāsas, atstarpes\n\nIzstrādātājs raksta kodu rindiņu pa rindiņai atbilstoši dizaina skicei\n\nPēc pabeigšanas salīdzina ar dizaina skici un atklāj, ka atveidošanas precizitāte ir tikai 70–80%\n\nAtkārtoti pielāgo, sazinās...\n\nPencil risinājums ir:\n\nJums vienkārši jāapraksta prasības dabiskā valodā (piemēram, <img src="https://tipclaw.com/uploads/1770976432022-h77lne7.png">

Un tad AI dialoglodziņā labajā pusē pasakiet, kādu dizainu vēlaties.

Piemēram:

"Palīdziet man izveidot Apple stila mūzikas atskaņotāju"

"Izveidojiet vienkāršu Landing Page, galvenā krāsa ir zila"

"Atsaucieties uz šīs vietnes stilu un palīdziet man izveidot līdzīgu"

AI ģenerēs dizainu uz audekla. Ja neesat apmierināts, varat turpināt to pielāgot:

"Fonts ir pārāk mazs, palieliniet to"

"Atstarpe ir nedaudz lielāka"

"Izvēlieties maigāku krāsu"

Turpiniet pielāgot, līdz esat apmierināts.

Ceturtais solis: ģenerējiet kodu

Pēc dizaina pabeigšanas varat ļaut AI palīdzēt ģenerēt kodu.

Varat tieši teikt:

"Palīdziet man ģenerēt Next.js kodu"

"Ģenerēt Flutter kodu"

"Ģenerēt Vue 3 kodu"

AI automātiski ģenerēs atbilstošo kodu atbilstoši jūsu dizainam.

Reālais efekts:

04. Dažas praktiskas lietošanas pieredzes

Pēc vairākkārtējas lietošanas man ir daži iespaidi, ko vēlos dalīties:

1) Prasību aprakstam jābūt konkrētam

Sākumā es teiktu "Palīdziet man izveidot vietni", bet AI ģenerētais saturs nebija tas, ko es vēlējos.

Vēlāk es atklāju, ka jo konkrētāks apraksts, jo labāks efekts.

Piemēram:

Slikts apraksts: "Palīdziet man izveidot pieteikšanās lapu"

Labs apraksts: "Palīdziet man izveidot vienkāršu pieteikšanās lapu ar logotipu augšpusē, e-pasta un paroles ievades laukiem vidū un pieteikšanās pogu apakšā. Stils atsaucas uz Apple oficiālo vietni."

2) Varat augšupielādēt atsauces attēlus

Ja redzat labu dizainu kādā vietnē, varat uzņemt ekrānuzņēmumu un augšupielādēt to AI, lai tā varētu atsaukties uz to.

Šādā veidā ģenerētais dizains būs tuvāks jūsu cerībām.

3) Iterācija ir svarīgāka nekā vienreizēja pabeigšana

Nedomājiet par perfektu dizainu ģenerēšanu vienreiz, tas nav reāli.

Pareizais veids ir: vispirms ģenerēt aptuvenu dizainu un pēc tam to pielāgot soli pa solim.

Katru reizi pielāgojiet tikai vienu vai divas vietas, piemēram, "Atstarpe ir nedaudz lielāka" vai "Krāsa ir nedaudz maigāka", tas ir visefektīvākais.

4) Koda kvalitāte ir diezgan laba

Esmu to izmēģinājis vairākas reizes, un ģenerētā koda kvalitāte ir diezgan augsta:

• Koda struktūra ir skaidra
• Stila atjaunošanas pakāpe ir augsta (98% +)
• Responsīvais izkārtojums ir arī labi izveidots

Varat to izmantot pēc nelielas modificēšanas.

05. Daži punkti, kuriem jāpievērš uzmanība

Lai gan Pencil ir ļoti noderīgs, ir daži punkti, kuriem jāpievērš uzmanība:

1) Estētika joprojām ir atkarīga no jums

AI var palīdzēt ģenerēt dizainu, bet jums pašam jāspriež, vai tas ir labs vai nē.

Tāpēc parasti skatieties labus dizainus un uzlabojiet savu estētiku, lai, izmantojot Pencil, varētu sniegt labākus norādījumus.

Šeit ir dažas vietas, kur atrast dizaina atsauces:

• Dribbble
• Mobbin (specializējas mobilo ierīču lietotāja interfeisa apkopošanā)
• Dažādu lielisku vietņu ekrānuzņēmumi

2) Sarežģīta mijiedarbība joprojām ir jāraksta pašam

Pencil ir piemērots statisku lapu un parastas mijiedarbības izveidei, bet, ja ir iesaistītas sarežģītas animācijas, žesti utt., jums joprojām ir jāraksta kods pašam.

Tomēr lielākajai daļai scenāriju Pencil jau ir pietiekami labs.

3) Pareiza AI modeļa izvēle ir ļoti svarīga

Esmu izmēģinājis vairākus modeļus un atklāju, ka Claude Opus 4.5 ir vislabākais vizuālais sniegums.

Ja izmantojat citus modeļus, ģenerētā dizaina kvalitāte var būt nedaudz sliktāka.

06. Datu salīdzinājums par efektivitāti

Visbeidzot, es dalīšos ar datu kopumu, ko pats esmu pārbaudījis:

Man lielākā vērtība ir: pārvirzīt enerģiju no "Kā to panākt" uz "Kādu funkciju darīt".

07. Kopsavilkums

Pencil būtībā savieno dizainu un izstrādi, ļaujot jums vadīt visu procesu ar dabiskās valodas palīdzību.

Ja jūs arī veicat front-end izstrādi, veidojot savus produktus, es ļoti iesaku izmēģināt Pencil:Koda kvalitāte stabila: atveidošanas precizitāte 98%+, stils praktiski nav jāpielāgo

Atbalsta dažādas tehnoloģiju stekus: Next.js, Flutter, Vue utt. ir izmantojami

Dabiskās valodas vadība: aprakstiet prasības cilvēku valodā, AI automātiski ģenerē

Visbeidzot, ja arī jūs nodarbojaties ar neatkarīgu izstrādi, AI programmēšanu, laipni lūdzam atstāt komentāru un parunāt:

Kā jūs parasti veidojat dizainu?

Vai esat izmantojis Pencil? Kādi ir rezultāti?

Es rūpīgi izlasīšu katru komentāru. Uz tikšanos nākamajā rakstā.