📦

frontend-design

Name: frontend-design
Author: pbakaus

Sûr

Entwickeln Sie unverwechselbare Frontend-Oberflächen, die herausstechen

Également disponible depuis: sickn33,7Spade,CesarAugustusGroB,am-will,1bertogit,1bertogit,7Spade,davila7,DennisLiuCk,92Bilal26,anthropics,YYH211,92Bilal26,ZhanlinCui,Azeem-2,AdamAugustinsky,AI-Vibe-Prompts,AgentWorkforce,AJV009,anthropics

Generischer KI-generierter Code erzeugt vergessliche, vorlagenbasierte Designs. Dieses Skill vermittelt eine kühne ästhetische Richtung und produktionsreife Implementierung, die einprägsame Benutzererlebnisse schafft.

Prend en charge: Claude Codex Code(CC)

🥉 73 Bronze

Télécharger le ZIP du skill

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

Activez et commencez à utiliser

Tester

Utilisation de "frontend-design". Eine Kartenkomponente für hervorgehobene Artikel

Résultat attendu:

Eine gestylte Artikelkarte mit fluider Typografie, Hover-Zustand-Elevation unter Verwendung von Transform, focus-visible Ring für Tastaturbenutzer, responsives Bild mit properem Seitenverhältnis, semantisches HTML-Struktur mit Article/Heading/Zeit-Elementen und subtilen dekorativen Elementen, die die Markenidentität verstärken.

Utilisation de "frontend-design". Navigationsmenü für mobile Geräte

Résultat attendu:

Eine Mobile-First-Navigation unter Verwendung der Popover-API mit Light-Dismiss-Verhalten, Roving Tabindex für Pfeiltastennavigation, sanfte Höhenanimation unter Verwendung von Grid-Template-Rows, Safe Area Insets für Notch-Geräte und Reduced-Motion-Unterstützung, die Benutzerpräferenzen respektiert.

Audit de sécurité

Sûr

v1 • 3/15/2026

All static analysis findings are false positives. The skill consists entirely of markdown documentation files containing CSS and HTML code examples. Detected patterns (backtick execution, cryptographic algorithms, URLs) are artifacts of pattern matching on documentation content: backticks are markdown code fence delimiters, flagged terms appear in legitimate design guidance, and URLs are reference links to design resources.

Fichiers analysés

941

Lignes analysées

résultats

Total des audits

Aucun problème de sécurité trouvé

Audité par: claude

Score de qualité

Architecture

100

Maintenabilité

Contenu

Communauté

100

Sécurité

Conformité aux spécifications

Ce que vous pouvez construire

Landingpage-Design

Erstellen Sie eine visuell ansprechende Landingpage mit klarer Typografie, einem kohäsiven Farbschema und gezielten Animationen, die Besucher in Kunden umwandelt.

Komponentenbibliothek-Entwicklung

Entwickeln Sie ein konsistentes, barrierefreies Komponentensystem mit angemessenen Fokuszuständen, Lademustern und responsivem Verhalten.

Dashboard-Oberfläche

Gestalten Sie datenreiche Oberflächen mit klarer Hierarchie, gut lesbaren Tabellen und progressiver Offenlegung für komplexe Anwendungen.

Essayez ces prompts

Einfache Komponentenanfrage

Erstellen Sie eine Preiskarten-Komponente mit drei Stufen. Verwenden Sie eine raffinierte, minimalistische Ästhetik mit subtilen Farbakzenten und klarer visueller Hierarchie.

Vollständiges Seitendesign

Gestalten Sie eine Landingpage für eine Produktivitäts-App. Die Zielgruppe sind kreative Profis. Verwenden Sie eine brutalistische Ästhetik mit kühner Typografie und unerwarteten Layouts. Enthalten Sie einen Hero-Bereich, ein Feature-Raster, Testimonials und einen Call-to-Action.

Design-System-Tokens

Generieren Sie ein vollständiges System von CSS-Custom-Properties für eine Design-Token-Architektur. Enthalten Sie eine Farbpalette mit OKLCH, eine Typografie-Skala mit fluider Größenanpassung, ein Spacing-System basierend auf vertikalem Rhythmus und komponentenspezifische Tokens. Unterstützen Sie helle und dunkle Themen.

