🟡 Galeria claude.ai/design

Tela inicial após login em claude.ai/design. Lista de projetos com thumbnails, botão "New".

Organização correta desde o início (um projeto por cliente/entrega) facilita 10x depois.

Grid thumb · New button · Cliente-tipo · Search.

Conversa persistente. Mensagens coloridas por role (user cinza, Claude destaque).

Reler histórico ajuda a lembrar decisões já tomadas na sessão.

Persistência · Roles · Tool calls visíveis.

Área direita maior. Iframe com HTML gerado. Interação real (scroll, clique, animação).

É design clicável, não imagem — teste como usuário final.

Live iframe · Interação real · Responsive test.

Card flutuante canto inferior direito. Controles: sliders, pickers, toggles.

Toggle on/off via toolbar. Desligado = design "limpo".

Overlay · Discreto · Toggle · Live update.

Fixa no topo do canvas. Tweaks, Comments, Draw, Zoom, Present.

Troca de modo é 1 clique. Memorizar ícones acelera.

5 modos · Ícones · Keyboard shortcuts · Ativo destacado.

Dropdown com formatos: PDF, PPTX, HTML, Canva, Claude Code. Share separado para URL interna.

Export correto = zero retrabalho.

Multi-format · Share URL · Copy link · Permissions.

Landing de produto dev, estética Editorial Minimalism. Hero com uma linha, 3 features, social proof em logos.

Padrão mais replicável em 2026 — funciona para 80% dos SaaS B2B.

Editorial · Logo marquee · CLI preview · Sign-up friction-low.

Marca artesanal. Hero com imagem hero, copy sensorial, grade de produtos, FAQ mínimo.

Prova que Claude Design NÃO é só "tech". Funciona pra nichos humanizados.

Warm palette · Serif italic (com DS) · Produto hero · Micro-interação.

Landing de curso: hero com bullet pain-point, preview de módulos, quem é você, garantia, 2 CTAs.

Template de conversão vale milhões em e-commerce educacional.

Pain point · Module preview · Guarantee · Urgência.

Dark mode. Tipografia oversized. Data/cidade destaque. Speakers grid. Countdown.

Familia estética cinematográfica funciona muito bem em evento.

Oversized · Countdown Tweak · Speakers · Dark primary.

Foto, bio curta, grid de projetos, case study expandível. Contato visível.

Use case de designers/devs que querem portfolio "não Framer template".

Bio · Projetos · Case studies · Contato.

Os outros 7 exemplos: consumer SaaS, agência criativa, crypto wallet, SaaS vertical saúde, landing de AI startup, landing de community, landing de podcast.

Cada um mostra um padrão diferente — estética, estrutura, Tweak.

7 padrões · Estética por vertical · Tweaks relevantes.

Estrutura: Title, Problem, Solution, Market, Product, Biz Model, Traction, Team, Ask, Vision.

Modelo validado por centenas de seed rounds. Claude segue automaticamente se pedir.

10 slides canônicos · 1 ideia por slide · Visual forte.

Growth numbers, cohort analysis, unit economics, roadmap, team scale plan.

Charts integrados (recharts via CDN) tornam números palpáveis.

Charts · Cohort · Unit economics · Milestones.

Retrospectiva + next quarter. Speaker notes explícitos. Tom casual.

Use case mais frequente de decks corporativos.

Speaker notes · Tom interno · Reviews · Goals.

Diagramas de arquitetura, code snippets, before/after de otimização, learnings.

Claude desenha arquiteturas com SVG inline — mais elegante que boxes e setas manuais.

Arch diagram · Code snippet · Before/after · Learnings.

Métricas do mês, highlights, lowlights, asks, próximos meses.

Template mensal economiza ~3h toda vez.

Metrics · Highlights · Lowlights · Asks · Next.

Outros 5 padrões: PDF longo virando deck, workshop com exercícios, roadmap anual, keynote conference, RFP response.

Cobre >90% dos decks corporativos.

PDF→deck · Workshop · Roadmap · Keynote · RFP.

Splash, intro carousel (3 telas), permission, welcome. Tudo clicável, transições CSS.

Base de qualquer app. Reutilize o padrão.

Carousel · Permission · Welcome · Skip button.

Cart, shipping, payment method (Apple Pay destaque + card), review, success.

Conversão mobile é crítica. Protótipo ajuda a validar.

Apple Pay · Address · Review · Success animation.

Balance card, quick actions, recent transactions, spending chart, insights.

Prova que Claude pode data-dense em mobile sem crunch.

