Agent Skills für App-Design

Entwirft produktionsreife Screens in Penpot aus einem Brief, wie ein Senior Visual Designer — unter Wiederverwendung des bestehenden Designsystems (Tokens + Komponenten) und Zusammenbau Abschnitt für Abschnitt, niemals in einem Durchgang. Verwenden, um einen Screen/eine Seite/eine Landing/ein Dashboard aus einer Beschreibung zu erstellen. NICHT zum Übersetzen von bestehendem Code (verwende penpot-build-from-code). Auslöser: 'design a dashboard', 'create a landing page', 'design this app screen', 'build a UI from this brief', 'design a settings page', 'mock up a screen in Penpot'.

von penpot/penpot-ai-kit

• Handoff & system

Dokumentiere ein Penpot-Design für die Übergabe, indem du eine saubere Anmerkungsebene NEBEN dem Design aufbaust (niemals darüber): eine linke Kontextkarte (das „How might we“-Ziel, Geschäftsregeln, Links, Status, gewünschtes/nicht gewünschtes Feedback), nummerierte Pin-Marker auf der UI, passende Beobachtungs-/Empfehlungs-Notizkarten rechts und optionale Tooltips – alles in einer einzigen ausblendbaren Gruppe, sodass das saubere Design wieder sichtbar gemacht werden kann. Verwendet ein Anmerkungs-Komponentenkit + Tokens, falls vorhanden; schlägt ein minimales vor und erstellt es, falls nicht vorhanden. NICHT für Audits (nutze penpot-audit-*) oder das Umbenennen von Ebenen (nutze penpot-rename-layers). Auslöser: „document this design“, „annotate this screen“, „prepare this for handoff“, „add design annotations“, „explain this flow for devs“, „add observation notes“, „create a critique card“, „spec this screen for handoff“.

von penpot/penpot-ai-kit

• Handoff & system

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

• Flows
• Usability

Bewertet ein Design/UI über 6 gewichtete Dimensionen mit Nielsens 10 Heuristiken und einer priorisierten Ergebnistabelle.

von plugin87/ux-ui-agent-skills

Verwaltet shadcn-Komponenten und -Projekte – Hinzufügen, Suchen, Reparieren, Debuggen, Styling und Zusammensetzen von UI, einschließlich Chat-Oberflächen. Bietet Projektkontext, Komponentendokumentation und Nutzungsbeispiele. Gilt bei der Arbeit mit shadcn/ui, Komponentenregistries, Presets, --preset-Codes oder jedem Projekt mit einer components.json-Datei. Wird auch ausgelöst bei „shadcn init“, „eine App mit --preset erstellen“ oder „zu --preset wechseln“.

von shadcn/ui

Anti-AI-Slop-Design-Skill für Greenfield-Seiten, Audits, Redesigns und Design-Extraktion aus URLs oder Screenshots, mit Betonung auf struktureller Vielfalt. Stark für die Designqualität von App-/Landing-UIs.

von nutlope/hallmark

Vermittelt visuelles Design im Stil einer High-End-Agentur: Schriften, Abstände, Schatten, Kartenstrukturen und Animationen, mit Anti-Generic-Regeln und Layout-Archetypen. Stark für visuelle Richtung in Premium-UI.

von leonxlnx/taste-skill

• UI

Elite-UX/UI- und GSAP-Motion-Engineering: erzwingt Layout-Varianz, AIDA-Seitenstruktur, redaktionelle Typografie, lückenlose Bento-Grids und Scroll-Animationen. Stark für High-End-Web-UI-Design und Motion.

von leonxlnx/taste-skill

• Flows

Generiert DESIGN.md-Design-System-Dateien für Google Stitch, die Typografie, Farbe, Layout, Bewegung und Anti-Pattern-Regeln für eine hochwertige, nicht generische UI kodieren. Nützlich für App-Design-Systeme und Screen-Generierung.

von leonxlnx/taste-skill

• Handoff & system

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

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

• Prototype
• Handoff & system

Voraussetzungen (angegeben): MCP server

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

• Handoff & system

Prüfe ein Penpot-Design gegen seinen implementierten Code (eine Quellkomponente oder Storybook-Story) und gib einen strukturierten DRIFT-Bericht aus. Verwende dies, wenn ein Engineer bestätigen muss, dass der Build zum Design passt: HTML/CSS aus einer Auswahl extrahieren, seine Tokens/Struktur/Zustände auf die Code-Komponente abbilden, sie diffen und auflisten, was auf jeder Seite fehlt, mit Schweregrad und Abgleich. Fällt bei fehlender Code-Quelle sauber auf eine Design-System-Token-Prüfung zurück. Auslöser: 'design to code review', 'does my code match the design', 'design code parity', 'compare Penpot to my component', 'check this against Storybook', 'extract HTML/CSS from this selection', 'find design drift', 'design implementation diff'.

von penpot/penpot-ai-kit

• Handoff & system

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

von plugin87/ux-ui-agent-skills

