Agent Skills für Designer

Generiert, erweitert oder prüft Design-Tokens im DTCG-Format mit der 3-stufigen Architektur (primitive, semantic, component).

von plugin87/ux-ui-agent-skills

• Visual design
• Design systems

Generiert benutzerdefinierte Design-System-Regeln für die Codebasis des Nutzers. Verwenden, wenn der Nutzer sagt "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines" oder projektbezogene Konventionen für Figma-zu-Code-Workflows etablieren möchte. Erfordert eine Verbindung zum Figma MCP-Server.

von openai/skills

• Visual design
• Design systems

Voraussetzungen (angegeben): MCP server

Diese Skill zusammen mit figma-use verwenden, wenn die Aufgabe darin besteht, eine Anwendungsseite, Ansicht oder ein mehrteiliges Layout in Figma zu übertragen. Auslöser: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. Dies ist die bevorzugte Workflow-Skill, wann immer der Nutzer eine vollständige Seite, einen Screen oder eine Ansicht in Figma aus Code oder einer Beschreibung erstellen oder aktualisieren möchte. Entdeckt Design-System-Komponenten, Variablen und Styles über search_design_system, importiert sie und setzt Screens schrittweise Abschnitt für Abschnitt mit Design-System-Tokens statt hartcodierten Werten zusammen.

von openai/skills

• Design systems

Prüfe ein Penpot-Design auf Design-System-/Token-GOVERNANCE-Probleme (abzugrenzen von Accessibility): hartkodierte Farben, wo ein Token existiert, Raster-abweichende Abstände, verwaiste/unaufgelöste/unbenutzte Tokens, doppelte Werte und losgelöste Teile, die Komponenteninstanzen sein sollten. Erstellt einen Schweregrad-Bericht und schlägt semantische Token-Austausche vor. Auslöser: 'audit tokens', 'find hardcoded colors', 'token governance', 'check design system consistency', 'find off-grid spacing', 'detect raw values', 'are we using tokens correctly'.

von penpot/penpot-ai-kit

• Design systems

UI/UX-Design-Intelligenz für Web, Mobile und Desktop. Dieser Skill sollte beim Entwerfen, Erstellen, Überprüfen oder Korrigieren von Interfaces verwendet werden, einschließlich Seiten, Komponenten, Designsystemen, Barrierefreiheit, Interaktion, responsivem Layout, Typografie, Farbe, Diagrammen und stack-spezifischer UI-Implementierung. Durchsuchbare lokale Daten: 79 durchsuchbare Stile (50 aktiv), 192 Produktpaletten und Reasoning-Profile, 74 Schriftpaarungen, 119 UX-Richtlinien, 105 Icons, 17 GSAP-Presets, 25 Diagrammtypen und 22 Stacks.

von nextlevelbuilder/ui-ux-pro-max-skill

• Visual design
• Design systems

Entwirft oder überarbeitet Frontend-UI, Präsentationen und Grafiken auf der Superdesign-Canvas mit mehreren KI-Modellen, mit Unterstützung für Design-Systeme, wiederverwendbare Komponenten und mehrseitige Flows.

von superdesigndev/superdesign-skill

• Design systems

Erzeugt aus einem Brief ein barrierefreies Markendesignsystem: DTCG-Tokens, hell und dunkel, plus eine einzelne theme.css, verifiziert für WCAG.

von plugin87/ux-ui-agent-skills

• Design systems

Voraussetzungen (angegeben): Python

Bringt eine Idee stufenweise auf höhere Wiedergabetreue (von Content-first bis Code) mit einem Validierungsplan auf jeder Stufe, plus User-Journey-Mapping.

von plugin87/ux-ui-agent-skills

• Prototyping
• Design systems

Verwende den Figma MCP server, um Design-Kontext, Screenshots, Variablen und Assets aus Figma abzurufen und Figma nodes in Produktionscode zu übersetzen. Auslösen, wenn eine Aufgabe Figma URLs, node IDs, Design-to-Code-Implementierung oder Figma MCP setup und Fehlerbehebung betrifft.

von openai/skills

• Visual design
• Design systems

Voraussetzungen (angegeben): Node.js

> Bewerte und erstelle unverwechselbare, produktionsreife Frontend-Interfaces mit hoher Designqualität und Design-System-Compliance. Bewertet anhand von drei Säulen: reibungsloser Weg von der Erkenntnis zur Aktion, hochwertige Handwerkskunst und vertrauenswürdiger Aufbau. VERWENDEN FÜR: PR-Reviews, Design-Reviews, Accessibility-Audits, Design-System-Compliance-Checks, kreatives Frontend-Design, UI-Code-Review, Component-Reviews, Responsive-Design-Checks, Theme-Tests und das Erstellen einprägsamer UIs. NICHT VERWENDEN FÜR: Backend-API-Reviews, Datenbank-Schema-Reviews, Infrastruktur- oder DevOps-Arbeit, reine Business-Logik ohne UI oder Nicht-Frontend-Code.

