brand-landingpagepor Seth Hobson

Brand Landing Page Skill.

Uma skill de Claude Code e Codex para design de UI: entrevista de identidade de marca primeiro, depois gera e itera uma landing page através do Stitch.

Web & UI
Código de UI

Baixar OpenDesign Ver guia de 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

Metadados e títulos de seção lidos do arquivo original em 14/09/2026 · 15.626 caracteres no total

01 O que faz

O que o Skill brand-landingpage Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Um designer de landing pages orientado por marca que conduz uma entrevista em três partes (propósito do produto, sensação de marca, preferências visuais), traduz as respostas em um design system do Stitch (mapeando adjetivos para colorVariant, fontes para headlineFont/bodyFont, formas para roundness), gera telas para desktop e mobile, conduz um refinamento iterativo por meio de feedback estruturado (variantes, edições, rollback) e entrega um pacote pronto para implantação com HTML versionado, DESIGN.md, tokens de cor e DEPLOY.md.

Para usuários que estão criando landing pages de propósito único ou sites de marketing de produto sem direção visual estabelecida. Não é indicado para dashboards, aplicativos multipágina, trabalho no nível de componente ou usuários com mockups de design já existentes.

O que ele produz

Pacote zip pronto para implantação contendo index.html (desktop), mobile.html (se gerado), DESIGN.md, color-tokens.json, ativos do usuário e a checklist DEPLOY.md
DESIGN.md documentando o design system com sensação de marca, direção de cor com hex e justificativa, escolhas tipográficas e descrição do arredondamento das formas
color-tokens.json com tokens de design estruturados: cor primária, colorMode, colorVariant, fontes, roundness
Checklist de implantação DEPLOY.md gerada a partir do modelo em references/state-and-pitfalls.md

Veja o exemplo de prompt ↗

Como funciona

01
Verificar o SDK do Stitch e o Ambiente
Antes de iniciar a entrevista, o skill instala o SDK se estiver ausente, verifica se a variável de ambiente da chave de API está definida e faz uma chamada mínima ao SDK para confirmar a autenticação.
02
Executar a Entrevista de Marca em Três Partes
A Fase A capta o nome do produto, o que ele faz, o público-alvo e o CTA desejado. A Fase B capta 3 adjetivos de marca e a preferência por modo claro/escuro.
03
Traduzir a Entrevista em Parâmetros do Stitch
O skill mapeia os adjetivos de marca para o enum colorVariant, claro/escuro para colorMode, a preferência de fonte para headlineFont e bodyFont, e agudo/arredondado para o enum roundness, usando uma tabela de tradução.
04
Gerar Tela e Abrir no Navegador
O skill chama generate_screen_from_text com deviceType DESKTOP, salva o HTML retornado como desktop-v1.html em .stitch/designs/ e o abre localmente usando o comando específico do sistema operacional.
05
Iterar Pelo Loop de Feedback
Após cada geração, o skill faz três perguntas de feedback, traduz o feedback do usuário em chamadas edit_screens para alterações pontuais ou generate_variants para exploração, e salva novas versões com nomes de arquivo incrementados.
06
Entregar Pacote de Implantação
O skill cria um zip com o HTML final renomeado para index.html, mobile.html se gerado, DESIGN.md documentando o sistema de marca, color-tokens.json, os assets do usuário e um checklist DEPLOY.md.

02 Encontre o ideal para você

Quando Usar a Skill brand-landingpage

Use a skill brand-landingpage no Claude Code ou Codex quando o trabalho for design de UI deste tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

O usuário pede para criar, projetar ou construir uma landing page, homepage ou página de marketing e não tem direção visual estabelecida
O usuário construiu um produto, projeto pessoal ou serviço e precisa de uma landing page, mas não pensou muito sobre identidade de marca ou direção visual
Landing pages de propósito único e sites de marketing de produto

Conheça os Limites

