design Agent Skills

ckm:design ist eine strukturierte Design-Skill für die Steuerung und Erstellung von Logos, CIP-Mockups, Bannern, Slides und SVG-Icons. Enthalten sind praxisnahe Referenzen, CSV-gestützte Optionen und Python-Skripte für wiederholbare Design-Workflows statt generischer Prompt-Ausgaben.

Die design-md-Skill analysiert Stitch-Projekte und macht aus ihren Screens eine semantische DESIGN.md als Single Source of Truth für konsistentes Layout, konsistenten Ton, Farben und die Komponentensprache. Verwende design-md für Design Systems, wenn du promptbare Orientierung für künftige Stitch-Generierungen brauchst – nicht nur eine visuelle Zusammenfassung.

Die design-Skill hilft dabei, vage UI-Anforderungen in produktionsreife visuelle Ergebnisse für Seiten, Komponenten, Dashboards und screenshotgestützte Feinarbeit zu übersetzen. Nutze sie, wenn die Oberfläche hässlich, unklar, inkonsistent oder visuell falsch wirkt und wenn du Design für UI-Design statt für Backend-Logik oder Datenpipelines brauchst. Sie enthält Hinweise zu Installation, Nutzung, Leitplanken und besseren ästhetischen Entscheidungen.

Nutze frontend-design, um markante Frontend-Oberflächen in Produktionsqualität mit einer klaren visuellen Haltung zu gestalten. Diese Skill ist für Landingpages, Dashboards, App-Shells und Komponenten gedacht, bei denen Hierarchie, Typografie, Bewegung und Feinschliff genauso wichtig sind wie die Implementierung. Enthalten sind Installations- und Nutzungshinweise für designorientierte UI-Arbeit.

Nutze das design-system Skill, um ein UI-System zu erstellen oder zu prüfen, Tokens aus bestehendem Code zu extrahieren und Styling-Konsistenz in realen Repos zu bewerten.

ui-design-system ist ein Claude Skill für Design Systems, der beim Erstellen von Design Tokens, Farbskalen, Typografie, Abständen, responsiven Regeln, Komponentendokumentation und Developer-Handoff-Assets hilft – mit Referenzen und einem Python Token Generator für Ausgaben als JSON, CSS, SCSS oder Zusammenfassung.

design-consultation ist ein design-consultation-Skill, der aus einer groben Produktidee eine vollständige Design-Richtung entwickelt. Er erstellt eine DESIGN.md als zentrale Referenz, Vorschauen und systemweite Leitlinien für Typografie, Farbe, Abstände, Layout und Motion. Besonders geeignet für neue Produkte und UI-Flächen, die einen stimmigen Ausgangspunkt brauchen.

frontend-design-review ist ein GitHub-Skill für die Prüfung von Frontend-UI-Arbeiten und für die Erstellung unverwechselbarer, produktionsreifer Oberflächen von Grund auf. Er hilft dabei, die Einhaltung des Designsystems, Barrierefreiheit, visuelle Qualität und die Frage zu bewerten, ob eine UI generisch wirkt oder bewusst gestaltet ist. Nutze ihn für PR-Reviews, Component-Reviews und frontend-design-review für UI-Design.

Die tool-design Skill hilft dir, Agent-Tools mit klaren Verträgen zu entwerfen, Überschneidungen zu reduzieren und die Tool-Auswahl zu verbessern. Nutze sie für Design Implementation, MCP-Tool-Design, Tool-Konsolidierung, Namenskonventionen und das Debugging falscher Tool-Aufrufe. Sie passt besonders gut, wenn du einen praxisnahen Leitfaden für tool-design mit Installations- und Nutzungsschritten, zu prüfenden Quelldateien und konkreten Einschränkungen brauchst, die Tool-Beschreibungen weniger mehrdeutig machen.

figma-generate-design hilft dabei, codierte Seiten, Modals, Drawers, Sidebars, Panels und andere Ansichten mit mehreren Bereichen in Figma anhand des veröffentlichten Designsystems umzusetzen. Es findet Komponenten, Variablen, Styles und Library-Assets aus Code Connect und verwandten Quellen und setzt den Screen dann Abschnitt für Abschnitt für die Design-Implementierung zusammen, statt alles manuell neu zu zeichnen. Nutze den figma-generate-design-Guide, wenn du hohe Übereinstimmung mit Code und Tokens brauchst.

tvos-design-guidelines ist ein praxisnahes Apple TV-Regelwerk für die Prüfung von tvOS-Oberflächen, Fokus-Navigation, dem Verhalten der Siri Remote, 10-Foot-Lesbarkeit und Medienwiedergabe. Nutzen Sie diesen tvos-design-guidelines-Leitfaden, wenn Sie klare Vorgaben, eine Bildschirm-für-Bildschirm-Kritik und Prüfpunkte für das Living-Room-UI-Design benötigen.

figma-implement-design wandelt Figma-Screens in produktionsreife Codebasis in deinem Repo um und zielt dabei auf eine hohe visuelle Übereinstimmung bei Layout, Zuständen, Tokens und responsivem Verhalten. Nutze es für die Figma-zu-Code-Implementierung, nicht für Figma-Editing, Code-Connect-Mapping oder das Erstellen neuer Designs. Enthalten sind Installationshinweise, Nutzungshinweise und klare Grenzregeln für Design-Implementierungs-Workflows.