Pencil MCP: Miundo Hubadilika Mara Moja Kuwa Msimbo, Ufanisi wa Ukuzaji wa Frontend Huongezeka Mara 8

Habari zenu, mimi ni Liang Xiao ambaye anafanya bidhaa za kimataifa, Mwaka Mpya unakaribia, kabla ya Mwaka Mpya nitachapisha makala nyingine kushiriki nanyi mafanikio yangu ya hivi karibuni.

Unapotengeneza kurasa za wavuti au programu, je, umewahi kuwa na hisia hii:

Unataka kutengeneza ukurasa mzuri, lakini ujuzi wako wa kubuni si mzuri

Kumpata mbunifu ni ghali sana, na kupata violezo vya bure haifai

Baada ya shida nyingi, unatatua muundo, lakini kuurejesha kuwa msimbo ni rundo la matatizo

Kusema kweli, nilipokuwa nikifanya miradi ya frontend hapo awali, nilitumia muda mwingi kurekebisha mitindo kulingana na muundo. Nafasi ilikuwa tofauti kwa 2px, rangi haikuwa sahihi, kona iliyozungushwa ilisahau kuongezwa... tena na tena, ilikuwa inakera sana.

Habari njema ni kwamba: sasa kuna Pencil MCP, matatizo haya yanaweza kutatuliwa kimsingi.

Hivi majuzi nimeitumia kutengeneza kurasa kadhaa, na nimegundua kuwa ni nzuri sana - kutoka kwa muundo hadi msimbo, ufanisi umeongezeka mara kadhaa. Na jambo muhimu zaidi ni kwamba, ubora wa muundo unaozalishwa na AI ni mzuri, na urejeshaji wa msimbo pia ni wa juu sana.

Makala hii itazungumzia: Pencil ni nini hasa, kwa nini inafaa kutumia, na jinsi ya kuanza haraka.

01. Pencil ni nini? Eleza kwa lugha rahisi

Kwa kifupi, Pencil ni zana ambayo inaweza kuunganisha muundo na msimbo.

Mchakato wa zamani ulikuwa hivi:

Unda muundo katika Figma

Mbuni anaweka alama vipimo, rangi, nafasi

Msanidi programu anaandika msimbo mstari kwa mstari kulingana na muundo

Baada ya kuandika, linganisha na muundo, na ugundue kuwa urejeshaji ni 70%-80% tu

Rekebisha na uwasiliane mara kwa mara...

Suluhisho la Pencil ni:

Unahitaji tu kuelezea mahitaji kwa lugha ya asili (kama vile "nisaidie kubuni kicheza muziki cha mtindo wa Apple"), na AI inaweza kuzalisha muundo moja kwa moja kwenye turubai, na kisha kuzalisha msimbo unaolingana kwa kubofya mara moja (Next.js, Flutter, Vue, n.k. zote zinaungwa mkono).

Na cha ajabu ni kwamba, unaweza kurekebisha unapobuni. Kwa mfano:

"Zambarau ni nyingi sana, badilisha na kijani kidogo"

"Nafasi iwe kubwa zaidi"

"Rejelea mtindo wa tovuti hii"

AI itakusaidia kurekebisha muundo na msimbo kwa wakati halisi, bila wewe kufanya chochote mwenyewe.

02. Kwa nini nadhani Pencil inafaa kutumia?

1) Ufanisi ni wa juu sana

Njia ya jadi ya kutengeneza muundo wa ukurasa inaweza kuchukua saa 4-6. Ukiwa na Pencil, unaweza kuifanya kwa dakika 20-40.

Na urejeshaji wa msimbo unaweza kufikia 98%+, kimsingi hakuna haja ya kurekebisha mitindo tena.

Mimi mwenyewe nimejaribu, kutengeneza Landing Page rahisi, kutoka kwa muundo hadi msimbo, kila kitu kimekamilika, kwa nusu saa tu.

2) Ubora wa muundo ni thabiti

Hapo awali, nilipokuwa nikiruhusu AI kuzalisha muundo, mara nyingi nilikutana na matatizo haya:

Rangi hazilingani

Nafasi zimechanganyika

Ukubwa wa fonti haufanani

