Pencil AI verandert 6 agenten in uw ontwerpteam
Ik zag zes AI-agenten tegelijkertijd een dashboard voor een mobiele app ontwerpen. Niet opeenvolgend. Niet om beurten. Zes cursors die tegelijkertijd over hetzelfde canvas bewegen en elk een compleet andere visuele richting opbouwen voor dezelfde productbeschrijving.
Eén agent was bezig met het opstellen van een in neon doordrenkte analyseweergave met elektrische gradiënten. Een andere was het construeren van een minimale redactionele lay-out met royale witruimte en ingetogen typografie. Een derde was volledig luxe: gouden accenten op een donkere achtergrond, het soort esthetiek dat je zou verwachten van een premium fintech-app. En terwijl ze alle zes aan het werk waren, sleepte ik elementen over het canvas, bewerkte ik kleuren, hergroepeerde ik componenten - en er ging niets kapot.
Dat was dinsdagavond. Ik was Pencil op dat moment ongeveer drie uur aan het testen, en dit was het moment waarop ik stopte met het evalueren van de tool en begon te heroverwegen hoe ik UI-ontwerp volledig zou benaderen.
Als je enige tijd hebt besteed aan het bouwen van interfaces met AI-coderingstools - Claude Code, Cursor, wat dan ook - ken je het smerige geheim waar niemand over praat in demovideo's. De code werkt. Het ontwerp niet. Je krijgt functionele componenten verpakt in het visuele equivalent van een universiteitsopdracht. Standaardafstand. Voorspelbare kleurkeuzes. Typografie met de tekst 'Ik laat de AI het afhandelen' vanaf de andere kant van de kamer.
Pencil lost dit probleem op op een manier die ik echt niet had verwacht, en de Claude Code-integratie creëert een pijplijn van visueel ontwerp naar productiecode die strakker is dan alles wat ik ooit heb gebruikt. Maar er is nuance die ertoe doet. Dit is geen toverstaf, en de workflow vereist inzicht in waar de tool uitblinkt en waar je nog steeds je eigen oordeel over moet vellen.
Dit is wat ik vond na een week ermee bouwen.
Wat Pencil eigenlijk is (en waarom het niet zomaar een AI-ontwerpapp is)
Pencil staat op pencil.dev, en het eerste dat de moeite waard is om te weten is dat het wordt ondersteund door A16Z Speedrun - wat duidt op serieuze investeringen in de onderliggende technologie, en niet alleen maar op een weekendhackathonproject. Die ondersteuning is belangrijk omdat de kernfuncties echt ambitieus zijn.
Op oppervlakteniveau is Pencil een desktop-app met een oneindig canvas. Je ontwerpt UI-schermen, componenten en volledige lay-outs. Het heeft frames, een eigenschappenpaneel, activabeheer in de linkerzijbalk en stijlbedieningen aan de rechterkant. Als je Figma langer dan vijf minuten hebt gebruikt, voel je je meteen georiënteerd. Het ruimtelijke model is bekend.Maar de motor eronder is op een fundamentele manier anders. Alles wat u in Pencil maakt, is gebouwd in echte code. Geen 'code-achtige representaties' of 'exporteerbare lagen'. Werkelijke code. Wanneer u een knop op het canvas plaatst, wordt deze ondersteund door een echt onderdeel. Wanneer u de spatiëring aanpast, past u echte waarden aan die rechtstreeks aan CSS-eigenschappen worden toegewezen. Dit onderscheid klinkt academisch totdat je probeert een ontwerp uit een traditioneel hulpmiddel te exporteren en ziet dat de gegenereerde code vrijwel geen gelijkenis vertoont met wat je hebt ontworpen.
De tweede onderscheidende factor – en degene die mij rechtop deed zitten – is de agentenzwermmodus. U kunt maximaal zes AI-agenten tegelijkertijd op één canvas gebruiken. Elke agent opereert onafhankelijk en genereert zijn eigen ontwerprichting op basis van uw opdracht. U kunt verschillende AI-modellen aan verschillende agenten toewijzen. U kunt aan elk gesprek afzonderlijk stijlkits, referentieafbeeldingen en ontwerpsysteembeperkingen toevoegen. En u kunt dit allemaal doen terwijl u het canvas zelf handmatig bewerkt.
Dat laatste onderdeel verdient nadruk. In elke andere AI-ontwerptool die ik heb getest, kijk je naar het werk van de AI of doe je je eigen werk. Het potlood lost die grens op. De AI-agents hebben zichtbare cursors op het canvas - je kunt ze letterlijk in realtime zien hoe ze elementen plaatsen, lay-outs aanpassen en componenten bouwen. En terwijl ze dat doen, kun je een ander frame selecteren, een achtergrondkleur wijzigen, de grootte van een component wijzigen, zonder dat dit het werk van de agenten hindert.
Dit is geen gimmick. Het is een beslissing over de workflowarchitectuur die het tempo van de ontwerpverkenning verandert op een manier die ik in het implementatiegedeelte zal toelichten. Maar eerst moet je begrijpen waarom deze multi-agent-aanpak een probleem oplost dat tools met één agent in principe niet kunnen oplossen.
Waarom een ontwerp met één agent genoegen neemt met het eerste idee
Hier is iets dat ik tijdens tientallen projecten op de harde manier heb geleerd: het grootste risico bij AI-ondersteund ontwerp is geen slechte output. Het is voortijdige convergentie.
Wanneer je één enkele AI-agent gebruikt om een ontwerp te genereren, krijg je één richting. Misschien is het goed. Misschien is het geweldig. Maar het is één perspectief, één interpretatie van uw opdracht, één reeks esthetische keuzes. En omdat het vijf minuten duurde in plaats van vijf uur, kom je in de verleiding om ermee aan de slag te gaan. Waarom herhalen als het eerste resultaat er gepolijst genoeg uitziet?
Die verleiding is een valstrik.Elke ontwerper die ik respecteer – degenen wiens werk je doet stoppen met scrollen – zal je hetzelfde vertellen. Het eerste idee is bijna nooit het beste idee. Het is het meest voor de hand liggende idee. Degene die het dichtst bij de oppervlakte van de trainingsgegevens van de AI zit, de gemiddelde versie van elk soortgelijk ontwerp dat op internet bestaat. Professioneel ontwerpwerk komt voort uit het verkennen van meerdere richtingen, het vergelijken ervan met elkaar en het maken van weloverwogen keuzes over welke elementen het beste werken voor het specifieke product, de doelgroep en de context.
Het probleem is dat onderzoek tijd kost. In Figma betekent het creëren van zes verschillende ontwerprichtingen voor één scherm zes rondes handmatig werk. Realistisch gezien slaan de meeste solo-ontwikkelaars en kleine teams deze stap volledig over. Ze nemen de eerste fatsoenlijke output en gaan verder.
De zwermmodus met zes agenten van Pencil elimineert de tijdskosten van verkenning zonder de verkenning zelf te elimineren.
Toen ik mijn eerste sessie met meerdere agenten opzette, gaf ik alle zes agenten dezelfde opdracht: "Ontwerp een analysedashboard voor makers voor een mobiele app." Dezelfde productbeschrijving. Dezelfde doelgroep. Dezelfde lijst met kernfuncties. Ik voegde een kit met warme redactionele stijl toe en zei tegen Pencil dat hij Opus 4.6 voor alle zes agenten moest gebruiken -- Chris van de demo die ik bestudeerde raadde Opus specifiek aan voor creatieve taken, en ik merkte dat die aanbeveling stand hield.
Wat terugkwam waren zes werkelijk verschillende ontwerprichtingen. Geen kleine kleurvariaties van dezelfde lay-out. Zes verschillende filosofieën over hoe dezelfde gegevens gepresenteerd moeten worden.
Het neondashboard maakte gebruik van levendige, verzadigde kleuren en compacte datavisualisatie – het soort ontwerp dat aantrekkelijk is voor ervaren gebruikers die willen dat alles in één keer zichtbaar is. In de minimale redactionele versie werd de decoratie weggelaten en werd alleen de typografische hiërarchie gebruikt om het oog te leiden, met royale negatieve ruimte waardoor elke metriek eerder overwogen dan gepropt aanvoelde. De gedurfde richting van het boeghuis werd zwaar en blokkerig, met dikke scheidingswanden en een sterk visueel gewicht. De warme humanistische versie voelde benaderbaar en vriendelijk aan, met ronde vormen en zachte, warme tinten. De luxe gouden richting was een en al premium esthetiek: donkere achtergronden, gouden accenten, verfijnde spatiëring. En de terminal-ontwikkelaarsversie was volledig hacker-esthetisch, monospace-lettertypen en minimaal chroom, het soort interface dat een ontwikkelaar graag zou gebruiken.
Zes minuten generatietijd. Zes verschillende richtingen die een menselijke ontwerper het grootste deel van de dag zou hebben gekost om handmatig te produceren.
Dat is geen marginale verbetering. Dat is een structurele verandering in de manier waarop ontwerpverkenning werkt. En het beste deel? I could edit elements on any frame while the agents were still working on others.
Aan de slag met potlood (de opstelling die niemand duidelijk uitlegt)Pencil aan de praat krijgen is eenvoudig, maar er zijn een paar dingen die ik graag had gewild dat iemand mij had verteld voordat ik begon.
Stap 1: Download de desktop-app van pencil.dev. Pencil werkt als een native desktop-applicatie, niet als een browsertool. Dit is van belang voor de prestaties: het weergeven van zes gelijktijdige AI-agents op een canvas zou een browsertabblad verstikken. De desktop-app handelt het soepel af.
Stap 2: Werk het walkthrough-bestand door. Wanneer u Pencil voor het eerst opent, is er een ingebouwd walkthrough-bestand dat u de basisopdrachten en werkstroompatronen leert. Sla dit niet over. Dat was ik bijna gelukt, en dan had ik belangrijke interactiepatronen gemist, zoals hoe je frames naar de donkere modus kunt converteren of hoe je door AI gegenereerde inhoud voor specifieke rijen binnen een ontwerp kunt activeren.
De walkthrough laat je kennismaken met de genoemde AI-agenten (ze hebben namen als Cosmo en Orchid) en laat zien hoe het agentcursorsysteem werkt. De cursor van elke agent is zichtbaar en traceerbaar op het canvas, wat niet alleen maar visueel is. Het schept echt vertrouwen in het proces van de AI, omdat je precies kunt zien wat het doet, waar het werkt en wanneer het klaar is.
Stap 3: Stel uw ontwerpsysteem in voordat u schermen genereert. Dit is de stap die de meeste mensen overhaast nemen en die het belangrijkst is voor uitvoer van productiekwaliteit. Pencil ondersteunt volledige ontwerpsystemen: consistente kleurtokens, typografische schalen, spatiëringswaarden en herbruikbare UI-componenten. Wanneer je agenten vraagt om schermen te genereren met behulp van een ontwerpsysteem, is de output in alle zes richtingen samenhangend, omdat ze dezelfde beeldtaal delen.
Zonder ontwerpsysteem genereert elke agent zijn eigen visuele vocabulaire. De resultaten zijn nog steeds interessant om te onderzoeken, maar ze delen niet de consistentie die je nodig hebt voor een echt product.
Stap 4: Leer het chattabbladsysteem kennen. Elk AI-gesprek in Pencil krijgt zijn eigen chattabblad, vergelijkbaar met het openen van meerdere Claude-gesprekken. U kunt verschillende taken op verschillende tabbladen uitvoeren, verschillende modellen toewijzen en verschillende referentiematerialen bijvoegen. Normaal gesproken houd ik één tabblad bij voor verkenning (zwerm met meerdere agenten), één voor verfijning (één agent die in een gekozen richting itereert) en één voor ontwerpsysteemwerk.
Stap 5: Verbind Claude Code via MCP. Dit is waar de magie gebeurt voor ontwikkelaars, en ik zal dit in detail bespreken in de volgende sectie. De korte versie: Pencil maakt zijn ontwerpen openbaar via MCP (Model Context Protocol), wat betekent dat Claude Code uw Pencil-frames rechtstreeks kan lezen en er code uit kan genereren.Hier is een professionele tip die mij uren heeft bespaard: besteed, voordat u aan uw eerste echte project begint, dertig minuten aan het maken van een basisontwerpsysteem met uw merkkleuren, lettertypen en kerncomponenten. Voeg dit als stijlkit toe aan elk agentgesprek. Het kwaliteitsverschil tussen 'agent met stijlkit' en 'agent zonder stijlkit' is het verschil tussen 'dit ziet er professioneel uit' en 'dit ziet eruit als een AI-demo'.
De Claude Code-integratie die de Design-to-Code-pijplijn verandert
Dit is het gedeelte waar ik vóór het testen het meest sceptisch over was, en het gedeelte waar ik daarna de meeste indruk op maakte.
De standaard ontwerp-naar-code-workflow is altijd pijnlijk geweest. Je ontwerpt in Figma, exporteert assets, inspecteert handmatig de afstandswaarden, benadert de typografie in CSS, bouwt de component, vergelijkt deze naast het ontwerp, corrigeert vijftien discrepanties, en herhaalt. Zelfs met goede Figma-naar-code-tools introduceert de vertaling entropie. De afstand wijkt af. De weergave van lettertypen verschilt. De randradius die er perfect uitzag in de ontwerptool, ziet er enigszins verkeerd uit in de browser.
De aanpak van Pencil omzeilt dit probleem volledig omdat de ontwerpen al in code zijn opgenomen. Het canvas is een visuele weergave van echte componenten met echte waarden. Wanneer Claude Code een potloodframe leest, interpreteert het geen visueel beeld: het leest een datastructuur die al is toegewezen aan CSS-eigenschappen.
Dit is de daadwerkelijke workflow:
Stap 1: Ontwerp uw scherm in Pencil (of laat agenten het voor u ontwerpen).
Stap 2: Open uw project in Claude Code. Voer /mcp uit om toegang te krijgen tot potloodspecifieke hulpmiddelen. Hiervoor moet de MCP-verbinding worden geconfigureerd - hetzelfde protocol dat u zou gebruiken voor Figma MCP of een andere tool-integratie.
Stap 3: Vertel Claude Code om code te genereren uit een specifiek frame in Pencil. Zoiets als: "Genereer een statische HTML-pagina vanuit het 'Dashboard Main'-frame in Pencil."
Stap 4: Claude Code leest de ontwerpstructuur (kleuren, lettertypen, spatiëring, lay-outhiërarchie, randradii, alles) en genereert de bijbehorende code.
Ik heb dit getest met de landingspaginavariant van mijn verkenning van de spa-mindfulnesssite. Een van de zes agenten had een warme redactionele lay-out gemaakt die ik leuk vond, dus zei ik tegen Claude Code dat hij deze als HTML-bestand moest genereren. Het resultaat werd geopend in mijn browser en zag er... identiek uit. Same colors. Dezelfde afstand. Dezelfde lettertypegewichten. Dezelfde grensradiuswaarden. Niet ‘dichtbij genoeg’. Passend.
<!-- Example of what Claude Code generated from a Pencil frame -->
<!-- The fidelity is remarkable - colors, spacing, and typography -->
<!-- match the Pencil design exactly -->
<section class="hero" style="
background: #FAF7F2;
padding: 96px 64px;
font-family: 'Playfair Display', serif;
">
<h1 style="
font-size: 56px;
line-height: 1.15;
color: #2C2420;
letter-spacing: -0.02em;
max-width: 680px;
">Find stillness in the chaos</h1>
<p style="
font-size: 18px;
line-height: 1.7;
color: #6B5E54;
max-width: 520px;
margin-top: 24px;
">A mindfulness retreat designed for people who think
they don't have time for one.</p>
</section>
```Er is een belangrijk voorbehoud: de gegenereerde uitvoer reageert standaard niet volledig. Het produceert statische lay-outs die overeenkomen met de frameafmetingen in Pencil. Voor productiegebruik wilt u voor meerdere breekpunten genereren of de code als basis gebruiken en responsief gedrag toevoegen aan uw raamwerk - Next.js, Vite, waar u ook mee bouwt.
Maar hier is waarom dat voorbehoud er minder toe doet dan het klinkt. De gegenereerde code is een bijna perfecte startsjabloon. Het moeilijkste deel van het bouwen van een gebruikersinterface op basis van een ontwerp (het verkrijgen van de juiste visuele getrouwheid, het matchen van exacte kleuren en spatiëring, het reproduceren van het typografische gevoel) is gedaan. Het toevoegen van responsieve breekpunten aan een pixel-perfecte statische pagina kost een fractie van de tijd vergeleken met het helemaal opnieuw bouwen van responsieve breekpunten, terwijl tegelijkertijd wordt geprobeerd een ontwerp te matchen.
Als je liever hebt dat iemand dit soort design-to-code-pijplijn voor je team bouwt, neem ik regelmatig dit soort integratieprojecten aan. Je kunt zien wat ik heb gebouwd op [fiverr.com/s/EgxYmWD](https://www.fiverr.com/s/EgxYmWD).
## Een ontwerpsysteem bouwen dat uw codebase daadwerkelijk kan gebruiken
Dit is waar de architectuur van Pencil het grootste resultaat oplevert, en waar ik denk dat het echt een voorsprong heeft op de Figma-workflow voor ontwikkelaarsteams.
Wanneer je een ontwerpsysteem bouwt in Pencil – tokens, componenten, patronen, de hele stapel – kun je dat hele systeem als code exporteren via Claude Code. Niet als PDF-specificatiedocument. Niet als een Figma-bestand dat ontwikkelaars handmatig moeten interpreteren. Als een daadwerkelijke interactieve referentiepagina gebouwd in React en Tailwind CSS.
Ik heb deze workflow uitgevoerd voor het mobiele dashboardproject. Nadat ik de warme humanistische richting had gekozen uit mijn verkenning met zes agenten, heb ik opnieuw zes agenten ingeschakeld - maar deze keer, in plaats van visuele richtingen te verkennen, gaf ik ze de opdracht een compleet ontwerpsysteem op te bouwen, gebaseerd op die gekozen richting.
De agenten verdeelden het werk op natuurlijke wijze. Sommige concentreerden zich op ontwerptokens - kleurwaarden, typografische schaal, afstandseenheden. Anderen bouwden UI-componenten: statusbalken, navigatietabbladen, heldenstatistiekenkaarten, lijstitems, tuimelschakelaars, formulierinvoer. Elke agent werkte tegelijkertijd aan verschillende componentcategorieën. Het hele ontwerpsysteem vulde het canvas in ongeveer acht minuten.
Toen wees ik Claude Code erop.
Het resultaat was een op zichzelf staande React-pagina waarbij elk onderdeel werd weergegeven en gedocumenteerd. Kleurstalen met hexadecimale waarden en gebruikslabels. Typografische voorbeelden bij elke schaalstap. Demonstraties van afstanden. En elke UI-component wordt weergegeven in de standaardstatus, de zweefstatus, de actieve status en de uitgeschakelde status.Deze referentiepagina wordt de enige bron van waarheid voor uw project. Wanneer Claude Code (of een AI-coderingstool) nieuwe functies voor uw app bouwt, kunt u deze naar deze referentiepagina verwijzen en zeggen: 'Volg dit ontwerpsysteem'. De AI leest echte componentcode met echte waarden, niet een ontwerpspecificatie die interpretatie vereist.
```jsx
// Example: Design system token export from Pencil via Claude Code
const tokens = {
colors: {
primary: '#E8A87C',
primaryDark: '#D4956A',
surface: '#FDF6F0',
surfaceElevated: '#FFFFFF',
text: '#2C2420',
textSecondary: '#6B5E54',
border: '#E8E0D8',
success: '#7CB87A',
warning: '#E8C97C',
error: '#D4726A',
},
typography: {
heading1: { size: '28px', weight: 700, lineHeight: 1.2 },
heading2: { size: '22px', weight: 600, lineHeight: 1.3 },
body: { size: '16px', weight: 400, lineHeight: 1.6 },
caption: { size: '13px', weight: 500, lineHeight: 1.4 },
},
spacing: {
xs: '4px', sm: '8px', md: '16px',
lg: '24px', xl: '32px', xxl: '48px',
},
borderRadius: {
sm: '8px', md: '12px', lg: '16px', full: '9999px',
},
};
Eén cruciale best practice die ik heb opgepikt: zorg ervoor dat de export van uw ontwerpsysteem overeenkomt met uw doelframework. Als je Next.js bouwt met Tailwind, vertel dan Claude Code om Tailwind-hulpprogrammaklassen en componentcode in JSX te genereren. Als u in gewone HTML/CSS bouwt, vraag dan om aangepaste CSS-eigenschappen. De discrepantie tussen het ontwerpsysteemformat en het ontwikkelingsframework creëert wrijving die het doel van de integratie tenietdoet.
Wanneer het systeem correct is ingesteld, ziet de lus er als volgt uit: ontwerp in Pencil, systeem exporteren via Claude Code, functies bouwen die naar het systeem verwijzen, ontwerpen herhalen in Pencil, opnieuw exporteren. Het ontwerp en de code blijven gesynchroniseerd omdat ze dezelfde onderliggende gegevens delen.
Wat niemand je vertelt over ontwerp met meerdere agenten (de eerlijke mening)
Ik heb een rooskleurig beeld geschetst, en het meeste van wat ik heb gezegd is echt hoe de tool presteert. Maar ik zou je een slechte dienst bewijzen als ik de wrijvingspunten die ik tegenkwam niet zou delen.
De uitvoerkwaliteit varieert per agent. Als u zes agenten gebruikt, krijgt u er doorgaans twee die echt uitstekend zijn, twee die solide zijn maar niet geïnspireerd, één die fatsoenlijk is en één die de plank mis slaat. Dat is eigenlijk prima - het punt is verkenning, en het hebben van twee uitstekende opties is beter dan nul. Maar verwacht niet elke keer zes homeruns. De agenten putten uit hetzelfde onderliggende model en de variatie komt voort uit verschillende willekeurige zaden, niet uit verschillende expertiseniveaus.
De kwaliteit van de stijlkit bepaalt de uitvoerkwaliteit. Agenten zonder stijlkits produceren generiek werk. Agenten met gedetailleerde, goed gestructureerde stijlkits produceren professioneel werk. De tool versterkt uw ontwerprichting - het vervangt niet dat u er een heeft. Ik bracht mijn eerste middag gefrustreerd door omdat mijn uitvoer op Bootstrap-sjablonen leek. Het probleem was niet het potlood. Het waren mijn luie stijlinstructies van één regel.
De responskloof is reëel. Ik heb dit eerder genoemd, maar het is de moeite waard om te herhalen, omdat dit de meest voorkomende klacht is die ik verwacht. Pencil genereert ontwerpen met vaste afmetingen. De Claude Code-export produceert code met een vaste dimensie. Je moet zelf responsief gedrag toevoegen. Voor prototypewerk en MVP-landingspagina's maakt dit niet uit. Voor productietoepassingen kunt u het beste tijd besteden aan responsieve aanpassingen na het genereren van de eerste code.De canvasprestaties met zes agents hebben af en toe haperingen. Op mijn M2 MacBook Pro zorgde het draaien van zes agenten tegelijk terwijl ik het canvas handmatig bewerkte af en toe voor framedrops en een korte interfacevertraging. Niets crashte, er ging niets verloren, maar de ervaring verliep niet zijdezacht tijdens piekactiviteit. Dit zal waarschijnlijk verbeteren met updates - de tool is nog relatief vroeg.
De Figma-vergelijking is genuanceerd. Pencil positioneert zichzelf als een potentiële Figma-vervanger, en voor AI-native workflows zou dat inderdaad het geval kunnen zijn. Maar de samenwerkingsfuncties van Figma, het plug-in-ecosysteem, de overdrachtstools voor ontwikkelaars en het koppelen van prototypes zijn volwassen mogelijkheden waar Pencil nog niet aan kan tippen. Als uw workflow diep verankerd is in Figma met teamsamenwerking, is Pencil beter gepositioneerd als een aanvullend hulpmiddel dan als vervanging – althans op dit moment.
Ik wil ook eerlijk zijn over mijn eigen leercurve. Het kostte me ongeveer drie sessies voordat ik stopte met denken in Figma-patronen en begon te denken in potloodpatronen. De verschuiving van het mentale model van ‘Ik ontwerp, dan helpt AI’ naar ‘agenten ontwerpen, ik regisseer en beheer’, vergt aanpassing. Het is een andere vaardigheid. Je wordt minder een pixel-pusher en meer een creatief directeur die een team van AI-agenten aanstuurt. Sommige mensen zullen die verandering geweldig vinden. Anderen zullen het ongemakkelijk vinden.
Die analogie met de creatief directeur is niet de mijne; Chris van de demo gebruikte het, en het klopt precies. De meest effectieve manier om Pencil te gebruiken is niet door de agenten te behandelen als assistenten die uw precieze visie uitvoeren. Het gaat erom ze te behandelen als een creatief team dat opties genereert, terwijl jij de redactionele beslissingen neemt over welke richting het product het beste dient.
De workflow die professionele resultaten oplevert (mijn feitelijke proces)
Na een week testen is dit de workflow waar ik voor gekozen heb. Het zijn vijf fasen, en elke fase bouwt voort op de vorige.
Fase 1: Referentiecollectie (10 minuten). Voordat ik Pencil open, verzamel ik 3-5 referentieafbeeldingen of ontwerpen die de esthetische richting weergeven die ik wil. Pencil ondersteunt het importeren van afbeeldingen als ontwerpreferenties, en ik heb ontdekt dat visuele referenties aanzienlijk betere uitvoer van agenten opleveren dan alleen tekstbeschrijvingen. Een screenshot van een ontwerp dat ik bewonder, communiceert meer over het ritme van de ruimte en de kleurrelaties dan drie paragrafen met een beschrijving.
Fase 2: Stijlkit maken (15 minuten). Bouw een stijlkit met uw merkkleuren, gewenste typografie, voorkeuren voor spatiëring en eventuele beperkingen ("geen verlopen", "alleen afgeronde hoeken", "primaire donkere modus"). Voeg dit toe aan uw agentgesprekken. Deze stap is de grootste hefboom voor de uitvoerkwaliteit.Fase 3: Verkenning met meerdere agenten (10 minuten). Leid zes agenten met dezelfde opdracht en stijlkit. Laat ze werken. Let op de cursors. Weersta de drang om te bewerken terwijl ze nog bezig zijn met het genereren van uw verkenningsframes: bewaar uw bewerkingen voor frames waarvan u al heeft besloten deze te behouden of weg te gooien. Wanneer ze klaar zijn, vergelijk je alle zes de richtingen naast elkaar.
Fase 4: Selectie en verfijning (20 minuten). Kies de richting die u het beste bevalt. Open een nieuw chattabblad voor één agent en begin met het verfijnen: "Pas de afstand tussen de statistiekkaarten aan", "Maak de navigatietabbladen compacter", "Verwissel het koplettertype naar iets met meer persoonlijkheid." Dit is waar uw ontwerpsmaak het belangrijkst is. De agent heeft de basis gelegd. Je beeldhouwt het tot iets dat jouw specifieke product dient.
Fase 5: Ontwerpsysteem en exporteren (15 minuten). Genereer een volledig ontwerpsysteem vanuit uw verfijnde richting met behulp van meerdere agenten. Exporteer via Claude Code naar het raamwerk van uw project. Stel de referentiepagina in. Begin met het bouwen van functies.
Totale tijd van blanco canvas tot productieklaar ontwerpsysteem met geëxporteerde code: ongeveer 70 minuten. Ik heb het getimed over drie projecten. De snelste was 55 minuten voor een eenvoudiger dashboard. De langste was 90 minuten voor een app met meerdere schermen en complexe componenten voor datavisualisatie.
Vergelijk dat eens met mijn vorige workflow: 4-6 uur in Figma voor een enkele richting, daarna 2-3 uur handmatig vertalen naar code. De tijdsbesparing is niet incrementeel. Ze zijn transformatief.
Wat dit betekent voor de kloof tussen ontwerp en ontwikkeling
Er vindt hier een grotere verschuiving plaats die verder gaat dan welk instrument dan ook.
Gedurende het grootste deel van de geschiedenis van het digitale productontwerp hebben we twee afzonderlijke werelden gehad: de wereld van het ontwerp (Figma, Sketch, Adobe) en de wereld van de code (VS Code, terminal, frameworks). Er gaat een enorme hoeveelheid creatieve en technische energie verloren bij het vertalen tussen deze twee. Ontwerpers specificeren iets. Ontwikkelaars interpreteren het. Er verschijnen discrepanties. Ontmoetingen gebeuren. Er worden correcties aangebracht. More meetings. De vertaalbelasting is reëel en stapelt zich op bij elke functie, elke sprint en elk product.
De aanpak van Pencil – ontwerp in code, op een visueel canvas, met AI-agenten die beide werelden begrijpen – comprimeert die kloof. Elimineert het niet. Comprimeert het. De ontwerpen zijn vanaf het begin code. De export is code. Het ontwerpsysteem is code. De AI-agenten die de ontwerpen genereren, produceren door code ondersteunde beelden die rechtstreeks aansluiten bij wat een ontwikkelaar zou bouwen.Ik heb deze ruimte nauwlettend in de gaten gehouden, en wat mij opwindt aan Pencil is niet dat het op dit moment perfect is. Het is dat het wijst op een toekomst waarin het overdrachtsprobleem tussen ontwerp en ontwikkeling eenvoudigweg niet bestaat. Waar visueel ontwerp en het genereren van code dezelfde activiteit zijn, en niet twee activiteiten die overbrugd worden door documentatie en goede bedoelingen.
We zijn er nog niet. De responsieve beperkingen, de raamwerkspecifieke aanpassingen, de behoefte aan een oordeel van de ontwikkelaar over interactiepatronen: dit zijn echte hiaten. Maar de richting is duidelijk, en de basis die Pencil heeft gelegd is solide genoeg om vandaag echt nuttig te zijn, en niet alleen veelbelovend voor morgen.
Is Pencil het waard om nu aan uw workflow toe te voegen?
Hier is mijn eerlijke beoordeling na een week van echt gebruik.
Als je een solo-ontwikkelaar bent of kleine teambuildingproducten waarbij de kwaliteit van de gebruikersinterface belangrijk is en je geen toegewijde ontwerper hebt, is Pencil je tijd onmiddellijk waard. Alleen al de verkenning door meerdere agenten (zes professionele ontwerprichtingen verkrijgen in minder dan tien minuten) lost een probleem op dat geen enkel ander hulpmiddel in deze categorie zo goed aankan.
Als je al diep in een op Figma gebaseerde teamworkflow zit met ontwerpsystemen, gedeelde bibliotheken en prototypetests, is Pencil de moeite waard om te bekijken en mee te experimenteren met nevenprojecten. De Claude Code-integratie is overtuigend, maar de samenwerkingsfuncties zijn nog niet volwassen genoeg om een volledige Figma-teamworkflow te vervangen.
Als je een ontwerper bent die de druk van AI-tools voelt en je afvraagt waar design als beroep naartoe gaat, let dan op Pencil. Niet omdat het je vaardigheden vervangt. Omdat het opnieuw definieert hoe u ze toepast. De ontwerpers die goed gedijen met deze tools zullen niet degenen zijn die het snelst pixels kunnen pushen. Zij zullen degenen zijn die AI-agenten het meest effectief kunnen aansturen, die de smaak en het oordeel hebben om door machines gegenereerde opties samen te stellen tot samenhangende, opzettelijke producten.
De cursor beweegt nu zelfstandig. De vraag is of jij de regie hebt.
Veelgestelde vragen
Wat is Pencil AI en waarin verschilt het van Figma?
Pencil is een AI-aangedreven desktopontwerp-app op pencil.dev die ontwerpen maakt in echte code, niet in visuele lagen. Het opvallende kenmerk is de agentzwermmodus: maximaal zes AI-agenten werken tegelijkertijd op één canvas. In tegenstelling tot Figma exporteren ontwerpen rechtstreeks als functionele code via de MCP-integratie van Claude Code. Voor de volledige vergelijking, zie het eerlijke gedeelte hierboven.
Kan Pencil AI productieklare code genereren?
Pencil genereert pixelnauwkeurige statische code via de Claude Code-integratie - waarbij de exacte kleuren, spatiëring, lettertypen en randradii uit uw ontwerpen overeenkomen. De uitvoer werkt als HTML-, React- of Tailwind CSS-componenten. Responsief gedrag vereist handmatige toevoeging. Zie de sectie Claude Code-integratie hierboven voor de exportworkflow.
Hoeveel AI-agenten kunnen tegelijk in Pencil werken?
Pencil ondersteunt maximaal zes gelijktijdige AI-agenten op één canvas. Elke agent produceert een onafhankelijke ontwerprichting op basis van dezelfde opdracht, en gebruikers kunnen het canvas handmatig bewerken terwijl agenten werken. Voor de beste resultaten gebruikt u Opus 4.6 en voegt u aan elk gesprek een stijlkit toe. Zie de verkenningsfase met meerdere agenten in mijn workflow-sectie.
Werkt Pencil met Claude Code?
Pencil integreert met Claude Code via MCP (Model Context Protocol). Nadat u verbinding heeft gemaakt via het commando /mcp in Claude Code, kunt u Claude instrueren om elk Pencil-frame te lezen en de bijbehorende code in uw doelframework te genereren. De integratie produceert getrouw nauwkeurige visuele reproducties. Installatiedetails vindt u in het implementatiegedeelte hierboven.
Is Pencil AI gratis te gebruiken?
Pencil wordt ondersteund door A16Z Speedrun en is verkrijgbaar op pencil.dev. Prijzen en toegangsgegevens zijn beschikbaar op hun site - kijk rechtstreeks op pencil.dev voor de meest actuele informatie over abonnementen en beschikbaarheid vanaf maart 2026.
Laten we samenwerken
Wilt u AI-systemen bouwen, workflows automatiseren of uw technische infrastructuur schalen? Ik help je graag.
- Fiverr (aangepaste builds en integraties): fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited (ondernemingsoplossingen): ramlit.com
- ColorPark (ontwerp en branding): colorpark.io
- xCyberSecurity (beveiligingsdiensten): xcybersecurity.io
