Design mit Methode: erst das freigegebene Wireframe, dann der Code.
Eine feste Pipeline von der visuellen Referenz über wireframe.json und wireframe.svg, Freigabe, Code bis zum Audit. Die Skill verantwortet Optik und Geschmack; Frontend-Engineering bleibt bei schematize-web.
$ schematize install designNicht verhandelbare Untergrenzen
Werden nie abgeschaltet, um schneller zu sein. Die vollständige Liste steht in der Skill.
Wireframe vor dem Code freigegeben
Das JSON ist die Quelle der Wahrheit, das SVG nur das Bild; eine ganze Seite hält an und fragt vor dem Bauen nach dem Stack, und der Builder liest das JSON, nie das SVG.
Generierte Medien nie durch Claude
Erkennt Codex und Gemini, fragt, welches genutzt werden soll, und delegiert an schematize-models; gibt es keines, sagt sie das offen und bietet Stockbilder oder Kunden-Assets an.
Icons sind SVG, niemals Emoji
Inline-SVG (Sprite mit 22 Symbolen inklusive); strukturelles SVG wie Diagramme ist Code, figürliche Illustration zählt aber als generiertes Visual.
Kontrast und DOM werden gemessen, nicht vermutet
Kontrastverhältnisse, Skalen und Dauern stammen aus den Referenzdateien und den Auditoren in scripts/, mit Tests mit eingepflanztem Rot; es wird nicht aus dem Gedächtnis gearbeitet.
Anti-AI-Slop-Verweigerungen
Eine einheitliche Liste von Verweigerungen, mit Gegenprobe und bereits aufgelösten Quellenkonflikten, verhindert den generischen Generator-Look.
Fragt nur, was die Arbeit verändert
Ermittelt den Modus (Überzeugen, Bedienen, Lesen, Erleben) und wie viel erfunden werden darf; entscheidet den Rest und hält ihn in meta.suposicoes fest. Ohne Argument fragt ein Befehl nach und läuft nie von allein.
Befehle
Installiert in .claude/commands/. Mit /design-help jederzeit abrufbar.
/design-animateBewegung mit Absicht: ein prägender Moment, GSAP nur wenn es sich lohnt. Argumente: momento, delight, overdrive, revisar./design-auditSchritt 5: prüft Kontrast, gerendertes DOM, Platzhalterbilder und Anti-Muster auf einer fertigen Seite, als Tabelle Before / After / Why./design-buildSchritt 4: baut die Seite aus einem bereits freigegebenen wireframe.json, als einzelnes HTML, Next.js oder Shopify-Liquid-Sektion./design-ccContext Compact: schreibt das Handoff ins Archive und führt /compact aus./design-claudeErstellt oder ergänzt die dauerhaft aktive Design-CLAUDE.md (Untergrenzen, Medienregel, Grenze zu schematize-web) im Repo-Root./design-critiqueUX- und UI-Kritik nach Heuristiken (Hierarchie, Klarheit, kognitive Last, Konsistenz, Barrierefreiheit) mit priorisierten Befunden in einer Tabelle Before / After / Why./design-handoffErzeugt das Handoff (context.md + checklist.md) im Archive, ohne zu komprimieren./design-hardenMacht die UI produktionsreif: Zustände, i18n, Onboarding, Anpassung an Bildschirme und UI-Performance. Argumente: estados, i18n, onboard, adapt, optimize./design-helpZeigt das Befehlsmenü der Design-Skill; es wird nur aufgelistet, nichts ausgeführt./design-loadLädt den gesamten normativen Teil zwangsweise und wendet ihn in der Sitzung an./design-polishLetzter Qualitätsdurchgang vor der Veröffentlichung: Qualitätsuntergrenze, Animation, Verweigerungen und Checkliste in einer Runde./design-shapePlant UX und UI vor dem Bauen (Ziel, Zielgruppe, Inhalt, Ablauf, Zustände); init, document und extract halten PRODUCT.md, DESIGN.md und Tokens fest./design-tuneGezielte Anpassung einer Achse unter Wahrung der Identität. Argumente: bolder, quieter, distill, colorize, typeset, layout, clarify./design-variantsErzeugt Varianten eines Elements nebeneinander zur Auswahl: generate (eigenständige Datei) oder live (lokaler Server auf 127.0.0.1)./design-visualVisueller Prüfdurchgang einer fertigen Seite: misst das DOM bei 5 Breiten, erstellt einen Screenshot und zeigt, was sich noch verbessern lässt./design-wireSchritte 0 bis 3: liest die visuelle Referenz (Bild, URL oder Briefing), erzeugt ./wireframe.json und ./wireframe.svg im aktuellen Verzeichnis und hält an, um nach dem Stack zu fragen.Für KI-Agenten
Ohne menschliches Eingreifen installierbar. Metadaten in llms.txt.
- Ausführen: git clone https://github.com/schematizeme/skill-design.git && ./skill-design/install.sh
- Oder herunterladen: https://github.com/schematizeme/skill-design/releases/latest/download/skill-design.zip und in .claude/skills/ entpacken
- assets/CLAUDE.md in das Repo-Root kopieren (Dauerregel).
- Mit /design-help bestätigen.
Diskussion
Wird geladen…