von microsoft/skills

• Visual design
• Design systems

Übersetzt den Code einer bestehenden Anwendungsseite, View oder Komponente in einen Penpot-Screen, der an das bestehende Design-System gebunden ist — Code-Styles werden auf semantische Tokens abgebildet und Library-Komponenten statt roher Formen wiederverwendet. Verwenden, wenn der Nutzer echten Code/Markup hat und ihn in Penpot Abschnitt für Abschnitt systemkonform rekonstruieren möchte. Trigger: 'build this in Penpot from code', 'turn this React/HTML/CSS into a Penpot screen', 'recreate this view in Penpot', 'port this page to Penpot', 'translate this component to Penpot bound to our tokens', 'code to Penpot'.

von penpot/penpot-ai-kit

• Research & discovery
• Design systems

Extrahiert eine DESIGN.md-Designdokumentationsdatei aus einer Penpot-Datei: eine portable Markdown-Spezifikation (YAML-Frontmatter mit Token-Maps für Farben/Typografie/Rounded/Spacing/Komponenten + Prosa-Abschnitte: Overview, Colors, Typography, Layout, Shapes, Components, Do's & Don'ts, Iteration Guide, Known Gaps) im design-md-Format, fundiert auf den echten Tokens, Library-Assets und gesampelten Komponentenstilen der Datei — niemals erfunden. Read-only auf dem Canvas; schreibt eine lokale Markdown-Datei. Trigger: 'generate DESIGN.md', 'create a design.md', 'document the design system as markdown', 'export design guidelines', 'extract design documentation', 'design system spec file', 'make a style guide file from this design'.

von penpot/penpot-ai-kit

• Visual design
• Design systems

Entwirft UI-Screens für mobile Apps über die Sleek API, erstellt Projekte, beschreibt Screens in einfacher Sprache und erhält gerenderte Screens für HTML, React Native oder SwiftUI zurück.

von designed-by-ai/skills

Voraussetzungen (angegeben): API key · Paid account

Anti-Slop-Frontend-Skill für Landing Pages, Portfolios und Redesigns: liest das Briefing, leitet die Designrichtung ab und liefert nicht-vorlagenhafte Interfaces mit echten Design-Systemen und audit-first Redesigns.

von leonxlnx/taste-skill

• Visual design
• Design systems

Erzeugt agent-freundliche DESIGN.md-Dateien für Google Stitch, die Premium-Anti-Generic-UI-Standards durchsetzen: strikte Typografie, kalibrierte Farbe, asymmetrische Layouts und Micro-Motion.

von leonxlnx/taste-skill

• Visual design
• Design systems

Verkörpert Emil Kowalskis Philosophie zu UI-Politur, Komponentendesign, Animationsentscheidungen und den unsichtbaren Details, die Software großartig wirken lassen, mit einem vorgeschriebenen Review-Format.

von emilkowalski/skills

Apples Ansatz für Interface-Design und flüssige physische Bewegung, übersetzt für das Web: gestengesteuerte UI, Spring-Animationen, Drag-/Swipe-/Sheet-Interaktionen, Materialien, Typografie und Reduced Motion.

von emilkowalski/skills

• Visual design

Analysiert Stitch-Projekte und synthetisiert ein semantisches Designsystem in DESIGN.md-Dateien

von google-labs-code/stitch-skills

• Research & discovery
• Design systems

Vereinheitlichter Design-Skill für Markenidentität, Design-Tokens, UI-Styling, Logo-Generierung, Corporate-Identity-Programme, Präsentationen, Banner, Social-Fotos und Icons.

von nextlevelbuilder/ui-ux-pro-max-skill

• Define the problem
• Design systems

Erzeugt agent-freundliche DESIGN.md-Dateien für Google Stitch, die Premium-Anti-Generic-UI-Standards durchsetzen: strikte Typografie, kalibrierte Farbe, asymmetrische Layouts und Micro-Motion.

von google-labs-code/stitch-skills

• Visual design
• Design systems

Erstellt und pflegt ein Designsystem innerhalb einer Expo-App: wiederverwendbares Theme aus Design Tokens (Farbe, Abstand, Typografie, Radius, Schatten, Motion), Komponentenkonventionen und Drift-Audits.

von expo/skills

• Visual design
• Design systems

Meta-Skill, die aus einer Marke oder Referenz neue Design-Language-Skills generiert.

von dominikmartn/hue

• Visual design
• Design systems

