Pencil MCP: Hönnunarskýrslur breytast á augabragði í kóða, framendaþróun skilvirkni eykst um 8 sinnum

Halló allir, ég er Liang Xiao sem er að búa til vörur fyrir erlenda markaði. Áður en árið er búið mun ég deila nýjustu uppgötvunum mínum með ykkur.

Þegar þú býrð til vefsíður eða öpp, hefur þú einhvern tíma fundið fyrir þessu:

• Vilt búa til fallega síðu, en hönnunin þín er ekki nógu góð
• Að ráða hönnuð er of dýrt, og ókeypis sniðmát henta ekki
• Það er erfitt að klára hönnunarskýrsluna, og það eru fullt af vandamálum þegar hún er breytt í kóða

Satt best að segja, þegar ég vann áður að framendaverkefnum, gat ég eytt hálfum deginum í að stilla stílinn út frá hönnunarskýrslunni. Bilið er 2px of lítið, liturinn er ekki réttur, gleymdi að bæta við ávölum hornum... aftur og aftur, alveg pirrandi.

Góðu fréttirnar eru: Nú þegar við höfum Pencil MCP, er hægt að leysa þessi vandamál að mestu.

Ég hef nýlega notað það til að búa til nokkrar síður og fannst það virkilega gott - frá hönnunarskýrslu til kóða, skilvirkni hefur aukist mörgum sinnum. Og það sem er mikilvægast er að gæði hönnunarskýrslunnar sem AI hjálpar þér að búa til eru ekki slæm og kóðaendurgerðin er líka mjög góð.

Þessi grein mun fjalla um: Hvað er Pencil, hvers vegna er það þess virði að nota það og hvernig á að byrja fljótt.

01. Hvað er Pencil? Útskýrt á mannamáli

Einfaldlega sagt, Pencil er tól sem getur tengt hönnun og kóða.

Aðferðin áður var svona:

• Búðu til hönnunarskýrslu í Figma
• Hönnuðurinn merkir stærðir, liti og bil
• Þróunaraðilinn skrifar kóða línu fyrir línu út frá hönnunarskýrslunni
• Eftir að hafa skrifað, berðu saman við hönnunarskýrsluna og finndu að endurgerðin er aðeins 70%-80%
• Stilltu og hafðu samskipti aftur og aftur...

Lausn Pencil er:

Þú þarft aðeins að lýsa kröfunum á náttúrulegu máli (eins og "hjálpaðu mér að hanna tónlistarspilara í Apple-stíl"), og AI getur beint búið til hönnunarskýrslu á striganum og síðan búið til samsvarandi kóða með einum smelli (Next.js, Flutter, Vue o.s.frv. eru öll studd).

Og það sem er undarlegt er að þú getur stillt hönnunina á meðan þú hannar. Til dæmis:

• "Of mikið fjólublátt, skiptu yfir í grænt"
• "Stærra bil"
• "Vísaðu í stílinn á þessari vefsíðu"

AI mun hjálpa þér að stilla hönnunina og kóðann í rauntíma, án þess að þú þurfir að gera neitt sjálfur.

02. Hvers vegna finnst mér Pencil vera þess virði að nota?

1) Skilvirkni er virkilega mikil

Það getur tekið 4-6 klukkustundir að búa til hönnunarskýrslu fyrir síðu á hefðbundinn hátt. Með Pencil geturðu klárað það á 20-40 mínútum.

Og kóðaendurgerðin getur náð 98%+, þú þarft í grundvallaratriðum ekki að stilla stílinn lengur.

Ég prófaði það sjálfur og bjó til einfalda Landing Page, frá hönnun til kóða, allt klárt á um hálftíma.

2) Stöðug hönnunargæði

Áður þegar ég lét AI búa til hönnunarskýrslu, lenti ég oft í þessum vandamálum:

• Ósamræmd litasamsetning
• Óskipulegt bil
• Ósamræmd leturstærð

