brand-landingpagedi Seth Hobson

Brand Landing Page Skill.

Una skill per Claude Code e Codex per il design UI: intervista sull'identità del brand prima, poi genera e itera una landing page tramite Stitch.

Web & UI
Codice UI

Scarica OpenDesign Guida all'uso

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

Intestazione e sezioni lette dal file originale il 2026-09-14 · 15.626 caratteri in totale

01 Cosa fa

Cosa fa la Skill brand-landingpage in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Un designer di landing page brand-first che conduce un'intervista in tre parti (scopo del prodotto, sensazione del brand, preferenze visive), traduce le risposte in un design system Stitch (mappando gli aggettivi su colorVariant, i font su headlineFont/bodyFont, le forme su roundness), genera schermate desktop e mobile, guida un affinamento iterativo tramite feedback strutturato (varianti, modifiche, rollback) e fornisce un bundle pronto per il deployment con HTML versionato, DESIGN.md, token colore e DEPLOY.md.

Per utenti che stanno costruendo landing page a scopo unico o siti di marketing di prodotto senza una direzione visiva consolidata. Non adatto a dashboard, app multi-pagina, lavoro a livello di componente o utenti con mockup di design già esistenti.

Che cosa produce

Bundle zip pronto per il deployment contenente index.html (desktop), mobile.html (se generato), DESIGN.md, color-tokens.json, asset dell'utente e checklist DEPLOY.md
DESIGN.md che documenta il design system con la sensazione del brand, la direzione colore con codice hex e motivazione, le scelte tipografiche e la descrizione della roundness delle forme
color-tokens.json con token di design strutturati: colore primario, colorMode, colorVariant, font, roundness
Checklist di deployment DEPLOY.md generata dal template in references/state-and-pitfalls.md

Vedi l'esempio di prompt ↗

Come funziona

01
Verificare l'SDK Stitch e l'Ambiente
Prima di iniziare l'intervista, la skill installa l'SDK se manca, verifica che la variabile d'ambiente della chiave API sia impostata ed effettua una chiamata SDK minima per confermare l'autenticazione.
02
Eseguire l'Intervista di Brand in Tre Parti
La fase A raccoglie il nome del prodotto, cosa fa, gli utenti target e la CTA desiderata. La fase B raccoglie 3 aggettivi di brand e la preferenza chiaro/scuro.
03
Tradurre l'Intervista in Parametri Stitch
La skill mappa gli aggettivi di brand sull'enum colorVariant, la preferenza chiaro/scuro su colorMode, la preferenza di font su headlineFont e bodyFont, e squadrato/arrotondato sull'enum roundness usando una tabella di traduzione.
04
Generare la Schermata e Aprirla nel Browser
La skill chiama generate_screen_from_text con deviceType DESKTOP, salva l'HTML restituito come desktop-v1.html in .stitch/designs/ e lo apre localmente usando il comando specifico del sistema operativo.
05
Itera Attraverso il Ciclo di Feedback
Dopo ogni generazione, la skill pone tre domande di feedback, traduce il feedback dell'utente in chiamate edit_screens per modifiche mirate o generate_variants per l'esplorazione, e salva le nuove versioni con nomi di file numerati in sequenza.
06
Consegna il Bundle di Deployment
La skill crea uno zip con l'HTML finale rinominato in index.html, mobile.html se generato, DESIGN.md che documenta il sistema di brand, color-tokens.json, gli asset dell'utente e una checklist DEPLOY.md.

02 Trova la tua applicazione

Quando Usare la Skill brand-landingpage

Utilizzare la skill brand-landingpage in Claude Code o Codex quando il lavoro è un design UI di questo tipo. Idoneità e limiti di seguito sono tratti dal file della skill stessa.

Buona applicazione

L'utente chiede di creare, progettare o costruire una landing page, una homepage o una pagina marketing e non ha una direzione visiva definita
L'utente ha realizzato un prodotto, un side project o un servizio e ha bisogno di una landing page ma non ha ancora riflettuto molto sull'identità di brand o sulla direzione visiva
Landing page a scopo unico e siti di marketing di prodotto

Conosci i limiti

