Pencil MCP: Designutkast blir kode på et blunk, front-end utviklingseffektiviteten øker med 8 ganger

Hei alle sammen, jeg er Liang Xiao som jobber med å lage produkter for det internasjonale markedet. Nyttår nærmer seg, og før det vil jeg dele mine siste erfaringer med dere.

Når du lager nettsider eller apper, har du noen gang følt dette:

• Vil lage en fin side, men er ikke god på design
• Det er for dyrt å ansette en designer, og gratis maler passer ikke
• Etter mye om og men får du et designutkast, men det er fortsatt mange problemer med å konvertere det til kode

Ærlig talt, da jeg jobbet med front-end prosjekter før, kunne jeg bruke en halv dag bare på å justere stiler basert på designutkastet. Avstanden var 2px feil, fargen var ikke helt riktig, glemte å legge til avrundede hjørner... Frem og tilbake, det var utrolig irriterende.

Gode nyheter: Nå som vi har Pencil MCP, kan disse problemene i utgangspunktet løses.

Jeg har brukt det til å lage noen sider nylig, og jeg synes det er veldig bra – fra designutkast til kode, effektiviteten øker direkte med flere ganger. Og det viktigste er at kvaliteten på designutkastet som genereres av AI er ganske bra, og kodegjenopprettingen er også veldig høy.

Denne artikkelen vil snakke om: Hva er Pencil egentlig, hvorfor er det verdt å bruke, og hvordan kommer du raskt i gang.

01. Hva er Pencil? Forklart på en enkel måte

Enkelt sagt er Pencil et verktøy som kan koble design og kode.

Den tidligere prosessen var som følger:

• Lage designutkast i Figma
• Designeren kommenterer størrelser, farger og avstander
• Utvikleren skriver kode linje for linje basert på designutkastet
• Etter å ha skrevet koden, sammenligner du den med designutkastet og finner ut at gjenopprettingsgraden bare er 70-80%
• Gjentatte justeringer, kommunikasjon...

Pencils løsning er:

Du trenger bare å beskrive behovene dine på et naturlig språk (for eksempel "Hjelp meg med å designe en musikkspiller i Apple-stil"), og AI kan generere designutkastet direkte på lerretet, og deretter generere den tilsvarende koden med ett klikk (Next.js, Flutter, Vue osv. støttes).

Og det som er magisk er at du kan justere mens du designer. For eksempel:

• "Det er for mye lilla, bytt til litt grønt"
• "Gjør avstanden litt større"
• "Referer til stilen på denne nettsiden"

AI vil hjelpe deg med å justere design og kode i sanntid, uten at du trenger å gjøre noe selv.

02. Hvorfor synes jeg Pencil er verdt å bruke?

1) Effektiviteten er virkelig høy

Den tradisjonelle måten å lage et designutkast for en side kan ta 4-6 timer. Med Pencil kan du gjøre det på 20-40 minutter.

Og kodegjenopprettingsgraden kan nå 98%+, du trenger i utgangspunktet ikke å justere stiler lenger.

Jeg prøvde det selv, og det tok meg omtrent en halv time å fullføre en enkel landingsside, fra design til kode.

2) Stabil designkvalitet

Før, når jeg lot AI generere designutkast, støtte jeg ofte på dette problemet:

• Ukoordinerte farger
• Rotete avstander
• Ujevn skriftstørrelse

Pencil har et designsystem og estetiske standarder bak seg, og kvaliteten på designutkastene som genereres er relativt stabil. Selv om det ikke er perfekt, vil det i det minste ikke være for stygt.

3) Støtter flere teknologier

Enten du jobber med Next.js, Flutter, Vue eller SwiftUI, kan Pencil automatisk generere den tilsvarende koden.

Dette er veldig praktisk for folk som meg som jobber med multi-plattform utvikling – ett designutkast, og koden for flere plattformer er tilgjengelig.

03. Hvordan installere og bruke Pencil?

Nedenfor vil jeg dele min egen installasjons- og bruksprosess, som burde være den enkleste måten for øyeblikket.

Første trinn: Installer Pencil MCP

Søk direkte etter "pencil" i din IDE (VS Code, Cursor osv.)

Klikk for å installere, ikke last ned fra andre steder (for å unngå å laste ned piratkopier)

Merk: Det er tryggest å søke direkte i IDE.

Andre trinn: La AI hjelpe deg med å konfigurere

Hvordan konfigurerer du etter installasjon?

Ærlig talt, jeg forsto det ikke så godt i begynnelsen. Senere fant jeg ut at den enkleste måten er: la AI hjelpe deg med å konfigurere direkte.

Åpne din AI-programmeringsassistent (Claude Code eller Codex), og si til den:

Jeg har allerede installert "pencil" MCP i denne IDE, vennligst hjelp meg med å konfigurere den slik at min Claude Code, Codex, VS Code kan bruke denne MCP

