brand-landingpagevon Seth Hobson

Brand Landing Page Skill.

Ein Skill für Claude Code und Codex für UI-Design: führt zuerst ein Markenidentitäts-Interview durch und generiert dann eine Landing Page über Stitch mit Iterationsmöglichkeit.

Web & UI
UI-Code

OpenDesign herunterladen Anleitung ansehen

wshobson/agents · plugins/brand-landingpage/skills/brand-landingpage/SKILL.mdSKILL.md

--- name: brand-landingpage description: Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at … --- ## Phase 0: Prerequisites & Stitch Connection ## Phase 1: Brand Interview ## Phase 2: Design System Creation ## Phase 3: Generate & Review Loop ## Phase 4: Delivery Bundle ## Stitch Documentation

Front matter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 15.626 Zeichen insgesamt

01 Was es tut

Was der brand-landingpage Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Ein markenorientierter Landingpage-Designer, der ein dreiteiliges Interview führt (Produktzweck, Markengefühl, visuelle Präferenzen), die Antworten in ein Stitch-Design-System übersetzt (Adjektive auf colorVariant, Schriften auf headlineFont/bodyFont, Formen auf roundness), Desktop- und Mobile-Screens generiert, iterative Verfeinerung durch strukturiertes Feedback anleitet (Varianten, Bearbeitungen, Rollback) und ein deploymentfertiges Bundle mit versioniertem HTML, DESIGN.md, Farb-Tokens und DEPLOY.md liefert.

Für Nutzer, die zweckgebundene Landingpages oder Produktmarketing-Websites erstellen und noch keine etablierte visuelle Ausrichtung haben. Nicht geeignet für Dashboards, mehrseitige Apps, Arbeit auf Komponentenebene oder Nutzer mit vorhandenen Design-Mockups.

Was er erzeugt

Deploymentfertiges Zip-Bundle mit index.html (Desktop), mobile.html (falls generiert), DESIGN.md, color-tokens.json, Nutzer-Assets und der DEPLOY.md-Checkliste
DESIGN.md dokumentiert das Design-System mit Markengefühl, Farbrichtung mit Hex-Wert und Begründung, Typografie-Entscheidungen und Beschreibung der Formenrundung
color-tokens.json mit strukturierten Design-Tokens: Primärfarbe, colorMode, colorVariant, Schriften, roundness
DEPLOY.md-Deployment-Checkliste, generiert aus der Vorlage in references/state-and-pitfalls.md

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Stitch SDK und Umgebung überprüfen
Vor Beginn des Interviews installiert der Skill das SDK, falls es fehlt, prüft, ob die Umgebungsvariable für den API-Schlüssel gesetzt ist, und führt einen minimalen SDK-Aufruf zur Bestätigung der Authentifizierung aus.
02
Dreiteiliges Marken-Interview durchführen
Phase A erfasst Produktname, Funktion, Zielgruppe und gewünschten CTA. Phase B erfasst 3 Marken-Adjektive und die Präferenz für Hell/Dunkel.
03
Interview in Stitch-Parameter übersetzen
Der Skill ordnet Marken-Adjektive dem colorVariant-Enum zu, Hell/Dunkel dem colorMode, die Schriftpräferenz headlineFont und bodyFont sowie scharf/rund dem roundness-Enum – mithilfe einer Übersetzungstabelle.
04
Screen generieren und im Browser öffnen
Der Skill ruft generate_screen_from_text mit deviceType DESKTOP auf, speichert das zurückgegebene HTML als desktop-v1.html in .stitch/designs/ und öffnet es lokal mit dem OS-spezifischen Befehl.
05
Feedback-Schleife durchlaufen
Nach jeder Generierung stellt der Skill drei Feedback-Fragen, übersetzt das Nutzerfeedback in edit_screens-Aufrufe für gezielte Änderungen oder generate_variants zur Exploration und speichert neue Versionen mit fortlaufend nummerierten Dateinamen.
06
Deployment-Bundle ausliefern
Der Skill erstellt ein ZIP mit dem finalen HTML, umbenannt in index.html, mobile.html (falls generiert), DESIGN.md mit Dokumentation des Brand-Systems, color-tokens.json, Nutzer-Assets und einer DEPLOY.md-Checkliste.

02 Finden Sie Ihren Favoriten

Wann das brand-landingpage Skill verwendet wird

Verwenden Sie den brand-landingpage Skill in Claude Code oder Codex, wenn die Aufgabe UI-Design dieser Art ist. Eignung und Grenzen stammen aus der eigenen Datei des Skills.

Gut geeignet

Nutzer bittet um die Erstellung, Gestaltung oder den Aufbau einer Landingpage, Homepage oder Marketingseite und hat noch keine etablierte visuelle Richtung
Nutzer hat ein Produkt, ein Nebenprojekt oder einen Service entwickelt und benötigt eine Landingpage, hat sich aber noch wenig mit Markenidentität oder visueller Richtung beschäftigt
Landingpages mit einem einzigen Zweck und Produktmarketing-Websites

