Agentic design workflow voor productteams

door Maarten Vermeulen

AI versnelt alleen wat je helder hebt gemaakt.

Ik help design- en productteams om van losse schermen en overdrachten naar één doorlopende keten te gaan: intentie, specs, Figma en code die op elkaar aansluiten. Zodat agents het uitvoerende werk oppakken, en jullie tijd overhouden voor de keuzes die ertoe doen.

Plan een gesprek → Workshop of sprint

Maarten ontwierp eerder digitale producten voor onder andere

Herkenbaar?

Iedereen gebruikt AI. Maar de overdracht blijft even rommelig.

Beslissingen leven in Slack, in losse Figma-comments of in het hoofd van die ene senior.

AI levert vooral plausibele variatie, niet wat jullie product nodig heeft.

Figma is leesbaar voor mensen, maar niet voor een agent: Frame 427, losse kleuren, ontbrekende states.

De handoff van design naar code kost elke sprint weer uitlegrondes en terugwerk.

De vuistregel

Als een collega je ontwerp niet kan bouwen zonder extra uitleg, kan een agent dat ook niet.

Wat het is

Geen overdracht, maar één keten.

Een agentic design workflow is geen nieuwe tool. Het is een manier van werken waarin het menselijke denkwerk vooraf expliciet wordt, vastligt in specs en in Figma-bestanden die een machine kan lezen, en verbonden is met Git, het versiebeheer van je developers. Dan kunnen agents veilig uitvoeren, binnen heldere grenzen.

  1. Intake

    Wat is het echte probleem?

    probleemdefinitie

  2. Intentie

    Welke ervaring, welke grenzen?

    intentiebrief

  3. Specificatie

    Gedrag, states, criteria.

    spec in Git

  4. Productie

    Mens en agent maken het.

    Figma + code

  5. Verificatie

    Toetsen tegen de spec.

    review + tests

Wie beslist wat

Jullie denken scherper. Agents doen meer.

Blijft menselijk

Richting en afwegingen

  • Productrichting en prioriteiten
  • Merkgevoel en ontwerpintentie
  • Ethische keuzes en trade-offs
  • Goedkeuren van specs en output
Kan een agent oppakken

Uitvoering binnen grenzen

  • Eerste opzet van schermen en componenten
  • States, varianten en documentatie
  • Checks op tokens en consistentie
  • Eerste versie van code, tests en pull request

Voor en na

Wat verandert er in je team?

Nu

Een vage vraag wordt meteen een scherm

En pas in de review blijkt dat iedereen iets anders bedoelde.

No Handoff

Eerst een intentiebrief van één pagina

Probleem, doel, grenzen en succes liggen vast voordat er gepixeld of gecodeerd wordt.

Nu

Ieder heeft z'n eigen prompts

Wat werkt, blijft hangen bij één collega.

No Handoff

Prompts en specs staan in Git

Met versiebeheer, review en hergebruik, net als code.

Nu

Figma is een schetsboek

Oude exploraties naast de echte versie, en niemand weet welke geldt.

No Handoff

Figma is een betrouwbare bron

Tokens, heldere namen, alle states, en één feature-ID van spec tot pull request.

De stappen

30 stappen, in zes blokken.

Dit is de handleiding waar ik mee werk. Je hoeft niet alles tegelijk te doen: we kiezen samen de blokken die passen bij jullie team en hoe ver jullie al zijn.

1–3

Fundament

Van schermen naar intentie, en wie waarvoor staat.
  1. Begrijp de overgang. Maak eerlijk zichtbaar waar beslissingen nu impliciet blijven.
  2. Formuleer het werkmodel. Vijf fasen, elk met een eigen opbrengst en eigenaar.
  3. Definieer rollen. Wie bewaakt de intentie, het design system, de specs en de agent-workflows?
4–5

Intentie

Eerst het probleem, dan pas de vorm.
  1. Start elke opdracht met een intentiebrief. Gebruikerssituatie, productdoel, gewenste ervaring, grenzen en succes.
  2. Maak ontwerpprincipes expliciet. Drie tot vijf principes, geformuleerd als afweging, met anti-voorbeelden.
6–13

Specificatie

Specs die je kunt uitvoeren, niet alleen lezen.
  1. Schrijf specs alsof ze uitgevoerd moeten worden. Observeerbaar gedrag, zichtbare aannames, en wat er bewust níet gebouwd wordt.
  2. Ontwerp een spec-template. Vaste rubrieken plus een check: is dit klaar voor AI?
  3. Vertaal ontwerp naar acceptatiecriteria. Toetsbaar voor mensen, tests én agents.
8–21

Ontwerp dat een machine kan lezen

Figma als bron waar een agent op kan bouwen.
  1. Richt Figma voorspelbaar in. Vaste pagina's: specs, flows, schermen, componenten, tokens, archief.
  2. Werk vanaf de basis met tokens. Kleur, typografie, ruimte en afronding als vaste variabelen.
  3. Gebruik componenten als gedragsafspraken. Varianten en states die iets betekenen.
  4. Leg naamgeving vast. Betekenisvolle namen in plaats van Frame 427.
  5. Maak flows compleet. Laden, leeg, fout, gelukt en randgevallen allemaal zichtbaar.
  6. Houd Figma licht maar streng op orde. Exploraties naar het archief, de bron blijft schoon.
14–24

Git en agents

