frontend-design
Entwerfen Sie unverwechselbare produktionsreife Frontend-Oberflächen
Également disponible depuis: 7Spade,CesarAugustusGroB,am-will,1bertogit,1bertogit,7Spade,davila7,DennisLiuCk,92Bilal26,anthropics,YYH211,pbakaus,92Bilal26,ZhanlinCui,Azeem-2,AdamAugustinsky,AI-Vibe-Prompts,AgentWorkforce,AJV009,anthropics
Generische KI-generierte UIs缺乏 visuelle Identität und Prägnanz. Diese Fähigkeit wendet das DFII-Framework an, um intentionale, hochwertige Interfaces mit kohäsiver Ästhetik zu schaffen, die sich abheben.
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". Entwerfen Sie eine Hero-Section mit retro-futuristischer Ästhetik für ein Weltraumtourismus-Startup
Résultat attendu:
Hero-Section mit: Gradient-Mesh-Hintergrund mit Übergang von tiefem Purpur zu Türkis, eigener Display-Schrift (Orbitron) für Überschrift, asymmetrisches Text-Layout mit überlappenden Elementen, Grain-Overlay-Textur, einzelne wirkungsvolle Floating-Animation auf CTA-Button, Sternenhintergrund-Partikeleffekt nur mit CSS. DFII-Score: 13 (Exzellente Ausführung mit starker ästhetischer Kohäsion).
Utilisation de "frontend-design". Erstellen Sie eine Pricing-Card-Komponente mit luxuriös-minimaler Ästhetik
Résultat attendu:
Dreistufige Pricing-Cards mit: großzügigem Whitespace (48px Basiseinheit), raffinierter Serif-Display-Schrift (Playfair Display) kombiniert mit geometrischer Sans (Jost), monochromatische Basis mit Goldakzent nur auf primärem CTA, subtilem Box-Shadow mit 20% Opazität, sanfter Scale-Transform bei Hover, Häkchen-Icons als SVG. Vermeidet generische Purpur-Gradienten und symmetrische Layouts.
Audit de sécurité
SûrAll 36 static analysis findings are false positives. The skill contains only markdown documentation describing a frontend design methodology (DFII framework). No executable code, network calls, or command execution present. The LICENSE.txt is standard Apache 2.0 text. Safe for publication.
Score de qualité
Ce que vous pouvez construire
Landing-Page-Design
Erstellen Sie eine unvergessliche Landing-Page mit editorial-brutalistischer Ästhetik, einschließlich eigener Typografie-Hierarchie, asymmetrischem Layout und wirkungsvollen Eingangsanimationen.
Dashboard-Komponentenbibliothek
Bauen Sie einen kohäsiven Satz von Dashboard-Komponenten mit luxuriös-minimaler Ästhetik, unter Verwendung einer zurückhaltenden Farbpalette, präziser Abstände und raffinierter Mikrointeraktionen.
Marken-Website-Redesign
Gestalten Sie eine bestehende Website mit retro-futuristischer Ästhetikrichtung neu, unter Implementierung von eigenen Gradient-Meshes, geschichteter Transluzenz und unverwechselbaren Bewegungsmustern.
Essayez ces prompts
Entwerfen Sie eine Signup-Form-Komponente mit luxuriös-minimaler Ästhetik. Fügen Sie intentionale Typografie-Entscheidungen, eine dominante Farbgeschichte mit einem Akzent und zweckgerichteten Whitespace hinzu. Stellen Sie vollständiges HTML und CSS bereit.
Erstellen Sie eine Produkt-Landing-Page. Bewerten Sie zunächst die Designrichtung mit dem DFII-Framework über alle fünf Dimensionen hinweg. Streben Sie einen Score von 12 oder höher an. Verwenden Sie industriell-utilitaristische Ästhetik mit intentionaler asymmetrischer Komposition.
Definieren Sie ein komplettes Design-System für ein Fintech-Dashboard. Spezifizieren Sie: Display- und Body-Schrift-Paarungen mit Begründung, CSS-Variablen-Farbsystem mit einem dominanten Ton und einem Akzent, Abstands-Rhythmus und Motion-Philosophie. Implementieren Sie dann eine Beispiel-Card-Komponente.
Transformieren Sie diese generische Button-Komponente in etwas Unvergessliches mit editorial-brutalistischer Ästhetik. Erklären Sie, was sie von typischen KI-generierten UIs unterscheidet. Fügen Sie Hover-Zustände und Fokus-Styles für Barrierefreiheit hinzu.
Bonnes pratiques
- Geben Sie die Ästhetikrichtung immer explizit an, bevor Sie Code schreiben
- Verwenden Sie das DFII-Framework, um zu validieren, dass Designentscheidungen einen Score von 8 oder höher erreichen
- Fügen Sie mindestens einen prägnanten Design-Anker hinzu, der sich von generischen Templates unterscheidet
Éviter
- Verwendung von System-Schriften oder AI-Defaults wie Inter, Roboto oder Arial ohne intentionale Begründung
- Anwendung von generischen Purpur-zu-Weiß-SaaS-Gradienten ohne ästhetische Rechtfertigung
- Erstellung von symmetrischen, vorhersagbaren Section-Layouts, die wie jede beliebige Vorlage aussehen könnten