Design System

Mit rögzít: design tokeneket (W3C DTCG formátum) és komponenseket (Penpot ref + CSS/TSX snippet + kép útvonal + adatmező-hivatkozások).

Ki hozza létre:

• Tokenek: kézzel a Design modulban (szín, méret, típus, árnyék — szabad kategória).
• Komponensek: kézzel a Design modulban vagy a Structure/Screens fülön, egy screen-hez „+ Új komponens" gombbal. Mindkét út ugyanabba a tárba ír.

Perzisztencia:

• .craftingtable/design/tokens.json — egy fájl, tömb, egész-kollekciós mentés (a tokeneknek nincs önálló ID-juk, csak Name).
• .craftingtable/design/components/CMP-*.json — entitásonként egy fájl, slug-alapú ID.
• .craftingtable/design/exports/CMP-*.png — komponens-képek.

Képernyőkép — Design · token- és komponens-katalógus

(A képernyőkép pótlása folyamatban.)

A Penpot → kód pipeline

A szerződés a DTCG JSON, nem a Penpot fájlformátum. Nem csinálunk automata „Penpot → React komponens" generálást — a token-szint automatizált, a komponens-szint kézi, de token-vezérelt (nulla hardkódolt szín/méret).

Component token: minden UI komponens kap egy azonosítót (CMP-button-primary), amit a Structure modulban fájlútvonalhoz, a Design modulban Penpot-objektumhoz kötünk — ez a háromoldalú kötés adja az AI-nak, hogy „ezt a gombot ebbe a fájlba, ezekkel a tokenekkel".

Szinkron

• Token átnevezése → a rá hivatkozó komponensek tokens listája aktívan frissül (kivételes aktív csere, mert a token neve szó szerint string a komponens JSON-jában).
• Komponens törlése → eltávolítás minden screen node componentIds listájából.