// Utforsk designkonsepter visuelt med Aksel-tema i nettleser, og lever som Figma-skisse. Brukes via /prototype når et konsept skal visualiseres.
[HINT] Download the complete skill directory including SKILL.md and all related files
| name | prototype |
| description | Utforsk designkonsepter visuelt med Aksel-tema i nettleser, og lever som Figma-skisse. Brukes via /prototype når et konsept skal visualiseres. |
Utforsk designkonsepter interaktivt i nettleseren, iterer med designeren, og lever som Figma-skisse med ekte Aksel-komponenter.
Visual Companion er best for tidlig utforsking — når retningen er uklar og du vil se 2-3 konsepter raskt. Når retningen er valgt, gå rett til Figma.
Interaktivt nettleserverktøy for å utforske designkonsepter med Aksel-styling.
@navikt/ds-css i node_modules (for Aksel-styling; fungerer uten, men viser advarsel)[ -d node_modules/@navikt/ds-css ] || pnpm install
node .github/skills/prototype/scripts/server.js --project-dir .
url, screen_dir, state_dirSpør designeren én gang, som egen melding:
«Noe av det vi skal jobbe med er enklere å vise enn å beskrive. Jeg kan sette opp en nettleservisning der du ser mockups og klikker for å velge. Vil du prøve det?»
Vent på svar. Hvis nei — jobb kun med tekst og Figma.
Nettleser — innholdet ER visuelt:
Chat — innholdet er tekst:
Skriv HTML-fragmenter til screen_dir. Serveren wrapper automatisk i
Aksel-temat og laster ekte @navikt/ds-css fra prosjektets node_modules.
VIKTIG — Aksel-korrekthet:
Før du skriver en HTML-mockup, sjekk alltid /aksel-design skill for:
--ax-space-16 = 16px)--ax-bg-*, --ax-text-*, --ax-border-*)Serveren laster ekte Aksel CSS. Du kan bruke:
.aksel-button, .aksel-text-field, etc.) for high-fidelity.mock-* snarvei-klasser for raske wireframes (se visual-companion.md)Tokens i v8: --ax-space-{px} (f.eks. --ax-space-16 = 16px, --ax-space-24 = 24px).
Radius: --ax-radius-4, --ax-radius-8, --ax-radius-12.
Se references/visual-companion.md for alle CSS-klasser og eksempler.
Regler:
konsept-a.html, layout-v2.htmlEtter at designeren har sett skjermen:
$STATE_DIR/events for klikk-dataVis ulike situasjoner som separate mockups eller som sekvens:
Når konseptet er valgt, bygg en Figma-skisse av den valgte varianten.
Figma MCP-verktøy tilgjengelig.
whoami → finn planKeycreate_new_file → opprett fil, del URL med designerensearch_design_system → finn relevante Aksel-komponenteruse_figma preflight → importer + logg varianter, tekst-node-navn og fonter (se referanse)use_figma → bygg skissen med eksakte variant-navn og node-navn fra preflightget_screenshot → verifiser visuelt (se referanse for sjekkliste)Aldri hopp over preflight — det forhindrer gjetting og feil-runder. Se references/figma-prototype.md for detaljer.
Bygg kun den nye komponenten/endringen — ikke hele siden. Bruk ekte Aksel-komponenter, riktige tokens, og vis varianter som egne frames.
Før du bygger i Figma, søk Aksel-biblioteket:
search_design_system(query: "<komponentnavn>", fileKey: "<key>")
Finnes komponenten? → Bruk den. Finnes den ikke? → Bygg custom, men med Aksel-tokens.
defaultVariant som fallbackfindOne med eksakt name — IKKE setProperties() (ustabile nøkler)layoutSizingHorizontal = "FILL" kun etter append til auto-layoutsearch_design_system — aldri gjett RGBSe references/figma-prototype.md for fullstendige regler og eksempler.
«Vil du se dette bygget med ekte Aksel-komponenter i appen?» → Deleger til konditor for å bygge på en prototype-branch. Designer-agenten skriver aldri kode selv.
Vis resultat → designer gir feedback → juster → gjenta til fornøyd.
/accessibility-review ved overlevering.server.js --project-dir . --cleanup fjerner .visual-companion/.