# HTML-mockupschetser > Genereer 2-3 interactieve HTML-mock-upvarianten om UI/UX-ontwerprichtingen te vergelijken voordat u zich vastlegt op één benadering. Verken snel verschillende visuele stijlen en verzamel feedback. - Canonical: https://nanoskill.ai/nl/skills/html-mockup-sketcher - Markdown: https://nanoskill.ai/nl/skills/html-mockup-sketcher.md - Author: NousResearch - Published: 2026-06-04T05:30:00.000Z - Updated: 2026-07-21T18:34:02.819Z - Language: nl - Source type: github - Popularity signal: 2137 ## Sources - https://github.com/NousResearch/hermes-agent ## Install ```shell npx skills add https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/sketch ``` ## About De HTML-mockupschetser is een krachtige vaardigheid die is ontworpen om gebruikers te helpen snel UI/UX-ontwerprichtingen te verkennen en te vergelijken via wegwerpbare HTML-mock-ups. In plaats van zich vast te leggen op één ontwerp, genereert deze tool 2-3 interactieve varianten, waardoor verschillende visuele stijlen naast elkaar kunnen worden vergeleken. Het is ideaal voor ontwerpverkenning in een vroeg stadium, waardoor u concepten kunt visualiseren en feedback kunt verzamelen voordat u aanzienlijke ontwikkelingsinvesteringen doet. Deze vaardigheid richt zich op het creëren van functionele, interactieve HTML-mock-ups die verder gaan dan statische afbeeldingen. Elke variant is een op zichzelf staand HTML-bestand met inline CSS, systeemlettertypen en realistische inhoud. Belangrijk is dat de mock-ups basisinteractiviteit bevatten, zoals klikbare links, hoverstatussen en ten minste één toestandsovergang, wat een meer tastbaar gevoel geeft voor de gebruikerservaring. Geïntegreerde browsertools maken visuele verificatie mogelijk, waardoor de mock-ups schoon en bugvrij zijn. Om geïnformeerde besluitvorming te vergemakkelijken, biedt de HTML-mockupschetser een gestructureerde vergelijking. Elke variant wordt geleverd met een gedetailleerde \`README.md\` waarin de ontwerpprincipes, belangrijkste keuzes, afwegingen en best passende gebruiksscenario's worden geschetst. Na het genereren vat een vergelijkende tabel de verschillen samen over verschillende ontwerpdimensies, vergezeld van een doordachte analyse om u te helpen een winnaar te selecteren, elementen te combineren of verder te itereren. ## Key features - **Genereer Meerdere Ontwerpvarianten**: Produceer 2 tot 3 verschillende HTML-mockupvarianten tegelijk, elk met een andere ontwerpbenadering (bijv. dichtheid, nadruk, esthetiek, lay-out) voor een zij-aan-zij vergelijking. - **Interactieve HTML-mockups**: Creëer zelfstandige HTML-bestanden met inline-CSS, systeemlettertypen en realistische nepinformatie. Mockups zijn interactief, met aanklikbare links, hover-effecten en ten minste één toestandsovergang. - **Visuele Verificatie met Browsertools**: Gebruik geïntegreerde browsernavigatie- en visietools om elke HTML-mockup visueel te inspecteren en te verifiëren, zodat lay-outs schoon, leesbaar en vrij van fouten zijn voordat ze worden gepresenteerd. - **Gestructureerde Variantdocumentatie**: Elke HTML-mockupvariant bevat een \`README.md\` met details over de ontwerpbenadering, belangrijke keuzes (lay-out, typografie, kleur, interactie), afwegingen en ideale gebruiksscenario's om een geïnformeerde vergelijking te vergemakkelijken. - **Vergelijkende Analysetabel**: Presenteer alle gegenereerde HTML-mockupvarianten in een vergelijkende tabel, met de nadruk op verschillen op belangrijke dimensies zoals dichtheid, zichtbaarheid van primaire actie, scanbaarheid en algemene feel, samen met een uitgesproken samenvatting. ## Use cases - **Verken UI/UX-ontwerprichtingen**: Genereer en vergelijk snel meerdere HTML-mockupvarianten om verschillende ideeën voor gebruikersinterface en gebruikerservaring te verkennen voordat u aanzienlijke ontwikkelingstijd investeert. - **Verzamel Feedback over Visuele Concepten**: Presenteer interactieve HTML-mockups aan belanghebbenden of gebruikers om vroege feedback te verzamelen over verschillende visuele richtingen, wat helpt om concepten te verfijnen en geïnformeerde ontwerpbeslissingen te nemen. - **Snelle Prototyping voor Nieuwe Functies**: Creëer wegwerpbare HTML-mockups om snel nieuwe functies of schermen te prototypen, waarbij de focus ligt op kernfunctionaliteit en visuele stroom in plaats van productieklare code. ## Result preview Bekijk echte HTML's over boutiquehotelwebsites gegenereerd door deze Agent-vaardigheid. ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-1.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-2.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-3.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-4.jpg) ## Result walkthrough ### Stap 1：Installeren Voeg de vaardigheid toe aan uw agent. ![a simple demonstration of the first step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-1.jpg) ### Stap 2：Beschrijf uw website Leg de gedetailleerde informatie (bijv. stijl, type) uit van de website die u wilt maken. ![a simple demonstration of the second step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-2.jpg) ### Stap 3：Resultaat beoordelen Beoordeel en vergelijk de gegenereerde HTML-mock-ups. ![a simple demonstration of the third step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-3.jpg) ## Skill definition # Sketch Gebruik deze vaardigheid wanneer de gebruiker **een ontwerprichting wil zien voordat hij zich vastlegt** — een UI/UX-idee verkent als wegwerp HTML-mockups. Het doel is om 2-3 interactieve varianten te genereren, zodat de gebruiker visuele richtingen naast elkaar kan vergelijken, niet om kant-en-klare code te produceren. Laad dit wanneer de gebruiker dingen zegt als "schets dit scherm", "laat me zien hoe X eruit zou kunnen zien", "vergelijk layout A vs B", "geef me 2-3 interpretaties van deze UI", "laat me wat varianten zien", "maak hier een mockup van voordat ik het bouw". ## Wanneer NIET te gebruiken - De gebruiker wil een productiecomponent — gebruik `claude-design` of bouw het correct - De gebruiker wil een gepolijst eenmalig HTML-artefact (landingspagina, presentatie) — `claude-design` - De gebruiker wil een diagram — `excalidraw`, `architecture-diagram` - Het ontwerp staat al vast — bouw het gewoon ## Als de gebruiker het volledige GSD-systeem heeft geïnstalleerd Als `gsd-sketch` verschijnt als een zuster-vaardigheid (geïnstalleerd via `npx get-shit-done-cc --hermes`), geef dan de voorkeur aan **`gsd-sketch`** voor de volledige workflow: persistente `.planning/sketches/` met MANIFEST, frontier mode-analyse, consistentiecontroles over eerdere schetsen, en integratie met de rest van GSD. Deze vaardigheid is de lichtgewicht standalone versie — eenmalig schetsen zonder de statusmachine. ## Kernmethode ``` inname → varianten → rechtstreekse vergelijking → kies winnaar (of herhaal) ``` ### 1. Inname (sla over als de gebruiker al voldoende informatie gaf) Voordat je varianten genereert, krijg drie dingen helder — één vraag tegelijk, niet allemaal tegelijk: 1. **Gevoel.** "Hoe moet dit aanvoelen? Bijvoeglijke naamwoorden, emoties, een sfeer." — *"rustig, redactioneel, zoals Linear"* zegt meer dan *"minimaal"*. 2. **Referenties.** "Welke apps, sites of producten vangen het gevoel dat je je voorstelt?" — echte referenties overtreffen abstracte beschrijvingen. 3. **Kernactie.** "Wat is het allerbelangrijkste dat een gebruiker op dit scherm doet?" — de varianten moeten dit allemaal goed ondersteunen; zo niet, dan zijn het alleen maar versieringen. Reflecteer kort op elk antwoord voordat je de volgende vraag stelt. Als de gebruiker alledrie al vooraf gaf, ga dan direct door naar varianten. ### 2. Varianten (2-3, nooit 1, zelden 4+) Produceer **2-3 varianten** in één keer. Elke variant is een compleet, op zichzelf staand HTML-bestand. Beschrijf varianten niet — bouw ze. Het punt is vergelijking. Elke variant moet een **andere ontwerphouding** aannemen, niet verschillende pixelwaarden. Drie goede variant-assen: - **Dichtheid:** compact / luchtig / ultra-dicht (kies twee contrasterende polen) - **Nadruk:** inhoud-eerst / actie-eerst / tool-eerst - **Esthetiek:** redactioneel / utilitair / speels - **Layout:** éénkoloms / zijbalk / gesplitst paneel - **Onderbouwing:** kaartgebaseerd / kale inhoud / documentstijl Kies één as en differencieer van daaruit. Twee varianten die alleen in accentkleur verschillen, zijn verspilde moeite — de gebruiker kan ze niet onderscheiden. **Naamgeving van varianten:** beschrijf de houding, niet het nummer. ``` sketches/ ├── 001-rustig-redactioneel/ │ ├── index.html │ └── README.md ├── 001-utilitair-compact/ │ ├── index.html │ └── README.md └── 001-speels-gesplitst/ ├── index.html └── README.md ``` ### 3. Maak ze echt HTML Elke variant is een **enkel op zichzelf staand HTML-bestand**: - Inline ` ``` ### 4. Variant README Elke variant's `README.md` beantwoordt: ```markdown ## Variant: {naam van houding} ### Ontwerphouding Eén zin over het principe dat deze variant drijft. ### Belangrijkste keuzes - Layout: ... - Typografie: ... - Kleur: ... - Interactie: ... ### Afwegingen - Sterk in: ... - Zwak in: ... ### Best voor - Het type gebruiker of use case dat deze variant werkelijk dient ``` ### 5. Rechtstreekse vergelijking Nadat alle varianten zijn gebouwd, presenteer ze als een vergelijking. Noem niet alleen op — **geef een mening**: ```markdown ## Drie interpretaties van het startscherm | Dimensie | Rustig redactioneel | Utilitair compact | Speels gesplitst | |-----------|----------------|-------------------|---------------| | Dichtheid | Laag | Hoog | Gemiddeld | | Zichtbaarheid primaire actie | Laag | Hoog | Gemiddeld | | Scanbaarheid | Hoog | Gemiddeld | Laag | | Gevoel | Rustig, vertrouwd | Scherp, tool-achtig | Uitnodigend, energiek | **Mijn mening:** Utilitair compact voor power users, rustig redactioneel voor inhoudgerichte doelgroepen. Speels gesplitst is het zwakst — probeert beide te doen en committeert aan geen van beide. ``` Laat de gebruiker een winnaar kiezen, of combineer twee tot een hybride, of vraag om een nieuwe ronde. ## Themagebruik (wanneer het project een visuele identiteit heeft) Als de gebruiker een bestaand thema heeft (kleuren, lettertypen, tokens), zet gedeelde tokens in `sketches/themes/tokens.css` en importeer ze met `@import` in elke variant. Houd tokens minimaal: ```css /* sketches/themes/tokens.css */ :root { --color-bg: #fafafa; --color-fg: #1a1a1a; --color-accent: #0066ff; --color-muted: #666; --radius: 8px; --font-display: "Inter", sans-serif; --font-body: -apple-system, BlinkMacSystemFont, sans-serif; } ``` Tokeniseer een wegwerpschets niet te veel — drie kleuren en één lettertype is meestal genoeg. ## Interactiviteitsdrempel Een schets is interactief genoeg wanneer de gebruiker: 1. **Op een primaire actie klikt** en er iets zichtbaars gebeurt (statusverandering, modaal, toast, navigatie-schijnbeweging) 2. **Eén betekenisvolle statusovergang ziet** (filter een lijst, schakel een modus, open/sluit een paneel) 3. **Herkende affordances aanwijst** (knoppen, rijen, tabbladen) Meer dan dat is over-engineeren voor een wegwerpschets. Minder dan dat is een screenshot. ## Frontier mode (kiezen wat je vervolgens schetst) Als er al schetsen bestaan en de gebruiker zegt "wat moet ik hierna schetsen?": - **Consistentiehiaten** — twee winnende varianten uit verschillende schetsen hebben onafhankelijke keuzes gemaakt die nog niet zijn samengevoegd - **Ongeschetste schermen** — waarnaar verwezen is maar nooit verkend - **Statusdekking** — happy path geschetst, maar niet leeg / laden / fout / 1000-items - **Responsieve hiaten** — gevalideerd op één viewport; houdt het stand op mobiel / ultrabreed? - **Interactiepatronen** — statische layouts bestaan; overgangen, slepen, scrollgedrag niet Stel 2-4 benoemde kandidaten voor. Laat de gebruiker kiezen. ## Uitvoer - Maak `sketches/` (of `.planning/sketches/` als de gebruiker GSD-conventies volgt) in de repository-root - Eén submap per variant: `NNN-naam-van-houding/index.html` + `README.md` - Vertel de gebruiker hoe ze te openen: `open sketches/001-rustig-redactioneel/index.html` op macOS, `xdg-open` op Linux, `start` op Windows - Houd varianten wegwerpbaar — een schets die je de neiging had te bewaren, moet worden gepromoveerd tot echte projectcode, niet gecureerd als een artefact **Typische toolvolgorde voor één variant:** ``` terminal("mkdir -p sketches/001-rustig-redactioneel") write_file("sketches/001-rustig-redactioneel/index.html", "...") write_file("sketches/001-rustig-redactioneel/README.md", "## Variant: Rustig redactioneel\n...") browser_navigate(url="file://$(pwd)/sketches/001-rustig-redactioneel/index.html") browser_vision(question="Hoe ziet dit eruit? Zijn er duidelijke layoutproblemen?") ``` Herhaal voor elke variant en presenteer dan de vergelijkingstabel. ## Naamsvermelding Aangepast van de GSD (Get Shit Done)-project `/gsd-sketch` workflow — MIT © 2025 Lex Christopherson ([gsd-build/get-shit-done](https://github.com/gsd-build/get-shit-done)). Het volledige GSD-systeem levert persistente schetsstatus, thema-/variantpatroonreferenties en workflows voor consistentie-audits; installeer met `npx get-shit-done-cc --hermes --global`. ## FAQ ### Wat is een HTML-mockup? Een HTML-mockup is een wegwerpbare, interactieve webpagina gebouwd met HTML en basisstijl (vaak inline-CSS) om snel verschillende UI/UX-ontwerpideeën te visualiseren en te vergelijken. Het is niet bedoeld voor productie maar voor vroege ontwerpverkenning. ### Hoeveel HTML-mockupvarianten genereert deze vaardigheid? Deze vaardigheid genereert doorgaans 2 tot 3 interactieve HTML-mockupvarianten tegelijk. Het doel is om contrasterende ontwerpbenaderingen te bieden ter vergelijking, niet een uitputtende lijst van kleine variaties. ### Kan ik deze vaardigheid gebruiken om productieklare code te maken? Nee, deze vaardigheid is specifiek ontworpen voor 'wegwerp'-HTML-mockups om ontwerprichtingen te verkennen. Voor productieklare componenten of afgewerkte artefacten moet u andere tools of vaardigheden zoals \`claude-design\` gebruiken. ### Wat voor soort interactiviteit hebben de HTML-mockups? De gegenereerde HTML-mockups zijn interactief, wat betekent dat links aanklikbaar zijn, hover-effecten echt werken en er ten minste één toestandsovergang is (bijv. een paneel openen/sluiten, een lijst filteren). Dit zorgt voor een realistischer gevoel dan statische afbeeldingen. ### Hoe helpt deze vaardigheid mij om verschillende ontwerpen te vergelijken? Na het genereren van de HTML-mockups biedt de vaardigheid een vergelijkende tabel die de belangrijkste verschillen op verschillende ontwerpdimensies (bijv. dichtheid, lay-out, esthetiek) weergeeft. Het biedt ook een uitgesproken samenvatting om uw besluitvorming te begeleiden. ### Welke informatie moet ik verstrekken om een HTML-mockup te genereren? Om effectieve HTML-mockups te genereren, wordt u gevraagd naar de gewenste 'feel' (bijvoeglijke naamwoorden, sfeer), referentie-apps/sites die die feel vastleggen, en de allerbelangrijkste 'kernactie' die een gebruiker op het scherm uitvoert.