Design-Skills für Claude Code, Codex und Ihren Agent.

Erhalten Sie gezielte Hilfe zu After Effects Expressions, zum Export und zur Fehlerbehebung in Projekten.

• After Effects
• Compositing

Erstellen Sie KI-Chat-Oberflächen aus anpassbaren React-Komponenten.

• KI-Oberflächen
• React

Wählen und prüfen Sie SwiftUI-Animations-APIs für native Oberflächen.

• SwiftUI
• Apple-Plattformen

Konvertieren und komprimieren Sie Bilddateien mit klaren Einstellungen für Qualität und die Aufbewahrung der Originale.

• Bildkomprimierung
• WebP

Wandeln Sie Markdown in gestaltetes HTML für die Veröffentlichung von Artikeln um.

• Markdown
• Artikelgestaltung

Übersetzen Sie Musik und erzählerische Wendepunkte in einen framegenauen Schnittplan.

• Audio-Timing
• Schnitt

Finden Sie ein vorhandenes Icon und rufen Sie sein SVG über eine geprüfte Bibliotheks-ID ab.

• Icon-Suche
• SVG

Zerlegen Sie ein Designbriefing in unabhängig prüfbare Umsetzungseinheiten.

• Aufgabenplanung
• Abhängigkeiten

Entwerfen Sie wiederverwendbare UI-Komponenten-APIs mit Blick auf Barrierefreiheit und Distribution.

• Komponenten-APIs
• Barrierefreiheit

Rendern Sie Datendiagramme mit exakten Werten und framegesteuerter Bewegung.

• Datenanimation
• Diagramme

Gestalten Sie bewegte Paletten, wahrnehmungsbasierte Farbübergänge und konsistente Exporte.

• Farbsysteme
• Motion-Konzept

Prüfen Sie echte UI-Komponenten und Varianten auf einer schwenk- und zoombaren Zeichenfläche.

• Komponentenvarianten
• Vergleich

Wählen Sie eine Designrichtung anhand von Kriterien, die vor dem Vergleich vereinbart wurden.

• Konzeptbewertung
• Abwägungen

Vergleiche interaktive Designvarianten in einem Arbeitsbereich mit benennbaren, verschiebbaren Vorschauen.

• Designexploration
• Canvas

Erkläre, warum ein gerendertes Layout unausgewogen oder zusammenhanglos wirkt.

• Komposition
• Hierarchie

Prüfe gerenderte Schrift auf Lesbarkeit und Übereinstimmung mit dem vorhandenen Typografiesystem.

• Typografie
• Lesbarkeit

Erstelle HTML/CSS-Funktionsdemos auf Basis der Oberfläche einer realen Anwendung.

• CSS
• Keyframes

Erfasse Inkonsistenzen im Produktdesign und priorisiere ihre Behebung.

• Designschulden
• Priorisierung

Führe ein Designprojekt durch klar definierte Phasen mit gespeicherten Ergebnissen.

• Designworkflow
• Review

Überführe eine Designspezifikation in Implementierungsprüfungen.

• Design-QA
• Übergabe

Definiere, wie Teams zu einem gemeinsamen Designsystem beitragen und es weiterentwickeln.

• Designsysteme
• Governance

Finde Stellen, an denen vorhandene Design-Tokens umgangen oder uneinheitlich verwendet werden.

• Token-Audit
• Migration

Übersetze eine gewählte Designrichtung in wiederverwendbare Theme-Werte.

• Tokens
• Tailwind

Korrigiere Seitenidentität, Indexierungssignale und Vorschauen beim Teilen.

• Metadaten
• Social-Previews

Koordiniere Veo-Generierung und AVTool-Videokomposition über MCP.

• Videobearbeitung
• Genmedia

Kläre offene Entscheidungen eines Designplans durch ein gezieltes Interview.

• Briefing-Klärung
• Rahmenbedingungen

Verbinde Oberflächentexte und Bewegung mit dem emotionalen Zustand der Nutzer.

• Interaktionsdesign
• Emotionale Zustände

Baue isometrische Stapel, Explosionsdiagramme und geschichtete Webanimationen.

• Isometrie
• Erklärdarstellung

Animiere ein vorhandenes Logo mit einer klaren Enthüllung und originalgetreuer statischer Alternative.

• Logo-Bewegung
• Marke

Rendere transparente animierte Namensbalken und Broadcast-Einblendungen.

• Bauchbinden
• Typografie

Erstelle reproduzierbare mathematische und technische Erkläranimationen.

• Mathematische Animation
• Python

Animiere geografische Routen, Kamerafahrten und Beschriftungen aus koordinierten Kartendaten.

• Karten
• Routen

Definiere vor der Animation einer Mehrshot-Sequenz eine konsistente Bewegungssprache.

• Art Direction
• Styleframes

Schreibe Motion-Canvas-Szenen mit Generatoren, reaktiven Signals und wiederverwendbaren Knoten.

• TypeScript
• Canvas-Animation

Steuere einzelne Frames an, prüfe Szenen, erstelle Screenshots und starte Renderings im laufenden Motion-Canvas-Editor.

• Motion Canvas
• Szenenprüfung

Bereite tatsächlich benötigte Medien vor, ohne erforderliche Assets unterwegs zu verlieren. Dieses OpenDesign-Werkzeug erhält Asset-Slots, bündelt unabhängige Beschaffung und trennt eingereichte Jobs von fertigen Dateien.

• Medienassets
• OpenDesign

Forme ein Bewegungsbriefing zu einem zusammenhängenden Film: Beats planen, Aufmerksamkeit führen und eine editierbare Zeitleiste erhalten. OpenDesigns offizieller Helfer arbeitet im Host-Workflow, nicht als eigenständiger Renderer.

• Bewegung und Video
• OpenDesign

Erkunde unterschiedliche Wege, dieselbe Nutzeraufgabe zu erledigen.

• Konzeptexploration
• Alternativen

Rekonstruiere ein Rasterlogo als glattes SVG und prüfe eine choreografierte HTML-Enthüllung.

• Logoanimation
• SVG

Plane Seedance-2.0-Prompts, Referenzen und verbundene Videosequenzen.

• Videoprompts
• Kontinuität

Plane Bildausschnitt, Fokushierarchie, Kamera und Komposition für mehrere Seitenverhältnisse.

• Shot-Design
• Komposition

Chinesische Geschichten oder geordnete Illustrationen in stumme, handgezeichnete Erzählvideos verwandeln.

• Handgezeichnetes Video
• Storyboards

Streaming-Markdown mit Diagrammen, Code und ausdrücklichen Inhaltskontrollen rendern.

• Streaming-Markdown
• React

Editierbare Animationen für SVG-Pfade, Icons und Illustrationen erstellen.

• SVG
• Vektoranimation

Lottie-Animationen an einem echten Player erstellen und reparieren, nicht nur als gültige JSON-Datei. Text to Lottie zielt auf die lokale Skia-Skottie-Vorschau des Repositorys und macht wichtige Werte über editierbare Regler zugänglich.

• Lottie
• Motion
• Skottie

Komponentenspezifische CSS-Übergänge und semantische Motion-Tokens anwenden.

• Übergänge
• Webanimation

Zweckgerichtete Interface-Bewegung entwickeln, debuggen und messen.

• UI-Bewegung
• Reduzierte Bewegung

Gezielte KI-Änderungen an vorhandenem Videomaterial über each::sense anfordern.

• KI-Videobearbeitung
• Schnitt

Videos aus strukturierten Prompts in einer konfigurierten DeerFlow-Laufzeit erzeugen.

• Videogenerierung
• Modellauswahl

Ein Referenzvideo in einen konkreten Prompt zur Rekonstruktion von Design und Bewegung umwandeln.

• Videoanalyse
• Shot-Prompts

SVG-Zeichenanimationen mit einer Markerhand erstellen, die jedem Strich folgt.

• Whiteboard
• Erklärvideo

Personalisierte Rückblickvideos aus einer Vorlage und validierten Datensätzen generieren.

• Datengeschichten
• Rückblick

Bestehende UI mit realistischen Extremdaten und einem Vergleichsschalter nur für die Entwicklung stresstesten; Fehler berichten, bevor sie behoben werden.

Komponentenquellcode, vorhandene Demodaten und Feldgrenzen; eine laufende App und ein Browser zur visuellen Überprüfung.

• UI-Stresstests
• Edge-Case-Fixtures
• Prüfbericht

Verlorene Frames in Webanimationen diagnostizieren: Rendering-Kosten, Main-Thread-Konkurrenz, React-Updates pro Frame und vererbte CSS-Variablen.

Animationsquellcode und eine reproduzierbare Interaktion; Browser-Profiling und ein echtes Zielgerät zur Überprüfung der Performance.

• Webanimation
• Frame-Performance
• Diagnose-Review