Leitfaden für unverwechselbares, bewusstes visuelles Design beim Aufbau neuer oder Umgestaltung bestehender UI. Hilft bei ästhetischer Ausrichtung, Typografie und Entscheidungen, die nicht wie vorgefertigte Standards wirken.

von anthropics/skills

• Define the problem
• Visual design

Vermittelt High-End Visual Design für Agenturen: exakte Fonts, Abstände, Schatten, Kartenstrukturen und Animationen, die eine Website teuer wirken lassen, und blockiert generische Defaults.

von leonxlnx/taste-skill

• Visual design

Elite-UX/UI- und GSAP-Motion-Engineering: Python-getriebene Layout-Randomisierung, AIDA-Seitenstruktur, breite redaktionelle Typografie, fugenlose Bento-Grids und strikte GSAP ScrollTriggers.

von leonxlnx/taste-skill

• Visual design

Verbindet Figma-Design-Komponenten mit Code-Komponenten über Code Connect Mapping-Tools. Verwenden, wenn der Nutzer "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping" sagt oder Mappings zwischen Figma-Designs und Code-Implementierungen herstellen möchte. Für Canvas-Schreibvorgänge über `use_figma` `figma-use` verwenden.

von openai/skills

Voraussetzungen (angegeben): Node.js

Skalierbare Designsysteme mit Tailwind CSS v4, Design-Tokens, Komponentenbibliotheken und responsiven Mustern erstellen. Verwenden beim Erstellen von Komponentenbibliotheken, Implementieren von Designsystemen oder Standardisieren von UI-Mustern.

von wshobson/agents

• Design systems

Erstellt barrierefreie UIs mit shadcn/ui-Komponenten, Tailwind-CSS-Utility-Styling und canvas-basierten visuellen Designs, einschließlich Design-Systemen, responsiven Layouts und Dark Mode.

von nextlevelbuilder/ui-ux-pro-max-skill

• Visual design
• Design systems

Prüft UI-Code auf Einhaltung der Web Interface Guidelines. Verwenden, wenn gefragt wird: "review my UI", "check accessibility", "audit design", "review UX" oder "check my site against best practices".

von vercel-labs/agent-skills

Bild-zuerst-Skill für Website-Design-to-Code: generiert Design-Bilder, analysiert sie eingehend und setzt dann die Website passend um, ohne generisches Card-Spam und schwache Hierarchie.

von leonxlnx/taste-skill

• Visual design

Extrahiert Design-Primitives von einer öffentlichen Website und generiert Starter-Token-Dateien für dein Projekt.

von arvindrk/extract-design-system

• Design systems

Extrahiert das Designsystem einer Website in ein agent-ready DESIGN.md anhand von Firecrawl-Scrape-Belegen: Farben, Schriften, Abstände, Komponenten, Layoutmuster und Markenrichtlinien.

von firecrawl/firecrawl-workflows

• Research & discovery
• Visual design
• Design systems

Generiert Referenzbilder für Premium-Website-Design, eines pro Sektion, mit Kompositionsvielfalt, narrativem Konzeptfaden und konsistenter Farbpalette für Landing Pages und Marketing-Websites.

von leonxlnx/taste-skill

• Visual design

Generiert Premium-Konzepte und Flows für Mobile-App-Screens für iOS, Android und Cross-Platform, mit klarer Hierarchie, kontrollierten Paletten und Phone-Mockup-Rahmen.

von leonxlnx/taste-skill

• Prototyping

Verwandelt vage UI-Ideen in ausgefeilte, Stitch-optimierte Prompts. Erhöht die Spezifität, fügt UI/UX-Keywords hinzu, injiziert Design-System-Kontext und strukturiert die Ausgabe für bessere Generierungsergebnisse.

von google-labs-code/stitch-skills

• Visual design
• Design systems

Konvertiert Stitch-Designs in modulare Vite- und React-Komponenten oder synchronisiert bestehende React-Komponenten mit den neuesten Stitch-Designs, mit AST-basierter Validierung.

von google-labs-code/stitch-skills

• Research & discovery
• Visual design
• Design systems

Conversion-Optimierung für Landing Pages mit Layout-Regeln, Hero-Section-Design, CTA-Psychologie, Above-the-Fold-Formel, Platzierung von Social Proof und Mobile-Design.

von 101-skills/superpowers

Konvertiert Frontend-Code (React, Angular, Vue) in ein Stitch Design durch Verkettung von statischer HTML-Extraktion, Design-System-Extraktion und Datei-Upload.

von google-labs-code/stitch-skills

• Design systems

Entwirft effektive KPI-Dashboards mit Metrikauswahl, Best Practices für Visualisierung, Diagrammauswahl und Echtzeit-Überwachungsmustern.

von wshobson/agents

Erstellt professionelle SVG-Logos aus Beschreibungen und Design-Spezifikationen und generiert mehrere Varianten mit unterschiedlichen Layouts, Stilen und Konzepten.

