Agent Skills für Webdesign

Erzeugt hochwertige Referenzbilder für Website-Design pro Abschnitt mit kompositorischer Vielfalt, konsistenter Palette und conversion-bewusster Art Direction für Landing Pages und Produkt-Comps.

von leonxlnx/taste-skill

Leitfaden für die Erstellung professioneller UI/UX-Designs in Penpot über MCP-Tools, mit Design-Systemen, Komponenten, Dashboards, Formularen, Navigation, Landing Pages und Barrierefreiheit.

von github/awesome-copilot

• User experience
• Accessibility

Entwirft und implementiert Mikrointeraktionen, Motion Design, Übergänge, Ladezustände und Nutzerfeedback-Muster mit Timing- und Easing-Hinweisen.

von wshobson/agents

• User experience
• Accessibility
• Interaction design

Expertenskill für Informationsarchitektur zur Planung von Seitenhierarchie, Navigation, URL-Struktur und interner Verlinkung, mit Vorlagen für Website-Typen und Anleitung zum Hierarchie-Design.

von coreyhaines31/marketingskills

• Information architecture

Implementiert WCAG-2.2-konforme Oberflächen mit ARIA-Mustern, Tastaturnavigation, Fokusmanagement, Screenreader-Unterstützung und inklusiven Designpraktiken.

von wshobson/agents

• Accessibility

Entwirft, implementiert und prüft barrierefreie UI nach WCAG 2.2 AA für Web, iOS und Android, einschließlich ARIA-Rollen, Fokusverwaltung, Kontrast, Zielgröße und Screenreader.

von affaan-m/ecc

• Accessibility

Führt WCAG-2.2-Barrierefreiheitsaudits durch mit automatisiertem Testing, manueller Verifikation, POUR-Prinzipien, Schweregrad-Bewertungen und Behebungsanleitung.

von wshobson/agents

• Accessibility

Praktischer Leitfaden zur Auswahl, Kombination und Implementierung von Web-Schriftarten, einschließlich Lesbarkeit, responsiver Typografie, Font Loading, Hierarchie und Performance.

von wondelai/skills

• Visual design

Erstellt barrierefreie Benutzeroberflächen mit shadcn/ui-Komponenten, Tailwind CSS Utility-Styling, responsiven Layouts, Theming, Dark Mode und Design-System-Tokens.

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

• Visual design
• Responsive layout

Überträgt Apples Fluid-Interface-Design und Prinzipien physischer Bewegung ins Web, abdeckend gestengesteuerte UI, Springs, Drag-/Swipe-/Sheet-Interaktionen, Materialien, Typografie und Reduced Motion.

von emilkowalski/skills

Definiert die strukturelle Ebene eines Produkts oder einer Website, bevor das visuelle Design beginnt. Umfasst Navigation, Inhaltshierarchie, Seitenstruktur, URL-Muster und User Flows. Verwenden, wenn der Nutzer die Seitenstruktur planen, die Navigation definieren, User Flows abbilden, Inhalte organisieren möchte oder „IA“ oder „Information…

von julianoczkowski/designer-skills

• Information architecture
• Visual design

Dieser Skill ermöglicht die visuelle Prüfung lokal oder remote laufender Websites, um Designprobleme zu erkennen und zu beheben. Wird ausgelöst durch Anfragen wie „review website design“, „check the UI“, „fix the layout“, „find design problems“. Erkennt Probleme mit responsivem Design, Barrierefreiheit, visueller Konsistenz und…

von github/awesome-copilot

• Responsive layout
• Accessibility

Erstellt oder überarbeitet ausgefeilte, im Browser gerenderte visuelle Artefakte mit HTML/CSS/JavaScript/React: Seiten, Dashboards, Prototypen, Präsentationsfolien, Animationen, UI-Mockups und Datenvisualisierungen. Verwenden für visuelle Frontend-Erstellung, Designsystem-Erkundung, Designkritik oder explizite Browser-Abnahme /…

von conardli/garden-skills

• Accessibility
• Interaction design

Bringt der AI bei, wie eine High-End-Agentur zu designen. Definiert die exakten Fonts, Abstände, Schatten, Kartenstrukturen und Animationen, die eine Website teuer wirken lassen. Blockiert alle gängigen Defaults, die AI-Designs billig oder generisch aussehen lassen.

von leonxlnx/taste-skill

• Visual design

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

• Visual design

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

• Accessibility

> 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

• Responsive layout
• Accessibility