Vent deretter på at den hjelper deg med å konfigurere.

Tredje trinn: Begynn å bruke Pencil til å designe

Etter konfigurasjonen vil du se et blyantikon på venstre side av IDE, klikk for å åpne Pencil-lerretet.

Og så, i AI-dialogboksen på høyre side, fortell den hva du ønsker å designe.

For eksempel:

"Hjelp meg med å designe en musikkspiller i Apple-stil"

"Lag en enkel landingsside med blå som hovedfarge"

"Lag noe lignende denne nettsiden, med samme stil"

AI vil generere et designutkast på lerretet. Hvis du ikke er fornøyd, kan du fortsette å justere det:

"Skriften er for liten, gjør den større"

"Øk avstanden"

"Bytt til en mykere farge"

Fortsett å justere til du er fornøyd.

Trinn fire: Generer kode

Når designutkastet er klart, kan du la AI hjelpe deg med å generere koden.

Du kan si direkte:

"Generer Next.js kode"

"Generer Flutter kode"

"Generer Vue 3 kode"

AI vil automatisk generere den tilsvarende koden basert på designutkastet ditt.

Faktisk effekt:

04. Noen faktiske brukeropplevelser

Etter å ha brukt det noen ganger, er det noen følelser jeg vil dele:

1) Beskriv behovene dine spesifikt

I begynnelsen sa jeg "Lag en nettside for meg", men det AI genererte var ikke det jeg ønsket i det hele tatt.

Jeg fant ut at jo mer spesifikk beskrivelsen er, jo bedre er effekten.

For eksempel:

Dårlig beskrivelse: "Lag en påloggingsside for meg"

God beskrivelse: "Lag en enkel påloggingsside for meg, med en logo øverst, e-post- og passordfelt i midten og en påloggingsknapp nederst, med stil som Apple sin offisielle nettside"

2) Du kan laste opp referansebilder

Hvis du ser et design på en nettside som du liker, kan du ta et skjermbilde og laste det opp til AI som referanse.

Designutkastet som genereres vil være nærmere det du forventer.

3) Iterasjon er viktigere enn å få det riktig med en gang

Ikke forvent å generere et perfekt design med en gang, det er ikke realistisk.

Den riktige måten er: generer et grovt utkast først, og juster det deretter litt etter litt.

Juster bare en eller to ting om gangen, for eksempel "øk avstanden litt" eller "gjør fargen litt mykere", dette er den mest effektive måten.

4) Kodekvaliteten er ganske bra

Jeg prøvde det noen ganger, og kodekvaliteten som genereres er ganske høy:

Klar kodestruktur

Høy stilgjengivelse (98% +)

Responsivt design er også bra

I utgangspunktet kan du ta det og endre det litt for å bruke det.

05. Noen punkter å merke seg

Selv om Pencil er veldig nyttig, er det noen ting du bør være oppmerksom på:

1) Estetikken må du stå for selv

AI kan hjelpe deg med å generere designutkast, men du må selv vurdere om det ser bra ut eller ikke.

Så se på gode design ofte for å forbedre din egen estetikk, slik at du kan gi bedre veiledning når du bruker Pencil.

Her er noen steder å finne designreferanser:

Dribbble

Mobbin (spesialiserer seg på å samle mobil UI)

Skjermbilder av forskjellige utmerkede nettsteder

2) Komplekse interaksjoner må du kode selv

Pencil er egnet for å lage statiske sider og vanlige interaksjoner, men hvis det involverer komplekse animasjoner, bevegelser osv., må du kode det selv.

Men for de fleste scenarier er Pencil nok.

3) Det er viktig å velge riktig AI-modell

Jeg prøvde noen modeller og fant ut at Claude Opus 4.5 har den beste visuelle ytelsen.

Hvis du bruker andre modeller, kan kvaliteten på designutkastet som genereres være dårligere.

06. Effektivitets sammenligningsdata

Til slutt vil jeg dele et sett med data jeg har testet selv:

For meg er den største verdien: å flytte energien fra "hvordan implementere" til "hvilken funksjon skal lages".

07. Sammendrag

Pencil kobler i hovedsak design og utvikling sammen, slik at du kan drive hele prosessen med naturlig språk.

Hvis du også driver med frontend-utvikling, lager dine egne produkter, anbefales det sterkt å prøve Pencil:Kodekvaliteten er stabil: 98%+ gjengivelse, trenger knapt å justere stiler

Støtter flere teknologier: Next.js, Flutter, Vue, etc. kan brukes

Naturlig språkdrevet: Beskriv behov med menneskelig språk, AI genererer automatisk

Til slutt, hvis du også driver med uavhengig utvikling, AI-programmering, er du velkommen til å legge igjen en kommentar:

Hvordan designer du vanligvis?

Har du brukt Pencil? Hvordan er effekten?

Jeg vil lese hver kommentar nøye. Vi sees i neste artikkel.