Bilden Sie einen gelieferten Screenshot in der bestehenden App nach, rendern Sie dann im Referenz-Viewport und korrigieren Sie sichtbare Unterschiede.

Stellen Sie ein lesbares Referenzbild, den Ziel-Viewport, Projektzugriff und verfügbare Assets bereit. Zur Prüfung der visuellen Übereinstimmung ist Browser-Rendering nötig. Ein UIZZE-Konto oder eine MCP-Verbindung ist nicht erforderlich.

• Screenshot to Code
• Referenzabgleich
• UI-Umsetzung

Leite Videoanfragen an den richtigen Workflow, setze bestehende Projekte fort und koordiniere HTML-Komposition, Medien, Vorschau und Rendering.

Die CLI benötigt Node.js 22+ und FFmpeg. Beginne mit den Kern-Skills; Erstellungs-Workflows werden bei Bedarf installiert. Mediendienste und Cloud-Rendering können zusätzliche Anforderungen mit sich bringen.

• HTML-to-Video
• Workflow-Routing
• Videoproduktion

Technische Ideen durch sorgfältig gestaltete isometrische SVG-Mechanismen und modellgesteuerte Interaktion erklären.

Das Kit benötigt Node.js 20.10+ sowie Chrome oder Chromium für die Prüfungen. Die Skills-CLI hat eine eigene Node-Anforderung; die README nennt 22.20+ für CLI 1.7.1.

• Isometrisches SVG
• Technische Erklärungen
• Interaktive Abbildungen

Halten Sie jeden Befund zur Barrierefreiheit mit dem betroffenen Element, der vorgeschlagenen Korrektur und dem Verifikationsergebnis verknüpft.

Python für die mitgelieferten Tools, Zugriff auf den Quellcode sowie ein Browser oder ein Setup mit assistiven Technologien für die kontextbezogene Validierung.

• Barrierefreiheit
• Design-Review
• Frontend

Planen Sie eine akademische Präsentation anhand von Argumentation, Evidenz und Folientiteln; ein separates Tool erstellt die PPTX-Datei.

Erfordert einen separaten PPTX-Skill. Der Eintrag nennt markitdown, PptxGenJS, LibreOffice und Poppler als umsetzungsbezogene Abhängigkeiten.

• Präsentationen
• Wissenschaftliche Forschung
• PowerPoint

ExtendScript-Skripte schreiben, um Illustrator-Dokumente, Artwork und Exporte zu erstellen und zu bearbeiten.

Adobe Illustrator CC oder neuer; generierte Skripte werden in dessen ExtendScript-Umgebung ausgeführt.

• Vektordesign
• Automatisierung
• Illustrator

Forschungsbeobachtungen zu Themen gruppieren und dabei die Verknüpfung mit den ursprünglichen Belegen erhalten.

Verwenden Sie einen Agenten, der die bereitgestellten Transkripte oder Notizen lesen kann. Geben Sie Teilnehmer-IDs und die Designfrage an; der Skill synthetisiert vorhandene Belege und führt keine Interviews durch.

• UX-Forschung
• Synthese

Geben Sie einem Übergang einen klaren Zweck und ein Bewegungsprofil, das den Zustandswechsel der Oberfläche unterstützt.

Geben Sie die Zustände der Oberfläche vor und nach der Aktion sowie Auslöser und Zielgeräte an. Prüfen Sie Timing, Unterbrechung und reduzierte Bewegung in einer lauffähigen Vorschau.

• UI-Motion
• Design-Leitfaden

Beginnen Sie mit den tatsächlichen Objekten und Einschränkungen des Produkts, bevor Sie eine visuelle Gestaltung wählen.

Ein Agent, der Projektdateien lesen kann; Rendering-Unterstützung für visuelle Prüfungen. Das kostenpflichtige UIZZE MCP ist optional.

• UI-Design
• Design-Review

Erstellen Sie Diagramme mit AntV G2 v5 anhand seiner Marks, Encodings, Skalen und Interaktionen.

Erfordert @antv/g2 v5 oder das dokumentierte Browser-Bundle. Der optionale Abruf von Referenzen nutzt den externen AntV-Kontextdienst.

• Data Visualization
• Diagramme
• JavaScript

Visualisieren Sie Netzwerkdaten mit AntV G6 v5, einschließlich Graph-Layouts und interaktiver Erkundung.

Eine Anwendung mit @antv/g6 v5, ein Graph-Container im Browser und Netzwerkzugriff, falls der dokumentierte Dienst zum Abrufen von Referenzen benötigt wird. Prüfen Sie die APIs anhand der installierten Version.

• Graphvisualisierung
• Netzwerke
• AntV

Erstelle mit AntV X6 einen Editor für Knoten-Kanten-Diagramme, einschließlich Verbindungen, Bearbeitungsverhalten und erforderlicher Plugins.

Verwende die dokumentierte @antv/x6-v3-API mit einer Browser-Canvas und den erforderlichen Plugins. Das Abrufen weiterer Referenzen erfordert Netzwerkzugriff. Prüfe die Beispiele gegen deine installierte Version.

• Diagrammeditoren
• Knotenoberflächen
• AntV

Erstellen Sie ein originelles, quellenbasiertes Erklärvideo mit Sprechtext und einer bewusst einheitlichen Bildsprache.

Erfordert das mitgelieferte Remotion/Node-Projekt, Python-Hilfsskripte, Rendering-Möglichkeiten und eine geeignete TTS-Lösung. Die dokumentierten Standardeinstellungen für Chinesisch und Englisch verwenden unterschiedliche Sprach-Engines; der Aufbau durch mehrere Agenten gehört zum beschriebenen Workflow.

• Motion Graphics
• Video
• Remotion

Gestalte aus Screenshots, Texten und visuellen Assets ein abgestimmtes Set von App-Store-Bildern.

Erfordert den mitgelieferten Next.js-Editor, eine unterstützte Node-/Paketmanager-Umgebung und einen Browser. Der PNG-Export nutzt html-to-image; Quell-Aufnahmen, Schriften und andere Assets benötigen passende Nutzungsrechte.

• App-Marketing
• Screenshots
• Lokalisierung

Prüfen Sie Oberflächen für Apple-Plattformen anhand plattformspezifischer Design- und Barrierefreiheitshinweise.

Python 3 für den Checker, der nur die Standardbibliothek verwendet; die aktuellen Apple Human Interface Guidelines (HIG); sowie Zugriff auf ein Gerät oder einen Simulator für Verhaltensprüfungen.

• Native UI
• Barrierefreiheit
• Design-Review

Planen und erzeugen Sie Illustrationen, die zentrale Ideen an passenden Stellen eines Artikels erklären.

Ein verfügbares Backend zur Rasterbilderzeugung und die Referenz- und Konfigurationsdateien des Skills; Backend-Zugang und Kosten sind separat zu klären.

• Redaktionelle Illustration
• Content-Design

Planen Sie, was jedes Panel vermittelt, bevor Sie die Comicseiten generieren.

Ein verfügbares Bild-Backend; Bun oder eine npx-basierte Bun-Laufzeit für das mitgelieferte PDF-Zusammenführungsskript.

• Comics
• Lerndesign
• Storytelling

Generiere ein Artikel-Titelbild rund um eine zentrale Idee, mit definierter Komposition und visuellem Stil.

Ein verfügbares Raster-Bild-Backend sowie die Konfigurations- und Art-Direction-Referenzen des Skills.

• Editorial Design
• Titelbilder

Ein dateibasierter Design-Workflow für Prototypen, Präsentationskonzepte und wiederverwendbare visuelle Systeme.

Ein dateifähiger Agent sowie die Methodik, die integrierten Leitfäden, Referenzdokumente und Skripte des Repositorys. Export- und Importpfade haben eigene Voraussetzungen.

• Prototyping
• Designsysteme
• Präsentationen

Beziehungen, Beschriftungen und Verbindungspfade bleiben in einer prüfbaren Vektordatei explizit.

Eine Text-/Code-Umgebung für SVG; Bun oder npx-basiertes Bun für das mitgelieferte PNG-Konvertierungsskript.

• Diagramme
• SVG
• Informationsdesign

Bilderzeugungs- und Bearbeitungsjobs über unterstützte Provider ausführen, einschließlich Batch-Workflows.

Bun oder eine npx-basierte Bun-Laufzeit, vollständige Provider-Adapter sowie Zugangsdaten oder Login für die gewählte unterstützte Route.

• Bilderzeugung
• Batch-Workflows
• Visuelle Assets

Verwandeln Sie Inhalte in eine Infografik mit einem Layout für Vergleich, Hierarchie, Prozess oder Überblick, das zum Material passt.

Ein verfügbares Raster-Bild-Backend sowie Referenzen für Layout, Stil und Konfiguration.