von rknall/claude-skills

Erstellt gebrandete Architektur-, IT-Current-State-, Flussdiagramm-, Sequenz-, Zustandsmaschinen-, ER-/Datenmodell-, Timeline-, Swimlane-, Quadranten-, Radar-/Spider-, Polar-Chart- (Polar/Radial Lollipop), Loop-/Flywheel-, verschachtelte, Baum-, Organigramm-, Layer-Stack-, Venn-, Pyramiden-/Funnel-, Treemap-, Balken-, Wasserfall-, Linien-, Gantt- und Streudiagramme sowie High-Level-, Prozess-, Medallion-, Datenfluss-, DP-Integrations-, DP-Sicherheitsmatrix-, Sankey-, Fishbone-, Wardley-Map-, Kanban-, User-Journey-, Deployment-, Abhängigkeitsgraph-, UML-Klassen-, Story-Map- oder Datenbankschema-Diagramme als eigenständiges HTML/SVG/PNG. Zeichnet .drawio/.drawio.png/.drawio.svg-, Mermaid-.mmd- oder Excalidraw-.excalidraw-Quellen in gewählter Größe/Detaillierung neu; übernimmt Brand-Tokens von einer Website; fügt semantische Muster, Callouts, barrierefreie Bewegung oder skizzenhaftes/handgezeichnetes Styling hinzu.

von cathrynlavery/diagram-design

• Design systems

Erstelle schöne visuelle Kunst in .png- und .pdf-Dokumenten mithilfe von Designphilosophie. Du solltest diesen Skill verwenden, wenn der Nutzer darum bittet, ein Poster, ein Kunstwerk, ein Design oder ein anderes statisches Werk zu erstellen. Erstelle originelle visuelle Designs und kopiere niemals die Arbeit bestehender Künstler, um Urheberrechtsverletzungen zu vermeiden.

von anthropics/skills

• Visual design

Toolkit zum Stylen von Artefakten mit einem Theme. Diese Artefakte können Slides, Docs, Reportings, HTML-Landingpages usw. sein. Es gibt 10 voreingestellte Themes mit Farben/Schriften, die auf jedes erstellte Artefakt angewendet werden können, oder es kann spontan ein neues Theme generieren.

von anthropics/skills

Verwandelt Ideen durch kollaborativen Dialog in vollständige Designs und Specs und klassifiziert Anfragen vor der Umsetzung als Spike, begrenzt oder architektonisch.

von obra/superpowers

Reverse-Lookup-Glossar, das eine vage Beschreibung einer Web-Animation oder eines Motion-Effekts in den exakten Begriff übersetzt ("das federnde Ding, wenn ein Popover aufgeht" → Pop in; "das iOS-Gummiband-Scrollen" → Rubber-banding). Verwenden, wenn der Nutzer fragt "wie heißt das, wenn…" oder einen Motion-Effekt beschreibt, ohne seinen Namen zu kennen, und das richtige Wort sucht, um damit eine KI oder einen Designer zu prompten. Zum Benennen eines Effekts, nicht zum Entwerfen oder Bauen.

von emilkowalski/skills

Fügt interaktive Widget-Previews zu einem Flutter-Projekt über das previews.dart-System hinzu, für konsistentes Design und interaktives Testen von UI-Komponenten.

von flutter/agent-plugins

Entwirft Banner für Social Media, Anzeigen, Website-Heroes und Print mit mehreren Art-Direction-Optionen, Safe-Zone-Regeln und HTML/CSS-Komposition.

von nextlevelbuilder/ui-ux-pro-max-skill

• Visual design

Beratung zum Visualisierungsdesign von Power BI-Berichten: Diagrammauswahl, Layout-Design, zielgruppenspezifische Muster und Barrierefreiheit für effektive Berichte.

von github/awesome-copilot

Wendet Anthropics offizielle Markenfarben und Typografie auf jede Art von Artefakt an, das von einem Anthropic-Look-and-Feel profitieren könnte. Verwenden, wenn Markenfarben oder Styleguides, visuelle Formatierung oder Unternehmensdesignstandards zutreffen.

von anthropics/skills

• Visual design

Verleiht Coding-Agents besseren UI-Geschmack mit Anti-ui-slop-Playbooks für Web und iOS: Layout-Auswahl, visuelle Hierarchie, Feinschliff und Design-Review-Workflows.

von uizze.sh

• Research & discovery
• Visual design
• Design systems

Entwirft und prüft iOS UI/UX für iPhone-Apps in SwiftUI, UIKit oder React Native: Navigation, Typografie, Formulare, Tastatur- und Safe-Area-Layout sowie Barrierefreiheit gemäß Apple HIG.

von uizze.sh

• Visual design
• Design systems