Designer UX

Para o facilitador⏱ 10 min

Este agente cria a LP sem ver o Claude Design. É a interpretação pura do UX agent com base em tokens e brand-brief — sem componentes visuais definidos, sem KV, sem guia de estilo. Guarde a impressão visual desta versão: o contraste com a V2 no final é o argumento mais forte do workshop.

O Designer UX cria a primeira versão da landing page antes de qualquer intervenção visual do Claude Design. Lê o brand-brief — incluindo o copy de base já escrito pelo Analista — e os tokens que o Arquiteto gerou. Entrega uma página completa: nav, hero, proposta de valor, sobre, CTA e footer. Sem componentes definidos — ele constrói a linguagem visual com as CSS vars e as decisões que julgar melhores.

10 min · Fase 04 de 10

AgenteDesigner UX— jornada do usuário, hierarquia, conversão

Prompt — cole no Claude Code

claude code

Assuma o papel de especialista sênior em UX Design e desenvolvimento frontend. Você pensa em jornada do usuário, hierarquia de informação e conversão — e você implementa com qualidade de produção.

TAREFA: Criar a Versão 1 da landing page de apresentação pessoal.
Você ainda não viu o output visual do Claude Design. Trabalhe apenas com o que existe na pasta.

═══════════════════════════════
LEIA ANTES DE COMEÇAR:
═══════════════════════════════
- docs/brand-brief.md
  → USE o copy de base já escrito: headline, subtítulo, tagline, CTA
  → USE os adjetivos de personalidade como títulos de cada bloco
  → USE o público-alvo para calibrar o tom dos textos
- docs/design-system/tokens.md  → paleta completa, escala tipográfica, espaçamentos
- docs/design-system/design-system.css → USE APENAS essas CSS vars, zero hardcode

═══════════════════════════════
ESTRUTURA COMPLETA DA PÁGINA:
═══════════════════════════════

NAV (fixo no topo, 64px de altura)
- Logo: [nome do brief] em --text-lg, peso 700
- Links: "Sobre" "Trabalho" "Contato" — alinhados à direita
- Background: var(--color-bg) com blur sutil ao rolar (backdrop-filter: blur(12px))
- Border-bottom: 1px solid var(--color-border)

HERO (min-height: 100vh, centralizado vertical e horizontal)
- Eyebrow: tagline curta do brief em --text-xs, tracking largo, cor var(--color-primary)
- H1: headline do brief — --text-4xl (desktop) / --text-3xl (mobile), peso 700, line-height: 1.1
- Subtítulo: subtítulo do brief — --text-lg, var(--color-text-muted), max-width: 520px
- Botão CTA: texto do CTA do brief
  · padding: 14px 32px, background: var(--color-primary), cor: #fff ou #000 (o que tiver mais contraste)
  · border-radius: var(--radius-md), font-weight: 600
  · hover: background var(--color-primary-hover), transform: translateY(-1px)
  · transition: all 0.2s ease
- Detalhe visual: linha ou shape decorativo usando var(--color-primary) com baixa opacidade

PROPOSTA DE VALOR (padding: var(--space-16) 0)
- Heading da seção: "Por que [nome]?" em --text-2xl
- Grid de 3 cards (desktop: 3 colunas / mobile: 1 coluna)
- Cada card:
  · background: var(--color-surface)
  · border: 1px solid var(--color-border)
  · border-radius: var(--radius-lg)
  · padding: var(--space-8)
  · hover: border-color var(--color-primary), box-shadow: var(--shadow-md), transform: translateY(-2px)
  · transition: all 0.25s ease
  · Número de ordem (01, 02, 03) em --text-xs, var(--color-primary), font-weight: 700
  · Título: adjetivo da marca em --text-xl, peso 700
  · Corpo: o que esse adjetivo significa para quem contrata — 2-3 frases diretas, no tom de voz do brief

SOBRE (padding: var(--space-12) 0, layout de 2 colunas no desktop)
- Coluna esquerda: diferencial em destaque — --text-2xl, peso 300 (light italic)
- Coluna direita: 2-3 parágrafos de posicionamento do brief + lista de entregas concretas
  · Cada item da lista com → var(--color-primary) como bullet

CTA FINAL (padding: var(--space-16) 0, texto centralizado)
- Background: var(--color-surface), border-top e border-bottom: 1px solid var(--color-border)
- Headline diferente do hero — ênfase na ação do visitante
- Botão idêntico ao do hero + link de texto secundário abaixo ("Ver meu trabalho →")

FOOTER (padding: var(--space-8) 0)
- [Nome] · [Área] · © 2026
- Border-top: 1px solid var(--color-border)

═══════════════════════════════
REGRAS TÉCNICAS OBRIGATÓRIAS:
═══════════════════════════════
- Zero valores hardcoded — APENAS CSS vars do design-system.css
- HTML semântico: <nav>, <header>, <main>, <section aria-labelledby="…">, <footer>
- Google Font do tokens.md: importe via <link> no <head>
- Responsivo: breakpoints em 768px e 1024px com media queries
- Scroll suave: scroll-behavior: smooth no <html>
- Sem frameworks, sem CDN externo (só a Google Font)
- Todo o CSS no <style> dentro do <head>
- Em cada seção principal, adicione <!-- UX: [decisão tomada] --> explicando o porquê

═══════════════════════════════
SALVE EM: docs/pages/page-ux-v1.html
═══════════════════════════════

═══════════════════════════════
AO FINAL — REGISTRE NA SMART-MEMORY:
═══════════════════════════════

1. Atualize docs/smart-memory/shared-context.md:
   - Fase atual: UX V1 concluída — LP completa com nav, hero, proposta, sobre, CTA, footer
   - Próxima ação: ver no browser → localhost:4321/page-ux-v1.html → ir ao Claude Design

2. Crie docs/smart-memory/project/lp-v1.md:

---
title: Landing Page V1
tipo: entregável
status: concluído
fase: ux-v1
---

# Landing Page V1 — Pré Claude Design

## Decisões de UX
[3-5 bullets: por que essa hierarquia, por que esse copy, por que essa ordem]

## Copy usado
- **Headline:** [headline real usada]
- **Subtítulo:** [subtítulo real]
- **CTA:** [texto do botão]

## Limitações desta versão
Sem sistema de componentes definido — botão, card e hover foram criados
livremente com as CSS vars disponíveis. A V2 vai usar os componentes reais do Claude Design.

→ Brand tokens: [[brand-tokens]] · Design system: [[../design-system]] · V2: [[lp-v2]]

O que o agente vai produzir

Página completa com nav, hero, proposta de valor, sobre, CTA final e footer — responsiva, HTML + CSS, sem frameworks.

Registro das decisões de UX com wikilinks para os tokens e para a futura V2.

Estrutura da landing page

01Nav fixo — logo, links, blur ao rolar
02Hero (100vh) — eyebrow, headline, subtítulo, CTA com hover state
03Proposta de valor — grid de 3 cards com hover elevation
04Sobre — 2 colunas: destaque do diferencial + posicionamento
05CTA final — headline diferente do hero + botão
06Footer — nome, área, ano

Versão 1 — a baselineEsta é a interpretação livre do UX agent. Ele não tem um guia de componentes — vai criar botões, cards e layouts com as CSS vars disponíveis, da forma que julgar mais adequada. Na Fase 08, depois do handoff do Claude Design, ele vai refazer a mesma LP com os componentes reais. A comparação vai ser o argumento mais forte do workshop.