Design System Æstetik Færdighed

Design System Æstetik færdigheden er en vejledt tilgang til at finpudse dit sites visuelle identitet. Den hjælper dig med at træffe konsistente beslutninger om typografi, farver, afstanden og motion tokens, som definerer dit design system.

Hvad er Design System Æstetik?

Design System Æstetik er en struktureret færdighed, der dækker:

• Typografi: Skrifttyper, størrelser, vægte og linjehøjder
• Farver: Primære, sekundære, accent- og neutrale paletter
• Afstand: Padding, margin og gap skalaer
• Borders (Kantlinjer): Radius- og bredde tokens
• Skygger: Elevation- og dybdeskalaer
• Motion: Animationer og overgange

Disse beslutninger fanges i din themes theme.json fil, hvilket skaber et sammenhængende visuelt system.

Hvorfor bruge Design System Æstetik?

Konsistens

Et design system sikrer:

• At al tekst bruger den samme typografiske skala
• At farver bruges ensartet på tværs af dit site
• At afstanden følger et forudsigeligt mønster
• At animationer føles samlede

Effektivitet

I stedet for at træffe designbeslutninger side for side, gør du:

• Definer tokens én gang
• Anvend dem overalt
• Opdater globalt ved blot at ændre én værdi

Fleksibilitet

Du kan:

• Justere hele dit design system hurtigt
• Eksperimentere med forskellige æstetikker
• Bevare brandkonsistens, mens du udvikler dig

Aktivering af Design System Æstetik Færdigheden

Manuel aktivering

Du kan starte færdigheden når som helst:

"Help me refine my design system"

eller

"Let's improve my site's aesthetics"

eller

"Guide me through design system decisions"

Automatiske forslag

Agenter kan foreslå at bruge færdigheden, når du:

• Bed om designændringer
• Anmoder om et "moderne" eller "professionelt" redesign
• Vil forbedre den visuelle konsistens
• Forbereder dig på at lancere dit site

Designsystemets Æstetikproces

Trin 1: Typografi

Agenten spørger om dine skrifttypevalg:

Hvilken typografisk stil foretrækker du?
- Serif (traditionel, elegant)
- Sans-serif (moderne, ren)
- Monospace (teknisk, kodeorienteret)

Til din overskriftsskrifttype:
- Vil du have en distinkt overskriftsskrifttype, eller bruge den samme som brødteksten?
- Præference: fed, elegant, legende, minimalistisk?

Til din brødtekstskrifttype:
- Læsbarhed er nøglen. Foretrækker du:
  - Større, mere luftige tekster
  - Kompakt, effektiv tekst
  - Standard størrelse

Agenten definerer derefter:

• Overskriftsskrifttype: Hovedskrifttypen til titler og overskrifter
• Brødtekstskrifttype: Skrifttypen til afsnit og brødtekst
• Monospace skrifttype: Skrifttypen til kode og teknisk indhold
• Størrelseskala: Foruddefinerede størrelser (lille, basis, stor, XL osv.)
• Vægtsskala: Skrifttypevægte (normal, medium, fed osv.)
• Linjehøjde: Afstanden mellem linjerne for læsbarhed

Trin 2: Farvepalet

Lad os definere din farvepalet.

Primær farve (din brandfarve):
- Nuværende: [vis eksisterende farve]
- Skift til: [farvevælger eller hex kode]

Sekundær farve (understøttende farve):
- Nuværende: [vis eksisterende farve]
- Skift til: [farvevælger eller hex kode]