O usuário tem um mockup de design
O usuário precisa de um dashboard ou UI de aplicativo
O usuário está trabalhando no nível de componente
O usuário está construindo um app com várias páginas ou reestilizando com tokens de design conhecidos (use frontend-design em vez disso)

O Que Fornecer

Nome e propósito do produtoO que o produto faz, quem são os usuários-alvo e qual ação os visitantes devem realizar (cadastrar-se, testar a demo, entrar na lista de espera).
Três adjetivos de marcaO skill oferece um menu de adjetivos para escolher. Necessário para avançar da Fase B para a Fase C.
Preferência por claro ou escuroMapeia diretamente para o parâmetro colorMode (LIGHT ou DARK) no sistema de design do Stitch.
Direção de corCores de marca ou aplicativo existentes em hex, ou uma sensação de cor se não houver paleta estabelecida. Mapeia para o parâmetro customColor.
Preferências de fonte e formaA preferência entre fonte moderna e tradicional mapeia para headlineFont e bodyFont.

03 Dentro da skill

Regras que o Skill brand-landingpage Dá ao Claude Code e ao Codex

7 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Nunca Exibir Chaves de API
O skill nunca deve exibir, transcrever ou repetir a chave de API do Stitch ao verificar o ambiente ou diagnosticar falhas de autenticação.
Não Pedir Imagens
O skill não deve pedir que os usuários forneçam imagens ou logos, pois o Stitch não aceita uploads de imagem via API.
Versionar Arquivos HTML Sequencialmente
Salve o HTML gerado como desktop-v1.html para a primeira geração, desktop-v2.html para a iteração seguinte, e assim por diante.
Sempre Abrir o HTML Atualizado no Navegador
Após cada geração, edição ou seleção de variante, o skill deve salvar o HTML atualizado da resposta do Stitch e abrir o arquivo local no navegador do usuário.
Sugerir Publicação Após 3 Rodadas Positivas
Após 3 rodadas de feedback positivo, o skill deve perguntar: 'Isso está ficando sólido. Continuar iterando ou publicar e refinar depois?'
Quatro Respostas Obrigatórias da Entrevista
O skill deve coletar o nome do projeto, o que ele faz, os usuários-alvo e o CTA desejado antes de passar da Fase A para a Fase B. Esses quatro itens são obrigatórios.
Não Repetir Gerações com Falha Imediatamente
Se a geração falhar, não tente novamente de imediato. Use get_screen ou list_screens para verificar se foi concluída de forma assíncrona.

04 Coloque em prática

Instalar brand-landingpage no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar brand-landingpage ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

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

Formato genérico da CLI skills para plugins/brand-landingpage/skills/brand-landingpage/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Design de UI

O SKILL.md não inclui um prompt de exemplo; este inicial foi escrito a partir da descrição resumida do catálogo. Substitua a linha da tarefa pelo seu briefing real.

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.

Origem: prompt inicial escrito a partir do uso resumido do catálogo (não do SKILL.md).

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Abra o arquivo HTML salvo no navegador do usuário usando o comando específico do sistema operacional (open no macOS, xdg-open no Linux, start no Windows) para ver o design em fidelidade total
Faça as três perguntas de feedback: reação instintiva nos primeiros 5 segundos, se isso parece com o seu produto, e se há algo que parece errado ou faltando
Chame a atenção do usuário para dimensões específicas do design: clareza da mensagem, visibilidade do CTA, alinhamento de cores com os adjetivos escolhidos e fluxo de leitura
Verifique se .stitch/metadata.json existe e contém o ID do projeto, o ID do ativo do design system, o resumo da entrevista e o histórico de telas ao retomar uma sessão
Siga a lista de verificação de implantação em DEPLOY.md, que cobre hospedagem, configuração de domínio, analytics e substituição de imagens