Interaktives Dashboard

Erstellen Sie ein Analytics-Dashboard für E-Commerce-Metriken. Enthalten Sie Datentabellen mit sortierbaren Spalten, Trendvisualisierungen, Filterkontrollen und Exportfunktionalität. Wenden Sie progressive Offenlegung für erweiterte Optionen an. Stellen Sie sicher, dass Tastaturnavigation und Screenreader-Unterstützung vorhanden sind. Verwenden Sie ein anspruchsvolles dunkles Thema mit entsättigten Akzenten.

Bonnes pratiques

Engagieren Sie sich für eine kühne ästhetische Richtung früh und setzen Sie sie präzise über alle Designentscheidungen hinweg um
Verwenden Sie moderne CSS-Features wie OKLCH-Farben, Container-Queries und clamp() für fluide, wartbare Designs
Entwickeln Sie alle acht interaktiven Zustände (Standard, Hover, Fokus, Aktiv, Deaktiviert, Laden, Fehler, Erfolg) für jedes interaktive Element
Wenden Sie die 60-30-10-Regel für die Farbverteilung an und halten Sie Akzentfarben selten und gezielt
Testen Sie Kontrastverhältnisse programmatisch und emulieren Sie Farbenblindheit, um Barrierefreiheit zu gewährleisten

Éviter

Verwendung generischer KI-Ästhetik: dunkler Modus mit leuchtenden Akzenten, Gradient-Text auf Metriken, Kartenraster mit identischen Layouts
Entfernen von Fokusindikatoren ohne barrierefreien Ersatz, was die Tastaturnavigation beeinträchtigt
Verwendung von Platzhaltertext als Beschriftung, wobei wichtige Formularhinweise vor den Benutzern verborgen werden
Standardmäßig reines Schwarz (#000) oder rein Grau verwenden - echte Schatten und Oberflächen haben immer subtile Farbe

Foire aux questions

Was macht dieses Skill anders als die Standard-Frontend-Code-Generierung?

Dieses Skill legt den Schwerpunkt auf unverwechselbare ästhetische Richtung und bewusste Designentscheidungen über generische, vorlagenbasierte Ausgaben. Es vermittelt spezifische Techniken, um häufige KI-Designmuster zu vermeiden und einprägsame Oberflächen zu erstellen.

Funktioniert dieses Skill mit bestimmten Frameworks wie React oder Vue?

Ja. Das Skill generiert framework-agnostisches HTML, CSS und JavaScript, das in jeden Frontend-Stack integriert wird. Geben Sie Ihr Framework in der Eingabe an.

Wie stelle ich sicher, dass die generierten Designs meiner Marke entsprechen?

Geben Sie Markenfarben, Typografiepräferenzen, Tonstichwörter (minimal, kühn, verspielt) und Referenzbeispiele in Ihrer Eingabe an. Das Skill wendet diese Einschränkungen konsistent über alle generierten Komponenten hinweg an.

Behandelt dieses Skill Barrierefreiheitsanforderungen?

Ja. Der generierte Code enthält semantisches HTML, ARIA-Attribute wo nötig, Fokuszustände, Farbkontraste, die die WCAG-Richtlinien erfüllen, und Tastaturnavigationsmuster.

Kann dieses Skill helfen, vorhandenen hässlichen Code zu refaktorieren?

Ja. Geben Sie die vorhandene Komponente oder Seite an und beschreiben Sie die gewünschte ästhetische Richtung. Das Skill bewahrt die Funktionalität und wendet gleichzeitig verbessertes visuelles Design an.

Was mache ich, wenn ich nicht weiß, welche ästhetische Richtung ich wählen soll?

Beschreiben Sie Ihr Produkt, Ihre Zielgruppe und die gewünschte emotionale Reaktion. Das Skill empfiehlt geeignete ästhetische Richtungen und erklärt die Begründung hinter jedem Vorschlag.