suryxnshsingh/design-engineer

design-engineer: welcher Design-Skill für welche Aufgabe

Alle Spezialistenskills unter ~/.claude/skills/ sind dünne Verweise auf live Upstream-Repos. Keiner enthält eine Kopie. Jeder teilt dir mit, wie du den neuesten Stand abrufst, bevor du handelst. Der gemeinsame Fetcher ist:

bash ~/.claude/skills/design-engineer/scripts/upstream.sh <name>   # klont oder aktualisiert, gibt PATH=<dir> aus

Namen: impeccable ui-ux-pro-max blender-mcp img2threejs video-shotcraft hyperframes penpot remotion lemo-opuscar diagram-design. Füge --no-update hinzu, wenn du offline bist.

Routing-Tabelle

Der Benutzer möchte	Skill	Warum dieser
Stilrichtung, Palette, Schriftarten, vollständiges Designsystem für ein neues Produkt oder eine neue Seite	ui-ux-pro-max	Durchsucht 79 Stile / 192 Produkttypen und gibt ein System aus
Ein bestehendes UI verbessern, überprüfen, polieren, ent-sloppen, lauter/leiser machen	impeccable	24 Steuer-/Überprüfungs-/Abschlussbefehle + 62-Regel-Detektor
KI-Slop vor dem Ausliefern einer UI-Änderung abfangen	impeccable detect	Deterministisch, kein LLM
Architektur, Ablauf, Sequenz, ER, Gantt, Organigramm, beliebiges Diagramm	diagram-design	Eine gebrandete HTML+SVG-Datei, 45 Typen
Diagramme innerhalb eines Produkt-UI (kein eigenständiges Diagramm)	dataviz (eingebaut) dann impeccable	dataviz für das Diagrammsystem, impeccable für das umgebende UI
Promo-Video einer echten Website oder App	video-shotcraft	Nimmt echte Seiten auf, Shot-Karten, Remotion-Render
Video aus HTML/CSS, Markentokens aus Figma, ein bestehendes Video umkehren, Diashow	hyperframes	HTML zu MP4, 450 Blöcke, /figma Sub-Skill
Video in React oder ein bestehendes Remotion-Repo	remotion	Offizielle Remotion-Skills
Erzählter Kurzfilm / Erklärvideo im Maler- oder Dokumentarstil, ohne Filmmaterial	lemo-opuscar	60+ reine Code-Filmstile mit Musik + TTS
Referenzbild zu reinem Code-Three.js-Modell	img2threejs	Prozedural, animationsbereit
Echtes 3D-Modellieren, Szenen, Materialien, Renderings, Asset-Import	blender-mcp	Steuert live Blender über MCP
Eine Penpot-Designdatei lesen oder bearbeiten	penpot	Offizielles Penpot MCP
Eine Figma-Datei für UI-Arbeit lesen (Tokens, Frames, Komponenten)	Offizielles Figma MCP (claude mcp add figma -t http https://mcp.figma.com/mcp)	Nicht von diesem Set abgedeckt; das figma Sub-Skill von HyperFrames ist nur für Videos
Figma-Marken-Assets in ein Video einbinden	hyperframes figma Sub-Skill	Liest Figma nur, um HyperFrames-Bewegungen zu erzeugen

Entscheidungsregeln

1. Bestehendes UI vs. neues UI. Bestehend: Beginne mit impeccable critique auf ein enges Ziel. Neu ohne Designsystem: zuerst ui-ux-pro-max, speichere in DESIGN.md, baue, dann impeccable zur Überprüfung. Überspringe niemals den Überprüfungsschritt bei ausgeliefertem UI.
2. Video: Auswahl nach Quellmaterial.
   • Echte Produktseiten → video-shotcraft.
   • HTML/CSS-Skills, Marken-Assets oder Figma → hyperframes.
   • Team programmiert in React / Repo verwendet bereits Remotion → remotion.
   • Geschichte oder Themenfilm, in Code gezeichnet → lemo-opuscar. Mische keine zwei Video-Frameworks in einem Projekt, es sei denn, es wird portiert (HyperFrames hat remotion-to-hyperframes).
3. 3D: Code oder DCC. Ausgabe muss ein Web-Asset sein, das in Code erstellt wurde → img2threejs. Alles, was ein echtes Modellierungswerkzeug, Renderings oder heruntergeladene Assets benötigt → blender-mcp. Beide erfordern, dass der Benutzer die Host-Einrichtung bestätigt (Installationsprogramm oder Blender-Addon); sage, was sie tun müssen.
4. Diagramme sind keine Charts. Ein Diagramm eines Systems → diagram-design. Ein Datenchart in einer App → dataviz. Ein Chart in einem Video → der Chart-Block des Video-Skills.
5. Designdateien. Penpot → penpot. Figma für UI → offizielles Figma MCP; Figma für ein Video → hyperframes figma Sub-Skill. Ziehe Tokens einmal und schreibe sie in DESIGN.md, damit jeder andere Skill sie wiederverwendet.
6. MCP-gestützte Skills (blender-mcp, penpot) benötigen eine laufende Host-Anwendung. Überprüfe zuerst claude mcp list; falls nicht vorhanden, gib dem Benutzer die Installations- und Verbindungsschritte und stoppe, bis sie bestätigen.

Übliche Ketten

• Neue Landingpage: ui-ux-pro-max (System) → bauen → impeccable detect + critique → polish.
• Launch-Kit: ui-ux-pro-max Tokens → Website → video-shotcraft Promo → diagram-design Architektur für Dokumentation, alle mit denselben Tokens.
• Design-Übergabe: penpot Tokens/Frames → DESIGN.md → bauen → impeccable audit.
• Erklärfilm mit Diagrammen: diagram-design Standbilder → hyperframes oder lemo-opuscar für Bewegung.
• Hero 3D-Objekt: img2threejs aus einem Produktfoto → einbetten → impeccable overdrive für Interaktion.

Bevor du eine Designaufgabe startest

1. Wähle den Skill aus der Tabelle. Wenn zwei zutreffen, befolge die Entscheidungsregeln; falls immer noch unklar, stelle eine Frage.
2. Rufe den neuesten Stand mit upstream.sh <name> ab und lies die Einstiegsdatei, die der Skill benennt. Lies nur, was der aktuelle Schritt benötigt.
3. Suche nach vorhandenen DESIGN.md, PRODUCT.md, .diagram-design oder einer Tokendatei im Projekt und verwende sie wieder.
4. Sage in einem Satz, welchen Skill du gewählt hast und warum, dann erledige die Arbeit.

Wartung

• upstream.sh behält einen flachen Klon pro Skill in ~/.cache/design-skills/. Lösche diesen Ordner, um zurückzusetzen.
• Um einen Skill hinzuzufügen: füge einen Fall zu scripts/upstream.sh hinzu, schreibe eine Zeiger SKILL.md, und füge eine Zeile oben ein.
• Wo der Upstream ein Plugin oder einen npx skills add-Pfad ausliefert, bevorzuge diesen innerhalb echter Projekte; der Zeiger-Skill ist der immer verfügbare Fallback.