L'utente ha un mockup di design
L'utente ha bisogno di una dashboard o di una UI applicativa
L'utente sta lavorando a livello di componente
L'utente sta costruendo un'app multipagina o effettuando un restyling con token di design noti (usare invece frontend-design)

Cosa fornire

Nome e finalità del prodottoCosa fa il prodotto, chi sono gli utenti target e quale azione dovrebbero compiere i visitatori (registrarsi, provare la demo, iscriversi alla waitlist).
Tre aggettivi di brandLa skill fornisce un menu di aggettivi tra cui scegliere. Necessario per passare dalla Fase B alla Fase C.
Preferenza chiaro o scuroCorrisponde direttamente al parametro colorMode (LIGHT o DARK) nel design system di Stitch.
Direzione cromaticaColori di brand o app esistenti in formato hex, oppure una sensazione cromatica se non esiste una palette definita. Corrisponde al parametro customColor.
Preferenze di font e formaLa preferenza per un font moderno o tradizionale corrisponde a headlineFont e bodyFont.

03 Dentro la skill

Regole che la Skill brand-landingpage Fornisce a Claude Code e Codex

7 istruzioni concrete, valori predefiniti e limiti che SKILL.md definisce per l'agente — la parte del file che cambia il risultato.

Non Mostrare Mai le API Key
La skill non deve mai mostrare, trascrivere o riportare la chiave API di Stitch durante la verifica dell'ambiente o la diagnosi di errori di autenticazione.
Non Chiedere Immagini
La skill non deve chiedere agli utenti di fornire immagini o logo, perché Stitch non accetta il caricamento di immagini via API.
Versiona i File HTML in Sequenza
Salva l'HTML generato come desktop-v1.html per la prima generazione, desktop-v2.html per l'iterazione successiva, e così via.
Apri Sempre l'HTML Aggiornato nel Browser
Dopo ogni generazione, modifica o selezione di variante, la skill deve salvare l'HTML aggiornato dalla risposta di Stitch e aprire il file locale nel browser dell'utente.
Proporre il rilascio dopo 3 round positivi
Dopo 3 round di feedback positivo, la skill dovrebbe chiedere: 'Questo sembra solido. Continuiamo a iterare o lo rilasciamo e lo perfezioniamo dopo?'
Quattro risposte all'intervista non negoziabili
La skill deve raccogliere nome del progetto, cosa fa, utenti target e CTA desiderata prima di passare dalla Fase A alla Fase B. Questi quattro elementi non sono negoziabili.
Non ritentare immediatamente generazioni fallite
Se la generazione fallisce, non ritentare immediatamente. Usare get_screen o list_screens per verificare se si è completata in modo asincrono.

04 Mettila al lavoro

Installa brand-landingpage in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi brand-landingpage a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

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

Forma generica della CLI skills per plugins/brand-landingpage/skills/brand-landingpage/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla skill un primo compito di progettazione UI

Il SKILL.md non include un prompt di esempio; questo starter è scritto dalla riga riassuntiva del catalogo. Sostituisci la riga del task con il tuo brief reale.

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.

Fonte: prompt iniziale scritto dall'uso in una riga del catalogo (non dal SKILL.md).

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Aprire il file HTML salvato nel browser dell'utente usando il comando specifico del sistema operativo (open su macOS, xdg-open su Linux, start su Windows) per vedere il design a piena fedeltà
Porre le tre domande di feedback: reazione istintiva nei primi 5 secondi, se questo sembra il proprio prodotto, e se c'è qualcosa che sembra sbagliato o manchi
Attirare l'attenzione dell'utente su dimensioni specifiche del design: chiarezza del messaggio, visibilità della CTA, coerenza dei colori con i loro aggettivi e flusso di lettura
Verificare che .stitch/metadata.json esista e contenga l'ID del progetto, l'ID dell'asset del design system, il riepilogo dell'intervista e la cronologia delle schermate quando si riprende una sessione
Seguire la checklist di deployment in DEPLOY.md che copre hosting, configurazione del dominio, analytics e sostituzione delle immagini