Pencil ina mfumo wa muundo na viwango vya urembo nyuma yake, na ubora wa muundo unaozalishwa ni thabiti zaidi. Ingawa si kamilifu, angalau haitakuwa mbaya sana.

3) Inasaidia teknolojia nyingi

Bila kujali kama unafanya Next.js, Flutter, Vue au SwiftUI, Pencil inaweza kuzalisha msimbo unaolingana kiotomatiki.

Hii ni rahisi sana kwa mtu kama mimi ambaye anafanya ukuzaji wa pande nyingi - muundo mmoja, msimbo wa majukwaa mengi unapatikana.

03. Jinsi ya kusakinisha na kutumia Pencil?

Chini nitashiriki mchakato wangu wa usakinishaji na matumizi, inapaswa kuwa njia rahisi zaidi kwa sasa.

Hatua ya kwanza: Sakinisha Pencil MCP

Tafuta "pencil" moja kwa moja katika IDE yako (VS Code, Cursor, n.k.)

Bofya sakinisha, usiende mahali pengine popote kupakua (epuka kupakua toleo haramu)

Kumbuka: Kutafuta moja kwa moja katika IDE ndiyo njia salama zaidi.

Hatua ya pili: Ruhusu AI ikusaidie kusanidi

Baada ya kusakinisha, jinsi ya kusanidi?

Kusema kweli, sikuelewa sana mwanzoni. Baadaye niligundua kuwa njia rahisi zaidi ni: ruhusu AI ikusaidie kusanidi.

Fungua msaidizi wako wa programu wa AI (Claude Code au Codex), na umwambie:

Nimesakinisha "pencil" hii MCP katika IDE hii, tafadhali nisaidie kuisanidi, ili Claude Code, Codex, VS Code yangu iweze kutumia MCP hii

Kisha subiri ikusaidie kusanidi.

Hatua ya tatu: Anza kutumia Pencil kutengeneza muundo

Baada ya kusanidi, utaona ikoni ya penseli upande wa kushoto wa IDE, bofya ili kufungua turubai ya Pencil.

Kisha, kwenye kisanduku cha mazungumzo cha AI upande wa kulia, iambie kile unachotaka kubuni.

Kwa mfano:

"Nisaidie kubuni kicheza muziki cha mtindo wa Apple"

"Tengeneza Ukurasa wa Kutua rahisi, rangi kuu ikiwa ni bluu"

"Rejelea mtindo wa tovuti hii, nisaidie kutengeneza inayofanana"

AI itazalisha rasimu ya muundo kwenye turubai. Ikiwa haujaridhika, unaweza kuendelea kuiruhusu irekebishe:

"Fonti ni ndogo sana, ikuze kidogo"

"Nafasi iwe kubwa zaidi"

"Badilisha rangi laini zaidi"

Endelea kurekebisha hadi umeridhika.

Hatua ya Nne: Tengeneza Msimbo

Baada ya rasimu ya muundo kukamilika, unaweza kuruhusu AI ikusaidie kutengeneza msimbo.

Unaweza kusema moja kwa moja:

"Nisaidie kutengeneza msimbo wa Next.js"

"Tengeneza msimbo wa Flutter"

"Tengeneza msimbo wa Vue 3"

AI itatengeneza msimbo unaolingana kiotomatiki kulingana na rasimu yako ya muundo.

Athari halisi:

04. Uzoefu Fulani Halisi wa Matumizi

Baada ya kuitumia mara kadhaa, kuna hisia kadhaa za kushiriki:

1) Eleza Mahitaji Hasa

Mwanzo ningesema "Nisaidie kutengeneza tovuti", lakini kile AI ilizalisha hakikuwa kile nilitaka kabisa.

Baadaye niligundua kuwa kadiri maelezo yanavyokuwa maalum, ndivyo athari inavyokuwa bora.

Kwa mfano:

Maelezo mabaya: "Nisaidie kutengeneza ukurasa wa kuingia"

Maelezo mazuri: "Nisaidie kutengeneza ukurasa rahisi wa kuingia, na nembo juu, kisanduku cha kuingiza barua pepe na nenosiri katikati, na kitufe cha kuingia chini, mtindo ukirejelea tovuti rasmi ya Apple"