• Infografiken
• Informationsdesign

Erzeugen Sie illustrierte Folien und stellen Sie ein bildbasiertes Deck zum Teilen zusammen; einzelne Folienobjekte sind nicht bearbeitbar.

Ein Raster-Bildgenerierungs-Backend sowie Bun oder auf npx basierendes Bun für die Skripte zum Zusammenstellen von PPTX/PDF.

• Präsentationen
• Editorial Design

Erstellen Sie eine visuell einheitliche Serie von Xiaohongshu-Bildkarten mit einer Kernidee pro Karte.

Ein verfügbares Raster-Backend mit passender Referenzunterstützung sowie Konfigurations- und Kartenlayout-Referenzen.

• Social Graphics
• Content-Design
• Bildkarten

Verwandeln Sie Quellenmaterial in einen lesbaren HTML-Artikel mit redaktioneller Typografie, Layout und Illustrationen.

Der dokumentierte Build verwendet Node/npm, Vite, React, TypeScript und Reacticle. Für die Dokumentenextraktion und die optionale PDF-Ausgabe können zusätzliche Werkzeuge erforderlich sein; generierte Bilder benötigen ein separat verfügbares Backend.

• Editorial Design
• HTML
• Longform

Analysiert die Kartengruppierungen der Teilnehmenden, um Navigationskategorien vorzuschlagen und mehrdeutige Elemente zu identifizieren.

Stellen Sie abgeschlossene Card-Sort-Ergebnisse bereit, einschließlich der Zuordnungen und Bezeichnungen jedes Teilnehmenden sowie der Studienmethode. Der Skill analysiert die bereitgestellten Belege; Rekrutierung und Datenerhebung sind davon getrennt.

• UX-Forschung
• Synthese

Planen Sie einen First-Click-Test, um zu prüfen, ob Menschen erkennen können, wo sie eine Aufgabe beginnen.

Liefern Sie den Screen oder Prototyp, das Nutzerziel und die Rekrutierungskriterien. Der Skill erstellt einen Testplan; die Durchführung der Sitzungen und die Erfassung der Klicks erfordern ein separates Studien-Setup.

• UX
• Design-Leitfaden

Verwandeln Sie Quellenmaterial in illustrierte Folien und setzen Sie ein PPTX mit bildbasierten statt einzeln bearbeitbaren Folieninhalten zusammen.

Python 3, ein verfügbares Bildgenerierungs-Backend sowie die Skripte des Repositorys zum Zusammensetzen und zur Statuserfassung. Die referenzierten Workflow-Dokumente sind für die tatsächliche Ausführung erforderlich.

• Präsentationen
• Bildgenerierung

Machen Sie aus einer Markenfarbe ein nutzbares Set von Oberflächenrollen und Kombinationen aus Vorder- und Hintergrundfarben.

Liefern Sie Markenfarben, Oberflächenrollen und Zugänglichkeitsziele. Verwenden Sie echte Komponentenzustände und ein Kontrastprüfwerkzeug, um die vorgeschlagenen Farbkombinationen zu bewerten.

• Farbdesign
• Design-Leitfaden

Eine Komponente umsetzbar machen, indem ihr Verhalten ebenso sorgfältig erklärt wird wie ihr Aussehen.

Geben Sie Zweck, visuelle Varianten und Zielplattform der Komponente an. Das Ergebnis ist eine Spezifikation für Umsetzung und Tests, keine implementierte Komponente.

• Designsysteme
• Spezifikationen

Gestalten Sie, was das System sagt, was es als Antwort erwartet und wie es sich erholt, wenn beides nicht zusammenpasst.

Liefern Sie unterstützte Aufgaben, Kanalvorgaben und Bestätigungsanforderungen. Sprachabläufe müssen zudem mit Geräten und Spracherkennung getestet werden; ein geschriebener Dialog allein kann die Erkennungsqualität nicht belegen.

• UX
• Design-Leitfaden

Übertragen Sie die Hierarchie des Interfaces auf dunkle Oberflächen, statt seine Farben einfach zu invertieren.

Beginnen Sie mit einer bestehenden Palette für den hellen Modus, Komponentenbeispielen und Medien-Assets. Prüfen Sie Kontrast im Dark Mode, Theme-Wechsel und Bildbehandlung an einem gerenderten Interface.

• Farbgestaltung
• Gestaltungsleitfaden

Erzeuge alternative Folienlayouts aus einer Inhaltsquelle und nutze dann den lokalen Editor zur Vorschau und zum Export.

Erfordert Node.js 20+, npm und den mit dem Skill gelieferten Generator. Nutze für Bearbeitungs- und Exportfunktionen den lokalen Vorschaudienst; ein generischer statischer Server stellt diese APIs nicht bereit.

• Präsentationen
• HTML-Folien
• PPTX

Wählen Sie die Grafik, die den Vergleich verständlich macht, nicht das Diagramm, das am aufwendigsten aussieht.

Liefern Sie die tatsächlichen Daten, Felddefinitionen, die Frage der Leserschaft und die Anzeigebedingungen. Der Skill unterstützt die Diagrammgestaltung; Datenvalidierung und Diagrammimplementierung sind separate Aufgaben.

• Data Visualization
• Gestaltungsleitfaden

Visuellen Entscheidungen Namen und Beziehungen geben, die Komponenten wiederverwenden können.

Stellen Sie vorhandene visuelle Werte, Komponentenbeispiele und Namensvorgaben bereit. Der Skill definiert Token-Namen und ihre Beziehungen; Export-Tooling und Framework-Integration erfordern eine separate Einrichtung.

• Designsysteme
• Spezifikationen

Erfassen Sie Erfahrungen, die sich zwischen einzelnen Sitzungen entwickeln, statt zu versuchen, sie in einem einzigen Interview zu rekonstruieren.

Geben Sie Forschungsziel, Teilnehmerkriterien, Zeitraum und praktikable Aufnahmewerkzeuge an. Das Ergebnis ist ein Studienplan; Rekrutierung, Check-ins und die Erhebung der Teilnehmerdaten müssen weiterhin durchgeführt werden.

• UX-Forschung
• Studienplanung

Legen Sie zuerst den gewünschten Screenshot fest und nutzen Sie ihn dann als Ziel für die Umsetzung.

Benötigt ein Zielbild oder Zugriff auf Bildgenerierung, falls keines vorliegt. Detaillierte Tool-Anforderungen hängen vom gewählten referenzierten Workflow ab und ließen sich aus dem Eintrag allein nicht ermitteln.

• Visuelle Iteration
• Spieldesign
• Prototyping

Geben Sie die Perspektive eines Nutzers wieder und halten Sie direkte Belege von der Interpretation getrennt.

Ein Agent, der Ihre Forschungsnotizen lesen kann, ein definierter Nutzer oder ein definiertes Segment und die Designentscheidung, die die Map unterstützen soll.

• UX-Forschung
• Synthese

Fehler sollen erklären, was passiert ist, und Menschen einen Weg nach vorn bieten, ohne dass ihre Arbeit verloren geht.

Ein Agent, der die betroffenen Abläufe, bekannte Fehlerfälle und die Wiederherstellungsaktionen, die Ihr Produkt tatsächlich unterstützt, lesen kann.

• UX
• Design-Leitfaden

Ordne veröffentlichte Figma-Komponenten mit Code Connect den passenden Code-Komponenten zu.

Verbundenes Figma MCP, Zugriff auf veröffentlichte Komponenten und die Codebasis sowie aktuelle Code-Connect-Berechtigung und Bearbeitungsrechte.

• Figma
• Designsysteme
• Developer Handoff

Dokumentieren Sie die Repository-Pfade, Komponenten und Konventionen, die ein Agent zur Umsetzung von Figma-Designs verwenden soll.

Figma MCP-Verbindung und Zugriff auf die Ziel-Codebasis; das Zielformat der Regeln hängt vom Coding-Host ab.

• Figma
• Design-Systeme
• Agentenregeln

Erstellen Sie einen bearbeitbaren Figma-Screen, der mit seinem Design-System verbunden bleibt.

Verbundener Figma MCP, Zugriff auf die Zieldatei, ein veröffentlichtes Design-System und der zugehörige Skill figma-use für Canvas-Operationen.

• Figma
• UI-Design
• Design-Systeme

Eine wiederverwendbare Figma-Bibliothek aufbauen, beginnend mit Design-Tokens und anschließend mit Komponenten.

Figma MCP mit Zugriff auf bearbeitbare Dateien, Zugriff auf das Repository sowie dem begleitenden figma-use-Skill samt Hilfsreferenzen.

• Figma
• Designsysteme
• Komponentenbibliotheken

Setzen Sie ein Figma-Design mit den Komponenten und Konventionen des Ziel-Repositorys um und vergleichen Sie das Ergebnis anschließend mit dem Design.

