Pencil MCP: Ang Disenyo ay Agad Nagiging Code, Ang Kahusayan sa Pag-develop ng Frontend ay Tumaas ng 8 Beses

Hello sa lahat, ako si Liang Xiao na gumagawa ng mga produktong pang-ibayong dagat. Malapit na ang Bagong Taon, maglalathala muna ako ng isang artikulo bago ang Bagong Taon upang ibahagi sa inyo ang aking mga bagong natuklasan kamakailan.

Kapag gumagawa ng mga webpage o App, naranasan mo na ba ito:

Gusto kong gumawa ng magandang pahina, ngunit hindi ako magaling sa disenyo

Ang pagkuha ng designer ay masyadong mahal, at ang paghahanap ng mga libreng template ay hindi angkop

Sa wakas ay nakuha ko na ang disenyo, ngunit ang pag-convert nito sa code ay isang grupo ng mga problema

Sa totoo lang, noong gumagawa ako ng mga proyekto sa frontend, ang pag-aayos lang ng mga estilo batay sa disenyo ay tumatagal ng kalahating araw. Ang pagitan ay may pagkakaiba ng 2px, ang kulay ay hindi masyadong tama, nakalimutang magdagdag ng rounded corners... paulit-ulit, nakakainis.

Ang magandang balita ay: Ngayon na mayroon nang Pencil na MCP, ang mga problemang ito ay halos malulutas.

Kamakailan ay ginamit ko ito upang gumawa ng ilang mga pahina, at natuklasan kong ito ay talagang mahusay - mula sa disenyo hanggang sa code, ang kahusayan ay direktang tumaas ng maraming beses. At ang pinakamahalaga, ang kalidad ng disenyo na binuo ng AI para sa iyo ay hindi masama, at ang pagpapanumbalik ng code ay napakataas din.

Ang artikulong ito ay pag-uusapan ang tungkol sa: Ano ba talaga ang Pencil, bakit ito sulit gamitin, at kung paano ito mabilis na magamit.

01. Ano ang Pencil? Ipaliwanag sa Simpleng Salita

Sa madaling salita, ang Pencil ay isang tool na maaaring ikonekta ang disenyo at code.

Dati, ang proseso ay ganito:

Gumawa ng disenyo sa Figma

Minarkahan ng designer ang mga sukat, kulay, at pagitan

Ang developer ay sumusulat ng code nang linya-bawat-linya batay sa disenyo

Pagkatapos isulat, ikumpara sa disenyo, at matuklasan na ang pagpapanumbalik ay 70%-80% lamang

Paulit-ulit na pag-aayos, komunikasyon...

Ang solusyon ng Pencil ay:

Gagamit ka lang ng natural na wika upang ilarawan ang mga kinakailangan (tulad ng "tulungan akong magdisenyo ng isang Apple-style na music player"), at ang AI ay maaaring direktang bumuo ng disenyo sa canvas, at pagkatapos ay bumuo ng kaukulang code sa isang click (sinusuportahan ang Next.js, Flutter, Vue, atbp.).

At ang nakakagulat ay, maaari kang magdisenyo habang nag-aayos. Halimbawa:

"Masyadong maraming kulay lila, palitan ng kaunting berde"

"Palakihin pa ang pagitan"

"Sumangguni sa estilo ng website na ito"

Aayos ng AI ang disenyo at code para sa iyo sa real time, nang hindi mo na kailangang gawin ito sa iyong sarili.

02. Bakit sa tingin ko ay Sulit Gamitin ang Pencil?

1) Talagang Mataas ang Kahusayan

Ang tradisyonal na paraan ng paggawa ng disenyo para sa isang pahina ay maaaring tumagal ng 4-6 na oras. Sa Pencil, 20-40 minuto lang ang kailangan para matapos ito.

At ang pagpapanumbalik ng code ay maaaring umabot sa 98%+, at hindi mo na kailangang ayusin ang mga estilo.

Sinubukan ko ito sa aking sarili, at ang paggawa ng isang simpleng Landing Page, mula sa disenyo hanggang sa code, ay natapos ko sa loob ng kalahating oras.

2) Matatag ang Kalidad ng Disenyo

Dati, kapag nagpapagawa ako ng disenyo sa AI, madalas kong nakakaharap ang mga ganitong problema:

Hindi magkatugma ang mga kulay

Magulo ang mga pagitan

