Pencil MCP: Ontwerp wordt direct code, 8x hogere efficiëntie voor front-end ontwikkeling

Hallo iedereen, ik ben Liang Xiao van het team dat overzeese producten maakt. Het Chinese Nieuwjaar komt eraan, dus ik deel graag nog een artikel met jullie over mijn recente ontdekkingen.

Heb je dit gevoel wel eens gehad bij het maken van webpagina's of apps:

Ik wil een mooie pagina maken, maar mijn ontwerpvaardigheden zijn niet goed genoeg. Een ontwerper inhuren is te duur, en gratis templates zijn niet geschikt. Als je eindelijk een ontwerp hebt, zijn er nog steeds veel problemen bij het omzetten naar code.

Eerlijk gezegd, toen ik vroeger aan front-end projecten werkte, besteedde ik veel tijd aan het aanpassen van de stijlen op basis van het ontwerp. Een verschil van 2px in de afstand, een verkeerde kleur, vergeten afgeronde hoeken... Steeds opnieuw, echt vervelend.

Goed nieuws: met Pencil, deze MCP, kunnen deze problemen grotendeels worden opgelost.

Ik heb er onlangs een paar pagina's mee gemaakt en ik vind het echt geweldig - de efficiëntie van ontwerp tot code is direct met meerdere keren verhoogd. En het belangrijkste is dat de ontwerpen die AI genereert van goede kwaliteit zijn en de code zeer nauwkeurig wordt weergegeven.

Dit artikel gaat over: wat Pencil precies is, waarom het de moeite waard is om te gebruiken en hoe je er snel mee aan de slag kunt.

01. Wat is Pencil? In eenvoudige bewoordingen uitgelegd

Simpel gezegd is Pencil een tool die ontwerp en code met elkaar verbindt.

Vroeger was het proces als volgt:

Een ontwerp maken in Figma De ontwerper noteert afmetingen, kleuren en afstanden De ontwikkelaar schrijft regel voor regel code op basis van het ontwerp Na het schrijven wordt het vergeleken met het ontwerp en blijkt de nauwkeurigheid slechts 70-80% te zijn Herhaaldelijk aanpassen, communiceren...

De oplossing van Pencil is:

Je hoeft alleen maar de vereisten in natuurlijke taal te beschrijven (bijvoorbeeld "Ontwerp een muziekspeler in Apple-stijl voor mij"), en AI kan direct een ontwerp op het canvas genereren en vervolgens met één klik de bijbehorende code genereren (Next.js, Flutter, Vue, enz. worden allemaal ondersteund).

En het is magisch dat je kunt ontwerpen en aanpassen tegelijk. Bijvoorbeeld:

"Er is te veel paars, voeg wat groen toe" "Maak de afstand groter" "Gebruik de stijl van deze website als referentie"

AI helpt je real-time bij het aanpassen van het ontwerp en de code, zonder dat je zelf iets hoeft te doen.

02. Waarom vind ik Pencil de moeite waard?

1) De efficiëntie is echt hoog

Traditioneel duurt het 4-6 uur om een ontwerp voor een pagina te maken. Met Pencil is het in 20-40 minuten klaar.

En de nauwkeurigheid van de code is 98%+, dus je hoeft de stijlen bijna niet meer aan te passen.

Ik heb het zelf geprobeerd en een eenvoudige landingspagina gemaakt, van ontwerp tot code, alles was in ongeveer een half uur klaar.

2) Stabiele ontwerpkwaliteit

Vroeger, toen ik AI ontwerpen liet genereren, kwam ik vaak de volgende problemen tegen:

Incoherente kleuren Chaotische afstanden Inconsistente lettergroottes

Pencil heeft een eigen ontwerpsysteem en esthetische normen, waardoor de kwaliteit van de gegenereerde ontwerpen relatief stabiel is. Het is misschien niet perfect, maar in ieder geval niet te lelijk.

3) Ondersteunt meerdere technologieën

Of je nu Next.js, Flutter, Vue of SwiftUI gebruikt, Pencil kan automatisch de bijbehorende code genereren.

Dit is echt handig voor mensen zoals ik die multi-platform ontwikkeling doen - één ontwerp, code voor meerdere platforms, alles is aanwezig.

03. Hoe installeer en gebruik je Pencil?

Hieronder deel ik mijn eigen installatie- en gebruiksproces, wat momenteel de eenvoudigste manier zou moeten zijn.

Stap 1: Installeer Pencil MCP

Zoek direct naar "pencil" in je IDE (VS Code, Cursor, enz.)

Klik op installeren, download het niet ergens anders (om te voorkomen dat je een illegale kopie downloadt)

Let op: direct zoeken in de IDE is de veiligste manier.

Stap 2: Laat AI je helpen met de configuratie

Hoe configureer je het na de installatie?

Eerlijk gezegd begreep ik het in het begin ook niet. Later ontdekte ik dat de eenvoudigste manier is: laat AI je helpen met de configuratie.

Open je AI-programmeerassistent (Claude Code of Codex) en zeg tegen hem:

Ik heb "pencil" MCP al in deze IDE geïnstalleerd, kun je me helpen het te configureren, zodat mijn Claude Code, Codex, VS Code deze MCP kunnen gebruiken?

Wacht dan tot het je helpt met de configuratie.

