brand-landingpage
Erstellen einer markengeführten Landing Page mit interaktivem Brand-Interview
Die meisten Landing Pages scheitern, weil der Schritt der Markenidentität übersprungen wird. Diese Skill führt Benutzer durch ein strukturiertes Brand-Interview und generiert eine professionelle Landing Page mit einem passenden Designsystem – unter Verwendung des Stitch SDK.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "brand-landingpage". Erstelle eine Landing Page für mein API-Tool namens DataPipe
Erwartetes Ergebnis:
Die Skill fragt nach dem Produktzweck und führt dich dann durch die Auswahl von 3 Marken-Adjektiven wie clean, technisch und modern. Nach Bestätigung eines dunklen Themes mit Indigo-Akzenten generiert sie eine Desktop-Landing-Page mit Hero-Bereich, Code-Snippet, Funktionen und Footer.
Verwendung von "brand-landingpage". Die Farben wirken falsch, kannst du sie ändern?
Erwartetes Ergebnis:
Die Skill fragt, was an den Farben nicht stimmt: zu hell, zu langweilig oder der falsche Farbton. Nachdem du zu hell sagst, generiert sie eine abgemilderte Variante mit gleichem Layout, aber angepasster Farbsättigung.
Verwendung von "brand-landingpage". Ich möchte verschiedene Layout-Optionen vergleichen
Erwartetes Ergebnis:
Die Skill generiert 3 Varianten der Landing Page: mit zentriertem Hero, mit Split-Layout und mit vollbreitem Header. Sie öffnet alle drei im Browser und fragt, welche Richtung dir besser gefällt.
Sicherheitsaudit
Niedriges RisikoAll 295 static analysis findings were evaluated against actual file content. All 'weak cryptographic algorithm' findings are false positives caused by hex color codes in brand design reference tables. All 'Ruby/shell backtick execution' findings are false positives from markdown code blocks showing SDK method names and CLI commands. The 'C2 keywords', 'system reconnaissance', 'Windows SAM database', and 'Windows cmd.exe' findings are all false positives resulting from design terminology, brand interview questions, and legitimate file-opening instructions. The 'environment file access' finding is confirmed but represents proper API key management with documented security practices. The 'hardcoded URL' findings are low-severity documentation links for the Stitch SDK. The heuristic 'dangerous combination' finding is a false positive reflecting expected SDK integration patterns (API key + SDK calls + documentation references). No prompt injection, data exfiltration, or malicious intent was detected.
Probleme mit niedrigem Risiko (1)
Risikofaktoren
⚙️ Externe Befehle (7)
🌐 Netzwerkzugriff (1)
🔑 Umgebungsvariablen (1)
Qualitätsbewertung
Was du bauen kannst
Landing Page für ein Side Project erstellen
Ein Entwickler, der ein CLI-Tool oder Open-Source-Projekt entwickelt, braucht eine Landing Page, hat aber keine Designerfahrung. Diese Skill führt ein Brand-Interview durch und generiert eine professionelle Seite.
Marketingseite für ein Startup erstellen
Ein Startup in der Frühphase benötigt eine Landing Page für sein SaaS-Produkt. Die Skill hilft bei der Definition der Markenidentität und erstellt eine Seite mit Funktionen, Preisen und Testimonial-Bereichen.
Entwickler-Portfolio-Seite erstellen
Ein Entwickler oder Designer möchte eine persönliche Portfolio-Landing-Page. Die Skill führt ein Brand-Interview durch und generiert eine Seite mit vorgestellten Projekten und einem Über-mich-Bereich.
Probiere diese Prompts
Create a landing page for my project called [Project Name]. It is a [description]. The target users are [audience].
I want to design a landing page for my product [Project Name]. Let me go through the brand interview to define my visual identity first.
The hero section on my landing page feels too plain. Can you generate a variant with a bolder layout and more color contrast? Keep the color scheme.
I have a saved design session from yesterday. Resume from where I left off and help me finalize the bundle for deployment.
Bewährte Verfahren
- Absolviere das Brand-Interview auch dann, wenn du es überspringen möchtest. Die Fragen dauern 5 Minuten und machen den Unterschied zwischen einer generischen Vorlage und einer Seite, die zu deinem Produkt passt.
- Überprüfe generierte Seiten, indem du das HTML im Browser öffnest, anstatt Textbeschreibungen anzufordern. Visuelles Feedback führt zu besseren Design-Iterationen.
- Speichere deinen Stitch-API-Schlüssel vor dem Start in deiner Umgebungsvariable, damit die Skill Designs ohne Unterbrechung generieren und iterieren kann.
Vermeiden
- Die Skill bitten, dein Firmenlogo einzubetten oder Bilder hochzuladen. Das Stitch SDK generiert aus Text-Prompts und akzeptiert keine Bildeingaben.
- CSS-genaues Feedback wie padding-top: 40px hinzufügen. Übersetze Feedback in Design-Intentionen wie füge etwas mehr Luft oberhalb der Überschrift hinzu.
- Die Mobile-Variante überspringen. Das Desktop-Layout muss oft für die mobile Ansicht angepasst werden, und die Generierung beider Varianten sorgt für ein konsistentes Erlebnis.
Häufig gestellte Fragen
Brauche ich ein Stitch-Konto, um diese Skill zu nutzen?
Was passiert, wenn meine Sitzung unterbrochen wird?
Kann ich meine eigenen Markenfarben verwenden?
Funktioniert diese Skill mit Bildern und Logos?
Welche Art von Seiten kann diese Skill erstellen?
Kann ich das HTML nach der Generierung bearbeiten?
Entwicklerdetails
Autor
wshobsonLizenz
MIT
Repository
https://github.com/wshobson/agents/tree/main/plugins/brand-landingpage/skills/brand-landingpage/Ref
main
Dateistruktur