Extrahiert das Design-System jeder Website in eine agent-ready DESIGN.md anhand von Firecrawl-Scrape-Belegen. Verwenden, wenn der Nutzer Farben, Schriften, Abstände, Komponenten, Layoutmuster oder Marken-/UI-Hinweise von einer Website möchte, damit KI-Agents neue Websites erstellen, einen Look klonen oder Seiten inspiriert von dieser … bauen können.

von firecrawl/firecrawl-workflows

Prüft ein Penpot-Design gegen WCAG 2.1/2.2 AA (optional AAA) und erstellt einen strukturierten Schweregrad-Bericht: Farbkontrast, Touch-/Zielgrößen, Textalternativen, Überschriftenhierarchie und Tastatur-/Fokusreihenfolge. Schlägt Korrekturen vor — wendet sie nicht automatisch an. Dient außerdem als Evaluator im Brief-to-Screen-Loop. Auslöser: 'check accessibility', 'accessibility audit', 'WCAG check', 'contrast audit', 'a11y review', 'check color contrast', 'is this accessible'.

von penpot/penpot-ai-kit

• Accessibility

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

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

Übersetzt Figma-Designs in produktionsreifen Anwendungscode mit 1:1 visueller Treue. Verwenden bei der Implementierung von UI-Code aus Figma-Dateien, wenn der Nutzer "Design implementieren", "Code generieren", "Komponente implementieren" erwähnt, Figma-URLs bereitstellt oder darum bittet, Komponenten passend zu Figma-Spezifikationen zu erstellen. Für Figma-Canvas-Schreibvorgänge über `use_figma` verwenden Sie `figma-use`.

von openai/skills

Voraussetzungen (angegeben): Node.js

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

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

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

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

• Accessibility

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

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

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

Meistere React-, Vue- und Svelte-Komponentenmuster inklusive CSS-in-JS, Kompositionsstrategien und wiederverwendbarer Komponentenarchitektur. Nutze es beim Aufbau von UI-Komponentenbibliotheken, beim Entwurf von Komponenten-APIs oder bei der Umsetzung von Frontend-Designsystemen.

von wshobson/agents

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

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

Extrahiert Design-Primitives (Farben, Schriften, Abstände, Radius, Schatten) aus einer öffentlichen Website und generiert Starter-Token-Dateien für das Design-System eines Projekts.

von arvindrk/extract-design-system

Onboarding- und Aktivierungs-CRO-Skill, der First-Run-Erlebnis, Empty States, Checklisten und Time-to-Value-Optimierung für Post-Signup-Nutzerflüsse abdeckt.

von coreyhaines31/marketingskills

Prüft Websites und Landingpages auf Conversion-Probleme und entwirft evidenzbasierte A/B-Tests, inklusive Funnel-Mapping, Überzeugungs-Assets und Einwandbehandlung.

von wondelai/skills

• User experience

Evidenzbasierte Web-Performance-Optimierungs-Skill zu Core Web Vitals, kritischem Rendering-Pfad, Ressourcenladen und Performance-Budgets mit Mess-Workflows.

von addyosmani/web-quality-skills

妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用协作者与协作权限设置、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要开发/新建一个系统·工具·平台·应用，或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接，或用 HTML 做页面·网站·部署到妙搭，或要设计 / design / mockup / prototype / wireframe / 做 PPT / deck / 视觉探索，或提到妙搭/Spark/Miaoda（应用运行时域名形如 *.aiforce.cloud）、应用数据库、应用文件存储、开放 API Key、可见范围、应用协作者/开发权限、应用角色/角色成员、线上日志、接口请求量、错误量、延迟、访问量、环境变量、给妙搭应用配自动化任务/定时触发/审批通过后自动触发时使用。不负责普通云盘文件上传（lark-drive）、飞书文档编辑（lark-doc）、原生幻灯片创建（lark-slides）。

von larksuite/cli

• User experience
• Interaction design

Reverse-Lookup-Glossar, das vage Beschreibungen von Web-Bewegungseffekten ihren präzisen Animationsbegriffen zuordnet, um Effekte zu benennen, statt sie zu entwerfen oder zu bauen.

von emilkowalski/skills

Ergebnisorientierte Firecrawl-Workflows, die strukturierte Webdaten-Artefakte erzeugen, einschließlich Rechercheberichte, SEO-Audits, QA-Berichte und Website-Designsysteme.

von firecrawl/firecrawl-workflows

Anti-ui-slop-Playbooks zum Erstellen, Redesign, Kritisieren und Polieren von Web- und iOS-Oberflächen, mit Layout-, Hierarchie- und Detail-Workflows sowie optionalen Referenzen auf echte Produkte.

von uizze.sh

• Visual design