Anleitung

Eine Richtung besteht aus drei unabhängigen Ebenen. Weil sie getrennt sind, lässt sich jede Struktur mit jedem Look und jedem Modul-Set kombinieren.

• Preset setzt eine komplette Richtung. Mix nimmt Struktur, Tokens und Module aus verschiedenen Presets.
• Alle Regler darunter sind frei — ein Preset schreibt nur Startwerte hinein.
• Charakter: ein Punkt zwischen Airy ↔ Compact und Quiet ↔ Bold setzt Dichte, Spacing, Zeilenhöhe, Headlinegewicht, Tiefe und Iconstärke auf einmal.
• Farbe: Neutrals (Mono, Warm, Kühl, Getönt), Hell/Dunkel und Kontraststufe werden in OKLCH erzeugt. Kontrast ist garantiert: Jedes Paar erfüllt WCAG und APCA — eine Farbe, die das nicht schafft, wird in der Helligkeit nachgezogen; der Inspector zeigt, was angepasst wurde.
• Bearbeiten (oben im Inspector) öffnet die zweite Ebene: Farben, Skala, Schriften, Ecken, Abstände, Tiefe, Icons, Bewegung — jede mit eigener Seite. Mit dem Fadenkreuz wählt man ein Element direkt in der App (Badge, Tabs, Karte, Button, Eingabefeld …) und stellt nur ein, was es formt.
• Typografie: eine Skala aus Grundgröße und Verhältnis (Major Second bis Perfect Fourth) — oder „Original“ für die festen Stufen.
• Im Versionsmenü (Name oben im Inspector) sichert man den Stand unter einem Namen. Der Tab Export schreibt die Richtung als DESIGN.md für Coding-Agents und als JSON.
• Alles bleibt pro Projekt im Browser gespeichert, auch nach einem Reload.

Mit Claude (empfohlen): Das FORMA-Plugin einmal installieren, dann im Projekt sagen:

/plugin marketplace add ~/Downloads/forma
/plugin install forma@forma-local

„Richte FORMA in diesem Projekt ein."

Der Skill kopiert das Kit nach src/forma, installiert die Abhängigkeiten, hängt Runtime, Shell und Panel ein und baut die Screens auf FORMA-Bausteine um — inklusive Vorschlag für projekteigene Slots.

Von Hand:

node ~/Downloads/forma/scripts/forma.mjs init <projektordner>
node ~/Downloads/forma/scripts/forma.mjs doctor <projektordner>

init kopiert das Kit und listet die nächsten Schritte; sync holt später Kit-Updates; doctor prüft die Verdrahtung. Projektcode lebt außerhalb von src/forma — dort wird nichts von Hand geändert.

Ein Slot ist eine Strukturentscheidung, die nur dieses Projekt kennt. Die drei Archetypen collection, grouping und panels bringen eine Meinung aus jedem Preset mit; eigene Slots starten überall beim Default.

<FormaPanel
  id="kunde-x"
  slots={{
    collection: true,                       // Archetyp
    timeline: {                             // eigener Slot
      label: "Zeitachse",
      options: { vertical: "Vertikal", gantt: "Gantt" },
      default: "vertical",
    },
  }}
/>

// im Screen
const timeline = useSlot("timeline", "vertical");

Ein Kunden-Design-System wird ein Preset; lock fixiert, was die Marke nicht freigibt. Gesperrte Regler verschwinden aus dem Panel, jede Richtung wird mit dem Lock darüber angewendet.

const brand: Preset = { ...PRESETS[0], id: "kunde", label: "Kunde Core",
  tokens: { ...PRESETS[0].tokens, accent: "#db0a40", font: "inter" } };

<FormaPanel
  id="kunde"
  presets={[brand]}
  lock={{ tokens: { accent: "#db0a40", font: "inter", headingFont: "inter" } }}
/>

Den Weg von Kunden-Tokens (Paket oder Figma-Variablen) zum Preset übernimmt der Skill „FORMA Brand“.

Aus einem gespeicherten Website-Capture (DevTools → „Save all resources“) erstellt der Skill „FORMA Reference“ ein Preset: Farben, Schriften, Radien, Schatten aus dem CSS, Struktur aus dem HTML — mit Lizenzprüfung für Fonts und Icons und einem beschreibenden Namen statt des Markennamens.

Komponenten importieren Icons aus @/forma/icons. Ein neues Icon ist eine Zeile in kit/icons/glyphs.mjs plus npm run icons — danach gibt es es in allen 19 Sets.

Schriften: Google Fonts (OFL). Icons: Lucide, Phosphor, Tabler, Feather, Fluent, Framework7 (MIT); Material Symbols und Carbon (Apache-2.0); Solar (CC BY 4.0) — bei Auslieferung „Solar Icons by 480 Design“ nennen. Polaris Icons und SF Symbols sind bewusst nicht enthalten: Ihre Lizenzen schließen diese Nutzung aus.