2) Unaweza Kupakia Picha za Marejeleo

Ukiona muundo wa tovuti fulani ni mzuri, unaweza kupiga picha ya skrini na kuipakia kwa AI, ili iweze kurejelea.

Rasimu ya muundo iliyotengenezwa kwa njia hii itakuwa karibu zaidi na matarajio yako.

3) Marudio ni Muhimu Zaidi Kuliko Kufanya Kila Kitu Sawa Mara Moja

Usifikirie kuhusu kutengeneza muundo kamili mara moja, hii si kweli.

Njia sahihi ni: kwanza tengeneza kitu cha jumla, kisha urekebishe kidogo kidogo.

Rekebisha sehemu moja au mbili tu kila wakati, kama vile "Nafasi iwe kubwa zaidi" "Rangi iwe laini zaidi", hii ndiyo njia bora zaidi.

4) Ubora wa Msimbo Bado ni Mzuri

Nimejaribu mara kadhaa, ubora wa msimbo uliotengenezwa bado ni mzuri sana:

Muundo wa msimbo uko wazi

Urejeshaji wa mtindo ni wa juu (98% +)

Mpangilio msikivu pia umefanywa vizuri

Kimsingi unaweza kuichukua na kuirekebisha kidogo ili iweze kutumika.

05. Mambo Kadhaa ya Kuzingatia

Ingawa Pencil ni nzuri sana kutumia, kuna mambo kadhaa ya kuzingatia:

1) Urembo Bado Unategemea Wewe Mwenyewe

AI inaweza kukusaidia kutengeneza rasimu ya muundo, lakini kama ni nzuri au la bado unahitaji kuamua mwenyewe.

Kwa hivyo angalia miundo mizuri zaidi mara kwa mara, boresha urembo wako, ili uweze kutoa mwongozo bora unapotumia Pencil.

Ninapendekeza maeneo kadhaa ya kupata marejeleo ya muundo:

Dribbble

Mobbin (hukusanya UI ya simu mahsusi)

Picha za skrini za tovuti mbalimbali bora

2) Mwingiliano Mgumu Bado Unahitaji Kuandika Mwenyewe

Pencil inafaa kwa kutengeneza kurasa tuli na mwingiliano wa kawaida, lakini ikiwa inahusisha uhuishaji mgumu, ishara, nk, bado unahitaji kuandika msimbo mwenyewe.

Lakini kwa matukio mengi, Pencil inatosha.

3) Kuchagua Mfumo Sahihi wa AI ni Muhimu Sana

Nimejaribu mifumo kadhaa, na nimegundua kuwa Claude Opus 4.5 ina utendaji bora wa kuona.

Ukitumia mifumo mingine, ubora wa rasimu ya muundo iliyotengenezwa inaweza kuwa mbaya zaidi.

06. Data ya Ulinganisho wa Ufanisi

Mwishowe, shiriki seti ya data niliyojaribu mwenyewe:

Kwangu, thamani kubwa zaidi ni: kuhamisha nguvu kutoka "jinsi ya kutekeleza" hadi "kazi gani ya kufanya".

07. Muhtasari

Pencil kimsingi inaunganisha muundo na maendeleo, hukuruhusu kuendesha mchakato mzima na lugha ya asili.

Ikiwa pia unafanya maendeleo ya mbele, ukitengeneza bidhaa zako mwenyewe, ninapendekeza sana ujaribu Pencil:Ubora wa Msimbo Umeimarika: Usahihi wa 98%+, Hakuna Haja ya Kurekebisha Mitindo

Inaauni Teknolojia Nyingi: Next.js, Flutter, Vue, n.k. zinaweza kutumika

Inaendeshwa na Lugha ya Asili: Eleza mahitaji kwa lugha ya kawaida, AI hutengeneza kiotomatiki

Mwisho, ikiwa pia unafanya uendelezaji wa kujitegemea, upangaji wa AI, karibu uache maoni:

Kwa kawaida unafanyaje muundo?

Umetumia Pencil? Matokeo yakoje?

Nitasoma kila maoni kwa makini. Tutaonana makala ijayo.