Balance hero · Quick actions · Transactions · Insights.

First empty (onboard), list empty (search), error empty. Cada um com CTA claro e ilustração.

Empty state bem-feito reduz churn inicial em 30%.

First use · List empty · Error · CTA + ilustração.

Feed infinito (mock), botão de curtir com animação, compose post, profile com stats.

Social é um dos padrões mais pedidos por founders.

Feed · Compose · Profile · Micro-interação.

3 protótipos adicionais: food delivery completo, banking tradicional, settings com tabs profundas.

Cada um com pattern único que vale colecionar.

Delivery flow · Banking · Deep settings.

CEO Canva + Mike Krieger apoiaram publicamente no anúncio. Integração de export confirmada.

Quando Canva oficialmente endorse algo, mercado escuta.

Endorsement · Partnership · Market signal.

Assets chegam ao Canva como objetos editáveis: texto, cor, layout — não imagem achatada.

Outras ferramentas exportam flatten. Editabilidade é diferencial enorme.

Editable · Not flatten · Technical advantage.

Claude Design para criação rápida do zero → Canva para edição colaborativa e polimento.

Posicionamento oficial evita competição direta. Use os dois juntos.

Criação rápida · Edição colaborativa · Stack não conflitante.

Agência gera 20 variantes de campanha em Claude Design → envia para time de marketing polir no Canva.

Fluxo 10x mais rápido que design manual.

Batch creation · Handoff · Final polish.

Apesar do discurso "complementar", mercado leu como ameaça a Figma. Ações caíram imediatamente.

Sinaliza que Anthropic+Canva juntos são vistos como sério risco a player dominante.

Market reaction · Figma vulnerable · Moat shift.

Especulação fundamentada: integração reversa (Canva chama Claude Design como "AI designer" embedded).

Se acontecer, muda ambiente para 100M+ usuários Canva.

Embedded AI · 100M reach · Distribution.

Páginas complexas que exigiam 20+ prompts em outras ferramentas agora saem em 2 prompts no Claude Design.

Redução ~90% no esforço de iteração.

Métrica validada · 90% reduction · Iteration saving.

Plataforma de educação interativa em matemática, ciência e CS. Conteúdo visual-first.

O perfil "visual-first" é exatamente onde Claude Design brilha.

Edtech · Visual-first · Interactive lessons.

Contexto acumulado + design system extraction elimina rondas repetitivas de refinamento.

Revela que o ROI vem principalmente de DESIGN.md + context stacking.

DS extraction · Context acumulado · Zero re-trabalho.

Lesson interativa com 15+ elementos (texto, visualização, quiz, feedback), marca consistente, responsive.

Essa complexidade é onde ferramentas tradicionais falham — Claude Design acerta.

Multi-elemento · Marca consistente · Responsive.

Invista MUITO no DESIGN.md inicial. Rode web capture do produto atual. Cada prompt seguinte alavanca esse setup.

Você pode replicar o 20→2 ratio no seu contexto.

Setup investment · ROI alavancado · Replicável.

Setup 1 vez: DESIGN.md + repo + 3 páginas reais. Gaste 1h nisso. Depois: 2 prompts por nova página.

ROI direto = aplicar a lição.

1h setup · N páginas rápidas · Escala.

Ciclo típico de brief → mockup → feedback → revisão → entrega comprimido em uma única conversa live.

Ritmo semanal vira ritmo de minutos.

Temporal compression · Live design · Async → sync.

Plataforma SaaS enterprise de observabilidade cloud. Dashboards complexos, data-dense, alertas.

Data-dense é extremamente difícil — esse caso valida que Claude Design lida com isso.

Enterprise · Data-dense · Dashboard-heavy.

Designer + PM + eng na mesma sessão. Mudança discutida → implementada ao vivo.

Elimina handoff-feedback-revisão async.

Sync collab · Live change · No async loops.

Antes: brief → designer (2d) → review (1d) → revisão (1d) → handoff dev (1d) = 5d. Novo: 1 call de 1h.

Comparação brutal. Número de decisões por hora sobe dramaticamente.

5d → 1h · Decision density · Real-time.

No fim da call, "Export → Claude Code" empacota specs, componentes, CSS vars. Eng pega direto.

Elimina interpretação entre design → dev. O HTML já é real.

Bundle export · Zero handoff · Real HTML.

1 call (1h). Todos vejam o canvas. Designer opera, PM/eng comentam. Decisões ao vivo.

Novo ritual que substitui design reviews async.

Sync ritual · 1h cap · All stakeholders.