Van spec naar front-end, geen overdracht ertussen
Wijs je agent naar een DESIGN.md en een beschrijving; hij schrijft op-systeem, echte front-endcode — componenten, schermen, dashboards — rechtstreeks in je project. Geen redlines, geen “wachten op ontwerp.”
In één zin
Open Design dicht de kloof tussen ontwerper en engineer door het ontwerpsysteem machineleesbaar te maken: dezelfde agent die je code schrijft, past het systeem toe en rendert echte UI.
Hoe een engineer Open Design gebruikt
- 01
Lees het systeem, niet een redline
De DESIGN.md leeft in de repo. Je agent leest het zoals hij de rest van de codebase leest — geen geëxporteerde specs om te interpreteren.
- 02
Genereer op-systeem UI
Beschrijf het scherm of component; de agent schrijft front-end die al bij het systeem past. Prototypes, admin-dashboards, interne tools — in minuten.
- 03
Het is al jouw code
De output is HTML / frameworkcode in je repo, te beoordelen in een PR. Geen vertaalstap tussen “het ontwerp” en “de build.”
Wat een engineer kan genereren
prototype Lees volledige prompt → Documentatiepagina
Een documentatiepagina met zijnavigatie, scrollbare artikelinhoud en inhoudsopgave. Gebruik bij vermelding van 'documentatie', 'handleiding', 'API-referentie' of 'tutorial'.
prototype Lees volledige prompt → Engineering-runbook
Een engineering-runbook — serviceoverzicht, waarschuwingentabel, dashboardlinks, veelvoorkomende procedures met kopieerbare commando's, on-callrooster en incident-responsechecklist. Gebruik voor runbooks, ops-docs, on-callgidsen, SRE-docs of 运维手册.
presentatie Lees volledige prompt → Html Ppt kennisarchitectuur blauwdruk
Crème blauwdruk architectuurdeck — crème papierbasis #F0EAE0 + enkele roestroze #B5392A markering, 48px blauwdrukrastermasker, 2px zwarte rand harde kaarten, pipeline stappenboxen (een verhoogd), rechts roestroze insight-callout, Playfair schreefloos groot lettertype, SVG gestippelde feedbackloop. Geen verlopen, geen zachte schaduwen, serieus en printvriendelijk.
presentatie Lees volledige prompt → Html Ppt Tech Sharing
Conferentie- / interne tech-talk presentatie — GitHub-dark, JetBrains Mono, terminal codeblokken, agenda + Q&A pagina's. Voor engineeringpresentaties, interne sharesessies, conferentiegesprekken en code-intensieve walkthroughs.
prototype Lees volledige prompt → Datavisualisatierapport
Zet CSV-, Excel- of JSON-gegevens om in een gepolijste visuele rapportpagina.
prototype Lees volledige prompt → Kanbanbord
Kanban- / takenbord met kolommen (To do / In progress / In review / Done), versleepbare kaarten, avatars van toegewezenen, swimlanes en een bovenste filterbalk. Gebruik wanneer de brief 'kanban', 'task board', 'sprint board', 'trello' of '看板' noemt.
Front-end met Open Design vs de overdrachtsmanier
| Wat je nodig hebt | Met Open Design | Overdracht van ontwerp naar dev |
|---|---|---|
| Een ontwerp om vanuit te bouwen | ●Een DESIGN.md die je agent rechtstreeks leest | Een Figma-bestand dat je met de hand herinterpreteert |
| Match het systeem | ●Automatisch afgedwongen op het moment van genereren | Met het oog tegen een spec inschatten, drift sluipt erin |
| Interne tools / dashboards bouwen | ●Prompt → op-systeem front-end in de repo | Wachten op een ontwerper, dan twee keer bouwen |
| Beoordelen | ●Het is code — diff het in een PR | Pixels vergelijken met een mockup |
| Kosten & lock-in | ●Open source, in je repo, draait lokaal | Een ontwerptool die het hele team moet licentiëren |
Echte, op-systeem front-end die rechtstreeks in de repo is gegenereerd. Kies er een die dicht bij wat je bouwt ligt en beschrijf het.
Veelgestelde vragen over engineering
-
01 Heb ik nog een ontwerper nodig?
Voor merk en richting wel. Maar voor het bouwen van op-systeem UI en interne tools leest de agent de DESIGN.md en schrijft de front-end — zonder overdracht-heen-en-weer.
-
02 Wat levert het op?
Echte HTML / frameworkcode in je repo, te beoordelen in een PR — geen mockup die je opnieuw implementeert.
-
03 Hoe blijft het op systeem?
De DESIGN.md is de bron van waarheid; de agent past hem toe op het moment van genereren, dus de output matcht zonder handmatige pixelcontrole.
-
04 Welke agents kan ik gebruiken?
Claude Code, Codex, Cursor Agent, Gemini CLI en meer eigen adapters, met je eigen providersleutels.
Genereer je volgende UI vanavond
Geef de repo een ster, installeer Open Design en verander een DESIGN.md in front-end — in de agent die je al gebruikt.