Hindi pare-pareho ang laki ng font

Ang Pencil ay mayroong isang hanay ng mga sistema ng disenyo at pamantayan ng aesthetics, at ang kalidad ng disenyo na binuo ay medyo matatag. Bagama't hindi ito perpekto, hindi ito masyadong pangit.

3) Sinusuportahan ang Maraming Stack ng Teknolohiya

Kung gumagawa ka man ng Next.js, Flutter, Vue, o SwiftUI, awtomatikong bubuo ang Pencil ng kaukulang code.

Ito ay talagang maginhawa para sa mga taong tulad ko na gumagawa ng multi-platform development - isang disenyo, at lahat ng code para sa maraming platform ay narito na.

03. Paano Mag-install at Gumamit ng Pencil?

Sa ibaba ay ibabahagi ko ang aking sariling proseso ng pag-install at paggamit, na dapat ang pinakasimpleng paraan sa kasalukuyan.

Unang Hakbang: I-install ang Pencil MCP

Direktang hanapin ang "pencil" sa iyong IDE (VS Code, Cursor, atbp.)

I-click ang install, huwag mag-download sa ibang lugar (upang maiwasan ang pag-download ng mga pirated na bersyon)

Tandaan: Ang direktang paghahanap sa IDE ay ang pinakaligtas na paraan.

Pangalawang Hakbang: Hayaan ang AI na Tumulong sa Iyo na I-configure

Paano i-configure pagkatapos i-install?

Sa totoo lang, hindi ko rin masyadong alam sa simula. Nang maglaon, natuklasan ko na ang pinakasimpleng paraan ay: hayaan ang AI na tumulong sa iyo na i-configure.

Buksan ang iyong AI programming assistant (Claude Code o Codex), at sabihin dito:

Nai-install ko na ang "pencil" na MCP sa IDE na ito, mangyaring tulungan akong i-configure ito upang magamit ng aking Claude Code, Codex, at VS Code ang MCP na ito

Pagkatapos ay hintayin itong i-configure para sa iyo.

Ikatlong Hakbang: Simulan ang Paggamit ng Pencil para Gumawa ng Disenyo

Pagkatapos ng configuration, makikita mo ang isang icon ng lapis sa kaliwang bahagi ng IDE, i-click upang buksan ang canvas ng Pencil.

Pagkatapos, sa kanang bahagi ng AI dialogue box, sabihin mo kung anong disenyo ang gusto mo.

Halimbawa:

"I-design mo ako ng music player na may Apple style"

"Gumawa ka ng isang simpleng Landing Page, ang pangunahing kulay ay asul"

"Gayahin mo ang estilo ng website na ito, gawan mo ako ng katulad"

Gagawa ang AI ng draft ng disenyo sa canvas. Kung hindi ka nasisiyahan, maaari mo itong ipagpatuloy na ayusin:

"Masyadong maliit ang font, palakihin mo nang kaunti"

"Palawakin mo pa ang pagitan"

"Palitan mo ng mas malambot na kulay"

Ayusin mo hanggang sa masiyahan ka.

Ikaapat na Hakbang: Bumuo ng Code

Kapag tapos na ang draft ng disenyo, maaari mong hayaan ang AI na bumuo ng code para sa iyo.

Maaari mong sabihin nang direkta:

"Bumuo ka ng Next.js code para sa akin"

"Bumuo ka ng Flutter code"

"Bumuo ka ng Vue 3 code"

Gagawa ang AI ng kaukulang code batay sa iyong draft ng disenyo.

Praktikal na epekto:

04. Ilang Praktikal na Karanasan sa Paggamit

Pagkatapos gamitin ito nang ilang beses, may ilang mga karanasan akong ibabahagi:

1) Dapat Maging Tiyak ang Paglalarawan ng Pangangailangan

Sa simula, sasabihin ko "Gawan mo ako ng website", ngunit ang ginawa ng AI ay hindi ko gusto.

Nalaman ko na kapag mas tiyak ang paglalarawan, mas maganda ang resulta.

Halimbawa:

Maling paglalarawan: "Gawan mo ako ng login page"

Mabuting paglalarawan: "Gawan mo ako ng isang simpleng login page, may Logo sa itaas, may email at password input box sa gitna, may login button sa ibaba, ang estilo ay katulad ng Apple official website"

2) Maaaring Mag-upload ng Reference Image

