# HTML Mockup-skitse
> Generer 2-3 interaktive HTML-mockup-varianter for å sammenligne UI/UX-designretninger før du forplikter deg til en enkelt tilnærming. Utforsk raskt ulike visuelle ståsteder og innhent tilbakemeldinger.
- Canonical: https://nanoskill.ai/nb/skills/html-mockup-sketcher
- Markdown: https://nanoskill.ai/nb/skills/html-mockup-sketcher.md
- Author: NousResearch
- Published: 2026-06-04T05:30:00.000Z
- Updated: 2026-07-21T18:34:02.819Z
- Language: nb
- 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-skitse er en kraftfull ferdighet designet for å hjelpe brukere raskt å utforske og sammenligne UI/UX-designretninger gjennom engangs HTML-mockuper. I stedet for å binde seg til ett enkelt design, genererer dette verktøyet 2-3 interaktive varianter, noe som muliggjør side-ved-side-sammenligning av ulike visuelle ståsteder. Det er ideelt for tidligfase designutforskning, og hjelper deg med å visualisere konsepter og innhente tilbakemeldinger før betydelig utviklingsinvestering.
Denne ferdigheten fokuserer på å lage funksjonelle, interaktive HTML-mockuper som går utover statiske bilder. Hver variant er en selvstendig HTML-fil med innebygd CSS, systemfonter og realistisk innhold. Avgjørende er at mockupene inkluderer grunnleggende interaktivitet som klikkbare lenker, hover-tilstander og minst én tilstandsovergang, noe som gir en mer håndgripelig følelse av brukeropplevelsen. Integrerte nettleserverktøy muliggjør visuell verifisering, og sikrer at mockupene er rene og feilfrie.
For å lette informert beslutningstaking, tilbyr HTML Mockup-skitse en strukturert sammenligning. Hver variant leveres med en detaljert \`README.md\` som skisserer dens designprinsipper, nøkkelvalg, avveininger og best egnede bruksområder. Etter generering oppsummerer en sammenligningstabell forskjellene på tvers av ulike designdimensjoner, ledsaget av en subjektiv analyse for å hjelpe deg med å velge en vinner, kombinere elementer eller iterere videre.
## Key features
- **Generer flere designvarianter**: Produser 2-3 distinkte HTML-mockup-varianter samtidig, der hver utforsker en annen designposisjon (f.eks. tetthet, vektlegging, estetikk, layout) for side-ved-side-sammenligning.
- **Interaktive HTML-mockuper**: Opprett selvstendige HTML-filer med inline CSS, systemfonter og realistisk falskt innhold. Mockuper er interaktive, og tillater klikkbare lenker, hover-effekter og minst én tilstandsovergang.
- **Visuell verifisering med nettleserverktøy**: Benytt integrert nettlesernavigasjon og visjonsverktøy for å visuelt inspisere og verifisere hver HTML-mockup, og sikre at layouter er rene, lesbare og fri for feil før presentasjon.
- **Strukturert variantdokumentasjon**: Hver HTML-mockup-variant inkluderer en \`README.md\` som beskriver dens designposisjon, viktige valg (layout, typografi, farge, interaksjon), avveininger og ideelle bruksområder for å lette informert sammenligning.
- **Sammenlignende analysetabell**: Presenter alle genererte HTML-mockup-varianter i en sammenlignende tabell, og fremhev forskjeller på tvers av viktige dimensjoner som tetthet, synlighet av primærhandling, skannbarhet og generell følelse, sammen med en subjektiv oppsummering.
## Use cases
- **Utforsk UI/UX-designretninger**: Generer raskt og sammenlign flere HTML-mockup-varianter for å utforske ulike ideer innen brukergrensesnitt og brukeropplevelsesdesign før du investerer betydelig utviklingstid.
- **Samle tilbakemelding på visuelle konsepter**: Presenter interaktive HTML-mockuper for interessenter eller brukere for å samle tidlig tilbakemelding på ulike visuelle retninger, og hjelpe med å raffinere konsepter og ta informerte designbeslutninger.
- **Rask prototyping for nye funksjoner**: Opprett engangs HTML-mockuper for raskt å prototype nye funksjoner eller skjermer, med fokus på kjernefunksjonalitet og visuell flyt i stedet for produksjonsklar kode.
## Result preview
Se ekte HTML-er om boutique-hotellnettsteder generert av denne agentferdigheten.
## Result walkthrough
### Trinn 1：Installer
Legg til ferdigheten til agenten din.
### Trinn 2：Beskriv nettstedet ditt
Forklar den detaljerte informasjonen (f.eks. stil, type) om nettstedet du ønsker å opprette.
### Trinn 3：Gjennomgå resultat
Gjennomgå og sammenlign de genererte HTML-mockupene.
## Skill definition
# Skisse
Bruk denne ferdigheten når brukeren ønsker å **se en designretning før de forplikter seg** — utforske en UI/UX-idé som engangs HTML-mockups. Poenget er å generere 2-3 interaktive varianter slik at brukeren kan sammenligne visuelle retninger side om side, ikke å produsere kode som er klar for produksjon.
Last denne når brukeren sier ting som «skissèr denne skjermen», «vis meg hvordan X kan se ut», «sammenlign layout A vs B», «gi meg 2-3 varianter av dette grensesnittet», «la meg se noen varianter», «lag en mockup før jeg bygger».
## Når IKKE å bruke denne
- Brukeren ønsker en produksjonskomponent — bruk `claude-design` eller bygg den skikkelig
- Brukeren ønsker en polert engangs HTML-artefakt (landingsside, presentasjon) — `claude-design`
- Brukeren ønsker et diagram — `excalidraw`, `architectur-diagram`
- Designet er allerede låst — bare bygg det
## Hvis brukeren har det fullstendige FGD-systemet installert
Hvis `gsd-sketch` dukker opp som en søsterferdighet (installert via `npx get-shit-done-cc --hermes`), foretrekk **`gsd-sketch`** for den fullstendige arbeidsflyten: vedvarende `.planning/sketches/` med MANIFEST, frontiermodus-analyse, konsistensrevisjoner på tvers av tidligere skisser, og integrasjon med resten av FGD. Denne ferdigheten er den lette selvstendige versjonen — engangsskisser uten tilstandsmaskineriet.
## Kjernemetode
```
inntak → varianter → head-to-head → velg vinner (eller iterèr)
```
### 1. Inntak (hopp over hvis brukeren allerede ga deg nok)
Før du genererer varianter, skaff deg tre ting — ett spørsmål om gangen, ikke alt på en gang:
1. **Følelse.** «Hvordan skal dette føles? Adjektiver, følelser, en stemning.» — *"rolig, redaksjonell, som Linear"* forteller deg mer enn *"minimalistisk"*.
2. **Referanser.** «Hvilke apper, nettsteder eller produkter fanger følelsen du forestiller deg?» — faktiske referanser slår abstrakte beskrivelser.
3. **Kjernehandling.** «Hva er den aller viktigste tingen en bruker gjør på denne skjermen?» — variantene bør alle tjene dette godt; hvis de ikke gjør det, er de bare dekorasjon.
Reflekter kort over hvert svar før neste spørsmål. Hvis brukeren allerede ga deg alle tre på forhånd, hopp rett til varianter.
### 2. Varianter (2-3, aldri 1, sjelden 4+)
Produser **2-3 varianter** i én omgang. Hver variant er en komplett, selvstendig HTML-fil. Ikke beskriv varianter — bygg dem. Poenget er sammenligning.
Hver variant bør ta et **ulikt designstandpunkt**, ikke ulike pikselverdier. Tre gode variantakser:
- **Tetthet:** kompakt / luftig / ultratett (velg to kontrasterende poler)
- **Vektlegging:** innholdsførst / handlingsførst / verktøyførst
- **Estetikk:** redaksjonell / utilitaristisk / leken
- **Layout:** enkeltkolonne / sidefelt / delt rute
- **Forankring:** kortbasert / innholdsnaken / dokumentstil
Velg én akse og trekk deg ut fra den. To varianter som bare skiller seg i aksentfarge er bortkastet innsats — brukeren kan ikke skille dem.
**Variantnavngivning:** beskriv standpunktet, ikke nummeret.
```
sketches/
├── 001-rolig-redaksjonell/
│ ├── index.html
│ └── README.md
├── 001-utilitaristisk-tett/
│ ├── index.html
│ └── README.md
└── 001-leken-delt/
├── index.html
└── README.md
```
### 3. Gjør dem til ekte HTML
Hver variant er en **enkelt selvstendig HTML-fil**:
- Innebygd `
```
### 4. Variant README
Hver variants `README.md` svarer på:
```markdown
## Variant: {standpunktnavn}
### Designstandpunkt
Én setning om prinsippet som driver denne varianten.
### Nøkkelvalg
- Layout: ...
- Typografi: ...
- Farge: ...
- Interaksjon: ...
### Avveininger
- Sterk på: ...
- Svak på: ...
### Best for
- Den typen bruker eller brukstilfelle som denne varianten faktisk tjener
```
### 5. Head-to-head
Etter at alle varianter er bygd, presenter dem som en sammenligning. Ikke bare list opp — **ha en mening**:
```markdown
## Tre varianter av hjemmeskjermen
| Dimensjon | Rolig redaksjonell | Utilitaristisk tett | Leken delt |
|-----------|--------------------|---------------------|------------|
| Tetthet | Lav | Høy | Medium |
| Synlighet av primærhandling | Lav | Høy | Medium |
| Skannbarhet | Høy | Medium | Lav |
| Følelse | Rolig, pålitelig | Skarp, verktøyaktig | Innbydende, energisk |
**Min mening:** Utilitaristisk tett for superbrukere, rolig redaksjonell for innholdsorienterte målgrupper. Leken delt er svakest — prøver å gjøre begge og forplikter seg til ingen.
```
La brukeren velge en vinner, eller kombinere to til en hybrid, eller be om en ny runde.
## Tematikk (når prosjektet har en visuell identitet)
Hvis brukeren har et eksisterende tema (farger, fonter, tokens), plasser 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;
}
```
Ikke overtokeniser en bortkastet skisse — tre farger og én font er vanligvis nok.
## Interaktivitetsbar
En skisse er interaktiv nok når brukeren kan:
1. **Klikke en primærhandling** og noe synlig skjer (tilstandsendring, modal, toast, navigasjonsbløff)
2. **Se én meningsfull tilstandsovergang** (filtrer en liste, slå av/på en modus, åpne/lukke et panel)
3. **Hovere gjenkjennelige affordanser** (knapper, rader, faner)
Mer enn det er overingeniørkunst på et engangsprodukt. Mindre enn det er et skjermbilde.
## Frontiermodus (plukke hva man skal skissere videre)
Hvis skisser allerede finnes og brukeren sier «hva burde jeg skissere videre?»:
- **Konsistenshull** — to vinnende varianter fra ulike skisser tok uavhengige valg som ikke er blitt sammensatt ennå
- **U-skisserte skjermer** — referert til men aldri utforsket
- **Tilstandsdekning** — lykkelig sti skissert, men ikke tom / lasting / feil / 1000-elementer
- **Responsive hull** — validert ved ett visningsområde; holder det på mobil / ultrabredt?
- **Interaksjonsmønstre** — statiske layouter finnes; overganger, dra, rulleadferd finnes ikke
Foreslå 2-4 navngitte kandidater. La brukeren velge.
## Utdata
- Opprett `sketches/` (eller `.planning/sketches/` hvis brukeren bruker FGD-konvensjoner) i repo-roten
- Én underkatalog per variant: `NNN-standpunktnavn/index.html` + `README.md`
- Fortell brukeren hvordan man åpner dem: `open sketches/001-rolig-redaksjonell/index.html` på macOS, `xdg-open` på Linux, `start` på Windows
- Hold varianter som engangsprodukter — en skisse du følte du måtte bevare bør promoveres til ekte prosjektkode, ikke bevares som en artefakt
**Typisk verktøysekvens for én variant:**
```
terminal("mkdir -p sketches/001-rolig-redaksjonell")
write_file("sketches/001-rolig-redaksjonell/index.html", "...")
write_file("sketches/001-rolig-redaksjonell/README.md", "## Variant: Rolig redaksjonell\n...")
browser_navigate(url="file://$(pwd)/sketches/001-rolig-redaksjonell/index.html")
browser_vision(question="Hvordan ser dette ut? Noen åpenbare layoutproblemer?")
```
Gjenta for hver variant, presenter deretter sammenligningstabellen.
## Attribusjon
Tilpasset fra FGD (Få Gjort Drit) sitt `/gsd-sketch`-arbeidsflyt — MIT © 2025 Lex Christopherson ([gsd-build/get-shit-done](https://github.com/gsd-build/get-shit-done)). Det fullstendige FGD-systemet leverer vedvarende skissetilstand, tema/variantmønsterreferanser og konsistensrevisjon-arbeidsflyter; installer med `npx get-shit-done-cc --hermes --global`.
## FAQ
### Hva er en HTML-mockup?
En HTML-mockup er en engangs, interaktiv nettside bygget med HTML og enkel stilsetting (ofte inline CSS) for raskt å visualisere og sammenligne ulike UI/UX-designideer. Den er ikke ment for produksjon, men for tidlig designutforskning.
### Hvor mange HTML-mockup-varianter genererer denne ferdigheten?
Denne ferdigheten genererer vanligvis 2-3 interaktive HTML-mockup-varianter om gangen. Målet er å gi kontrasterende designposisjoner for sammenligning, ikke en uttømmende liste over små variasjoner.
### Kan jeg bruke denne ferdigheten til å lage produksjonsklar kode?
Nei, denne ferdigheten er spesielt designet for 'engangs' HTML-mockups for å utforske designretninger. For produksjonsklare komponenter eller polerte artefakter, bør du bruke andre verktøy eller ferdigheter som \`claude-design\`.
### Hva slags interaktivitet har HTML-mockupene?
De genererte HTML-mockupene er interaktive, noe som betyr at lenker er klikkbare, hover-effekter er ekte, og det er minst én tilstandsovergang (f.eks. åpne/lukke et panel, filtrere en liste). Dette gir en mer realistisk følelse enn statiske bilder.
### Hvordan hjelper denne ferdigheten meg med å sammenligne ulike design?
Etter å ha generert HTML-mockupene, gir ferdigheten en sammenlignende tabell som fremhever viktige forskjeller på tvers av ulike designdimensjoner (f.eks. tetthet, layout, estetikk). Den tilbyr også en subjektiv oppsummering for å veilede beslutningstakingen din.
### Hvilken informasjon må jeg oppgi for å generere en HTML-mockup?
For å generere effektive HTML-mockups, vil du bli spurt om ønsket 'følelse' (adjektiver, stemning), referanseapper/nettsteder som fanger den følelsen, og den ene viktigste 'kjernehandlingen' en bruker utfører på skjermen.