Stap 3: Begin met het ontwerpen met Pencil

Na de configuratie zie je een potloodpictogram aan de linkerkant van de IDE, klik erop om het Pencil-canvas te openen.

En vertel vervolgens in het AI-dialoogvenster aan de rechterkant wat je wilt ontwerpen.

Bijvoorbeeld:

"Help me met het ontwerpen van een muziekspeler in Apple-stijl"

"Maak een eenvoudige landingspagina met blauw als hoofdkleur"

"Gebruik de stijl van deze website als referentie om een vergelijkbare te maken"

AI genereert ontwerpen op het canvas. Als je niet tevreden bent, kun je het blijven aanpassen:

"Het lettertype is te klein, maak het groter"

"Maak de afstand groter"

"Verander naar een zachtere kleur"

Blijf aanpassen tot je tevreden bent.

Stap vier: Code genereren

Nadat het ontwerp klaar is, kun je AI je helpen code te genereren.

Je kunt direct zeggen:

"Genereer Next.js code"

"Genereer Flutter code"

"Genereer Vue 3 code"

AI genereert automatisch de bijbehorende code op basis van je ontwerp.

Praktisch effect:

04. Enkele praktische gebruikservaringen

Na een paar keer gebruik, zijn er een paar gevoelens die ik wil delen:

1) Beschrijf de vereisten specifiek

Aanvankelijk zei ik "Help me een website te maken", maar de dingen die AI genereerde waren helemaal niet wat ik wilde.

Later ontdekte ik dat hoe specifieker de beschrijving, hoe beter het effect.

Bijvoorbeeld:

Slechte beschrijving: "Help me een inlogpagina te maken"

Goede beschrijving: "Help me een eenvoudige inlogpagina te maken met een logo bovenaan, een e-mail- en wachtwoord invoerveld in het midden en een inlogknop onderaan, met de stijl van de Apple-website"

2) Je kunt referentieafbeeldingen uploaden

Als je een goed ontwerp op een website ziet, kun je een screenshot uploaden naar AI om het als referentie te gebruiken.

Het gegenereerde ontwerp komt dan dichter in de buurt van je verwachtingen.

3) Iteratie is belangrijker dan in één keer goed

Verwacht niet dat je in één keer een perfect ontwerp genereert, dat is niet realistisch.

De juiste manier is: eerst een ruwe versie genereren en deze vervolgens beetje bij beetje aanpassen.

Pas elke keer slechts één of twee dingen aan, zoals "Maak de afstand groter" of "Maak de kleur zachter", dit is de meest efficiënte manier.

4) De codekwaliteit is redelijk goed

Ik heb het een paar keer geprobeerd en de gegenereerde codekwaliteit is vrij hoog:

Code structuur is helder

Stijlherstel is hoog (98% +)

Responsieve lay-out is ook goed gedaan

In principe kan het worden gebruikt na een kleine aanpassing.

05. Enkele punten om op te letten

Hoewel Pencil erg handig is, zijn er enkele punten om op te letten:

1) Esthetiek is nog steeds aan jou

AI kan je helpen ontwerpen te genereren, maar je moet zelf beoordelen of het er goed uitziet.

Kijk dus vaker naar goede ontwerpen om je esthetiek te verbeteren, zodat je betere begeleiding kunt geven bij het gebruik van Pencil.

Hier zijn enkele plaatsen om ontwerp referentie te vinden:

Dribbble

Mobbin (speciaal voor het verzamelen van mobiele UI)

Screenshots van verschillende uitstekende websites

2) Complexe interacties moeten nog zelf worden geschreven

Pencil is geschikt voor het maken van statische pagina's en reguliere interacties, maar als het gaat om complexe animaties, gebaren, enz., moet je nog steeds zelf code schrijven.

Maar voor de meeste scenario's is Pencil al voldoende.

3) Het kiezen van het juiste AI-model is erg belangrijk

Ik heb een paar modellen geprobeerd en ontdekte dat Claude Opus 4.5 de beste visuele prestaties heeft.

Als je andere modellen gebruikt, kan de kwaliteit van het gegenereerde ontwerp slechter zijn.

06. Efficiëntie vergelijkingsgegevens

Ten slotte deel ik een set gegevens die ik zelf heb getest:

Voor mij is de grootste waarde: het verplaatsen van energie van "hoe te implementeren" naar "welke functies te doen".

07. Samenvatting

Pencil overbrugt in wezen ontwerp en ontwikkeling, waardoor je het hele proces met natuurlijke taal kunt aansturen.

Als je ook frontend-ontwikkeling doet, je eigen producten maakt, raad ik je ten zeerste aan om Pencil te proberen:Codekwaliteit stabiel: 98%+ getrouwheid, vrijwel geen aanpassing van stijlen nodig

Ondersteuning voor meerdere technologie stacks: Next.js, Flutter, Vue, etc. kunnen allemaal gebruikt worden

Natuurlijke taal gestuurd: beschrijf vereisten in mensentaal, AI genereert automatisch

Tot slot, als je ook bezig bent met onafhankelijke ontwikkeling, AI-programmering, laat dan een reactie achter:

Hoe doe jij normaal gesproken het ontwerp?

Heb je Pencil gebruikt? Wat zijn de resultaten?

Ik zal elke reactie zorgvuldig lezen. Tot de volgende keer.