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-designeller 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:
- Følelse. «Hvordan skal dette føles? Adjektiver, følelser, en stemning.» — "rolig, redaksjonell, som Linear" forteller deg mer enn "minimalistisk".
- Referanser. «Hvilke apper, nettsteder eller produkter fanger følelsen du forestiller deg?» — faktiske referanser slår abstrakte beskrivelser.
- 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
<style>— ingen byggesteg, ingen ekstern CSS - Systemfonter eller én Google Font via
<link> - Tailwind via CDN (
<script src="https://cdn.tailwindcss.com"></script>) er greit - Realistisk falskt innhold — faktiske setninger, faktiske navn, ikke "Lorem ipsum"
- Interaktiv: lenker klikkbare, hover ekte, minst én tilstandsovergang (åpne/lukke, filtrer, slå av/på). Et frossent statisk bilde er en dårligere spiss enn en slurvete animert en.
Åpne den i en nettleser. Hvis den ser ødelagt ut, fiks den før du viser til brukeren.
Verifiser varianter visuelt — bruk Hermes' nettleserverktøy. Ikke bare skriv HTML og håp den rendres; last hver variant og se på den:
browser_navigate(url="file:///absolutt/sti/til/sketches/001-rolig-redaksjonell/index.html")
browser_vision(question="Ser dette layoutet rent og lesbart ut? Noen synlige feil (overlappende tekst, ustilte elementer, ødelagte bilder)?")
browser_vision returnerer en AI-beskrivelse av hva som faktisk er på siden pluss en skjermbildesti — fanger opp layoutfeil som ren kildekodeinspeksjon går glipp av (f.eks. en fontimport som stille feilet, en flex-beholder som kollapset). Fiks og naviger på nytt til hver variant ser riktig ut.
Standard CSS-reset + systemfontstakk for raske 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 svarer på:
## 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:
## 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:
/* 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:
- Klikke en primærhandling og noe synlig skjer (tilstandsendring, modal, toast, navigasjonsbløff)
- Se én meningsfull tilstandsovergang (filtrer en liste, slå av/på en modus, åpne/lukke et panel)
- 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.htmlpå macOS,xdg-openpå Linux,startpå 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", "<!doctype 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). Det fullstendige FGD-systemet leverer vedvarende skissetilstand, tema/variantmønsterreferanser og konsistensrevisjon-arbeidsflyter; installer med npx get-shit-done-cc --hermes --global.