Compétences frontend-design
🎨

frontend-design

Sûr 🌐 Accès réseau

Produktionsreife Frontend-Schnittstellen gestalten

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

Diese Fähigkeit erstellt unverwechselbare, produktionsreife Frontend-Schnittstellen, die sich von generischen KI-generierten Designs abheben. Sie liefert polierte Web-Komponenten mit kühnen Ästhetiken und akribischer Liebe zum Detail.

Prend en charge: Claude Codex Code(CC)
🥉 73 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

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

3

Activez et commencez à utiliser

Tester

Utilisation de "frontend-design". Create a navigation bar with a brutalist design aesthetic

Résultat attendu:

  • Fette Großbuchstabentypografie mit schwerem Buchstabenabstand
  • Scharfes Schwarz-Weiß-Farbschema mit Akzentrahmen
  • Hover-Zustände mit invertierten Farben und Skalierungseffekten
  • Reines CSS-Hamburger-Menü mit sanfter Einblendanimation
  • Feste Positionierung mit Unschärfe-Hintergrundeffekt

Utilisation de "frontend-design". Design a pricing section with an organic, nature-inspired theme

Résultat attendu:

  • Weiche Erdtöne-Farbpalette mit Moosgrün und Terrakotta-Akzenten
  • Fließende geschwungene Rahmen und unregelmäßige Border-Radius-Werte
  • Subtile schwebende Partikelanimationen im Hintergrund
  • Karten-Hover-Zustände mit sanfter Anhebung und Schatten-Glühen
  • Typografie-Paarung: abgerundete Display-Schrift mit sauberer Sans-Serif-Grundschrift

Audit de sécurité

Sûr
v5 • 1/17/2026

Documentation-only skill containing markdown guidance for frontend design. No executable code, scripts, network calls, filesystem operations, or external command invocations are present. The SKILL.md file contains only design instructions and best practices.

1
Fichiers analysés
42
Lignes analysées
1
résultats
5
Total des audits

Facteurs de risque

🌐 Accès réseau (1)
skill-report.json:6
Audité par: claude Voir l’historique des audits →

Score de qualité

38
Architecture
100
Maintenabilité
85
Contenu
46
Communauté
100
Sécurité
91
Conformité aux spécifications

Ce que vous pouvez construire

Polierte Komponenten erstellen

Erstelle unverwechselbare React-, Vue- oder Vanilla-JS-Komponenten mit kreativer Ästhetik.

Schnelle Schnittstellen-Prototypisierung

Übersetze Designkonzepte in funktionierenden Frontend-Code mit mutiger visueller Richtung.

Komplette Seitenimplementierungen

Entwickle vollständige Webseiten mit kohärenten Designsystemen und ansprechenden visuellen Effekten.

Essayez ces prompts

Grundlegende Komponente 
Create a [component name] with [functional description]. Use a [specific aesthetic direction] style.
Animiertes Element 
Build an animated [element type] featuring [specific animation effects]. Choose a [mood/theme] aesthetic.
Thematischer Abschnitt 
Design a [section name] section with [brand/tone] aesthetics. Include [key elements] and [animation effects].
Vollständige Seite 
Create a complete [page type] page with [specific theme] design. Implement all sections with consistent aesthetics.

Bonnes pratiques

  • Halte an einer mutigen ästhetischen Richtung fest, bevor du kodierst, und führe sie konsequent aus
  • Verwende CSS-Variablen für konsistente Themen und einfache Anpassung im gesamten Design
  • Priorisiere reine CSS-Animationen für die Leistung, und verbessere dann mit JavaScript-Bibliotheken

Éviter

  • Verwendung generischer Schriftarten wie Arial, Inter oder Roboto ohne absichtliche Gestaltung
  • Anwendung von violetten Verläufen auf weißen Hintergründen als Standard-Styling
  • Erstellung vorhersehbarer Layouts ohne räumliches Interesse oder visuelle Überraschung

Foire aux questions

Welche Frameworks unterstützt diese Fähigkeit?
Die Fähigkeit funktioniert mit HTML/CSS/JS, React, Vue und anderen modernen Frontend-Frameworks nach Bedarf.
Kann ich diese Fähigkeit mit einem beliebigen Claude-Produkt verwenden?
Ja, diese Fähigkeit ist mit Claude, Codex und Claude Code für Frontend-Design-Aufgaben kompatibel.
Erstellt diese Fähigkeit Animationseffekte?
Ja, die Fähigkeit implementiert CSS-Animationen, Mikro-Interaktionen und kann Animationsbibliotheken wie Motion für React verwenden.
Wie erhalte ich jedes Mal einzigartige Designs?
Gib spezifische ästhetische Richtungen an. Die Fähigkeit vermeidet absichtlich gängige Entscheidungen, um unverwechselbare Designs zu generieren.
Ist der generierte Code produktionsreif?
Ja, die Fähigkeit produziert funktionalen, produktionsreifen Code, der Best Practices und moderne Standards befolgt.
Kann ich dunkle Themen oder spezifische Farbpaletten anfordern?
Ja, gib deine Themenpräferenzen an. Die Fähigkeit unterstützt helle, dunkle und benutzerdefinierte Themen-Designs mit CSS-Variablen.

Détails du développeur

Auteur

anthropics

Licence

Complete terms in LICENSE.txt

Dépôt

https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design/skills/frontend-design

Réf

main

Structure de fichiers

📄 SKILL.md