frontend-dev
Frontend-Seiten mit KI-Medien erstellen
Die Erstellung professioneller Webseiten erfordert Design-, Medien-, Animations- und Texterstellungskompetenzen. Diese Fähigkeit kombiniert alle fünf Fähigkeiten in einem Workflow und erstellt vollständige Seiten mit KI-generierten Bildern, Videos, Musik, Voiceovers und Scroll-Animationen.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "frontend-dev". Erstelle eine Landingpage für eine Fitness-App mit Hero-Bild und Feature-Bereichen
Erwartetes Ergebnis:
- Generiert: index.html mit React-Komponenten
- Generiert: Hero-Bild über MiniMax Image API
- Generiert: Framer Motion Scroll-Animationen für Feature-Karten
- Generiert: Tailwind CSS-Styling mit responsivem Layout
Verwendung von "frontend-dev". Erstelle eine Produktseite mit KI-Video-Demo und Hintergrundmusik
Erwartetes Ergebnis:
- Generiert: Next.js-Seite mit Video-Hero-Bereich
- Generiert: KI-Videoclip über MiniMax Video API mit Push-in Kamera-Bewegung
- Generiert: Ambient-Hintergrundmusik über MiniMax Music API
- Generiert: GSAP-Timeline für scroll-getriggerte Content-Reveals
Sicherheitsaudit
Niedriges RisikoStatic analysis flagged 1176 patterns with a risk score of 100/100, but evaluation confirms these are overwhelmingly false positives. High-severity 'weak cryptographic algorithm' findings in canvas-fonts/*.txt files are font Open Font License texts, not crypto code. 'Ruby/shell backtick execution' findings in markdown reference files are backtick-enclosed code examples in documentation. 'Windows SAM database' finding at templates/viewer.html:508 is the word 'CUSTOMIZE' containing the substring 'SAM'. regex.exec() in generator_template.js:133 is a standard JavaScript hex color parser. The skill is a legitimate frontend development tool with MiniMax API client scripts that properly use environment variables for API key management. Low risk after review.
Probleme mit mittlerem Risiko (2)
Probleme mit niedrigem Risiko (6)
Risikofaktoren
🌐 Netzwerkzugriff (70)
⚙️ Externe Befehle (841)
🔑 Umgebungsvariablen (51)
📁 Dateisystemzugriff (16)
⚡ Enthält Skripte (1)
Qualitätsbewertung
Was du bauen kannst
Erstellung von Marketing-Landingpages
Ein Startup-Gründer benötigt eine Landingpage mit Hero-Bildern, Hintergrundvideo und überzeugenden Texten. Die Fähigkeit erstellt die vollständige Seite mit KI-generierten Medien-Assets.
Portfolio-Website mit generativer Kunst
Ein Designer möchte ein Portfolio mit interaktiver p5.js generativer Kunst, sanften Seitenübergängen und benutzerdefinierter Typografie. Die Fähigkeit erstellt das Kunstsystem und das vollständige Site-Layout.
Produkt-Demo mit Voiceover und Video
Ein Produktmanager benötigt eine Demo-Seite mit KI-nominierten Tutorials, generierter Hintergrundmusik und Produkt-Showcase-Bildern. Die Fähigkeit erstellt alle Medien und assembliert die Seite.
Probiere diese Prompts
Erstelle eine Landingpage für einen Kaffee-Abonnementdienst. Binde einen Hero-Bereich, ein Feature-Grid und Preis-Karten ein. Verwende React mit Tailwind CSS.
Erstelle eine Reise-Blog-Homepage mit KI-generierten Hero-Bildern für Reiseziele: 'tropischer Strand Sonnenuntergang', 'Bergdorf Morgen', 'Stadt-Skyline bei Nacht'. Verwende Next.js mit Framer Motion für Fade-in-Animationen.
Erstelle eine Produkt-Launch-Seite mit einem KI-generierten Hero-Video, Hintergrundmusik und einem vertonten Produkt-Demo-Bereich. Verwende KI-Bilder für Feature-Karten. Integriere scroll-getriggerte Animationen mit GSAP. Deploy als Pure HTML.
Erstelle eine interaktive Kunstgalerie-Seite mit einem p5.js generativen Kunstwerk als Hero. Binde ein Parameter-Kontrollpanel ein, mit dem Benutzer die Kunst anpassen können. Füge KI-generierte Ambient-Hintergrundmusik hinzu. Verwende Vue mit kinematischen Scroll-Animationen.
Bewährte Verfahren
- Setze die Umgebungsvariablen MINIMAX_API_KEY und MINIMAX_API_BASE, bevor du Medien-Generierungsfunktionen verwendest
- Verwende spezifische, detaillierte Prompts für die KI-Medien-Generierung, um Ergebnisse höherer Qualität zu erhalten
- Teste generierte Medien-Assets vor dem Deployment in die Produktion, da die KI-Ausgabequalität variiert
Vermeiden
- Committe keine API-Schlüssel in die Versionskontrolle, verwende immer Umgebungsvariablen
- Verwende KI-generierte Medien nicht ohne Überprüfung auf Qualität und Angemessenheit
- Vermeide das Generieren zu vieler Medien-Assets parallel, da dies die API-Rate-Limits überschreiten kann