Alles verbonden, agents binnen duidelijke grenzen.
  1. Zet specs en beslissingen in Git. Met versies en review, net als code.
  2. Ontwerp de agent-workflow. Smalle taak, vaste input, verwachte output, momenten om te stoppen en een review.
  3. Maak prompts onderdeel van het systeem. Onderhoudbare instructies in plaats van losse tekstjes.
  4. Verbind Figma, specs en code met één ID. Eén feature-ID door de hele keten.
  5. Maak van spec-review een vast ritueel. Design, development en product kijken elk naar hun deel.
  6. Laat AI eerst een opzet maken, niet beslissen. Snel een eerste versie, mensen houden het stuur.
  7. Controleer AI-output op kwaliteit. Toetsen tegen de criteria, niet op gevoel.
  8. Werk comfortabel in Git. Ook als designer: branches, pull requests en reviews.
  9. Ontwerp een gedeelde mappenstructuur. Specs, prompts, tokens en code op een vaste plek.
  10. Synchroniseer tokens gecontroleerd. Van Figma naar code zonder verrassingen.
25–30

Adoptie

Zodat het blijft hangen, ook als de deadline drukt.
  1. Train het team in spec-denken. Met echte voorbeelden: een vage prompt naast een goede spec.
  2. Ontwerp workshops voor adoptie. Oefenen met jullie eigen casussen.
  3. Meet of het werkt. Doorlooptijd, terugwerk, kwaliteit van reviews, hergebruik en vertrouwen.
  4. Beheer risico's en grenzen. Menselijke controlemomenten, beperkte rechten, logboek en terugdraaien.
  5. Rol uit in fases. Inventariseren, pilot, standaardiseren, agents uitbreiden, opschalen.
  6. Werk één voorbeeld helemaal uit. Van één vraag naar uitvoering, als referentie voor het team.

Een voorproefje

Zo ziet een spec eruit die klaar is voor AI.

Elf vaste onderdelen. Niet per se lang: volledig waar het ertoe doet, kort waar het design system het antwoord al geeft.

specs/feature-spec.md
  1. Probleem en context
  2. Productdoel
  3. Ontwerpintentie en afwegingen
  4. Scope, en wat niet
  5. Gebruikersflow
  6. States: laden, leeg, fout…
  7. Design system: tokens, componenten
  8. Data en content
  9. Toegankelijkheid
  10. Acceptatiecriteria
  11. AI-instructies: wat lezen, wat wijzigen, wanneer stoppen

Aanbod

Begin klein. Groei als het werkt.

01 · Kennismaken

Workshop spec-denken

Waarom specs je werk lichter maken. We leggen een vage prompt naast een goede spec, met jullie eigen werk.

60–90 min
02 · Oefenen

Workshopreeks

Intentie schrijven, Figma op orde brengen, van spec naar agent, AI-output reviewen. Elke sessie levert één echte procesverandering op.

4 sessies
03 · Bewijzen

Pilot-sprint

Eén productgebied, van intentiebrief tot een agent die een eerste opzet bouwt. Met een case die je intern kunt laten zien.

10 werkdagen
04 · Verankeren

Begeleide uitrol

Templates, naamgeving, Git-structuur, vaste reviews en agent-workflows voor terugkerend werk. In fases, met meetmomenten.

8–12 weken

De pilot-sprint

In tien werkdagen van vage vraag naar uitvoering die klaar is voor AI.

  1. Dag 1Pilot kiezen; specs, Figma, tokens en componenten verzamelen.
  2. Dag 2Analyseren waar overdrachten nu mislopen.
  3. Dag 3Eerste intentiebrief, besproken met product, design en development.
  4. Dag 4Spec-template maken en invullen voor de pilot.
  5. Dag 5Figma-bestand opschonen: pagina's, namen, states.
  6. Dag 6Spec, prompt en beslislog in Git. Eerste spec-review.
  7. Dag 7Een agent bouwt een eerste opzet op basis van de spec.
  8. Dag 8Output toetsen aan de criteria: waar was de spec te vaag?
  9. Dag 9Template, Figma-afspraken en agent-instructies verbeteren.
  10. Dag 10Case delen met het team en kiezen wat de standaard wordt.
Wat je krijgt

Een werkende pilot, geen rapport

Een ingevulde spec-template, een opgeschoond Figma-bestand, een eerste agent-workflow in jullie eigen code en een case om intern te delen.

Vaste prijs

Vooraf bekend, per pakket

Je weet vooraf wat het kost en wat het oplevert. Stoppen na de workshop mag altijd.

Portret van Maarten Vermeulen

Wie zit erachter

Maarten Vermeulen

UX- en innovation designer. Ik ontwerp nieuwe digitale producten die passen bij wat klanten willen en wat een bedrijf nodig heeft, en gebruik design door het hele ontwikkelproces heen. Tegenwoordig werk ik zelf dagelijks met agents, skills en vaste AI-workflows. No Handoff is wat ik daarvan heb geleerd, vertaald naar een werkwijze voor teams.

  • Vanuit design, niet vanuit tooling
  • Met jullie eigen werk, geen fictieve cases
  • Weten wat je níet automatiseert

Kennismaken

Benieuwd wat dit voor jullie team doet?

Vertel kort hoe jullie nu werken en waar het knelt. We plannen een gesprek van een half uur en kijken of een workshop of pilot-sprint past.

Liever mailen? hallo@nohandoff.nl