Kung nakakita ka ng isang website na may magandang disenyo, maaari kang mag-screenshot at i-upload ito sa AI para maging reference.

Sa ganitong paraan, ang draft ng disenyo na nabuo ay mas malapit sa iyong inaasahan.

3) Mas Mahalaga ang Iterasyon kaysa sa Isang Bagsak na Pagbuo

Huwag mong isipin na makakabuo ka ng perpektong disenyo sa isang bagsakan, hindi ito makatotohanan.

Ang tamang paraan ay: bumuo muna ng isang pangkalahatang disenyo, at pagkatapos ay ayusin ito nang paunti-unti.

Ayusin lamang ang isa o dalawang bagay sa bawat pagkakataon, tulad ng "Palawakin mo pa ang pagitan" "Gawing mas malambot ang kulay", ito ang pinakamabisang paraan.

4) Maganda ang Kalidad ng Code

Sinubukan ko ito nang ilang beses, at ang kalidad ng code na nabuo ay medyo mataas:

Malinaw ang istraktura ng code

Mataas ang antas ng pagpapanumbalik ng estilo (98%+)

Maganda rin ang ginawang responsive layout

Sa pangkalahatan, maaari itong gamitin pagkatapos ng bahagyang pagbabago.

05. Ilang Bagay na Dapat Tandaan

Bagama't napakagandang gamitin ang Pencil, may ilang bagay na dapat tandaan:

1) Kailangan Mo Pa Ring Umasa sa Iyong Sariling Aesthetic Sense

Maaaring tulungan ka ng AI na bumuo ng draft ng disenyo, ngunit ikaw pa rin ang magpapasya kung maganda ito o hindi.

Kaya't tumingin ng maraming magagandang disenyo sa karaniwan, pagbutihin ang iyong aesthetic sense, upang makapagbigay ka ng mas mahusay na gabay kapag gumagamit ng Pencil.

Mirekomenda ang ilang lugar upang maghanap ng mga sanggunian sa disenyo:

Dribbble

Mobbin (espesyal na nangongolekta ng mobile UI)

Mga screenshot ng iba't ibang mahuhusay na website

2) Kailangan Mo Pa Ring Isulat ang Kumplikadong Interaksyon

Ang Pencil ay angkop para sa paggawa ng mga static na pahina at karaniwang interaksyon, ngunit kung may kasangkot na kumplikadong animation, galaw, atbp., kailangan mo pa ring magsulat ng code sa iyong sarili.

Ngunit para sa karamihan ng mga sitwasyon, sapat na ang Pencil.

3) Mahalaga ang Pagpili ng Tamang AI Model

Sinubukan ko ang ilang mga modelo, at nalaman ko na ang Claude Opus 4.5 ay may pinakamahusay na visual na pagganap.

Kung gumamit ka ng ibang mga modelo, ang kalidad ng draft ng disenyo na nabuo ay maaaring mas mababa.

06. Data ng Paghahambing ng Kahusayan

Sa wakas, ibabahagi ko ang isang set ng data na personal kong sinubukan:

Para sa akin, ang pinakamalaking halaga ay: ilipat ang enerhiya mula sa "paano ipatupad" sa "anong function ang gagawin".

07. Buod

Sa esensya, pinagsasama ng Pencil ang disenyo at pag-unlad, na nagbibigay-daan sa iyong gamitin ang natural na wika upang himukin ang buong proseso.

Kung ikaw ay gumagawa din ng front-end development, gumagawa ng iyong sariling mga produkto, lubos kong inirerekumenda na subukan mo ang Pencil:Matatag ang Kalidad ng Code: 98%+ ang Fidelity ng Pagkakatulad, Halos Hindi na Kailangang Ayusin ang Estilo

Suporta sa Maraming Stack ng Teknolohiya: Gumagana sa Next.js, Flutter, Vue, atbp.

Pinapatakbo ng Natural na Wika: Gamitin ang pang-araw-araw na pananalita para ilarawan ang mga pangangailangan, awtomatikong bubuo ang AI

Huli, kung ikaw rin ay gumagawa ng independent development, AI programming, maligayang pagdating na mag-iwan ng komento para mag-usap:

Paano ka karaniwang gumagawa ng disenyo?

Nasubukan mo na ba ang Pencil? Ano ang resulta?

Babasahin kong mabuti ang bawat komento. Hanggang sa susunod.