In OpenDesign importi brand-landingpage dal suo link a SKILL.md: Plugins → Add → Skill → Import from link, poi lo selezioni nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
File della skill: plugins/brand-landingpage/skills/brand-landingpage/SKILL.md Checksum del contenuto registrato alla verifica; commit 4236bb9
License: MIT Da LICENSE.
Stelle del repository: 39.635 Snapshot GitHub scattato il 14/09/2026 per l'intero repository wshobson/agents, che contiene 18 skill in questo catalogo. Non è una valutazione o un conteggio di utilizzo per brand-landingpage.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Fase 0: Prerequisiti e connessione a StitchVerificare l'installazione dell'SDK, la variabile d'ambiente della chiave API e fare una chiamata di test minima prima di iniziare l'intervista
File di riferimentoElenca quando leggere interview-framework.md, stitch-architecture.md e state-and-pitfalls.md durante il workflow
Panoramica del workflowQuattro fasi: configurazione, intervista in tre parti, traduzione del design system, ciclo di generazione e revisione, pacchetto di consegna
Fase 1: Intervista sul brandTre parti: scopo del prodotto, sensazione del brand con aggettivi, preferenze visive per colore, font e forma
Fase 2: Creazione del design systemTradurre le risposte dell'intervista in parametri Stitch usando la tabella di mappatura, creare e aggiornare il design system, scrivere DESIGN.md
Fase 3: Ciclo di generazione e revisioneGenerare la schermata desktop, aprirla nel browser, raccogliere feedback tramite tre domande, iterare con modifiche o varianti
Fase 4: Pacchetto di consegnaImpacchettare l'HTML finale, DESIGN.md, i token colore, gli asset dell'utente e la checklist DEPLOY.md in uno zip versionato
Documentazione di StitchLink alla documentazione sull'uso dell'SDK e agli esempi di DESIGN.md su stitch-design.ai
Ripresa e recupero erroriCaricare lo stato da metadata.json, gestire i fallimenti di generazione, il rate limiting e i progetti scaduti al momento della ripresa

Descrizione della skill

"Designer di landing page brand-first — conduce un'intervista sull'identità del brand (colori, tipografia, linguaggio delle forme), quindi genera e itera su una landing page rifinita tramite Stitch con HTML pronto per il deployment. Da usare quando l'utente chiede di creare, progettare o costruire una landing page, homepage o pagina marketing e non ha una direzione visiva definita. Evita quando ha un mockup di design, necessita di una dashboard o UI applicativa, lavora a livello di componente, costruisce un'app multi-pagina o applica uno styling con design token noti — usa invece frontend-design."

Descrizione front-matter da SKILL.md. Il file completo è di circa 15.626 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sulla skill brand-landingpage

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Posso fornire il mio logo o screenshot del prodotto?

Stitch genera a partire da prompt testuali e non accetta il caricamento di immagini via API. Se allega un'immagine, la skill le chiederà di descrivere a parole i colori dominanti, l'atmosfera e il linguaggio delle forme, per poi incorporare questi attributi nel design.

Il file originale viene salvato nel bundle, così può inserirlo nell'HTML finale con una semplice sostituzione del tag img.

Perché devo passare attraverso l'intervista invece di andare direttamente alla generazione?

L'intervista è il momento in cui si crea la maggior parte del valore. Senza di essa, il risultato sarebbe un template generico.

L'intervista dura circa 5 minuti e raccoglie lo scopo del prodotto, gli utenti target, gli aggettivi del brand e le preferenze visive, che la skill traduce in un design system che si adatta davvero al suo brand invece di un risultato standardizzato.

Cosa ottengo alla fine?

Un bundle zip pronto per il deployment contenente l'HTML desktop finale rinominato in index.html, mobile.html se ha richiesto una variante mobile, DESIGN.md che documenta il design system del suo brand, color-tokens.json con i token di design strutturati, eventuali asset forniti dall'utente e DEPLOY.md con una checklist di deployment. Tutte le versioni intermedie e lo stato sono conservati in .stitch/ per riferimento.

Brand Landing Page

Esegui brand-landingpage su un'attività di design UI reale.

Scarica OpenDesign, importa brand-landingpage dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

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