# HTML Mockup Skitser > Generér 2-3 interaktive HTML-mockupvarianter for at sammenligne UI/UX-designretninger, før du binder dig til en enkelt tilgang. Udforsk hurtigt forskellige visuelle holdninger og indsaml feedback. - Canonical: https://nanoskill.ai/da/skills/html-mockup-sketcher - Markdown: https://nanoskill.ai/da/skills/html-mockup-sketcher.md - Author: NousResearch - Published: 2026-06-04T05:30:00.000Z - Updated: 2026-07-21T18:34:02.819Z - Language: da - 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 HTML Mockup Sketcher er en kraftfuld færdighed designet til at hjælpe brugere med hurtigt at udforske og sammenligne UI/UX-designretninger gennem engangs-HTML-mockups. I stedet for at binde sig til et enkelt design genererer dette værktøj 2-3 interaktive varianter, hvilket muliggør side-om-side-sammenligning af forskellige visuelle holdninger. Det er ideelt til tidlig designudforskning og hjælper dig med at visualisere koncepter og indsamle feedback, før der investeres betydeligt i udvikling. Denne færdighed fokuserer på at skabe funktionelle, interaktive HTML-mockups, der går ud over statiske billeder. Hver variant er en selvstændig HTML-fil med inline CSS, systemskrifttyper og realistisk indhold. Vigtigst er, at mockups inkluderer grundlæggende interaktivitet såsom klikbare links, hover-tilstande og mindst én tilstandsovergang, hvilket giver en mere håndgribelig fornemmelse af brugeroplevelsen. Integrerede browser-værktøjer muliggør visuel verifikation og sikrer, at mockups er rene og fri for fejl. For at lette informeret beslutningstagning giver HTML Mockup Sketcher en struktureret sammenligning. Hver variant leveres med en detaljeret \`README.md\`, der skitserer dens designprincipper, nøglevalg, afvejninger og bedst egnede anvendelsesscenarier. Efter generering opsummerer en sammenligningstabel forskellene på tværs af forskellige designdimensioner, ledsaget af en subjektiv analyse for at hjælpe dig med at vælge en vinder, kombinere elementer eller iterere yderligere. ## Key features - **Generer flere designvarianter**: Producer 2-3 distinkte HTML-mockup-varianter samtidig, der hver udforsker en anden designstilling (f.eks. tæthed, fremhævning, æstetik, layout) til side-om-side-sammenligning. - **Interaktive HTML-mockups**: Opret selvstændige HTML-filer med inline CSS, systemskrifttyper og realistisk falsk indhold. Mockups er interaktive, hvilket giver mulighed for klikbare links, hovers og mindst én tilstandsovergang. - **Visuel verifikation med browserværktøjer**: Brug integreret browsernavigation og synsværktøjer til visuelt at inspicere og verificere hver HTML-mockup, hvilket sikrer, at layouts er rene, læsbare og fri for fejl inden præsentation. - **Struktureret variantdokumentation**: Hver HTML-mockup-variant inkluderer en \`README.md\`, der detaljerer dens designstilling, nøglevalg (layout, typografi, farve, interaktion), afvejninger og ideelle anvendelsessager for at lette informeret sammenligning. - **Sammenlignende analysetabel**: Præsenter alle genererede HTML-mockup-varianter i en sammenligningstabel, der fremhæver forskelle på tværs af nøgledimensioner som tæthed, synlighed af primær handling, scannelighed og overordnet fornemmelse, sammen med en subjektiv opsummering. ## Use cases - **Udforsk UI/UX-designretninger**: Generer og sammenlign hurtigt flere HTML-mockup-varianter for at udforske forskellige brugergrænseflade- og brugeroplevelsesdesignidéer, inden du investerer betydelig udviklingstid. - **Indsamle feedback om visuelle koncepter**: Præsenter interaktive HTML-mockups for interessenter eller brugere for at indsamle tidlig feedback om forskellige visuelle retninger, hvilket hjælper med at forfine koncepter og træffe informerede designbeslutninger. - **Hurtig prototyping til nye funktioner**: Opret engangs HTML-mockups til hurtig prototyping af nye funktioner eller skærme, med fokus på kernefunktionalitet og visuel flow snarere end produktionsklar kode. ## Result preview Se rigtige HTML'er om boutique-hotelwebsider genereret af denne Agent-færdighed. ![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 ### Trin 1：Installer Tilføj færdigheden til din agent. ![a simple demonstration of the first step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-1.jpg) ### Trin 2：Beskriv din hjemmeside Forklar den detaljerede information (f.eks. stil, type) om den hjemmeside, du ønsker at oprette. ![a simple demonstration of the second step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-2.jpg) ### Trin 3：Gennemgå resultat Gennemgå og sammenlign de genererede HTML-mockups. ![a simple demonstration of the third step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-3.jpg) ## Skill definition # Sketch Brug denne færdighed, når brugeren ønsker at **se en designretning, før de forpligter sig** til én — udforskning af en UI/UX-idé som engangs-HTML-mockups. Pointen er at generere 2-3 interaktive varianter, så brugeren kan sammenligne visuelle retninger side om side, ikke at producere leveringsklar kode. Indlæs denne, når brugeren siger ting som "skitsér denne skærm", "vis mig, hvordan X kunne se ud", "sammenlign layout A vs B", "giv mig 2-3 bud på denne UI", "lad mig se nogle varianter", "lav en mockup af dette, før jeg bygger". ## Hvornår denne IKKE skal bruges - Brugeren ønsker en produktionskomponent — brug `claude-design` eller byg den ordentligt - Brugeren ønsker en poleret engangs-HTML-artefakt (landingsside, præsentation) — `claude-design` - Brugeren ønsker et diagram — `excalidraw`, `architecture-diagram` - Designet er allerede fastlagt — byg det bare ## Hvis brugeren har det fulde GSD-system installeret Hvis `gsd-sketch` vises som en søskendefærdighed (installeret via `npx get-shit-done-cc --hermes`), foretræk **`gsd-sketch`** for det fulde workflow: vedvarende `.planning/sketches/` med MANIFEST, frontier-tilstandsanalyse, konsistensgennemgang af tidligere skitser og integration med resten af GSD. Denne færdighed er den letvægtsstandalone version — engangsskitsering uden tilstandsmaskineriet. ## Kernemetode ``` indtag → varianter → head-to-head → vælg vinder (eller itérér) ``` ### 1. Indtag (spring over, hvis brugeren allerede har givet dig nok) Inden generering af varianter, få tre ting — ét spørgsmål ad gangen, ikke alle på én gang: 1. **Fornemmelse.** "Hvad skal dette føles som? Adjektiver, følelser, en stemning." — *"rolig, redaktionel, som Linear"* fortæller dig mere end *"minimalistisk"*. 2. **Referencer.** "Hvilke apps, sider eller produkter indfanger den fornemmelse, du forestiller dig?" — faktiske referencer slår abstrakte beskrivelser. 3. **Kernehandling.** "Hvad er den ene vigtigste ting, en bruger gør på denne skærm?" — varianterne skal alle tjene dette godt; hvis de ikke gør, er de bare dekoration. Reflektér kort over hvert svar, før næste spørgsmål stilles. Hvis brugeren allerede har givet dig alle tre på forhånd, spring direkte til varianter. ### 2. Varianter (2-3, aldrig 1, sjældent 4+) Producer **2-3 varianter** i én omgang. Hver variant er en komplet, selvstændig HTML-fil. Beskriv ikke varianter — byg dem. Pointen er sammenligning. Hver variant bør indtage en **forskellig designholdning**, ikke forskellige pixelværdier. Tre gode variant-akser: - **Tæthed:** kompakt / luftig / ultrakompakt (vælg to kontrasterende poler) - **Vægtning:** indhold-først / handling-først / værktøj-først - **Æstetik:** redaktionel / utilitaristisk / legende - **Layout:** enkelt-kolonne / sidebar / delt panel - **Forankring:** kortbaseret / bart indhold / dokumentstil Vælg én akse og træk den fra hinanden. To varianter, der kun adskiller sig i accentfarve, er spildt indsats — brugeren kan ikke skelne dem. **Variantnavngivning:** beskriv holdningen, ikke nummeret. ``` sketches/ ├── 001-rolig-redaktionel/ │ ├── index.html │ └── README.md ├── 001-utilitaristisk-kompakt/ │ ├── index.html │ └── README.md └── 001-legende-delt/ ├── index.html └── README.md ``` ### 3. Gør dem til ægte HTML Hver variant er en **enkelt selvstændig HTML-fil**: - Inline ` ``` ### 4. Variant README Hver variants `README.md` besvarer: ```markdown ## Variant: {holdningsnavn} ### Designholdning Én sætning om princippet, der driver denne variant. ### Nøglevalg - Layout: ... - Typografi: ... - Farve: ... - Interaktion: ... ### Afvejninger - Stærk ved: ... - Svag ved: ... ### Bedst til - Den type bruger eller brugsscenarie, denne variant rent faktisk tjener ``` ### 5. Head-to-head Efter alle varianter er bygget, præsenter dem som en sammenligning. List ikke bare — **giv din mening**: ```markdown ## Tre bud på startskærmen | Dimension | Rolig redaktionel | Utilitaristisk kompakt | Legende delt | |-----------|-------------------|------------------------|-------------| | Tæthed | Lav | Høj | Medium | | Primær handlingssynlighed | Lav | Høj | Medium | | Skannbarhed | Høj | Medium | Lav | | Fornemmelse | Rolig, betroet | Skarp, værktøjsagtig | Indbydende, energisk | **Min vurdering:** Utilitaristisk kompakt til superbrugere, rolig redaktionel til indholdsorienterede målgrupper. Legende delt er svagest — forsøger at gøre begge dele og forpligter sig til ingen af dem. ``` Lad brugeren vælge en vinder, eller kombiner to til en hybrid, eller bed om en ny runde. ## Tematisering (når projektet har en visuel identitet) Hvis brugeren har et eksisterende tema (farver, skrifttyper, tokens), læg delte tokens i `sketches/themes/tokens.css` og `@import` dem i hver variant. Hold tokens minimale: ```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; } ``` Over-tokenizér ikke en engangsskitse — tre farver og én skrifttype er normalt nok. ## Interaktivitetsbjælke En skitse er interaktiv nok, når brugeren kan: 1. **Klikke på en primær handling** og noget synligt sker (tilstandsændring, modal, toast, navigationsfint) 2. **Se én meningsfuld tilstandsovergang** (filtrer en liste, skift en tilstand, åbn/luk et panel) 3. **Hovere over genkendelige affordances** (knapper, rækker, faner) Mere end det er over-engineering af en engangsting. Mindre end det er et skærmbillede. ## Frontier-tilstand (vælg hvad der skal skitseres næste gang) Hvis skitser allerede findes, og brugeren siger "hvad skal jeg skitsere næste gang?": - **Konsistenshuller** — to vindende varianter fra forskellige skitser har truffet uafhængige valg, som endnu ikke er blevet sammensat - **Uskitserede skærme** — refereret til, men aldrig udforsket - **Tilstandsdækning** — happy path skitseret, men ikke tom / indlæsning / fejl / 1000-elementer - **Responsive huller** — valideret ved én viewport; holder det ved mobil / ultrabred? - **Interaktionsmønstre** — statiske layouts findes; overgange, træk, scrolleadfærd gør ikke Foreslå 2-4 navngivne kandidater. Lad brugeren vælge. ## Output - Opret `sketches/` (eller `.planning/sketches/` hvis brugeren bruger GSD-konventioner) i rodmappen på repoet - Én undermappe pr. variant: `NNN-holdningsnavn/index.html` + `README.md` - Fortæl brugeren, hvordan de åbner dem: `open sketches/001-rolig-redaktionel/index.html` på macOS, `xdg-open` på Linux, `start` på Windows - Hold varianter engangs — en skitse, som du følte behov for at bevare, bør promoveres til rigtig projektkode, ikke kurateres som et aktiv **Typisk værktøjssekvens for én variant:** ``` terminal("mkdir -p sketches/001-rolig-redaktionel") write_file("sketches/001-rolig-redaktionel/index.html", "...") write_file("sketches/001-rolig-redaktionel/README.md", "## Variant: Rolig redaktionel\n...") browser_navigate(url="file://$(pwd)/sketches/001-rolig-redaktionel/index.html") browser_vision(question="Hvordan ser dette ud? Nogle åbenlyse layoutproblemer?") ``` Gentag for hver variant, præsentér derefter sammenligningstabellen. ## Kreditering Tilpasset fra GSD (Get Shit Done)-projektets `/gsd-sketch`-workflow — MIT © 2025 Lex Christopherson ([gsd-build/get-shit-done](https://github.com/gsd-build/get-shit-done)). Det fulde GSD-system leverer vedvarende skitsetilstand, tema-/variantmønsterreferencer og konsistensgennemgangs-workflows; installér med `npx get-shit-done-cc --hermes --global`. ## FAQ ### Hvad er en HTML-mockup? En HTML-mockup er en engangs, interaktiv webside bygget med HTML og grundlæggende styling (ofte inline CSS) for hurtigt at visualisere og sammenligne forskellige UI/UX-designidéer. Den er ikke beregnet til produktion, men til udforskning af design i den tidlige fase. ### Hvor mange varianter af HTML-mockups genererer denne færdighed? Denne færdighed genererer typisk 2-3 interaktive HTML-mockup-varianter ad gangen. Målet er at give kontrasterende designstillinger til sammenligning, ikke en udtømmende liste over mindre variationer. ### Kan jeg bruge denne færdighed til at oprette produktionsklar kode? Nej, denne færdighed er specifikt designet til 'engangs' HTML-mockups for at udforske designretninger. Til produktionsklare komponenter eller polerede artefakter bør du bruge andre værktøjer eller færdigheder som \`claude-design\`. ### Hvilken form for interaktivitet har HTML-mockupsene? De genererede HTML-mockups er interaktive, hvilket betyder, at links er klikbare, hovers er ægte, og der er mindst én tilstandsovergang (f.eks. åbn/luk et panel, filtrer en liste). Dette giver en mere realistisk fornemmelse end statiske billeder. ### Hvordan hjælper denne færdighed mig med at sammenligne forskellige designs? Efter at have genereret HTML-mockupsene giver færdigheden en sammenligningstabel, der fremhæver nøgleforskelle på tværs af forskellige designdimensioner (f.eks. tæthed, layout, æstetik). Den tilbyder også en subjektiv opsummering for at vejlede din beslutningstagning. ### Hvilke oplysninger skal jeg give for at generere en HTML-mockup? For at generere effektive HTML-mockups vil du blive spurgt om den ønskede 'fornemmelse' (adjektiver, stemning), reference-apps/-sites, der fanger den fornemmelse, og den enkelt vigtigste 'kernehandling', en bruger udfører på skærmen.