Pencil MCP：Designutkast blir kod på nolltid, frontend-utvecklingseffektiviteten ökar 8 gånger

Hej alla, jag är Liang Xiao som gör produkter för den internationella marknaden. Snart är det kinesiskt nyår, så jag publicerar en artikel till innan nyår för att dela med mig av mina senaste framsteg.

När du gör webbsidor eller appar, har du någonsin känt så här:

Vill göra en snygg sida, men min design är inte bra Att anlita en designer är för dyrt, och gratis mallar passar inte Det är svårt att få till ett designutkast, och att omvandla det till kod är fullt av problem

Ärligt talat, när jag gjorde frontend-projekt tidigare, kunde jag spendera en halv dag bara på att justera stilar utifrån designutkastet. Mellanrummet skiljer sig med 2px, färgen är inte riktigt rätt, rundade hörn glömdes bort... Om och om igen, det var jättejobbigt.

De goda nyheterna är: Nu finns Pencil MCP, och dessa problem kan i princip lösas.

Jag har använt det för att göra några sidor nyligen och upptäckt att det verkligen är bra – från designutkast till kod, effektiviteten ökar direkt flera gånger. Och det viktigaste är att AI:n hjälper dig att generera designutkast av bra kvalitet, och kodåtergivningen är också mycket hög.

Den här artikeln kommer att handla om: Vad Pencil egentligen är, varför det är värt att använda och hur man snabbt kommer igång.

01. Vad är Pencil? Förklarat på ett enkelt sätt

Enkelt uttryckt är Pencil ett verktyg som kan koppla samman design och kod.

Den tidigare processen var som följer:

Gör designutkast i Figma Designern kommenterar storlekar, färger och mellanrum Utvecklaren skriver kod rad för rad utifrån designutkastet Efter att ha skrivit klart koden jämförs den med designutkastet och man upptäcker att återgivningen bara är 70-80% Upprepade justeringar, kommunikation...

Pencils lösning är:

Du behöver bara beskriva kraven på ett naturligt språk (till exempel "designa en musikspelare i Apple-stil åt mig"), så kan AI:n direkt generera ett designutkast på arbetsytan och sedan generera motsvarande kod med ett klick (Next.js, Flutter, Vue etc. stöds).

Och det fantastiska är att du kan justera medan du designar. Till exempel:

"För mycket lila, byt till lite grönt" "Större mellanrum" "Referera till stilen på den här webbplatsen"

AI:n hjälper dig att justera designen och koden i realtid, utan att du behöver göra något själv.

02. Varför tycker jag att Pencil är värt att använda?

1) Effektiviteten är verkligen hög

Att göra ett designutkast för en sida på traditionellt sätt kan ta 4-6 timmar. Med Pencil kan det göras på 20-40 minuter.

Och kodåtergivningen kan nå 98%+, så du behöver i princip inte justera stilar längre.

Jag testade själv och gjorde en enkel Landing Page, från design till kod, allt klart på ungefär en halvtimme.

2) Stabil designkvalitet

Förut när jag lät AI generera designutkast stötte jag ofta på problem som:

Okoordinerade färger Röriga mellanrum Ojämn teckenstorlek

Pencil har ett designsystem och estetiska standarder bakom sig, så designutkasten som genereras har en relativt stabil kvalitet. Även om det inte är perfekt, är det åtminstone inte för fult.

3) Stöd för flera teknikstackar

Oavsett om du gör Next.js, Flutter, Vue eller SwiftUI, kan Pencil automatiskt generera motsvarande kod.

Detta är verkligen praktiskt för mig som gör utveckling för flera plattformar – ett designutkast, och koden för flera plattformar finns tillgänglig.

03. Hur man installerar och använder Pencil?

Nedan delar jag med mig av min egen installations- och användningsprocess, vilket borde vara det enklaste sättet just nu.

Första steget: Installera Pencil MCP

Sök direkt efter "pencil" i din IDE (VS Code, Cursor etc.)

Klicka på installera, ladda inte ner det någon annanstans (för att undvika att ladda ner piratkopior)

Obs: Att söka direkt i IDE:n är det säkraste sättet.

Andra steget: Låt AI hjälpa dig att konfigurera

Hur konfigurerar man det efter installationen?

Ärligt talat förstod jag inte heller det i början. Senare upptäckte jag att det enklaste sättet är: att låta AI hjälpa dig att konfigurera.

Öppna din AI-programmeringsassistent (Claude Code eller Codex) och säg till den:

Jag har redan installerat "pencil" MCP i den här IDE:n, vänligen hjälp mig att konfigurera det så att min Claude Code, Codex, VS Code kan använda detta MCP

Vänta sedan på att den ska konfigurera det åt dig.

Tredje steget: Börja använda Pencil för att designa

Efter konfigurationen ser du en pennaikon på vänster sida av IDE:n, klicka för att öppna Pencils arbetsyta.