Verbundener Figma MCP, Zugriff auf das ausgewählte Design und das Ziel-Repository sowie eine lauffähige Vorschau zur visuellen Prüfung.

• Figma
• Frontend-Design
• Developer Handoff

Legen Sie den Weg vom ersten Feld bis zum erfolgreichen Absenden fest, einschließlich Korrekturen und erneuter Besuche.

Ein Agent, der das Formular-Briefing, die Pflichtfelder und Validierungsregeln sowie vorhandene Formularansichten lesen kann.

• UX
• Design-Leitfaden

Übersetzen Sie eine bemaßte Modellierungsaufgabe in FreeCAD-Objekte, die nachvollziehbar und anpassbar bleiben.

FreeCAD mit mitgeliefertem Python; für GUI-Arbeit wird zusätzlich das mitgelieferte PySide verwendet, für Szenegraph-Arbeit Pivy.

• 3D-Design
• CAD
• Python

Bild-Assets über einen unterstützten Anbieter erzeugen und speichern, mit den im Projekt konfigurierten Zugangsdaten.

Ein API-Schlüssel eines unterstützten Anbieters und Netzwerkzugang; Modellverfügbarkeit und Nutzungskosten müssen separat geprüft werden.

• Bilderzeugung
• Visuelle Assets

Gestalten Sie, was vor, während und nach einer Geste passiert – nicht nur die abschließende Wischaktion.

Ein Agent, der das Interaktionsbriefing, die Zielplattformen und die über Schaltflächen oder Menüs verfügbaren Aktionen lesen kann.

• UX
• Design-Leitfaden

Bereite Bild-Prompts vor und führe Generierung oder Bearbeitung über ein verfügbares natives Bildwerkzeug oder den konfigurierten lokalen API-Workflow aus.

Der lokale API-Modus erfordert die ausdrückliche Aktivierung von Garden, Node-Skripte und konfigurierte Zugangsdaten. Der native Modus hängt vom Bildwerkzeug des Hosts ab. Modellzugang, Preise und unterstützte Parameter müssen in dieser Umgebung geprüft werden.

• Bildgenerierung
• Prompt-Design
• Bildbearbeitung

Prüfen Sie die Usability einer Oberfläche und dokumentieren Sie die Belege hinter jedem Befund, ohne Expertenurteile als Teilnehmerforschung darzustellen.

Ein Agent, der die Oberfläche untersuchen kann, eine definierte Menge von Nutzeraufgaben und relevante fachliche Rahmenbedingungen.

• UX
• Design-Leitfaden

Wählen Sie vor dem Bau der Karte eine Folienbehandlung oder eine blickwinkelabhängige Verwandlung des gesamten Bildes.

Erfordert Bildgenerierung, Python, Blender und eine Web-Laufzeitumgebung für den gelieferten Viewer. Die Quelle erwähnt die lokale Installation von Abhängigkeiten während der Pipeline.

• 3D-Design
• Sammelkarten
• Blender

Bauen Sie einen Kurzfilm aus einer Kunstrichtung statt aus einer Folge von Folienübergängen. Huashu Art Motion kombiniert per Code gezeichnete Szenen, Figuren-Sprites und Bewegungsprüfung in einem lokalen Rendering-Workflow.

Lokales Rendering erfordert uv, FFmpeg und Playwright Chromium. Stellen Sie vorhandene Figurenbilder bereit oder nutzen Sie für menschenähnliche Sprites einen separaten Workflow zur Bildgenerierung; Audio und Schriften benötigen eigene Dateien und Nutzungsrechte.

• Kunstanimation
• Canvas
• Kurzfilme

Erstellen Sie aus visuellen Referenzen, Designregeln und Tokens einen wiederverwendbaren Design-Skill.

Benötigt Dateizugriff, geeignete Tools zur Referenzprüfung, Node für validate.mjs und eine Browserprüfung für visuelle Sicherheit. Die Verfügbarkeit der Tools beeinflusst die Genauigkeit der Extraktion.

• Designsysteme
• Skill-Erstellung
• Design-Tokens

Geben Sie Icons eine einheitliche Konstruktion und ein klares Benennungssystem, statt unzusammenhängende Symbole zu sammeln.

Ein Agent, der repräsentative Icons, ihre vorgesehenen Größen sowie die erforderlichen Design- und Codeformate prüfen kann.

• Designsysteme
• Spezifikationen

Gib beauftragten oder wiederkehrenden Illustrationen eine gemeinsame visuelle Sprache und eine klare Aufgabe in der Oberfläche.

Ein Agent, der visuelle Referenzen, Produktfarben sowie die Screens und Größen prüfen kann, in denen Illustrationen erscheinen werden.

• UX
• Design-Anleitung

Visuelle Folien in eine strukturierte Präsentation umwandeln, statt Screenshots hinter bearbeitbaren Text zu legen.

Erfordert die editppt-CLI, geeignete Fähigkeiten zur Bildgenerierung und Multi-Agent-Ausführung bei mehrseitigen Durchläufen. PaddleOCR ist eine optionale, konfigurierte Hilfe; Offline-Hinweise haben ein anderes Qualitätsprofil.

• Präsentationen
• PowerPoint
• Rekonstruktion

Entscheiden Sie, wo Informationen hingehören, bevor Sie festlegen, wie die Navigation aussieht.

Benötigt Produktinhalte und Belege zu Nutzeraufgaben; die Quelle verlangt keine bestimmte Designanwendung.

• UX-Strategie
• Inhaltsstruktur

Forschungsziele in Fragen übersetzen, die Belege hervorrufen, statt eine Antwort nahezulegen.

Forschungsziele, Teilnehmerkriterien und Rahmenbedingungen der Sitzung sind die wichtigsten Eingaben; ein Aufzeichnungs- oder Rekrutierungsdienst wird nicht mitgeliefert.

• UX-Research
• Interviews

Eine Produktentscheidung daran ausrichten, was jemand erreichen möchte.

Erfordert Nutzerforschung oder eindeutig gekennzeichnete Hypothesen; Interviews werden nicht selbst erhoben.

• UX-Research
• Produktstrategie

Einzelne Touchpoints zu der Erfahrung verbinden, die eine Person tatsächlich durchläuft.

Nutzt vorhandene Personas, Recherchen und Analysen; eine automatische Stimmungsmessung ist nicht vorgesehen.

• UX-Forschung
• Journey Mapping

Verbinden Sie die Argumentation der Seite und ihre visuellen Regeln mit einer einzigen angestrebten Conversion.

Es ist keine einzelne Anwendungs-Laufzeitumgebung erforderlich; die Implementierungsbeispiele verweisen auf Tailwind-Werte, IntersectionObserver und optionale Motion-Werkzeuge.

• Landingpages
• Texten
• Webdesign

Verknüpfen Sie ein reales Produktversprechen mit Seitenabschnitten, bevor die Komponenten generiert werden.

Ein kompatibles React- oder Next.js-Projekt mit Tailwind; referenzierte UI-Komponenten und optionale Tools zur Markenanalyse erfordern möglicherweise eine separate Einrichtung.

• Landingpages
• Copywriting
• Frontend

Definieren Sie gemeinsame Spalten, Ränder und responsives Verhalten für zusammengehörige Seitenlayouts.

Keine benannte Laufzeitabhängigkeit; für sinnvolle Rasterwerte sind reale Inhaltsvorgaben erforderlich.

• UI-Design
• Responsives Layout

Zeige, was während einer Wartezeit passiert, ohne Menschen über den Fortschritt in die Irre zu führen.

Genaue Angaben zur Dauer von Vorgängen und zu den Fortschrittsfunktionen müssen vom Produkt- oder Implementierungsteam kommen.

• Interaktionsdesign
• Lade-UX

Bereiten Sie die Oberfläche auf Sprachunterschiede vor, nicht nur auf übersetzte Strings.

Benötigt Text in der Zielsprache, Schriften sowie eine geeignete sprachliche oder kulturelle Prüfung; es ist keine automatische Lokalisierungsplattform enthalten.

• Designsysteme
• Lokalisierung

Erstellen und testen Sie die Marke, bevor Sie sie zu einem vollständigen Markenkit erweitern.

Die Quelle beschreibt Python-Hilfsskripte ohne Abhängigkeiten; für das tatsächliche Rendern von Bildern wird jedoch ein verfügbarer Renderer wie CairoSVG, Inkscape, Chrome oder eine andere unterstützte Option benötigt.

• Branding
• Logo Design
• SVG

Geben Sie dem Engineering das Verhalten hinter einer kleinen Interaktion an die Hand – nicht nur eine Animationsreferenz.

Eine bestimmte Motion-Bibliothek ist nicht erforderlich; Tests auf dem Zielgerät sind dennoch notwendig.

• Interaction Design
• UI-Handoff