Grenzen kennen

Nutzer hat ein Design-Mockup
Nutzer benötigt ein Dashboard oder eine App-UI
Nutzer arbeitet auf Komponentenebene
Nutzer baut eine mehrseitige App oder gestaltet mit bekannten Design-Tokens neu (stattdessen frontend-design verwenden)

Was Sie bereitstellen sollten

Produktname und ZweckWas das Produkt tut, wer die Zielnutzer sind und welche Aktion Besucher ausführen sollen (registrieren, Demo testen, Warteliste beitreten).
Drei Marken-AdjektiveDer Skill bietet eine Auswahl an Adjektiven zur Auswahl. Erforderlich, um von Phase B zu Phase C zu wechseln.
Präferenz für Hell oder DunkelWird direkt auf den Parameter colorMode (LIGHT oder DARK) im Stitch-Designsystem abgebildet.
FarbrichtungBestehende Marken- oder App-Farben als Hex-Wert oder ein Farbgefühl, falls keine etablierte Palette vorhanden ist. Wird auf den Parameter customColor abgebildet.
Schrift- und FormpräferenzenDie Präferenz für moderne vs. traditionelle Schrift wird auf headlineFont und bodyFont abgebildet.

03 Innerhalb des Skills

Regeln, die der brand-landingpage-Skill Claude Code und Codex vorgibt

7 konkrete Anweisungen, Voreinstellungen und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

API-Keys niemals anzeigen
Der Skill darf den Stitch-API-Key beim Prüfen der Umgebung oder bei der Diagnose von Authentifizierungsfehlern niemals anzeigen, transkribieren oder wiedergeben.
Nicht nach Bildern fragen
Der Skill darf Nutzer nicht bitten, Bilder oder Logos bereitzustellen, da Stitch keine Bild-Uploads über die API akzeptiert.
HTML-Dateien fortlaufend versionieren
Speichern Sie das generierte HTML für die erste Generierung als desktop-v1.html, für die nächste Iteration als desktop-v2.html und so weiter.
Aktualisiertes HTML stets im Browser öffnen
Nach jeder Generierung, Bearbeitung oder Variantenauswahl muss der Skill das aktualisierte HTML aus der Stitch-Antwort speichern und die lokale Datei im Browser des Nutzers öffnen.
Nach 3 positiven Runden zum Abschluss auffordern
Nach 3 Runden positiven Feedbacks sollte der Skill fragen: „Das sieht solide aus. Weiter iterieren oder jetzt ausliefern und später verfeinern?“
Vier nicht verhandelbare Interviewantworten
Der Skill muss Projektname, Funktion, Zielgruppe und gewünschten CTA erfassen, bevor er von Phase A zu Phase B übergeht. Diese vier sind nicht verhandelbar.
Fehlgeschlagene Generierungen nicht sofort wiederholen
Wenn die Generierung fehlschlägt, nicht sofort erneut versuchen. Mit get_screen oder list_screens prüfen, ob sie asynchron abgeschlossen wurde.

04 In Betrieb nehmen

Installation von brand-landingpage in Claude Code oder Codex

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

Fügen Sie brand-landingpage zu Claude Code, Codex oder Ihrem Agent hinzu

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/wshobson/agents --skill brand-landingpage

Allgemeine skills-CLI-Form für plugins/brand-landingpage/skills/brand-landingpage/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste UI-Design-Aufgabe geben

Die SKILL.md enthält keinen Beispiel-Prompt; dieser Starter ist aus der Katalog-Einzeiler geschrieben. Ersetzen Sie die Aufgabenzeile mit Ihrem echten Briefing.

Starter prompt

Use the brand-landingpage skill on the material I attach. What the skill should do here: Brand-identity interview first, then generates and iterates a landing page through Stitch. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Quelle: Starter-Prompt geschrieben aus der Katalog-Einzeilen-Verwendung (nicht aus der SKILL.md).

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Öffnen Sie die gespeicherte HTML-Datei im Browser des Nutzers mit einem betriebssystemspezifischen Befehl (open unter macOS, xdg-open unter Linux, start unter Windows), um das Design in voller Detailtreue zu sehen
Stellen Sie die drei Feedback-Fragen: Bauchgefühl in den ersten 5 Sekunden, fühlt sich das wie Ihr Produkt an, und gibt es etwas, das falsch oder fehlend wirkt
Lenken Sie die Aufmerksamkeit des Nutzers auf bestimmte Designdimensionen: Klarheit der Botschaft, Sichtbarkeit des CTA, Übereinstimmung der Farben mit den genannten Adjektiven und Leserichtung
Beim Fortsetzen einer Sitzung prüfen, ob .stitch/metadata.json existiert und Projekt-ID, Asset-ID des Design-Systems, Interview-Zusammenfassung und Screen-Verlauf enthält
Befolgen Sie die Deployment-Checkliste in DEPLOY.md, die Hosting, Domain-Einrichtung, Analytics und Bildaustausch abdeckt