Pencil hefur hönnunarkerfi og fagurfræðilega staðla á bak við sig og gæði hönnunarskýrslunnar sem myndast eru tiltölulega stöðug. Þótt það sé ekki fullkomið, þá er það að minnsta kosti ekki of ljótt.

3) Styður marga tæknistafla

Sama hvort þú ert að vinna með Next.js, Flutter, Vue eða SwiftUI, Pencil getur sjálfkrafa búið til samsvarandi kóða.

Þetta er virkilega þægilegt fyrir fólk eins og mig sem er að vinna að þróun á mörgum kerfum - ein hönnunarskýrsla, kóði fyrir mörg kerfi, allt til staðar.

03. Hvernig á að setja upp og nota Pencil?

Hér er deilt með ykkur mínu eigin uppsetningar- og notkunarferli, sem ætti að vera einfaldasta leiðin í dag.

Fyrsta skref: Settu upp Pencil MCP

Leitaðu beint að "pencil" í IDE þínu (VS Code, Cursor o.s.frv.)

Smelltu á Install, ekki hlaða niður annars staðar (forðastu að hlaða niður falsaðri útgáfu)

Athugið: Að leita beint í IDE er öruggasta leiðin.

Annað skref: Láttu AI hjálpa þér að stilla

Hvernig á að stilla það eftir uppsetningu?

Satt best að segja, ég skildi það ekki heldur í fyrstu. Seinna komst ég að því að einfaldasta leiðin er: láttu AI hjálpa þér að stilla það beint.

Opnaðu AI forritunarhjálparann þinn (Claude Code eða Codex) og segðu við hann:

Ég hef þegar sett upp "pencil" MCP í þessu IDE, vinsamlegast hjálpaðu mér að stilla það, svo að Claude Code, Codex og VS Code geti öll notað þetta MCP

Bíddu síðan eftir að það hjálpi þér að stilla það.

Þriðja skref: Byrjaðu að hanna með Pencil

Eftir að hafa stillt það muntu sjá blýantstákn vinstra megin í IDE, smelltu á það til að opna striga Pencil.

Og segðu síðan AI í samræðuglugganum hægra megin hvaða hönnun þú vilt.

Til dæmis:

"Hannaðu tónlistarspilara í Apple stíl fyrir mig"

"Búðu til einfalda Landing Page, aðalliturinn er blár"

"Vísaðu í stílinn á þessari vefsíðu og búðu til eitthvað svipað fyrir mig"

AI mun búa til hönnun á striganum. Ef þú ert ekki ánægður geturðu haldið áfram að láta það stilla:

"Letrið er of lítið, stækkaðu það aðeins"

"Auka bilið"

"Skiptu yfir í mildari lit"

Stilltu þar til þú ert ánægður.

Fjórða skref: Búðu til kóða

Þegar hönnunin er búin geturðu látið AI hjálpa þér að búa til kóða.

Þú getur sagt beint:

"Búðu til Next.js kóða fyrir mig"

"Búðu til Flutter kóða"

"Búðu til Vue 3 kóða"

AI mun sjálfkrafa búa til samsvarandi kóða í samræmi við hönnunina þína.

Raunveruleg áhrif:

04. Nokkur raunveruleg notendaupplifun

Eftir að hafa notað það nokkrum sinnum, þá eru nokkrar tilfinningar til að deila:

1) Lýstu kröfum sérstaklega

Í fyrstu myndi ég segja "Búðu til vefsíðu fyrir mig", en það sem AI bjó til var alls ekki það sem ég vildi.

Seinna komst ég að því að því nákvæmari sem lýsingin er, því betri eru áhrifin.

Til dæmis:

Slæm lýsing: "Búðu til innskráningarsíðu fyrir mig"

Góð lýsing: "Búðu til einfalda innskráningarsíðu fyrir mig, með lógói efst, netfangi og lykilorðsinntaksreitum í miðjunni og innskráningarhnappi neðst, með stíl sem vísar í opinbera vefsíðu Apple"

2) Þú getur hlaðið upp viðmiðunarmyndum