Animationsentscheidungen über Komponenten und Teams hinweg wiederverwendbar machen.

Erfordert eine Token-Implementierung oder ein plattformspezifisches Äquivalent; die Quelle schreibt kein Animations-Framework vor.

• Designsysteme
• Motion

Bilder über OpenRouter mit Referenzbildern und einem mitgelieferten Python-Skript erzeugen oder bearbeiten.

uv, das mitgelieferte Python-Skript und ein OPENROUTER_API_KEY mit passendem Modellzugriff und Guthaben.

• Bildbearbeitung
• Composing

Verwandeln Sie eine Informationshierarchie in erkennbare Navigationselemente und klare Wege zwischen Zielen.

Benötigt eine Informationshierarchie und Aufgabenprioritäten; es wird kein Navigationskomponenten-Paket mitgeliefert.

• Interaktionsdesign
• Navigation

Helfen Sie neuen Nutzenden, ein brauchbares Ergebnis zu erreichen, bevor sie das gesamte Produkt kennenlernen müssen.

Benötigt produktspezifische Aktivierungsdefinitionen und Instrumentierung für spätere Messungen.

• Interaktionsdesign
• Onboarding

Wende ein Markensystem auf eine HTML-Seite oder ein Foliendeck an – mit Layoutregeln, die zum gewählten Format passen.

Die Markenextraktion per URL benötigt Firecrawl. Standardausgaben vermeiden externe JavaScript-Abhängigkeiten; Schriften oder Bilddateien können jedoch weiterhin eigene Verfügbarkeit und Rechte voraussetzen.

• Webdesign
• Präsentationen
• Markensysteme

Ein klar positionierter Frontend-Leitfaden für ausdrucksstarke Landingpages, Portfolios und interaktive Präsentationen.

Ein Frontend-Projekt und bewusst ausgewählte Animationsbibliotheken; der Leitfaden verlangt keine bestimmte Laufzeitumgebung.

• Frontend-Design
• Motion
• Typografie

Halten Sie Untertiteltext und Timing in einer definierten Datenstruktur, bevor Sie sie auf einer Video-Timeline gestalten.

Ein Remotion-Projekt, @remotion/captions und die relevanten Referenzdateien zu Transkription, Import und Anzeige.

• Video
• Untertitel

Richte aus einem Video-Briefing ein Remotion-Projekt samt Komposition ein, mit Vorschau während der Entwicklung.

Node.js, Git, Paketinstallation, Remotion Studio und die zugehörigen Referenzen zu Komposition und Layout.

• Video
• React

Machen Sie ein Video im Studio bearbeitbar, indem Sie ändern, wie sein React-Quellcode Ebenen, Timing und Steuerelemente bereitstellt.

Eine Remotion-Version, die die dokumentierten Interactive-APIs unterstützt; für die beschriebene bearbeitbare Pfadinterpolation wird zusätzlich @remotion/paths benötigt.

• Video
• React
• Interaktion

Erstelle animierte Karten in Remotion und wähle Kartentechnik, Anbieter und Daten passend zur geplanten Einstellung.

Remotion sowie die Bibliotheken und Daten der gewählten Technik; laut der erfassten Quelle erfordert Mapbox einen Schlüssel.

• Video
• Karten

Schreibe React-Markup, das sich wie eine Video-Timeline verhält und nicht wie eine Webseite mit CSS-Animation.

Remotion und funktionsspezifische Pakete passend zur Projektversion; verlinkte Referenzen legen weitere Anforderungen an Medien, Effekte, Schriften oder Export fest.

• Video
• React
• Motion

Wählen Sie ein Makro für eine Befehlsfolge und ein Skript, wenn die Modellierungsaufgabe Logik erfordert.

Rhino 7 oder neuer; Rhino 8 ist laut Quelle die empfohlene Umgebung für den einheitlichen Script Editor.

• 3D-Design
• CAD
• Automatisierung

Eine vorab gerenderte Kamerafahrt, die per Scrollen gesteuert wird – keine Live-3D-Welt.

Die dokumentierte Pipeline nutzt Higgsfield und einen Monid-Videoweg sowie ffmpeg/ffprobe und eine Browserumgebung. Anbieterkonten, Guthaben, Modellfähigkeiten und jede optionale Bildroute müssen neu überprüft werden.

• Scroll-Animation
• Video
• Landingpages

Gestalte die gesamte Retrieval-Erfahrung, einschließlich der Suchen, die scheitern.

Suchdienste und Query-Instrumentierung liegen außerhalb dieser Anleitung.

• Interaction Design
• Suche

Macht die operative Arbeit hinter dem sichtbar, was Kundinnen und Kunden sehen.

Benötigt Belege von Stakeholdern und aus Prozessen; greift nicht selbstständig auf operative Systeme zu.

• UX-Strategie
• Service Design

Schreiben Sie Slang-Shader und prüfen Sie, wie ihre Eingaben, Ressourcen und Ausgaben mit dem Renderer verbunden sind.

Eine für das Ziel-Backend geeignete Slang-Kompilierungs- und Renderer-Umgebung; für Aussagen zur Integration ist eine hostseitige Validierung nötig.

• Shader
• GPU-Grafik
• 3D-Design

Wähle Abstände nach Beziehung und Zweck, nicht durch isolierte Pixelanpassungen.

Es ist kein bestimmtes Token-Tool erforderlich; die Anwendung hängt vom bestehenden Komponentensystem ab.

• UI-Design
• Design-Tokens

Beschreibe, was aus jedem Zustand einer Komponente als Nächstes passieren kann.

Es ist kein bestimmtes state-machine-Paket erforderlich; die tatsächliche Implementierung und Tests bleiben nachgelagerte Arbeit.

• Interaktionsdesign
• Verhaltensmodellierung

Eine Komponentenbibliothek soll ihr Erscheinungsbild ändern können, ohne ihre Struktur zu duplizieren.

Die Umsetzung nutzt das Token-System des Projekts oder Plattformäquivalente; das Umschalten zur Laufzeit muss gebaut und getestet werden.

• Designsysteme
• Theming

Rufen Sie ein vorhandenes Markenzeichen oder Service-Icon in der Form ab, die Ihr Projekt benötigt.

Benötigt Netzwerkzugriff auf die Registry oder das CDN. React-, CLI-, Figma- und MCP-Integrationen sind optionale Einsatzformen und keine Voraussetzung für das einfache Abrufen von URLs.

• Marken-Assets
• SVG
• Cloud-Diagramme

Gib einem geladenen Charakter- oder Produktmodell eine definierte Strategie für Wiedergabe und Überblendung.

Ein funktionierendes Three.js-Projekt mit Renderer; Quellbeispiele sind gegen die installierte Version zu prüfen. Weitere Steuerungen und Loader hängen vom gewählten Weg ab.

• 3D
• Three.js

Wähle eine Formdarstellung, bevor du Oberflächengestaltung oder Animation hinzufügst.

Ein funktionierendes Three.js-Projekt mit Renderer; prüfe die Quellbeispiele anhand der installierten Version. Weitere Controls und Loader hängen vom gewählten Weg ab.

• 3D
• Three.js

Ordnen Sie eine Geste dem gemeinten 3D-Objekt zu, indem Sie die tatsächlichen Koordinaten von Canvas und Kamera verwenden.

Ein funktionierendes Three.js-Projekt mit Renderer; prüfen Sie die Quellbeispiele anhand der installierten Version. Weitere Controls und Loader hängen vom gewählten Weg ab.

• 3D
• Three.js

Machen Sie ein Modell durch ein bewusstes Beleuchtungssetup lesbar, statt einfach nur die Helligkeit zu erhöhen.

Ein funktionierendes Three.js-Projekt mit Renderer; prüfen Sie die Beispiele der Quelle anhand der installierten Version. Zusätzliche Controls und Loader hängen vom gewählten Weg ab.

• 3D
• Three.js

Wählen Sie das Shading-Modell passend zur Oberfläche und prüfen Sie es anschließend unter der vorgesehenen Beleuchtung.

Ein funktionierendes Three.js-Projekt mit Renderer; prüfen Sie die Beispiele der Quelle anhand der installierten Version. Weitere Steuerelemente und Loader hängen vom gewählten Weg ab.

• 3D
• Three.js

Behandle Bildschirmeffekte als geordnete Rendering-Pipeline statt als unabhängige Filter.

Ein funktionierendes Three.js-Projekt mit Renderer; prüfe die Quellbeispiele anhand der installierten Version. Zusätzliche Controls und Loader hängen vom gewählten Weg ab.

• 3D
• Three.js

Nutzen Sie eigenes Vertex- oder Pixel-Verhalten, wenn Material-Presets den Effekt nicht abbilden können.