Bild-zuerst-Workflow vom Website-Design zum Code: erzeugt Design-Bilder, analysiert sie und implementiert dann das Frontend passend dazu. Unterstützt visuelles Design und Prototyping für Web, nicht native App-UI.

von leonxlnx/taste-skill

• UI

Optimiert Post-Signup-Onboarding, Aktivierung, First-Run-Experience und Time-to-Value, inklusive Empty States und Onboarding-Checklisten. Relevant für das Design von App-Onboarding-Flows.

von coreyhaines31/marketingskills

Klare Interfaces im Editorial-Stil. Warme monochrome Palette, typografischer Kontrast, flache Bento-Grids, gedämpfte Pastelltöne. Keine Verläufe, keine schweren Schatten.

von leonxlnx/taste-skill

Rohe mechanische Interfaces, die Schweizer Typografie-Druck mit militärischer Terminal-Ästhetik verbinden. Starre Raster, extremer Kontrast der Typo-Skala, utilitaristische Farben, analoge Degradationseffekte. Für datenlastige Dashboards, Portfolios oder redaktionelle Sites, die wie freigegebene Baupläne wirken sollen.

von leonxlnx/taste-skill

• Flows
• Handoff & system

antfu-artige Designkonventionen, erweitert. UnoCSS-first, klassenbasierte semantische Tokens mit dualem Hell/Dunkel für Tooling- und Devtools-UIs, plus Design-Read, Anti-Slop und Micro-Interaction-Politur für Landing Pages und Produktoberflächen. Verwenden beim Erstellen oder Refactoring jeder Oberfläche mit UnoCSS.

von antfu/skills

Erstellt dunkel thematisierte React-Anwendungen mit Tailwind CSS, eigenem Theming, Glassmorphism-Effekten und Framer-Motion-Animationen. Verwenden bei der Erstellung von Dashboards, Admin-Panels oder datenreichen Oberflächen mit raffinierter dunkler Ästhetik.

von microsoft/skills

Unterstützt bei der Implementierung flüssiger, nativ wirkender Animationen mit Reacts View Transition API: Seitenübergänge, geteilte Elemente, Routenwechsel und Listen-Neuordnung. Relevant für App-UI-Motion und Interaction Design.

von vercel-labs/agent-skills

• Flows
• UI

Kuratierte, meinungsstarke Übersicht zur Auswahl der richtigen Frontend-Bibliothek für eine Aufgabe: UI-Primitives, Motion, Charts, Drag-and-Drop, State und Styling. Hilft bei Implementierungsentscheidungen für App-UIs.

von emilkowalski/skills

• UI

Tool-Suite zum Erstellen aufwendiger, mehrkomponentiger claude.ai HTML-Artefakte mit modernen Frontend-Webtechnologien (React, Tailwind CSS, shadcn/ui). Verwenden für komplexe Artefakte, die State Management, Routing oder shadcn/ui-Komponenten erfordern – nicht für einfache Single-File-HTML/JSX-Artefakte.

von anthropics/skills

Erstellt, bearbeitet und deployt Full-Stack-Websites, Apps und Spiele über die Higgsfield CLI, mit Design-Briefs und App-Layouts. App-Erstellung gehört zum Umfang, aber Design ist dem Deployment nachgeordnet.

von higgsfield-ai/skills

• Flows

Benutzerdefinierte Authentifizierungsabläufe und Komponenten-Erscheinungsbild – Hooks (useSignIn,

von clerk/skills

Browser-Automatisierungs-CLI für KI-Agents: Seiten navigieren, Formulare ausfüllen, klicken, Screenshots und exploratives Testen/QA von Web-Apps. Unterstützt Usability-Testing und App-QA statt Design selbst.

von vercel-labs/agent-browser

• Prototype
• Usability

Toolkit für die Interaktion mit und das Testen von lokalen Web-Apps mit Playwright: Überprüfung der Frontend-Funktionalität, Debugging des UI-Verhaltens, Erstellen von Screenshots und Anzeigen von Logs. Unterstützt Usability-/QA-Tests der App-UI.

von anthropics/skills

• UI

Umfassende Playwright-Test-Anleitung: E2E-, Komponenten-, API-, visuelles, Barrierefreiheits- und Sicherheitstesting sowie Debugging von Flaky Tests. Unterstützt Usability-/QA-Testing der App-UI.

von currents-dev/playwright-best-practices-skill

• UI

Entwirft und prüft iOS-UI/UX für iPhone-Apps in SwiftUI, UIKit oder React Native: Navigationsflüsse, Typografie, Formulare, Keyboard-/Safe-Area-Layout und Barrierefreiheit gemäß Apple HIG. Richtet sich direkt an Mobile-App-Design.

von uizze.sh

• Flows

Gibt Coding-Agents besseren UI-Geschmack: Anti-UI-Slop-Playbooks zum Bauen, Redesignen, Kritisieren und Polieren von Web- und iOS-Oberflächen, mit optionalen Referenzen auf echte Produkte. Zielt direkt auf UI-Designqualität.

von uizze.sh

• Handoff & system