Was macht design-ref?
Referenz: $ARGUMENTS
1. Referenz erfassen
URL: Screenshot damit mit dem mitgelieferten Toolkit bei 1440 und 375, dann die Stylesheets auslesen:
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs <url> --widths 375,1440 --no-axe --out /tmp/design-ref/<host>
Die berechneten Styles mit --inject oder einem einmaligen CDP-Skript abrufen, das ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/cdp.mjs importiert (launch() → navigate() → evaluate()). getComputedStyle von body, h1–h3, p, a, button, dem primären CTA, einer Karte, einem Eyebrow/Kicker, einem Input und dem Footer sampeln. Sammle font-family/size/weight/line-height/letter-spacing, color, background, border-radius, box-shadow, padding und gap.
Eingefügtes HTML / E-Mail: in /tmp/design-ref/ref.html speichern, mit render-html.mjs rendern und die Inline-Styles direkt auslesen.
2. Das System destillieren
- Farbrollen: canvas, surface, ink, muted ink, accent, accent-ink, border, success/warn. Hex-Werte angeben und wo sie vorkommen.
- Typografie: Schriftfamilien (und die nächste kostenlose Alternative, wenn eine Schriftart lizenziert ist), Skalenschritte mit px/Zeilenabstand/Gewicht/Tracking und Schreibung (Eyebrows großgeschrieben + getrackt?).
- Abstände: Der tatsächlich verwendete Rhythmus (z. B. 8/16/24/40/64), Bereichs-Padding und Karten-Padding.
- Formen: Radien pro Elementklasse, Schattenrezepte und die Strichstärke.
- Anatomie: Button (Höhe, Padding, Radius, Gewicht, Icon), Karte, Eyebrow und die Hero-Komposition.
- Ton: 3 Adjektive plus Beschreibung, was der Text tut (kurze Sätze? zweite Person? Zahlen?).
3. Auf das Projekt abbilden (keine Abspaltung)
Die Tokens des Projekts (app/globals.css @theme/:root, tailwind.config oder die Theme-Datei) und die vorhandenen Komponenten auslesen. Erstelle:
| Rolle | Referenz | Projekttoken aktuell | Vorschlag |
|---|---|---|---|
| accent | #FF5A1F | --color-brand #… | behalten / Wert nachjustieren / neu (begründen) |
Regeln:
- Vorhandene Tokens nachjustieren, bevor neue hinzugefügt werden. Jedes neue Token benötigt einen einzeiligen Grund.
- Markengebundene Elemente werden nicht angefasst: Logo, die Markenfarbe, falls vorhanden, und bereits lizenzierte oder verwendete Schriftarten.
- Kontrast von accent-on-canvas und ink-on-surface für jeden Vorschlag prüfen (≥ 4,5:1 Text, ≥ 3:1 UI).
- Wenn das Projekt eine Figma-Datei synchron mit dem Code hält, werden die Token-Änderungen im selben Task in Figma vorgenommen.
Abbruchkriterien
- Tokentabelle vollständig, jede Zeile mit behalten, nachjustieren oder neu markiert.
- Kontrast für die vorgeschlagenen Paare geprüft.
- Noch kein Code geändert. Das kommt in
design-pass, nachdem der Benutzer der Tabelle zugestimmt hat. - Ein-Satz-Zusammenfassung für den Benutzer mit der Tabelle darunter.