Ein funktionierendes Three.js-Projekt mit Renderer; prüfen Sie die Beispiele der Quelle anhand der installierten Version. Weitere Steuerelemente und Loader hängen vom gewählten Weg ab.

• 3D
• Three.js

Weisen Sie jedem Bild die richtige Rolle zu, bevor Sie eine gestreckte oder ausgewaschene Oberfläche diagnostizieren.

Ein funktionierendes Three.js-Projekt mit Renderer; prüfen Sie die Quellbeispiele anhand der installierten Version. Zusätzliche Steuerelemente und Loader hängen vom gewählten Weg ab.

• 3D
• Three.js

Erstelle aus wenigen dokumentierten Textstilen eine gut lesbare Hierarchie.

Für eine aussagekräftige visuelle Prüfung sind die tatsächlichen Schriftdateien oder verfügbare Plattformschriften erforderlich.

• UI-Design
• Typografie

Legen Sie fest, was die Studie klären soll, bevor Sie die Sitzungen terminieren.

Erfordert ein nutzbares Testartefakt und Zugang zu Teilnehmenden; eine Plattform für Rekrutierung oder Sitzungen wird nicht mitgeliefert.

• UX-Forschung
• Usability-Tests

Zeige die Wege, die Nutzende nehmen können, um ein Ziel zu erreichen.

Die Quelle verlangt keine bestimmte Diagramm-Anwendung; das gewählte Ausgabeformat muss eine klare Notation beibehalten.

• Prototyping
• User Flows

Geben Sie Produktentscheidungen eine einheitliche Nutzerreferenz, ohne eine Kundengeschichte zu erfinden.

Erfordert echte Nutzerevidenz für forschungsbasierte Aussagen; angegebene Produkt-URLs müssen möglicherweise gesondert untersucht werden.

• UX-Forschung
• Personas

Planen und erstellen Sie ein Remotion-Produktvideo aus Oberflächenaufnahmen, Shot-Anweisungen und einer getakteten Komposition.

Erfordert eine Remotion-/Node-Umgebung, Browseraufnahme und ffmpeg. Einige Komponenten benötigen Three.js-bezogene Pakete; optionale Musikanalyse und Jianying-Export bringen zusätzliche Abhängigkeiten mit. Prüfen Sie die für Remotion geltende Lizenz selbst.

• Produktvideo
• Remotion
• Motion Design

Entscheiden Sie, was zuerst auffallen soll, und gestalten Sie die Komposition so, dass sie diese Entscheidung unterstützt.

Benötigt echte Inhalte und eine gerenderte Prüfung; ein Tool zur visuellen Bewertung ist nicht enthalten.

• UI-Design
• Komposition

Legen Sie eine visuelle Richtung fest, bauen Sie eine repräsentative Oberfläche und prüfen Sie sie im Browser, bevor Sie das Design erweitern.

Benötigt einen codefähigen Agenten und eine im Browser renderbare Frontend-Umgebung. Ausgewählte Muster können React, Babel, Diagramme oder andere Bibliotheken nutzen; für die Browser-Abnahme ist ein geeignetes Browser-Werkzeug erforderlich.

• Frontend-Design
• Prototyping
• Designsysteme

Browserbasierte Präsentationen mit getimten visuellen Szenen und optionaler Narration erstellen; die Aufnahme ist ein separater Schritt.

Verwendet Vite, React, TypeScript und Node-Tooling. Optionales TTS hängt vom gewählten Anbieter, den Zugangsdaten und dem Adapter ab; für die finale Aufnahme sind Browser-Capture oder Aufnahmesoftware nötig.

• Präsentationen
• Bewegung
• Narration

Machen Sie einen Low-Fidelity-Screen so präzise, dass sich Verhalten und Inhalte besprechen lassen.

Ein bestimmtes Wireframing-Tool ist nicht erforderlich; ein brauchbares Briefing muss Informationen zu Inhalten und Zuständen enthalten.

• Prototyping
• Wireframes

Generative Kunst mit p5.js: geseedete Partikel, Flussfelder und anpassbare Parameter.

Benötigt: p5.js

• Images & Generative Art
• Generative Art
• In OpenDesign

Wendet die offiziellen Markenfarben und Typografie von Anthropic auf jedes Artefakt an. Nur für Anthropic-Marke.

• Brand & Design Systems
• In OpenDesign

Originale Poster und statische visuelle Stücke als PNG oder PDF geliefert.

• Images & Generative Art
• PNG / PDF
• In OpenDesign

Legt eine markante visuelle Richtung, Typografie und Layout für neue oder bestehende Web-UI fest.

• Web & UI
• UI-Code
• In OpenDesign

Animierte GIFs, die Slacks Größen- und Abmessungslimits erfüllen.

• Motion & Video
• GIF
• In OpenDesign

Wendet Farb- und Typografie-Themes für Seiten, Folien und Dokumente an oder generiert diese.

• Brand & Design Systems
• In OpenDesign

Mehrkomponentige interaktive HTML-Artefakte mit React, Tailwind und shadcn/ui.

• Web & UI
• HTML
• In OpenDesign

Produktdesign-Beratung, die ein vollständiges Design-System vorschlägt: Ästhetik, Typografie, Farbe, Layout, Motion.

• Brand & Design Systems
• Designsystem
• In OpenDesign

Erzeugt produktionsreifes HTML/CSS aus einer vereinbarten Design-Richtung.

• Web & UI
• HTML

QA einer gebauten Seite aus Designer-Sicht: Inkonsistenzen, Abstände, Hierarchie, Schlampigkeitsmuster; anschließend Korrekturen.

• Design Review & Accessibility
• Review-Bericht
• In OpenDesign

Generiert mehrere Design-Varianten parallel und öffnet ein Vergleichsboard für Feedback.

• Web & UI
• UI-Code

Verwandelt eine Beschreibung oder Mermaid-Quelle in eine bearbeitbare Excalidraw-Datei plus gerendertes SVG und PNG.

Benötigt: Excalidraw

• Diagrams & Data Visualization
• Diagram

Visuelles Design-Audit von iOS-Apps auf echter Hardware.

• Mobile Apps
• Review-Bericht

Überprüft einen Design-Plan auf Vollständigkeit und Erlebnis-Risiken vor der Umsetzung.

• Design Review & Accessibility
• Review-Bericht
• In OpenDesign

Banner für Social Media, Anzeigen, Website-Heroes und Print.

• Images & Generative Art
• Image

Markenstimme, visuelle Identität, Messaging-Frameworks und Markenkonsistenz.

• Brand & Design Systems

Markenidentität, Design-Tokens, UI-Styling, Logo-Generierung und Corporate-Identity-Programme.

Benötigt: Image-Generation-Service (Gemini, Atlas Cloud oder MuAPI)

• Brand & Design Systems

Drei-Ebenen-Design-Tokens, Komponenten-Spezifikationen und Folien-Generierung.

• Brand & Design Systems
• Designsystem

Strategische HTML-Präsentationen mit Chart.js, Design-Tokens und responsiven Layouts.

Benötigt: Chart.js

• Presentations
• HTML-Folien
• In OpenDesign

Barrierefreies UI-Styling mit shadcn/ui, Tailwind CSS und canvas-basierten Visuals.

Benötigt: shadcn/ui, Tailwind CSS

• Web & UI
• UI-Code

UI/UX-Design-Intelligenz für Web, Mobile und Desktop: Layout, Farbe, Typografie und UX-Regeln.

• Web & UI
• UI-Code
• In OpenDesign

Fügt shadcn-Komponenten hinzu, durchsucht, korrigiert, stylt und komponiert sie in einem Projekt.

Benötigt: shadcn/ui

• Web & UI
• UI-Code

Erstellt produktionsreife, barrierefreie, responsive UIs für Endanwender.

• Web & UI
• UI-Code

Premium-Markenrichtlinien-Boards, Logo-Systeme und Identitäts-Decks via Bild-Generierung.

Benötigt: Bildgenerierungsdienst

• Brand & Design Systems
• Image
• In OpenDesign

Anti-Slop-Frontend-Design für Landing-Pages, Portfolios und Redesigns.

• Web & UI
• UI-Code
• In OpenDesign

Editoriale Layouts, Layout-Vielfalt und GSAP-Motion in einem Frontend-Skill.

Benötigt: GSAP

• Web & UI
• UI-Code

Vermittelt hochwertige Agentur-Details: Typografie, Spacing, Schatten, Cards und Motion.

• Web & UI

Generiert und analysiert zuerst ein Design-Bild, dann implementiert es die passende Seite.

Benötigt: Bildgenerierungsdienst

• Web & UI
• UI-Code

Hochwertige mobile Screen-Konzepte und Abläufe per Bildgenerierung.

Benötigt: Bildgenerierungsdienst

• Mobile Apps
• Image
• In OpenDesign