Ef þú sérð hönnun á vefsíðu sem er góð geturðu tekið skjáskot og hlaðið því upp í AI til viðmiðunar.

Hönnunin sem myndast verður nær væntingum þínum.

3) Endurtekning er mikilvægari en að gera það rétt í fyrsta skipti

Ekki búast við að búa til fullkomna hönnun í einu, það er óraunhæft.

Rétta leiðin er: búðu fyrst til grófa útgáfu og stilltu hana síðan smátt og smátt.

Stilltu aðeins einn eða tvo staði í hvert skipti, eins og "Auka bilið" "Gerðu litinn mildari", þetta er skilvirkasta leiðin.

4) Kóðagæði eru ágæt

Ég prófaði það nokkrum sinnum og kóðagæðin sem mynduðust voru nokkuð góð:

Kóðabyggingin er skýr

Stíllinn er endurgerður í mikilli nákvæmni (98% +)

Responsive layout er líka vel gert

Í grundvallaratriðum er hægt að nota það eftir smávægilegar breytingar.

05. Nokkur atriði sem þarf að hafa í huga

Þó að Pencil sé mjög gagnlegt, þá eru nokkur atriði sem þarf að hafa í huga:

1) Fagurfræði er enn undir þér komið

AI getur hjálpað þér að búa til hönnun, en þú verður að dæma hvort hún er falleg eða ekki.

Svo horfðu á góða hönnun oft á venjulegum tímum til að bæta fagurfræði þína, svo þú getir gefið betri leiðbeiningar þegar þú notar Pencil.

Mælt er með nokkrum stöðum til að finna hönnunartilvísanir:

Dribbble

Mobbin (sérhæfir sig í að safna UI fyrir farsíma)

Skjámyndir af ýmsum framúrskarandi vefsíðum

2) Flókin samskipti þarf enn að skrifa sjálfur

Pencil er hentugur til að búa til kyrrstæðar síður og venjuleg samskipti, en ef um er að ræða flóknar hreyfimyndir, bendingar o.s.frv., þarftu samt að skrifa kóðann sjálfur.

En fyrir flestar aðstæður er Pencil nóg.

3) Að velja rétt AI líkan er mjög mikilvægt

Ég prófaði nokkur líkön og fannst sjónræn frammistaða Claude Opus 4.5 vera best.

Ef þú notar önnur líkön gætu gæði hönnunarinnar sem myndast verið verri.

06. Gögn um skilvirkni samanburð

Að lokum, deildu hópi gagna sem ég prófaði sjálfur:

VísitalaHefðbundin aðferðNotkun PencilSkilvirkni aukningHönnunarframleiðsla4-6 klukkustundir20-40 mínútur8 sinnumKóðaendurgerð70%-85%98%+VilluleitartímiMinnkaður um 90%Fjöltæki aðlögunÞarf endurtekna þróunBýr sjálfkrafa tilSparar 75% tímaFyrir mig er mesta gildið: að færa orku frá "hvernig á að ná fram" yfir í "hvaða virkni á að gera".

07. Samantekt

Pencil tengir í raun hönnun og þróun og gerir þér kleift að keyra allt ferlið með náttúrulegu tungumáli.

Ef þú ert líka að vinna að framendaþróun, að búa til þínar eigin vörur, mæli ég eindregið með því að prófa Pencil:Kóðagæði Stöðug: Endurgerð 98%+, þarf í rauninni ekki að stilla stíl

Styður Margar Tæknistöfla: Next.js, Flutter, Vue o.s.frv. geta allir notað það

Náttúrulegt Tungumál Drifið: Lýstu þörfum á mannamáli, AI býr til sjálfkrafa

Að lokum, ef þú ert líka að vinna að sjálfstæðri þróun, AI forritun, velkomið að skilja eftir athugasemd og spjalla:

Hvernig hönnunar þú venjulega?

Hefurðu notað Pencil? Hvernig er virknin?

Ég mun skoða hverja athugasemd vandlega. Sjáumst í næstu grein.