Mit deinem Agenten nutzen

FORMA in einen Prototyp holen – mit Claude Code, Codex oder Cursor, auch ausgehend von einem Figma-Design.

1 · Kit installieren

In einem React-19-Projekt mit Tailwind v4 und shadcn (Next.js oder Vite, Alias @/* → src/*):

npx shadcn@latest add https://forma-lab-bwh.pages.dev/r/forma.json

Das Kit landet in src/forma. Fertige Blöcke gibt es einzeln, z. B. https://forma-lab-bwh.pages.dev/r/forma-block-resource-list.json – alle stehen in registry.json.

2 · Dem Agenten sagen, wie FORMA funktioniert

Ein Satz im Prompt reicht – der Agent liest die Regeln selbst:

Lies src/forma/AGENTS.md (oder https://forma-lab-bwh.pages.dev/AGENTS.md) und baue jeden Screen nur aus FORMA-Teilen.

Claude Code und Codex lesen AGENTS.md bzw. CLAUDE.md im Projekt – verweise dort auf src/forma/AGENTS.md.
Cursor: dieselbe Zeile als Projektregel, oder @https://forma-lab-bwh.pages.dev/llms.txt als Doku hinzufügen.
Überblick für jedes Tool: llms.txt.

3 · Von Figma aus

Mit verbundenem Figma-MCP: die Variablen des Designs werden zur Marke (forma.brand.ts), der Screen wird 1:1 aus Kit-Teilen nachgebaut, danach steuerst du ihn im Panel. Prüfen mit:

npx forma-lab doctor .