Abschnittsweise Website-Design-Referenzen durch Bildgenerierung.

Benötigt: Bildgenerierungsdienst

• Web & UI
• Image
• In OpenDesign

Brutalistische Interfaces, die Schweizer Typografie mit Terminal-Ästhetik verbinden.

• Web & UI
• UI-Code

Klare, monochrome Interfaces im redaktionellen Stil.

• Web & UI
• UI-Code

Prüft eine bestehende Website oder App und hebt sie auf Premium-Designniveau.

• Design Review & Accessibility
• UI-Code

Schreibt eine DESIGN.md für Google Stitch mit Schwerpunkt auf visueller Eigenständigkeit.

Benötigt: Google Stitch

• Brand & Design Systems
• DESIGN.md

Ein Skill zum Entwerfen, Kritisieren, Prüfen, Verfeinern, Animieren und Optimieren von Interfaces.

• Design Review & Accessibility
• UI-Code
• In OpenDesign

Verwandelt Text, Notizen oder einen Artikel in ein gesichtsloses Erklärvideo mit erfundenen Szenenbildern.

Benötigt: HyperFrames

• Motion & Video
• Video

Importiert Figma-Assets, Brand-Tokens und Storyboards in eine HyperFrames-Komposition.

Benötigt: HyperFrames, Figma

• Motion & Video
• Video

Erstellt oder bearbeitet ein benutzerdefiniertes HyperFrames-Video mit mehreren Szenen, wenn keine Vorlage passt.

Benötigt: HyperFrames

• Motion & Video
• Video

Animationsregeln, Szenenvorlagen, Übergänge und Laufzeit-Adapter für HyperFrames.

Benötigt: HyperFrames

• Motion & Video
• Video

Kreative Gestaltung für HyperFrames-Videos: Farbpalette, Typografie, Komposition, Voice-over, Timing.

Benötigt: HyperFrames

• Motion & Video
• Video

Punch-ins, Zooms, Reframes, Ken-Burns-Bewegungen und 2D/3D-Keyframes für HyperFrames.

Benötigt: HyperFrames

• Motion & Video
• Video

Kurze designorientierte Motion Graphics: kinetische Typografie, Statistik-Animationen, Logo-Stinger, Bauchbinden.

Benötigt: HyperFrames

• Motion & Video
• Video

Verwandelt eine Produkt-URL, ein Skript oder ein Briefing in ein Produkteinführungs- oder Werbevideo.

Benötigt: HyperFrames

• Motion & Video
• Video

Interaktive HyperFrames-Diashows mit Fragmenten, Verzweigungen und Präsentationsmodus.

Benötigt: HyperFrames

• Presentations
• HTML-Folien

Entwickler-Präsentationen mit Markdown, Vue-Komponenten, Code-Hervorhebung und Animation.

Benötigt: Slidev

• Presentations
• HTML-Folien

WCAG 2.2-konforme Interfaces mit mobiler Barrierefreiheit und Unterstützung für assistive Technologien.

• Design Review & Accessibility
• UI-Code

Markenidentitäts-Interview zuerst, dann Generierung und Iteration einer Landing-Page über Stitch.

Benötigt: Google Stitch

• Web & UI
• UI-Code

Skalierbare Design-Systeme: Tokens, Theming-Infrastruktur, Komponenten-Architektur.

• Brand & Design Systems
• Designsystem

Mikrointeraktionen, Motion, Übergänge und Benutzerfeedback-Muster.

• Motion & Video
• UI-Code

KPI-Dashboards: Metrikauswahl, Diagrammtypen, Layout und Echtzeitmuster.

• Diagrams & Data Visualization
• Dashboard

Native Android-UI mit Material Design 3 und Jetpack Compose.

• Mobile Apps
• UI-Code

Native iOS-UI nach Apples Human Interface Guidelines mit SwiftUI.

• Mobile Apps
• UI-Code

Validiert und repariert bearbeitbare PPTX-Decks hinsichtlich Geometrie, Barrierefreiheit und Paketintegrität.

• Presentations
• PPTX

Analysiert eine Referenz-PPTX auf Theme, Typografie, Layout-Rhythmus und Diagnostik.

• Presentations
• Review-Bericht

Erstellt koordinatenexplizite JSON-Spezifikationen für bearbeitbare PPTX-Decks.

• Presentations
• PPTX

Wählt und platziert genehmigte Icons, Bilder, SVGs und Infografiken in einem PPTX-Deck.

• Presentations
• PPTX

React Native-Styling, Navigation und Reanimated-Animationen.

Benötigt: React Native

• Mobile Apps
• UI-Code

Responsive Layouts mit Container Queries, Fluid Type, CSS Grid und Mobile-First-Breakpoints.

• Web & UI
• UI-Code

Testet Web-Apps mit VoiceOver, NVDA und JAWS Screenreadern.

• Design Review & Accessibility
• Review-Bericht

Design-Systeme mit Tailwind CSS v4: Tokens, Komponentenbibliotheken, responsive Patterns.

Benötigt: Tailwind CSS

• Brand & Design Systems
• Designsystem

Typografie, Farbtheorie, Spacing-Systeme und Ikonografie für ein stimmiges visuelles Erscheinungsbild.

• Brand & Design Systems

WCAG 2.2-Audits mit automatisierten Tests, manuellen Prüfungen und Handlungsempfehlungen.

• Design Review & Accessibility
• Review-Bericht

Wiederverwendbare Komponentenmuster und Kompositionsstrategien für React, Vue und Svelte.

• Web & UI
• UI-Code

Erstellt und bearbeitet draw.io-Diagrammdateien (.drawio, .drawio.svg, .drawio.png).

Benötigt: draw.io

• Diagrams & Data Visualization
• Diagram

Generiert Excalidraw-Diagramme und Mind-Maps aus natürlicher Sprache.

Benötigt: Excalidraw

• Diagrams & Data Visualization
• Diagram

Parallax, fixierte Abschnitte, horizontales Scrollen und Text-Scroll-Animationen.

Benötigt: GSAP

• Motion & Video
• UI-Code

Professionelles UI/UX-Design, Komponenten und Design-Systeme in Penpot durch MCP-Tools.

Benötigt: Penpot MCP

• Web & UI
• Design-Datei

Power BI-Report-Design: Diagrammauswahl, Layout, Lesbarkeit, Barrierefreiheit.

Benötigt: Power BI

• Diagrams & Data Visualization
• Dashboard

Prüft eine laufende Website visuell und identifiziert und behebt Layout-Probleme.

• Design Review & Accessibility
• Review-Bericht

Erstellt eine Animation von Grund auf und legt dabei Zweck, Tool, Eigenschaften, Kurve und Dauer in der richtigen Reihenfolge fest.

• Motion & Video
• UI-Code

Gesten, Springs und Übergänge für React Native und Expo.

Voraussetzung: React Native / Expo

• Mobile Apps
• UI-Code

Reverse-Lookup-Glossar, das vage Motion-Beschreibungen in exakte Fachbegriffe übersetzt.

• Motion & Video

Apples Gesten, physische Motion und räumliche Hierarchie für das Web übersetzt.

• Web & UI
• UI-Code

Emil Kowalskis Philosophie zu UI-Verfeinerung, Komponentendesign und Animationsentscheidungen.

• Web & UI
• In OpenDesign

Findet Stellen in einem UI, die animiert werden sollten, mit Parametervorschlägen, und verwirft den Rest.

• Motion & Video
• Review-Bericht

Prüft bestehenden Motion-Code und erstellt priorisierte, in sich geschlossene Umsetzungspläne.

• Design Review & Accessibility
• Review-Bericht

Baut mehrere wirklich unterschiedliche Versionen eines UI-Elements hinter einem Live-Visual-Picker.

• Web & UI
• UI-Code

Prüft Animations-Code auf Timing, Interaktion und Finish gegen eine hohe Handwerks-Messlatte.

• Design Review & Accessibility
• Review-Bericht
• In OpenDesign

Native wirkende Seitenübergänge mit Reacts View Transition API.

Voraussetzung: React

• Motion & Video
• UI-Code

Animationsreiche HTML-Slides von Grund auf oder konvertiert aus PowerPoint-Dateien (PPT).

• Presentations
• HTML-Folien
• In OpenDesign

Rendert JSON-Specs in interaktive Terminal-UIs mit Ink.

Benötigt: Ink

• Web & UI
• Terminal-UI

Erzeugt oder bearbeitet Rasterbilder: Illustrationen, Fotos, Texturen, Sprites, Mockups.

Benötigt: Bildgenerierungsdienst

• Images & Generative Art
• Image
• In OpenDesign

Horizontale HTML-PPT-Decks in einer Datei im Magazin- oder Swiss-Stil, mit Referentenansicht und Sync.

• Presentations
• HTML-Folien
• In OpenDesign