Och sedan, i AI-dialogrutan till höger, berätta för den vad du vill ha för design.

Till exempel:

"Designa en musikspelare i Apple-stil åt mig"

"Skapa en enkel Landing Page med blått som huvudfärg"

"Referera till stilen på den här webbplatsen och skapa en liknande åt mig"

AI kommer att generera ett designutkast på arbetsytan. Om du inte är nöjd kan du fortsätta låta den justera:

"Typsnittet är för litet, förstora det lite"

"Öka avståndet lite mer"

"Byt till en mjukare färg"

Justera tills du är nöjd.

Steg fyra: Generera kod

När designutkastet är klart kan du låta AI hjälpa dig att generera koden.

Du kan säga direkt:

"Generera Next.js-kod åt mig"

"Generera Flutter-kod"

"Generera Vue 3-kod"

AI kommer automatiskt att generera motsvarande kod baserat på ditt designutkast.

Faktisk effekt:

04. Några faktiska användarupplevelser

Efter att ha använt det några gånger har jag några känslor att dela med mig av:

1) Beskriv behoven specifikt

I början sa jag "Skapa en webbplats åt mig", men det AI genererade var inte alls vad jag ville ha.

Senare insåg jag att ju mer specifik beskrivningen är, desto bättre blir effekten.

Till exempel:

Dålig beskrivning: "Skapa en inloggningssida åt mig"

Bra beskrivning: "Skapa en enkel inloggningssida åt mig, med en logotyp högst upp, e-post- och lösenordsinmatningsfält i mitten och en inloggningsknapp längst ner, med stilreferens från Apples officiella webbplats"

2) Du kan ladda upp referensbilder

Om du ser en bra design på en webbplats kan du ta en skärmdump och ladda upp den till AI för referens.

Designutkastet som genereras på detta sätt kommer att ligga närmare dina förväntningar.

3) Iteration är viktigare än att få det rätt på en gång

Tänk inte att du kan generera en perfekt design på en gång, det är inte realistiskt.

Det rätta sättet är: generera först en ungefärlig design och justera den sedan lite i taget.

Justera bara en eller två saker varje gång, till exempel "öka avståndet lite mer" eller "gör färgen mjukare", detta är det mest effektiva sättet.

4) Koden är av ganska bra kvalitet

Jag har provat det några gånger och koden som genereras är av ganska hög kvalitet:

Klar kodstruktur

Hög stilåtergivning (98% +)

Responsiv layout är också bra

I princip kan den användas med små ändringar.

05. Några punkter att notera

Även om Pencil är mycket användbart finns det några saker att notera:

1) Estetik beror fortfarande på dig själv

AI kan hjälpa dig att generera designutkast, men du måste själv bedöma om det är snyggt eller inte.

Så titta på bra design oftare för att förbättra din estetik, så att du kan ge bättre vägledning när du använder Pencil.

Rekommenderar några ställen att hitta designreferenser:

Dribbble

Mobbin (specialiserad på att samla in mobila UI)

Skärmdumpar av olika utmärkta webbplatser

2) Komplex interaktion måste fortfarande skrivas själv

Pencil är lämplig för att skapa statiska sidor och konventionell interaktion, men om det involverar komplexa animationer, gester etc. måste du fortfarande skriva koden själv.

Men för de flesta scenarier är Pencil tillräckligt.

3) Att välja rätt AI-modell är viktigt

Jag har provat några modeller och fann att Claude Opus 4.5 har den bästa visuella prestandan.

Om du använder andra modeller kan kvaliteten på designutkastet som genereras vara sämre.

06. Effektivitetsjämförelsdata

Slutligen, dela en uppsättning data som jag själv har testat:

IndikatorTraditionellt sättAnvända PencilEffektivitetsökningDesignutkastproduktion4-6 timmar20-40 minuter8 gångerKodåtergivning70%-85%98%+FelsökningstidMinskning med 90%Multi-terminalanpassningBehöver upprepad utvecklingAutomatisk genereringSparar 75% tidFör mig är det största värdet: att flytta fokus från "hur man implementerar" till "vilka funktioner man ska göra".

07. Sammanfattning

Pencil slår i grunden ihop design och utveckling, så att du kan driva hela processen med naturligt språk.

Om du också gör frontend-utveckling, gör dina egna produkter, rekommenderar jag starkt att du provar Pencil:Stabil kodkvalitet: 98%+ återgivning, behöver i princip inte justera stilar

Stöd för flera teknikstackar: Next.js, Flutter, Vue, etc. kan alla användas

Naturligt språkdriven: Beskriv kraven med mänskligt språk, AI genererar automatiskt

Slutligen, om du också sysslar med oberoende utveckling, AI-programmering, är du välkommen att lämna en kommentar och prata:

Hur brukar du göra design?

Har du använt Pencil? Hur är effekten?

Jag kommer att läsa varje kommentar noggrant. Vi ses i nästa artikel.