In OpenDesign importieren Sie brand-landingpage über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill-Datei: plugins/brand-landingpage/skills/brand-landingpage/SKILL.md Inhalts-Prüfsumme bei Verifikation aufgezeichnet; Commit 4236bb9
License: MIT Aus LICENSE.
Repository-Sterne: 39.635 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository wshobson/agents, das 18 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für brand-landingpage.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Phase 0: Voraussetzungen & Stitch-VerbindungVor Beginn des Interviews SDK-Installation, API-Key-Umgebungsvariable prüfen und einen minimalen Testaufruf durchführen
ReferenzdateienListet auf, wann interview-framework.md, stitch-architecture.md und state-and-pitfalls.md während des Workflows zu lesen sind
Workflow-ÜbersichtVier Phasen: Einrichtung, dreiteiliges Interview, Übersetzung ins Design-System, Generierungs- und Review-Schleife, Auslieferungspaket
Phase 1: MarkeninterviewDrei Teile: Produktzweck, Markengefühl mit Adjektiven, visuelle Vorlieben für Farbe, Schrift und Form
Phase 2: Erstellung des Design-SystemsInterviewantworten mithilfe einer Zuordnungstabelle in Stitch-Parameter übersetzen, Design-System erstellen und aktualisieren, DESIGN.md schreiben
Phase 3: Generierungs- & Review-SchleifeDesktop-Screen generieren, im Browser öffnen, Feedback über drei Fragen einholen, mit Bearbeitungen oder Varianten iterieren
Phase 4: AuslieferungspaketFinales HTML, DESIGN.md, Farb-Tokens, Nutzer-Assets und die DEPLOY.md-Checkliste in einem versionierten ZIP verpacken
Stitch-DokumentationLinks zur SDK-Nutzungsdokumentation und zu DESIGN.md-Beispielen auf stitch-design.ai
Fortsetzung & FehlerbehebungZustand aus metadata.json laden, Generierungsfehler, Rate-Limiting und abgelaufene Projekte beim Fortsetzen behandeln

Die eigene Beschreibung des Skills

„Brand-First-Landingpage-Designer — führt ein Interview zur Markenidentität (Farben, Typografie, Formensprache) durch und generiert dann über Stitch eine ausgearbeitete Landing-Page mit deployment-fertigem HTML, die iteriert werden kann. Verwenden Sie diesen Skill, wenn der Nutzer eine Landing-Page, Homepage oder Marketing-Seite erstellen, gestalten oder bauen möchte und keine etablierte visuelle Richtung hat. Überspringen Sie ihn, wenn der Nutzer ein Design-Mockup hat, ein Dashboard oder eine App-UI benötigt, auf Komponentenebene arbeitet, eine mehrseitige App baut oder mit bekannten Design-Tokens neu gestaltet — verwenden Sie stattdessen frontend-design."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst ca. 15.626 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

06 Vor der Installation

Fragen zum Skill brand-landingpage

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Kann ich mein eigenes Logo oder eigene Produkt-Screenshots bereitstellen?

Stitch generiert aus Textprompts und akzeptiert keine Bild-Uploads über die API. Wenn Sie ein Bild anhängen, bittet der Skill Sie, die dominanten Farben, die Stimmung und die Formsprache in eigenen Worten zu beschreiben, und bindet diese Attribute anschließend in das Design ein.

Ihre Originaldatei wird im Bundle gespeichert, sodass Sie sie durch einen einfachen Austausch des img-Tags in das finale HTML einfügen können.

Warum muss ich das Interview durchlaufen, statt direkt zur Generierung zu springen?

Im Interview entsteht der Großteil des Werts. Ohne dieses Interview wäre das Ergebnis nur eine generische Vorlage.

Das Interview dauert etwa 5 Minuten und erfasst Produktzweck, Zielgruppe, Marken-Adjektive und visuelle Vorlieben. Der Skill übersetzt dies in ein Designsystem, das tatsächlich zu Ihrer Marke passt, statt eine Einheitslösung zu liefern.

Was erhalte ich am Ende?

Ein einsatzbereites Zip-Bundle mit dem finalen Desktop-HTML, umbenannt in index.html, mobile.html, falls Sie eine mobile Variante angefordert haben, DESIGN.md mit der Dokumentation Ihres Marken-Designsystems, color-tokens.json mit strukturierten Design-Tokens, allen vom Nutzer bereitgestellten Assets sowie DEPLOY.md mit einer Deployment-Checkliste. Alle Zwischenversionen und der Zustand bleiben zur Referenz in .stitch/ erhalten.

Brand Landing Page

Führen Sie brand-landingpage bei einer echten UI-Design-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie brand-landingpage über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen