Ugrás a fő tartalomhoz

Design System Estetika Képesség

A Design System Estetika képesség egy útmutatott megközelítés, amely segíti abban, hogy finomítsa az oldal vizuális identitását. Segít abban, hogy konzisztens döntéseket hozhasson a tipográfia, a szín, a távolság és a mozgás (motion) tokenekkel kapcsolatban, amelyek meghatározzák a design system-ét.

Mi az a Design System Estetika?​

A Design System Estetika egy strukturált képesség, amely a következőket fedve:

  • Tipográfia: Betűtípuscsaládok, méretek, súlyok és sor 간 távolságok (line heights)
  • Szín: Elsődleges, másodlagos, akcentus és semleges színtáblák (palettes)
  • Távolság (Spacing): Padding, margin és gap méretek
  • Keretek (Borders): Sugár (radius) és szélesség tokenek
  • Árnyékok (Shadows): Emelkedési (elevation) és mélységi tokenek
  • Mozgás (Motion): Animációk és átmenetek (transitions)

Ezek a döntések rögzülnek a témájának theme.json fájlában, létrehozva ezzel egy egységes vizuális rendszert.

Miért használjam a Design System Estetika-t?​

Egységes megjelenés (Consistency)​

Egy design system biztosítja, hogy:

  • Minden szöveg ugyanaz a tipográfiai méretarányt használja
  • A színek konzisztensen használattek az oldal minden pontján
  • A távolságok előretekintélyes mintát követnek
  • Az animációk egységesnek érezhetőek

Hatékonyság (Efficiency)​

Az oldalakat másolgatva, oldalról oldalra tervezni helyett:

  • Tokeneket egyszer definiál
  • Mindenhol alkalmazza őket
  • Globálisan frissíti az egyik érték megváltoztatásával

Rugalmasság (Flexibility)​

Evel tudja:

  • Gyorsan elállíthatja az egész design system-ét
  • Kísérletezhet különböző esztétikákkal
  • Fenntarthatja a márka egységességét, miközben fejlődik

Hogyan aktiváljam a Design System Estetika képességét?​

Manuális aktiválás​

Bármikor elindíthatja a képességet:

"Help me refine my design system"

vagy

"Let's improve my site's aesthetics"

vagy

"Guide me through design system decisions"

Automatikus javaslatok​

Az agent javaslatot tehet a képesség használatára, ha:

  • Design változásokat kér
  • Egy "modern" vagy "professzionális" átalakítást kér
  • A vizuális egységes megjelenést szeretné javítani
  • Felkészül az oldal elindítására

A Design System Estetika folyamata​

1. Lépés: Tipográfia​

Az agent megkérdezi a betűtípusválasztásáról:

What's your preferred typography style?
- Serif (traditional, elegant)
- Sans-serif (modern, clean)
- Monospace (technical, code-focused)

For your heading font:
- Do you want a distinct heading font, or use the same as body text?
- Preference: bold, elegant, playful, minimal?

For your body font:
- Readability is key. Do you prefer:
  - Larger, more spacious text
  - Compact, efficient text
  - Standard sizing

Ezután definiálja:

  • Heading font: Elsődleges betűtípus címekhez és fejezetekhez
  • Body font: Betűtípus szövegekhez és szövegblokkokhoz
  • Monospace font: Betűtípus kód és technikai tartalomhoz
  • Size scale: Elődefinált méretek (small, base, large, XL, stb.)
  • Weight scale: Betűsúlyok (regular, medium, bold, stb.)
  • Line height: Sor 간 távolság az olvashatóság érdekében

2. Lépés: Színpaletta (Color Palette)​

Let's define your color palette.

Primary color (your brand color):
- Current: [shows existing color]
- Change to: [color picker or hex code]

Secondary color (supporting color):
- Current: [shows existing color]
- Change to: [color picker or hex code]

Accent color (highlights and CTAs):
- Current: [shows existing color]
- Change to: [color picker or hex code]

Neutral palette (grays for text, borders, backgrounds):
- Light: [color]
- Medium: [color]
- Dark: [color]

Az agent létrehoz egy teljes palettát, amely tartalmazza:

  • Elsődleges, másodlagos és akcentus színeket
  • Semleges szürke színeket (világos, közepes, sötét)
  • Semantikus színeket (success, warning, error)
  • Hover és aktív állapotokat

3. Lépés: Távolság (Spacing)​

How much breathing room do you want?

Spacing scale preference:
- Compact (tight, efficient layouts)
- Normal (balanced spacing)
- Spacious (generous whitespace)

This affects:
- Padding inside buttons and cards
- Margins between sections
- Gap between grid items

Az agent definiál távolsági tokeneket:

  • Base unit (általában 4px vagy 8px)
  • Scale: xs, sm, md, lg, xl, 2xl
  • Specifikus értékek a padding, margin, gap számára

4. Lépés: Keretek és Árnyékok (Borders and Shadows)​

Visual depth and definition:

Border radius preference:
- Sharp (no rounding)
- Subtle (small radius)
- Rounded (medium radius)
- Very rounded (large radius)

Shadow depth:
- Flat (no shadows)
- Subtle (light shadows)
- Pronounced (strong shadows)

Az agent létrehoz:

  • Border radius tokeneket (gombokhoz, kártyákhoz, inputokhoz)
  • Árnyéktokeneket az emelkedési szintekhez
  • Border szélesség tokeneket

5. Lépés: Mozgás és Animáció (Motion and Animation)​

How should your site feel when interactive?

Animation preference:
- Minimal (no animations)
- Subtle (gentle transitions)
- Playful (noticeable animations)

Specific animations:
- Page transitions: fade, slide, or none?
- Button hover: scale, color change, or both?
- Loading states: spinner, skeleton, or progress bar?

Az agent definiál:

  • Transition időtartamokat (fast, normal, slow)
  • Easing függvényeket (ease-in, ease-out, ease-in-out)
  • Animációs kulắtáblákat (keyframes) gyakori interakciókhoz

A Design System Estetika alkalmazása​

Automatikus alkalmazás​

Miután befejezte a képességet, az agent:

  1. Frissíti a témájának theme.json fájlát az összes tokennel
  2. Alkalmazza a design system-et az aktív témájára
  3. Újragenerálja a block stílusokat, hogy illeszkedjenek a yeni rendszerhez
  4. Aktiválja az frissített témát

Manuális alkalmazás​

Kézzel is szerkeszelheti a theme.json-t:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#0066CC",
          "name": "Primary",
          "slug": "primary"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "name": "Body",
          "slug": "body"
        }
      ]
    },
    "spacing": {
      "spacingSizes": [
        {
          "size": "0.5rem",
          "name": "Small",
          "slug": "sm"
        }
      ]
    }
  }
}

A Design System megjelenítése​

Kérdezze meg az agentet​

"Show me my design system"

vagy

"What are my current design tokens?"

Az agent megjeleníti a tipógraphiáját, színeit, távolságait és más tokenjeit.

Megtekintés a theme.json-ban​

Nyissa meg a /wp-content/themes/[theme-name]/theme.json fájlt egy szövegszerkesztőben, hogy lássa a raw token definíciókat.

A Design System frissítése​

Gyors frissítések​

Kérdezze meg az agentet konkrét változtatásokról:

"Make the primary color darker"

vagy

"Increase the spacing scale by 20%"

vagy

"Change the heading font to a serif"

Teljes átalakítás (Full Redesign)​

Változtathatja újra a Design System Estetika képességét:

"Let's redesign my entire design system"

Ez újra vezet keresztül az összes döntésen, az aktuális értékektől kezdve.

Részleges frissítések (Partial Updates)​

Frissítheti bizonyos aspektusokat:

"Just update the color palette, keep everything else"

Design System legjobb gyakorlatok​

Egységes megjelenés (Consistency)​

  • Használja ugyanazokat a tokeneket mindenhol
  • Ne hozzon létre egyszeri színeket vagy méreteket
  • Hivatkozzon a tokenekre, ne hardcode-olja az értékeket

Nevezetek (Naming)​

Használjon világos, semantikus neveteket:

  • ✓ primary, secondary, accent

  • ✗ blue, color-1, main

  • ✓ heading-lg, body-sm

  • ✗ font-size-24, text-large

Skálázhatóság (Scalability)​

Tervezze a rendszerét úgy, hogy skálázható legyen:

  • Használjon relatív egységeket (rem, em) a pixelek helyett
  • Létrehozjon méretarányokat (xs, sm, md, lg, xl) a véletkerekített értékek helyett
  • Tervezze előre a jövőbeni hozzáadásokra

Dokumentáció (Documentation)​

Dokumentálja a design system-ét:

  • Miért választotta ki bizonyos színeket
  • Mikor kell használni minden tokenet
  • Kivételek és szélsőségi esetek

Gyakori Design System minták​

Modern Minimalista​

  • Sans-serif tipográfia (Inter, Helvetica)
  • Korlátozott színtábla (2-3 szín)
  • Üzütt távolság (Generous spacing)
  • Finom árnyékok
  • Simább, gyors animációk

Meleg és Barátságos​

  • Serif és sans-serif keveréke
  • Meleg színtábla (narancsok, meleg szürke)
  • Kerekített sarjak
  • Lágy árnyékok
  • Játszmás animációk

Professzionális Korvet (Professional Corporate)​

  • Tiszt sans-serif (Roboto, Open Sans)
  • Semleges paletta akcentusszínnel
  • Strukturált távolság
  • Minimal árnyékok
  • Finom átmenetek

Kreatív és Merész (Creative and Bold)​

  • Megkülönböztető tipográfia
  • Merész színtábla
  • Variációs távolság
  • Erős árnyékok
  • Figyelemre méltó animációk

Hibaelhárítás (Troubleshooting)​

Nem látszanak a design system változásaim

  • Törölje az böngésző gyorsítókészletét (cache)
  • Újraépítse az oldalt, ha statikus generátort használ
  • Ellenőrizze, hogy a theme.json érvényes JSON-t tartalmaz-e
  • Vizsgálja meg, hogy az oldal aktív-e

A színek másokaknak másképp tűnnek különböző oldalakon

  • Ellenőrizze a pluginek által okozott konfliktus CSS-t
  • Vizsgálja meg, hogy az összes oldal ugyanazt a témát használja-e
  • Törölje az összes caching plugin gyorsítókészletét

Váram az előző design system-re

  • Kérdezze meg az agentet: "Show me my design system history"
  • Manuálisan szerkeszze át a theme.json-t az előző értékekre
  • Újrahalmaza a képességet más választásokkal

Következő lépések​

Miután definiálta a design system-ét:

  1. Vizsgálja át az oldalát: Látogasson el az oldalán, hogy lássa a yeni design-ot
  2. Tovább finomítsa: Javításokat tehet a képességgel újra
  3. Létrehozjon sablonokat: Készítsen egyedi block sablonokat a design tokenjeit felhasználva
  4. Dokumentálja: Ossza meg a design system-ét a csapat tagjaival