Definiert oder wendet Markenrichtlinien für jedes Produkt an: Farbe, Schrift, Logo und Tonalität.

• Brand & Design Systems

Erfasst Markenidentität einmalig durch einen 10-Fragen-Assistenten für spätere Dokumente und Decks.

• Brand & Design Systems
• Designsystem

Konvertiert ein Markdown-Deck in gebrandete Slides.

• Presentations
• HTML-Folien

Design-Tokens, Komponentendokumentation, responsive Berechnungen und Developer-Handoff.

• Brand & Design Systems
• Designsystem

Datengestützte Personas, Journey Maps, Usability-Testing-Frameworks und Research-Synthese.

• UX & Research
• Research-Dokument

High-Fidelity-HTML-Prototypen, Slides, Animationen und Visualisierungen; beginnt mit drei Entwürfen.

• Web & UI
• HTML

WCAG 2.1 AA-Audit eines Designs oder einer Seite: Kontrast, Tastatur, Touch-Targets.

• Design Review & Accessibility
• Review-Bericht

Strukturiertes Design-Feedback zu Usability, Hierarchie und Konsistenz.

• Design Review & Accessibility
• Review-Bericht

Developer-Handoff-Spezifikationen aus einem Design: Layout, Tokens, Komponenten-Zustände, Breakpoints.

• Brand & Design Systems
• Übergabe-Spezifikation

Prüft, dokumentiert oder erweitert ein bestehendes Design-System.

• Brand & Design Systems
• Designsystem

Verdichtet Interviews, Umfragen und Testnotizen zu Themen und Empfehlungen.

• UX & Research
• Research-Dokument

Plant, führt durch und wertet Nutzerinterviews, Umfragen und Usability-Tests aus.

• UX & Research
• Research-Dokument

Schreibt oder prüft UX-Texte: Microcopy, Fehlermeldungen, Empty States, CTAs.

• UX & Research

GSAP-Kern-API: to/from/fromTo, Easing, Stagger, matchMedia, Reduced Motion.

Benötigt: GSAP

• Motion & Video
• UI-Code
• In OpenDesign

GSAP in Vue, Svelte und anderen Nicht-React-Frameworks: Lifecycle, Scoping, Cleanup.

Benötigt: GSAP

• Motion & Video
• UI-Code
• In OpenDesign

GSAP-Performance: Transforms, Layout-Thrash vermeiden, will-change, Batching.

Benötigt: GSAP

• Motion & Video
• UI-Code
• In OpenDesign

GSAP-Plugins: ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG und Physics.

Benötigt: GSAP

• Motion & Video
• UI-Code
• In OpenDesign

GSAP in React und Next.js mit useGSAP-Hook, Refs, Context und Cleanup.

Benötigt: GSAP

• Motion & Video
• UI-Code
• In OpenDesign

Scroll-gebundene Animation mit ScrollTrigger: Pinning, Scrub, Triggers, Parallax.

Benötigt: GSAP

• Motion & Video
• UI-Code
• In OpenDesign

GSAP-Timelines: Position-Parameter, Verschachtelung und Wiedergabesteuerung.

Benötigt: GSAP

• Motion & Video
• UI-Code
• In OpenDesign

gsap.utils-Helfer: clamp, mapRange, interpolate, snap, wrap, pipe.

Benötigt: GSAP

• Motion & Video
• UI-Code
• In OpenDesign

Präsentationsfertige Farbpaletten und Schriftkombinationen für PPT und Design-Aufgaben.

• Brand & Design Systems

Ein konsistentes visuelles System für PPT-Slides aus Radius- und Spacing-Rezepten.

• Presentations

Verwandelt Fotos von Personen, Haustieren, Objekten oder Logos in vier untertitelte GIF-Sticker.

• Motion & Video
• GIF
• In OpenDesign

Generiert, bearbeitet und liest bearbeitbare PowerPoint-Präsentationen (PPTX).

• Presentations
• PPTX
• In OpenDesign

GLSL-Shader: Ray Marching, SDFs, Fluids, Partikel, prozedurale Visuals.

Benötigt: GLSL / WebGL

• Images & Generative Art
• Generative Art
• In OpenDesign

Implementiert einzelne PowerPoint-Slides mit PptxGenJS.

Benötigt: PptxGenJS

• Presentations
• PPTX

Bereinigt UI-Code schnell durch Korrektur von Abständen, Hierarchie, Typografie und kleineren Layout-Problemen.

• Design Review & Accessibility
• UI-Code

Erstellt oder aktualisiert eine DESIGN.md aus einem vorhandenen Produkt-Repository oder einer öffentlichen Website.

• Brand & Design Systems
• DESIGN.md

Prüft und behebt ARIA-, Tastatur-, Fokus-, Kontrast- und Formular-Fehler.

• Design Review & Accessibility
• Review-Bericht

Findet und behebt ruckelige CSS/JS-Animationen und scroll-gebundene Bewegungen.

• Motion & Video
• Review-Bericht

Prüft eine Produktoberfläche gegen ihre eigenen Design-Belege und schreibt Umsetzungspläne.

• Design Review & Accessibility
• Review-Bericht

Analysiert Stitch-Projekte und schreibt eine semantische DESIGN.md.

Benötigt: Google Stitch

• Brand & Design Systems
• DESIGN.md
• In OpenDesign

Formuliert vage UI-Ideen in präzise, Stitch-optimierte Prompts um.

Benötigt: Google Stitch

• Web & UI
• In OpenDesign

Konvertiert Stitch-Designs in React + Vite Dashboards mit TanStack Query.

Benötigt: Google Stitch

• Web & UI
• UI-Code

Walkthrough-Videos aus Stitch-Projekten mit Remotion-Übergängen und Zooms.

Benötigt: Google Stitch, Remotion

• Motion & Video
• Video
• In OpenDesign

Integration und Anpassung von shadcn/ui-Komponenten: Entdeckung, Installation, Best Practices.

Benötigt: shadcn/ui

• Web & UI
• UI-Code
• In OpenDesign

Konvertiert Frontend-Code über statisches HTML und Design-System-Extraktion in ein Stitch-Design.

Benötigt: Google Stitch

• Web & UI
• Design-Datei

Extrahiert eine vollständige DESIGN.md aus Frontend-Quellcode in jedem Framework.

• Brand & Design Systems
• DESIGN.md

Extrahiert eigenständige statische HTML-Snapshots mit eingebettetem CSS und Bildern.

• Web & UI
• HTML

Generiert, bearbeitet und variiert Screens in Stitch aus Text oder Referenzbildern.

Benötigt: Google Stitch

• Web & UI
• Design-Datei

Erstellt, aktualisiert und wendet Design-Systeme in Stitch über MCP-Tools an.

Benötigt: Google Stitch

• Brand & Design Systems
• Designsystem

Konvertiert oder synchronisiert Stitch-Designs zu modularen React + Vite Komponenten.

Benötigt: Google Stitch

• Web & UI
• UI-Code

Konvertiert oder synchronisiert Stitch-HTML-Designs zu React Native Komponenten.

Benötigt: Google Stitch, React Native

• Mobile Apps
• UI-Code

Craft-orientiertes Interface-Design für Dashboards, Admin-Panels, SaaS-Tools und Einstellungsseiten.

• Web & UI
• UI-Code

Design-Engineering-Prinzipien für Hover, Schatten, Rahmen, Icons, Typografie und Mikrointeraktionen.

• Web & UI

Prüft und verbessert Web-Barrierefreiheit nach WCAG 2.2.

• Design Review & Accessibility
• Review-Bericht

Wendet Motion-Design-Prinzipien an: Timing, Easing, Choreografie und Animations-Grundlagen.

• Motion & Video

End-to-End-Assistent für User Research: qualitativ und quantitativ, mit Leitfäden und Plänen.

• UX & Research
• Research-Dokument

Implementiert Material Design 3-Tokens, -Komponenten und adaptive Layouts.

• Mobile Apps
• UI-Code

Zweckorientierte Interaktionsbewegung oder Review bestehender Animationen nach Kowalski, Krehel und Tompkins.

• Motion & Video

Farbbenennung, Farbtheorie, Farbräume, Paletten, Rampen, Verläufe, Konvertierungen und Kontrast.

• Brand & Design Systems
• In OpenDesign

Stellt Daten als Balken-, Linien-, Kreis-, Radar-, Sankey-, Mind-Map- und Flussdiagramme über die AntV-API dar.

Benötigt: AntV API

• Diagrams & Data Visualization
• Diagrammbild

Erstellt Infografiken aus einem vorgegebenen Text.

Benötigt: AntV API

• Diagrams & Data Visualization
• Image

Benutzerzentrierte, barrierefreie Microcopy: Buttons, Labels, Fehlermeldungen, Formulare, Onboarding.

• UX & Research