f

Web Designer

Landing pages, design systems e deploy. 16 agentes com pipeline de 17 steps para LPs profissionais.

Quem e o Web Designer?

Responsavel por criacao de landing pages, design systems, wireframes e deploy. Usa principalmente o squad nomics-webdesign (16 agentes, incluindo Brad Frost para Atomic Design) e o pipeline de 17 steps que vai do briefing ao deploy.

O que voce pode fazer

Clique no icone de copiar ao lado do comando para copiar e colar direto no Prometheus.

Tarefa
Como pedir
Squad / Skill
LP de captacao
“Cria a LP de captacao da [Expert]”
/workflows:lp-captacao
Pipeline 17 steps
“Pipeline completo de LP para [Expert]”
nomics-webdesign → lp-builder-pipeline
Design System
“Cria design system da [Expert]”
nomics-webdesign → wf-design-system
Pagina de vendas layout
“Monta o layout da pagina de vendas”
nomics-webdesign → ux-strategist + ui-craftsman
Wireframe
“Faz wireframe da LP”
nomics-webdesign → ux-strategist
Otimizar performance
“Otimiza PageSpeed da LP”
skill page-performance
Atomic Design
“Organiza em Atomic Design”
nomics-webdesign → brad-frost
Deploy Vercel
“Faz deploy da LP no Vercel”
nomics-webdesign → frontend-engineer
Variacoes A/B
“Cria 3 variacoes do hero”
nomics-webdesign → conversion-optimizer
QA visual
“Testa em todos os dispositivos”
nomics-webdesign → qa-visual
Interface bonita
“Cria frontend bonito pra [projeto]”
skill frontend-design
Guia LP
“Quais elementos essenciais de LP?”
skill landing-page-guide

LPs existentes (referencia)

Essas LPs ja foram criadas pelo sistema e servem como referencia de estilo e estrutura:

GA

GabiKT

masterclass.gabikt.com.br

LP de captacao Masterclass — formulario 12 perguntas, favicon molecular

JU

JuliaPaiva

imersao.psihighlevel.com.br

LP de ingressos — 9 versoes (4 heroes x 2 lotes + organica)

AN

AnaBauer

fatias.anabauerbolos.com.br

Fatias de Feira — 3 versoes (feira, casa, festival), light-first design

Comandos de deploy
# Deploy padrao
cd projetos/[Expert]/[CODIGO]/deploy/[pasta]/
vercel --prod --yes

# Listar deploys
vercel ls

# Inspecionar deploy
vercel inspect [url]

Regras criticas de LP

  • Single HTML: LPs sao arquivo unico com CSS/JS embutidos. Sem dependencias externas.
  • Mobile-first: 80%+ do trafego e mobile. Design comeca no celular.
  • CTA no-wrap: O texto do botao de CTA nunca pode quebrar linha. Teste em 320px.
  • Core Web Vitals: LCP < 2.5s, FID < 100ms, CLS < 0.1. Use skill page-performance para validar.

Deploy via CLI

Sempre use vercel --prod --yes para deploy. Git push pode nao acionar o build automaticamente.

Squads relacionados

nomics-webdesign

16 agentes · LPs, design system, deploy, 17-step pipeline

nomics-designer

20 agentes · ID visual que alimenta o design system

Cenário

A Ana Bauer quer uma LP para vender o curso Fatias de Feira. Precisamos de 3 versões de design (Feira, Casa, Festival) com design system consistente, mobile-first e deploy no Vercel.

👤Sua ação(3 passos)
⚡Automático(6 passos)
1
👤 SUA AÇÃO

Digite isso no Claude Code:

Com o Prometheus rodando, escreva:

>Cria a LP do Fatias de Feira da Ana Bauer com 3 versões
2
🔥 AUTOMÁTICOPrometheus

Ativa pipeline LP Builder (17 steps) automaticamente

Carrega contexto da Ana ("meus amores", NUNCA "não consigo responder todos"), identifica que precisa de design system + 3 variações. Você não precisa fazer nada.

3
⚡ AUTOMÁTICOSquad

UX Strategist cria wireframe base

11 seções: hero, problema, solução, módulos, depoimentos, garantia, preço, FAQ, bio, CTA, footer. Mobile-first. Automático.

4
⚡ AUTOMÁTICOSquad

UI Craftsman (Dieter) cria o design system

Tokens: paleta warm pastels, tipografia, espaçamentos, botões. Cria /design-system como referência visual. Automático.

5
⚡ AUTOMÁTICOSquad

Frontend Engineer implementa as 3 versões

v1 (Feira: tons terrosos), v2 (Casa: tons cream), v3 (Festival: vibrante). Single HTML cada. Automático.

6
⚡ AUTOMÁTICOSquad

Performance Engineer otimiza

Comprime imagens, lazy loading, white-space: nowrap nos CTAs. PageSpeed: 95+ nas 3 versões. Automático.

7
🔥 AUTOMÁTICOPrometheus

Apresenta as 3 versões para você

Mostra as 3 LPs com design system. Agora é sua vez revisar.

8
👤 SUA AÇÃO

Revise e responda

Navegue pelas 3 versões (localhost) e responda: "Aprovado" ou "Ajusta o hero da v3". O sistema corrige.

9
👤 SUA AÇÃO

Confirme o deploy

Responda "Sim" quando perguntar sobre deploy. O sistema faz deploy automático no Vercel para fatias.anabauerbolos.com.br.

Resultado final

3 versões da LP no ar: fatias.anabauerbolos.com.br com design system consistente, light-first, 11 seções, SEO completo, PageSpeed 95+ mobile.