📚 Os 6 Módulos da Trilha
Clique para pular direto a um módulo, ou role para ver os tópicos expansíveis.
Conteúdo Detalhado
📊 Pitch Deck com guizang-ppt
Gerar pitch deck rodada-seed estilo Monocle/FT em ~10 minutos. Theme rhythm, slide counter, escala-fit-tela.
Skill open-source chinês (op7418) bundled verbatim no OD com layouts magazine-style web PPT.
Saiu do nada e virou padrão de qualidade em decks gerados por IA. Vale entender por que.
Magazine layout · WebGL hero · single-file HTML · LICENSE preservada
assets/template.html (seed) + references/{themes,layouts,components,checklist}.md.
Saber o que o agente lê antes de gerar. Editar para alterar comportamento.
themes.md · layouts.md · components.md · checklist.md
Shader WebGL no slide-1 que cria fundo dinâmico minimalista.
Quando usar (deck high-stakes) vs quando evitar (slides muitos, performance).
canvas WebGL · shader fragment · perf budget
Regra dura: nunca 3+ slides do MESMO tema visual seguidos. Quebra cadência.
Decks AI tendem a "mais do mesmo" porque o modelo segue o padrão. A regra força variação.
Variação visual · cadência · anti-mesmice
Counter visível (3/12), navegação com teclado, posição persiste em localStorage.
Apresentação real exige isso. Recarregar a página não pode voltar pro slide 1.
Keyboard nav · localStorage · 1-indexed · contador visível
Single-file HTML (assets inline) e PDF via browser print deck-aware.
Compartilhar = um arquivo HTML. PDF = backup imprimível. Sem servidor.
Inline assets · print stylesheet · @page · uma URL
Notas por slide via <aside class="speaker"> — invisível no slideshow, visível em modo notes.
Útil para apresentar ao vivo. Modelo só inclui se metadata.speakerNotes=true.
speaker notes · metadata flag · notes mode
🚀 Landing Page SaaS
Hero / features / pricing / CTA com direção visual coerente. Ritmo padrão e flourish disciplinado.
Skill especializada em landings B2B SaaS. Seed com tokens + chrome.
Mais focada que web-prototype, vem com convenções de SaaS embutidas.
scenario:marketing · platform:desktop · seed específico
Hero, features, pricing, social proof, testimonials, FAQ, CTA, footer.
Cada uma tem skeleton paste-ready. Modelo escolhe quais usar.
8 layouts · paste-ready · escolha condicional
hero → 3 features → social proof → pricing → CTA. Padrão validado em 1000+ landings.
Não-padrão = você precisa justificar. Padrão = converte.
5 movimentos · pacing · convergência
UMA escolha decisiva: imagem real, pull-quote, ou animação de carga. Não as 3.
3 flourishes competem; 1 vence. Ruido vs sinal.
Restraint · sinal único · competição visual
3 colunas (Free/Pro/Enterprise), highlight da do meio com badge "Most Popular".
Anchoring psicológico testado: 3 opções > 2 ou 4. Highlight do meio força foco.
Anchoring · highlight strategy · 3-column standard
Sem números reais? Use placeholders honestos (—, "Comprovado", "Em testes") em vez de inventar "10x mais rápido".
Métrica fake mata credibilidade. Placeholder honesto não.
Anti-slop · honest placeholder · em-dash · grey block
Viewport meta + Tailwind breakpoints sm/md/lg + touch targets ≥44px.
Maior parte do tráfego SaaS landing é mobile-first.
Mobile-first · breakpoints · 44px hit targets · viewport meta
📱 App Mobile Multi-tela
Protótipo pixel-accurate (iPhone 15 Pro Dynamic Island), 3+ telas com frames compartilhados.
3 skills mobile diferentes para 3 cenários: app screen, onboarding flow, gamified UI.
Cada uma vem com convenções específicas (XP bars, swipe dots, etc.).
Specificidade · scenario:design vs personal · default_for
/frames/iphone-15-pro · android-pixel · ipad-pro · macbook · browser-chrome — pixel-accurate.
Cross-skill assets. Não redesenhar celular cada vez.
Static assets · Dynamic Island SVG · safe-area · 5 frames
index.html gallery + screens/01-onboarding.html + iframe de iphone-15-pro.html?screen=screens/01-onboarding.html.
Mostra 3 telas lado a lado sem duplicar markup do device.
URL params · iframe composition · gallery pattern
Detalhes que tornam mockup convincente: bateria, sinal, WiFi, hora real, ilha.
Diferença entre mockup amador e mockup que stakeholder confunde com produto real.
SVG paths · realismo · pixel-accuracy
Apple HIG: botões ≥44pt. Safe-area: respeitar Dynamic Island + home indicator.
Mockup que ignora HIG não convence designer mobile sênior.
HIG · 44pt · env(safe-area-inset-*) · padding
Frames compartilhados são pixel-accurate. Recriar = bugs sutis na status bar.
Tempo gasto em chrome = tempo não gasto em UX. Frames matam essa armadilha.
DRY · cross-skill assets · time-to-design
CSS keyframes ou Framer Motion para transições entre telas. Modelo decide se vale.
Demo dinâmico vs estático. Mas: cuidado com over-animation.
CSS keyframes · transition timing · easing curves · restrain
🎠 Carrossel Social
Carrossel 1080×1080 (3-7 cards) com narrativa contínua, não cards isolados. Hook → proof → CTA/loop.
3 aspect ratios. 1:1 default (Instagram feed), 9:16 (Stories/Reels), 4:5 (LinkedIn).
Plataforma destino define o ratio. Errar = crop ou letterbox.
1080×1080 · aspect ratio · platform native
Headlines que se conectam: card 1 "Por que..." → card 2 "...porque" → card 3 "...e assim...".
Carrossel é narrativa, não slideshow. Cada card puxa o próximo.
Storytelling · headline chain · rasgar para next
Estrutura: card 1 hook (curiosidade), 2-N proof (story/data), último CTA ou loop affordance.
Estrutura testada em 100k+ carrosséis virais. Sem ela = baixo retention.
Hook · proof · loop · ABT story · retention
Último card sugere voltar ao primeiro: "Volte ao 1 →" ou imagem espelha card 1.
Aumenta tempo de visualização (algoritmo recompensa). Re-prova o hook.
Loop trigger · algoritmo IG · retention boost
Headlines grandes (≥48pt) em display face, body curto e claro, alto contraste.
Mobile-first: lê de longe, com pressa, no feed apertado.
Display ≥48pt · body curto · contraste alto · feed-readable
Logo + handle pequeno em canto consistente em todos os cards. Recorrência cria reconhecimento.
Branding contínuo. Reconhece sua marca antes de ler o conteúdo.
Logo lockup · handle · canto fixo · recorrência
HTML do carrossel + script Playwright que screenshota cada card em 1080×1080.
Instagram não aceita HTML, só PNG. Pipeline imkt4 ou puppeteer.
Playwright screenshot · clip per card · pipeline
📊 Dashboard / Tool UI
Dashboard denso (KPIs+chart+tabela+sidebar) onde densidade é feature, não bug.
Skill que assume: usuário quer VER muita info ao mesmo tempo. Não esconder.
Oposto de marketing landing. Aqui spacing generoso é ANTI-feature.
Density-first · scenario:operation · power user UI
Layout 3 colunas: nav esquerda (fixa), canvas (scroll), filtros direita (opcional).
Padrão Linear/Stripe/Vercel/Notion. Power users esperam isso.
3-col layout · fixed sidebar · main scroll · contextual right rail
font-variant-numeric: tabular-nums. Cada dígito ocupa mesma largura. 1234 alinha com 9876.
Tabela com números proporcionais "dança". Tabular = grid limpo.
tabular-nums · variant numeric · tipografia técnica
Número grande + sparkline pequena + delta com sinal (▲ +12% verde / ▼ -3% vermelho).
3 sinais em pouco espaço: valor atual, tendência, mudança.
KPI cards · sparkline · trend delta · color-coded
Header sticky no scroll. Hover linha = highlight sutil. Mono digits.
Tabelas reais têm 50-1000 linhas. UX de scroll importa.
position:sticky · :hover row · zebra opcional · tabular
Modelo desenha SVG inline (paths simples) ao invés de carregar Chart.js (200KB).
Single-file HTML mantém leveza. Sem dependência runtime.
SVG inline · zero JS deps · file-size budget
Shadows, gradients e rounded são INIMIGOS aqui. Density requer chrome neutro.
Decoração compete com data. Em dashboard, data sempre vence.
Anti-decoração · neutro · data-first · contraste data/chrome
Caso especial: dashboard de namoro com ticker bar, KPIs, gráficos. Mas com tipografia editorial.
Mostra que densidade não exige feio. Editorial + dense = elegante.
Editorial dashboard · ticker · KPI editorial · híbrido
🔍 Crítica & Tweaks — fechando o loop
Auditar próprios artefatos com critique skill (5-dim). Tweaks panel para ajustes finos guiados.
Depois do primeiro draft, antes do export final. Pode ser auto (gate) ou manual.
Pega regressões antes do cliente ver. 5 minutos vs 5 retrabalhos.
Pre-export gate · iteração · auto vs manual
Philosophy, Visual Hierarchy, Detail, Functionality, Innovation. Cada uma 0-10.
Mais granular que 1-5. Permite radar chart com diferenças sutis.
5 dim · 0-10 · radar chart · evidence-backed
Relatório single-file: scores radar + 3 listas (manter, corrigir, quick wins).
Acionável. Não é "está bom" — é "exato fix necessário".
Radar chart SVG · Keep/Fix/Quick-wins · acionável
Modelo decide quais 3-5 parâmetros valem ajuste. Emite painel HTML com sliders.
Não é tweaks fixos. Modelo escolhe baseado no estado atual do artefato.
AI-emitted controls · contextual sliders · 3-5 parâmetros
Tipos de slider definidos no skills-protocol: hue (0-360), spacing (16-128), font-scale (0.8-1.2), opacity (0-1).
Tipo do slider define semântica. Modelo deve escolher o certo.
4 tipos · range fields · semântica
Endpoint que faz checagem estrutural: artifact framing, side-files, palette tokens velhos.
Findings reais alimentam o agente para próxima rodada. Não é vibes.
Lint endpoint · evidence · feedback loop
Norma: 2 passes de critique → fix → re-score. Mais que 3 = brief errado.
Saber quando parar de iterar e voltar pro brief.
2 passes baseline · diminishing returns · brief signal