No OpenDesign importe o brand-landingpage a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Arquivo da skill: plugins/brand-landingpage/skills/brand-landingpage/SKILL.md Checksum de conteúdo registrado na verificação; commit 4236bb9
License: MIT Do LICENSE.
Estrelas do repositório: 39.635 Snapshot do GitHub capturado em 14/09/2026 para todo o repositório wshobson/agents, que contém 18 skills neste catálogo. Não é uma classificação ou contagem de uso para brand-landingpage.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Fase 0: Pré-requisitos e Conexão com o StitchVerifique a instalação do SDK, a variável de ambiente da chave de API e faça uma chamada de teste mínima antes de iniciar a entrevista
Arquivos de ReferênciaLista quando ler interview-framework.md, stitch-architecture.md e state-and-pitfalls.md durante o workflow
Visão Geral do WorkflowQuatro fases: configuração, entrevista em três partes, tradução do design system, ciclo de geração e revisão, pacote de entrega
Fase 1: Entrevista de MarcaTrês partes: propósito do produto, sensação da marca com adjetivos, preferências visuais de cor, fonte e forma
Fase 2: Criação do Design SystemTraduza as respostas da entrevista para parâmetros do Stitch usando a tabela de mapeamento, crie e atualize o design system, escreva o DESIGN.md
Fase 3: Ciclo de Geração e RevisãoGere a tela desktop, abra no navegador, colete feedback por meio de três perguntas, itere com edições ou variantes
Fase 4: Pacote de EntregaEmpacote o HTML final, o DESIGN.md, os tokens de cor, os ativos do usuário e a lista de verificação DEPLOY.md em um zip versionado
Documentação do StitchLinks para a documentação de uso do SDK e exemplos de DESIGN.md em stitch-design.ai
Retomada e Recuperação de ErrosCarregue o estado a partir de metadata.json, trate falhas de geração, limitação de taxa e projetos expirados ao retomar

A Descrição da Própria Skill

Designer de landing pages focado em marca — conduz uma entrevista de identidade de marca (cores, tipografia, linguagem de formas), depois gera e itera uma landing page polida via Stitch com HTML pronto para deploy. Use quando o usuário pede para criar, projetar ou construir uma landing page, homepage ou página de marketing e não tem direção visual estabelecida. Pule quando ele tem um mockup de design, precisa de um dashboard ou UI de aplicativo, está trabalhando no nível de componente, construindo um aplicativo de várias páginas ou reformulando com tokens de design conhecidos — use frontend-design em vez disso.

Descrição do front-matter de SKILL.md. O arquivo completo tem cerca de 15.626 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre o Skill brand-landingpage

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Posso fornecer meu próprio logotipo ou capturas de tela do produto?

O Stitch gera a partir de prompts de texto e não aceita upload de imagens via API. Se você anexar uma imagem, o skill pedirá que você descreva suas cores dominantes, o clima e a linguagem de formas com suas próprias palavras, e então incorporará esses atributos ao design.

Seu arquivo original é salvo no pacote para que você possa substituí-lo no HTML final com uma simples troca da tag img.

Por que preciso passar pela entrevista em vez de ir direto para a geração?

A entrevista é onde a maior parte do valor é criado. Sem ela, o resultado seria um modelo genérico.

A entrevista leva cerca de 5 minutos e captura o propósito do produto, os usuários-alvo, adjetivos de marca e preferências visuais, que o skill converte em um sistema de design que realmente se encaixa na sua marca em vez de um resultado padronizado.

O que eu recebo no final?

Um pacote zip pronto para deploy contendo o HTML final de desktop renomeado para index.html, mobile.html se você solicitou uma variante mobile, DESIGN.md documentando o sistema de design da sua marca, color-tokens.json com tokens de design estruturados, quaisquer assets fornecidos pelo usuário, e DEPLOY.md com uma checklist de deploy. Todas as versões intermediárias e o estado são preservados em .stitch/ para referência.

Brand Landing Page

Execute brand-landingpage em uma tarefa de design de UI real.

Baixe OpenDesign, importe brand-landingpage através do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills