Pencil MCP: Suunnitteluluonnoksesta koodiksi sekunneissa, etupään kehityksen tehokkuus kasvaa 8-kertaiseksi

Hei kaikki, olen merentakaisia tuotteita tekevä Liang Xiao. Uusi vuosi on tulossa, joten jaan vielä yhden artikkelin ennen vuotta kanssanne viimeaikaisista saavutuksistani. Kun teet verkkosivuja tai sovelluksia, onko sinulla koskaan ollut tällaista tunnetta: * Haluat tehdä kauniin sivun, mutta et ole hyvä suunnittelussa * Suunnittelijan palkkaaminen on liian kallista, ja ilmaiset mallit eivät sovi * Kun olet vihdoin saanut suunnitteluluonnoksen valmiiksi, koodiksi muuntamisessa on taas paljon ongelmia Rehellisesti sanottuna, kun tein etupään projekteja aiemmin, pelkästään tyylien säätämiseen suunnitteluluonnoksen perusteella saattoi mennä puoli päivää. Väli oli 2 pikseliä pielessä, väri ei ollut oikea, pyöristys unohtui lisätä... Toistuvasti, ärsyttävää. Hyvä uutinen on: nyt kun on Pencil MCP, nämä ongelmat voidaan periaatteessa ratkaista. Olen äskettäin tehnyt sillä muutamia sivuja, ja olen huomannut, että se on todella hyvä – suunnitteluluonnoksesta koodiksi, tehokkuus on suoraan moninkertaistunut. Ja mikä tärkeintä, tekoälyn luoman suunnitteluluonnoksen laatu on melko hyvä, ja koodin palautustarkkuus on myös erittäin korkea. Tässä artikkelissa puhutaan siitä, mikä Pencil oikeastaan on, miksi sitä kannattaa käyttää ja miten se otetaan nopeasti käyttöön. ## 01. Mikä Pencil on? Selitetään se yksinkertaisesti Yksinkertaisesti sanottuna Pencil on työkalu, joka voi yhdistää suunnittelun ja koodin. Aiempi prosessi oli seuraava: * Suunnitteluluonnoksen tekeminen Figmassa * Suunnittelija merkitsee mitat, värit ja välit * Kehittäjä kirjoittaa koodia rivi riviltä suunnitteluluonnoksen perusteella * Kirjoittamisen jälkeen verrataan suunnitteluluonnokseen, ja huomataan, että palautustarkkuus on vain 70-80% * Toistuva säätäminen, kommunikointi... Pencilin ratkaisu on: Sinun tarvitsee vain kuvata vaatimukset luonnollisella kielellä (esimerkiksi "Suunnittele minulle Apple-tyylinen musiikkisoitin"), ja tekoäly voi luoda suunnitteluluonnoksen suoraan piirtoalustalle ja sitten luoda vastaavan koodin yhdellä napsautuksella (Next.js, Flutter, Vue jne. ovat kaikki tuettuja). Ja mikä ihmeellisintä, voit säätää suunnittelua samalla kun suunnittelet. Esimerkiksi: * "Liian paljon violettia, vaihda vähän vihreää" * "Väli vähän suuremmaksi" * "Ota mallia tämän verkkosivuston tyylistä" Tekoäly auttaa sinua säätämään suunnittelua ja koodia reaaliajassa, sinun ei tarvitse tehdä mitään itse. ## 02. Miksi mielestäni Pencil on käyttökelpoinen? ### 1) Tehokkuus on todella korkea Perinteisellä tavalla yhden sivun suunnitteluluonnoksen tekeminen voi kestää 4-6 tuntia. Pencilillä se voidaan tehdä 20-40 minuutissa. Ja koodin palautustarkkuus voi olla 98%+, joten tyylejä ei tarvitse periaatteessa enää säätää. Kokeilin itse, ja yksinkertaisen Landing Pagen tekeminen, suunnittelusta koodiin, kesti yhteensä vain puoli tuntia. ### 2) Suunnittelun laatu on vakaa Aiemmin, kun tekoäly loi suunnitteluluonnoksia, kohtasi usein tällaisia ongelmia: * Värit eivät ole sopusoinnussa * Välit ovat sekaisin * Fonttikoot eivät ole yhtenäisiä Pencilin taustalla on suunnittelujärjestelmä ja esteettiset standardit, joten luotujen suunnitteluluonnosten laatu on melko vakaa. Vaikka se ei olisikaan täydellinen, se ei ainakaan ole liian ruma. ### 3) Tukee useita teknologiapinoja Olitpa tekemässä Next.js:ää, Flutteria, Vue:ta tai SwiftUI:tä, Pencil voi automaattisesti luoda vastaavan koodin. Tämä on todella kätevää minulle, joka teen monialustaista kehitystä – yksi suunnitteluluonnos, koodit kaikille alustoille. ## 03. Miten Pencil asennetaan ja käytetään? Seuraavassa jaan oman asennus- ja käyttöprosessini, jonka pitäisi olla tällä hetkellä yksinkertaisin tapa. ### Ensimmäinen vaihe: Asenna Pencil MCP Hae suoraan IDE:ssäsi (VS Code, Cursor jne.) "pencil" Napsauta asenna, älä lataa muualta (vältä lataamasta piraattiversiota) Huomaa: Suoraan IDE:ssä hakeminen on turvallisin tapa. ### Toinen vaihe: Anna tekoälyn auttaa sinua määrittämään Miten se määritetään asennuksen jälkeen? Rehellisesti sanottuna, en aluksi ymmärtänyt sitä kovin hyvin. Myöhemmin huomasin, että yksinkertaisin tapa on: anna tekoälyn auttaa sinua määrittämään. Avaa tekoälyohjelmointiavustajasi (Claude Code tai Codex) ja sano sille: Olen jo asentanut "pencil" MCP:n tähän IDE:hen, voisitko auttaa minua määrittämään sen, jotta Claude Code, Codex ja VS Code voivat kaikki käyttää tätä MCP:tä Ja odota, että se auttaa sinua määrittämään sen. ### Kolmas vaihe: Aloita suunnittelu Pencilillä Määrityksen jälkeen näet lyijykynäkuvakkeen IDE:n vasemmalla puolella, napsauta avataksesi Pencilin piirtoalustan. Ja sitten oikealla olevassa AI-keskusteluikkunassa kerro sille, mitä haluat suunnitella. Esimerkiksi: "Suunnittele minulle Apple-tyylinen musiikkisoitin" "Tee yksinkertainen Landing Page, jonka pääväri on sininen" "Ota mallia tämän sivuston tyylistä ja tee minulle samanlainen" AI luo suunnitteluluonnoksen piirtoalustalle. Jos et ole tyytyväinen, voit pyytää sitä jatkamaan säätämistä: "Fontti on liian pieni, suurenna sitä hieman" "Lisää väliä" "Vaihda pehmeämpään väriin" Jatka säätämistä, kunnes olet tyytyväinen. ### Neljäs vaihe: Luo koodi Kun suunnitteluluonnos on valmis, voit pyytää AI:ta luomaan koodin puolestasi. Voit sanoa suoraan: "Luo minulle Next.js -koodi" "Luo Flutter-koodi" "Luo Vue 3 -koodi" AI luo vastaavan koodin automaattisesti suunnitteluluonnoksesi perusteella. Todellinen vaikutus: ## 04. Joitakin todellisia käyttökokemuksia Käytettyäni sitä muutaman kerran, haluan jakaa muutamia ajatuksia: ### 1) Kuvaile vaatimukset tarkasti Aluksi sanoin "Tee minulle verkkosivusto", mutta AI:n luoma asia ei ollut ollenkaan sitä, mitä halusin. Myöhemmin huomasin, että mitä tarkempi kuvaus, sitä parempi vaikutus. Esimerkiksi: Huono kuvaus: "Tee minulle kirjautumissivu" Hyvä kuvaus: "Tee minulle yksinkertainen kirjautumissivu, jonka yläosassa on logo, keskellä sähköposti- ja salasanakentät ja alaosassa kirjautumispainike, tyyli viittaa Applen virallisille verkkosivuille" ### 2) Voit ladata viitekuvia Jos näet jonkin verkkosivuston, jonka suunnittelu on hyvä, voit ottaa siitä kuvakaappauksen ja ladata sen AI:lle viitteeksi. Tällä tavalla luotu suunnitteluluonnos on lähempänä odotuksiasi. ### 3) Iterointi on tärkeämpää kuin kerralla valmiiksi saaminen Älä ajattele, että voit luoda täydellisen suunnittelun kerralla, se ei ole realistista. Oikea tapa on: luoda ensin karkea luonnos ja säätää sitä sitten vähitellen. Säädä vain yhtä tai kahta asiaa kerrallaan, kuten "Lisää väliä" "Pehmennä väriä", tämä on tehokkainta. ### 4) Koodin laatu on melko hyvä Kokeilin sitä muutaman kerran ja luotu koodin laatu on melko korkea: Koodin rakenne on selkeä Tyylien palautusaste on korkea (98% +) Responsiivinen asettelu on myös tehty hyvin Periaatteessa sen voi ottaa ja muokata hieman. ## 05. Muutamia huomioitavia seikkoja Vaikka Pencil on erittäin hyödyllinen, on myös joitain huomioitavia seikkoja: ### 1) Estetiikan on oltava sinun vastuullasi AI voi auttaa sinua luomaan suunnitteluluonnoksia, mutta sinun on itse päätettävä, onko se hyvännäköinen. Joten katso usein hyviä malleja, paranna estetiikkaasi, jotta voit antaa parempia ohjeita Pencilin käytössä. Suosituksia paikoista, joista löytää suunnitteluvinkkejä: Dribbble Mobbin (kerää erityisesti mobiili-UI:ta) Kuvakaappauksia erilaisista erinomaisista verkkosivustoista ### 2) Monimutkainen vuorovaikutus on kirjoitettava itse Pencil sopii staattisten sivujen ja tavanomaisen vuorovaikutuksen tekemiseen, mutta jos kyseessä on monimutkaisia animaatioita, eleitä jne., on koodi kirjoitettava itse. Mutta useimmissa tapauksissa Pencil riittää. ### 3) Oikean AI-mallin valinta on tärkeää Kokeilin useita malleja ja huomasin, että Claude Opus 4.5:n visuaalinen suorituskyky on paras. Jos käytät muita malleja, luodun suunnitteluluonnoksen laatu voi olla huonompi. ## 06. Tehokkuusvertailutiedot Lopuksi jaan ryhmän itse testattuja tietoja: | Indikaattori | Perinteinen tapa | Pencil | Tehokkuuden kasvu | |---|---|---|---| | Suunnitteluluonnoksen tuotanto | 4-6 tuntia | 20-40 minuuttia | 8x | | Koodin palautusaste | 70%-85% | 98%+ | | Virheenkorjausaika | Vähenee 90% | | Monipääteinen sovitus | Vaatii toistuvan kehityksen | Automaattinen luonti | Säästää 75% aikaa | Minulle suurin arvo on: energian siirtäminen "miten toteuttaa" -kohdasta "mitä toimintoja tehdä" -kohtaan. ## 07. Yhteenveto Pencil pohjimmiltaan yhdistää suunnittelun ja kehityksen, jolloin voit ohjata koko prosessia luonnollisella kielellä. Jos olet myös tekemässä frontend-kehitystä, tekemässä omia tuotteitasi, suosittelen kokeilemaan Penciliä:Koodin laatu vakaa: Palautustarkkuus 98%+, periaatteessa ei tarvitse säätää tyylejä Tukee useita teknologioita: Next.js, Flutter, Vue jne. ovat kaikki tuettuja Luonnollisen kielen ohjaama: Kuvaile vaatimukset ihmiskielellä, AI luo automaattisesti Lopuksi, jos olet myös mukana itsenäisessä kehityksessä tai AI-ohjelmoinnissa, jätä kommentti ja jutellaan: Miten yleensä teet suunnittelua? Oletko käyttänyt Penciliä? Millaisia kokemuksia sinulla on? Luen jokaisen kommentin huolellisesti. Nähdään seuraavassa artikkelissa.