HTML Mockup Skitser

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 <style> — intet byggetrin, ingen ekstern CSS
• Systemskrifttyper eller én Google Font via <link>
• Tailwind via CDN (<script src="https://cdn.tailwindcss.com"></script>) er fint
• Realistisk falsk indhold — rigtige sætninger, rigtige navne, ikke "Lorem ipsum"
• Interaktiv: links kan klikkes, hovers er ægte, mindst én tilstandsovergang (åben/luk, filtrer, toggle). Et frossent statisk billede er en dårligere prototype end en sjusket animeret en.

Åbn den i en browser. Hvis den ser i stykker ud, reparér den, før den vises til brugeren.

Verificér varianter visuelt — brug Hermes' browser-værktøjer. Skriv ikke bare HTML og håb, det renderer; indlæs hver variant og kig på den:

browser_navigate(url="file:///absolut/sti/til/sketches/001-rolig-redaktionel/index.html")
browser_vision(question="Ser dette layout rent og læsbart ud? Nogle synlige fejl (overlappende tekst, ustilerede elementer, ødelagte billeder)?")

browser_vision returnerer en AI-beskrivelse af, hvad der faktisk er på siden plus en skærmbilledesti — fanger layoutfejl, som ren kildeinspektion overser (f.eks. en skrifttypeimport, der fejlede lydløst, en flex-beholder, der kollapsede). Reparer og navigér igen, indtil hver variant ser rigtig ud.

Standard CSS-nulstilling + systemskrifttypeliste til hurtige starter:

<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #1a1a1a;
    background: #fafafa;
    line-height: 1.5;
  }
</style>

4. Variant README

Hver variants README.md besvarer:

## 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:

## 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:

/* 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", "<!doctype 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). Det fulde GSD-system leverer vedvarende skitsetilstand, tema-/variantmønsterreferencer og konsistensgennemgangs-workflows; installér med npx get-shit-done-cc --hermes --global.