Accentfarve (markeringer og CTA'er):
- Nuværende: [vis eksisterende farve]
- Skift til: [farvevælger eller hex kode]

Neutral palet (gråtoner til tekst, kanter, baggrunde):
- Lys: [farve]
- Medium: [farve]
- Mørk: [farve]

Agenten opretter en komplet palet, der inkluderer:

• Primær, sekundær og accentfarver
• Neutrale gråtoner (lys, medium, mørk)
• Semantiske farver (succes, advarsel, fejl)
• Hover- og aktive tilstande

Hvor meget plads ønsker du?

Præference for afstands-skala:

• Kompakt (tæt, effektive layouts)
• Normal (balanceret afstand)
• Rummelig (generøs hvid plads)

Dette påvirker:

• Padding inde i knapper og kort
• Margener mellem sektioner
• Afstand mellem grid-elementer

Agenten definerer afstands-tokens:

• Grundenhed (typisk 4px eller 8px)
• Skala: xs, sm, md, lg, xl, 2xl
• Specifikke værdier for padding, margin, gap

Trin 4: Grænser og skygger

Visuel dybde og definition:

Border radius præference:
- Skarp (ingen afrunding)
- Subtil (lille radius)
- Afrundet (medium radius)
- Meget afrundet (stor radius)

Skygge dybde:
- Flad (ingen skygger)
- Subtil (lette skygger)
- Markant (stærke skygger)

Agenten opretter:

• Border radius tokens (til knapper, kort, inputfelter)
• Skygge tokens til elevationsniveauer
• Border bredde tokens

Trin 5: Bevægelse og animation

Hvordan skal din side føles, når den er interaktiv?

Animationspræference:
- Minimal (ingen animationer)
- Subtil (blide overgange)
- Legende (bemærkelsesværdige animationer)

Specifikke animationer:
- Sideovergange: fade, slide eller ingen?
- Knaphover: skalering, farveændring eller begge dele?
- Indlæsningsstadier: spinner, skeletskærm eller fremdriftslinje?

Agenten definerer:

• Overgangsvarigheder (hurtig, normal, langsom)
• Easing funktioner (ease-in, ease-out, ease-in-out)
• Animationskeyframes til almindelige interaktioner

Anvendelse af Designsystem Æstetik

Automatisk anvendelse

Når du har fuldført færdigheden, vil agenten:

1. Opdatere din themes theme.json med alle tokens
2. Anvende designsystemet på din aktive theme
3. Genoprette blokstile for at matche det nye system
4. Aktivere den opdaterede theme

Manuel anvendelse

Du kan også redigere theme.json direkte:

Se din designsystemet

Spørg agenten

"Vis mig mit designsystem"

eller

"Hvad er mine nuværende design tokens?"

Agenten vil vise dine typografi, farver, afstanden og andre tokens.

Vis theme.json

Åbn /wp-content/themes/[theme-name]/theme.json i en tekstredigerer for at se de rå token-definitioner.

Opdater dit designsystem

Hurtige opdateringer

Bed agenten om specifikke ændringer:

"Gør den primære farve mørkere"

eller

"Øg afstands-skalaen med 20%"

eller

"Skift overskriftsfont til en serif"

Fuldt redesign

Kør Design System Aesthetics færdigheden igen:

"Lad os redesignet hele mit designsystem"

Dette vil guide dig igennem alle beslutninger igen, startende med dine nuværende værdier.

Delvise opdateringer

Opdater specifikke aspekter:

"Opdater kun farvepaletten, behold resten"

Designsystem bedste praksis

Konsistens

• Brug de samme tokens overalt
• Undgå at lave unikke farver eller størrelser
• Henvis til tokens i stedet for at indkode værdier direkte

Navngivning

Brug klare, semantiske navne:

• ✓ primary, secondary, accent

• ✗ blue, color-1, main

• ✓ heading-lg, body-sm

• ✗ font-size-24, text-large

Skalerbarhed

Dokumentation

Dokumentér dit design system:

• Hvorfor du valgte specifikke farver
• Hvornår du skal bruge hver token
• Undtagelser og kanttilfælde

Almindelige Design System Mønstre

Moderne Minimalist

• Sans-serif typografi (Inter, Helvetica)
• Begrænset farvepalet (2-3 farver)
• Generøs luft/spacing
• Subtile skygger
• Glatte, hurtige animationer

Varm og Venlig

• Blandinger af serif og sans-serif
• Varm farvepalet (orange, varme gråtoner)
• Afrundede hjørner
• Bløde skygger
• Legende animationer

Professionel Virksomhed

• Ren sans-serif (Roboto, Open Sans)
• Neutral palet med en accentfarve
• Struktureret spacing
• Minimale skygger
• Subtile overgange

Kreativ og Dristig

• Distinkt typografi
• Dristig farvepalet
• Varieret spacing
• Stærke skygger
• Bemærkelsesværdige animationer

Fejlfinding

Mine design system ændringer vises ikke

• Ryd din browsercache
• Genopbyg dit site, hvis du bruger en statisk generator
• Tjek, at theme.json er gyldig JSON
• Bekræft, at temaet er aktivt

Farverne ser anderledes ud på forskellige sider

• Tjek for modstridende CSS i plugins
• Bekræft, at alle sider bruger det samme tema
• Ryd eventuelle caching plugins

Jeg vil vende tilbage til et tidligere design system

• Spørg agenten: "Vis mig min design system historik"
• Rediger manuelt theme.json til tidligere værdier
• Kør færdigheden igen med forskellige valg

Næste Skridt

Efter at have defineret dit design system:

1. Gennemse din side: Besøg din side for at se det nye design
2. Forbedre yderligere: Foretag justeringer ved hjælp af dine færdigheder igen
3. Opret skabeloner: Byg brugerdefinerede blokskabeloner ved hjælp af dine design tokens
4. Dokumentér: Del dit designsystem med teammedlemmerne