Voltar para Open Class

Hands-On #2

Da ideia ao protótipo completo

Gere fluxos completos de 5 telas para diferentes indústrias. Cada prompt inclui especificações para criar uma experiência coerente do início ao fim.

Plataforma para usar

Prompts de ferramentas

Prompts especializados para criar ferramentas de design. Selecione a categoria que você precisa.

01 Ferramenta UX - Design System Manager
Tela 1 - Dashboard de Componentes:
"Projete um dashboard de design system com sidebar esquerdo mostrando categorias (Foundations, Components, Patterns, Templates). Área principal com grid de cards de componentes: cada card com preview do componente, nome, versão atual, status badge (stable/beta/deprecated), última atualização, usage stats '142 instances'. Color-coding: verde componentes atualizados, amarelo precisam de update, vermelho deprecated. Search bar potente no topo. Quick filters: plataforma (iOS/Android/Web), categoria, status. Stats overview no topo: total de componentes, coverage %, issues abertos."

Tela 2 - Detalhe do Componente:
"Crie uma visão detalhada split-screen: à esquerda preview interativo do componente com variantes em tabs (default, hover, active, disabled, error). Controles para ajustar props em tempo real (size, color, state). À direita: documentação estruturada com tabs: Usage (quando usar, quando não), Anatomy (partes do componente etiquetadas), Props (tabela de propriedades com tipos), Accessibility (WCAG compliance, keyboard nav), Code (snippets por plataforma). Version history timeline embaixo. Comments section para feedback do time."

Tela 3 - Auditoria de Inconsistências:
"Projete uma ferramenta de auditoria mostrando mapa de calor de arquivos Figma com inconsistências detectadas. Lista de issues agrupados por severidade: crítico (componentes sem vínculo), alto (estilos locais vs sistema), médio (naming inconsistente). Cada issue card com: screenshot do problema, localização (file/page/frame), sugestão de fix automático, botão 'Fix now' ou 'Ignore'. Bulk actions: 'Fix all auto-fixable'. Progress bar de design system adoption por projeto. Export de relatório PDF para stakeholders."

Tela 4 - Component Request Workflow:
"Crie um formulário de solicitação de novo componente com wizard multi-step: 1) 'O que você precisa?' (template de user story), 2) 'Context' (upload de screenshots/mockups do caso de uso), 3) 'Similar patterns' (o sistema sugere componentes existentes que poderiam servir), 4) 'Priority & impact' (seletor de urgência, quantos projetos precisam disso). Review panel com votação do time. Status tracking: submitted → under review → in development → ready. Integração com Jira/Linear para criar tickets."

Tela 5 - Analytics de Adoção:
"Projete um dashboard de métricas com gráficos grandes: adoption rate over time (linha ascendente), componentes mais usados (bar chart horizontal), projetos com maior/menor cobertura (scatter plot), tempo médio de implementação por componente. Heatmap de uso por plataforma. Rede de dependências de componentes (graph visualization). Dados exportáveis para reports. Filters por date range, time, produto. Alertas configuráveis: 'Component usage dropped 40%'. Recommendations: 'Deprecate Button v1, 0% usage last 60 days'."
02 Ferramenta UX - User Research Repository
Tela 1 - Research Library:
"Projete um repositório com vista de grid/lista alternável de estudos: cada card com thumbnail do artefato-chave, título do estudo, data, methodology tag (usability test, interview, survey), participants count, avatar do pesquisador, projeto associado. Filtros avançados na sidebar: date range, metodologia, tipo de usuário, produto, status. Busca semântica: buscar por achados ('users struggle with checkout'). Saved searches. Quick stats no topo: total studies, insights generated, recommendations implemented. Abas: All Studies, My Studies, Starred, Recent."

Tela 2 - Study Detail:
"Crie uma visão abrangente com tabs: Overview (objetivos, metodologia, timeline, team), Participants (tabela com demographics, recruitment screener), Protocol (discussion guide, tasks, materials), Findings (insights organizados por tema com severity tags), Recommendations (priorizadas por impacto/esforço em matriz 2x2), Artifacts (vídeos, transcripts, notes, recordings). Cada insight com: descrição, evidência (video clips, quotes), frequência observada, impact rating, related recommendations. Tagging system para busca cross-study."

Tela 3 - Insight Synthesis Board:
"Projete um canvas tipo Miro para affinity mapping colaborativo. Sticky notes com quotes/observações arrastáveis. Color-coding por participante ou tema. Clustering automático com AI suggestions. Drawing tools para agrupar. Voting dots para priorizar insights com o time. Export do canvas como imagem ou Figma. Real-time collaboration com avatares dos membros do time. Templates pré-carregados: empathy map, journey map, affinity diagram. Integração com transcripts: highlight text → create sticky. Time-based filtering para replay do processo de síntese."

Tela 4 - Participant Database:
"Crie um CRM de participantes com tabela filtrável: nome, email, demographics (idade, gênero, ocupação, localização), segmento/persona, estudos dos quais participou (com links), ratings deixados por pesquisadores, disponibilidade, consent status, incentivo preferido. Advanced search: 'Android users in SF who work in fintech'. Bulk actions: invite to study, send incentivo. Calendar view mostrando availability. Recruitment pipeline: sourced → screened → scheduled → completed. GDPR compliance tools: export data, delete participant. Notas privadas por participante."

Tela 5 - Insights Dashboard:
"Projete uma visão executiva com widgets: total de insights por produto/feature, insights trends over time (detectar padrões emergentes), top pain points rankeados por frequência, recommendations status tracker (proposed/in progress/shipped), impact metrics se disponível (before/after launch dos fixes). Tag cloud de temas recorrentes. 'Research coverage' heatmap mostrando features com/sem research. Slack/email digest configuráveis. Export de PowerPoint pré-formatado para stakeholders. Linkar insights a itens do product roadmap."
03 Ferramenta UX - Usability Testing Platform
Tela 1 - Test Setup Wizard:
"Projete um wizard de criação de teste com steps claros: 1) 'Test type' (moderated/unmoderated, remote/in-person) com comparativo de prós/contras, 2) 'Target audience' (persona selector + demographic filters), 3) 'Tasks' (template library: first-use, checkout, search, navigation), 4) 'Success metrics' (completion rate, time on task, error rate, SUS score), 5) 'Schedule' (immediate/scheduled, duration, participants needed). Preview do test flow. Pricing calculator se a plataforma cobra por uso. Save as template para futuros testes."

Tela 2 - Task Builder:
"Crie uma interface de construção de tarefas com blocks arrastáveis: scenario text, starting URL, success criteria (chegou à página X, completou ação Y), follow-up questions (rating scales, open-ended), navigation paths esperados. Logic branching visual: 'If user selects A → show question B'. Timer settings por tarefa. Randomization options. Preview mode simulando a participant view. Templates pré-carregados: 'Add to cart task', 'Account creation', 'Search and filter'. Accessibility checks: reading level, language clarity."

Tela 3 - Live Session Monitor:
"Projete um dashboard para observar sessions ao vivo (unmoderated tests). Grid de participantes ativos com mini-screens mostrando a tela deles. Click para expandir e ver a session completa: screen recording, front camera (se permitir), mouse movements heatmap em tempo real, audio transcription live, facial expressions analysis (frustration/confusion detection). Chat com o participante se moderated. Timecoded notes input. Red flags auto-detectados: stuck >2min, rage clicks, back button spam. Possibilidade de intervir ou encerrar o teste mais cedo se houver problemas técnicos."

Tela 4 - Results Analysis:
"Crie um dashboard de resultados com métricas-chave em cards grandes: completion rate (80% com trend), avg time on task (2:34 com benchmark comparison), error rate (15%), SUS score (68/100). Task-level breakdown table: cada task com success %, avg duration, issues encountered. Heatmaps agregados: clicks, scrolls, attention. Video highlights reel: clips de momentos-chave (fails, delights, confusion). Quotes wall com participant verbatims. Path analysis: sankey diagram dos navigation flows. Export de relatório presentation-ready."

Tela 5 - Recommendations Generator:
"Projete um assistente de IA que analisa resultados e sugere fixes. Lista priorizada de issues com: descrição do problema, severity (baseado em impact x frequency), evidência (video clips, data), recomendações específicas com mockups sugeridos, effort estimate. Cada recomendação com voting system para o time. Link a issues similares em testes anteriores. Create Jira/Linear ticket diretamente com todo o contexto. Impact projection: 'Fixing this could improve completion rate by ~12%'. Soluções alternativas ranqueadas por feasibility."
04 Ferramenta UX - Information Architecture Tester
Tela 1 - Card Sorting Setup:
"Projete a configuração de um estudo de card sorting com dois modos: open (usuários criam categorias) vs closed (categorias predefinidas). Input de cards: bulk paste de uma lista, import CSV, ou manual add um por um. Cada card com título e descrição opcional. Para closed sort: definir categorias target com descrições. Settings: shuffle cards, limit time, allow duplicates. Randomização de ordem. Participant instructions editor com preview. Recruitment: painel próprio vs external link para compartilhar. Estimativa '15-20 participants recommended'."

Tela 2 - Sorting Interface (Participant View):
"Crie uma interface limpa para participantes: cards arrastáveis na área unsorted à esquerda, categorias (colunas) à direita para drop. Em open sort: botão '+New category' proeminente com inline editing. Card hover mostra a descrição completa. Progress indicator: '12/40 cards sorted'. Undo/redo buttons. Mobile-friendly: tap card → select category. Instructions collapsible no topo. Opcional: think-aloud prompts 'Why did you put this here?'. Auto-save progress. Tratamento gracioso se o participante abandonar (partial data saved)."

Tela 3 - Análise de Dendrograma:
"Projete uma visualização de dendrograma (árvore de agrupamento) mostrando como os participantes agruparam os cards. Cards em nós, linhas conectando por similaridade. Threshold slider para ver agrupamentos em diferentes níveis de granularidade. Heatmap complementar: matriz de co-ocorrência (quais cards foram agrupados juntos com frequência). Color-coding por strength of association. Click em um card para ver todos os paths onde ele terminou. Outliers identificados: cards sem consenso de categoria. Export como imagem para documentação."

Tela 4 - Tree Testing:
"Crie uma interface de tree testing: o participante vê apenas uma tarefa ('Where would you find X?') e uma estrutura de árvore colapsada. Click para expandir nós um a um. Radio buttons para selecionar a resposta final. Success: selecionou o nó correto. Metrics tracked: directness (path efficiency), time, backtracking count. Múltiplas tarefas em sequência. Results dashboard: success rate por tarefa, onde os usuários se perderam (lostness heatmap), first click analysis (correto/incorreto), common wrong paths (sankey), optimal vs actual paths comparison side-by-side."

Tela 5 - IA Recommendations:
"Projete um output com uma arquitetura de informação sugerida baseada nos resultados. Visualização do sitemap recomendado com: categorias propostas (baseadas em clustering), conteúdo sob cada categoria, alternative labelings com participant vocabulary, confidence scores por seção. Side-by-side comparison: current IA vs proposed IA com metrics projection. Highlight de problemas: orphan content, ambiguous labels, conteúdo enterrado muito fundo. Interactive: arraste nós para ajustar. Export como sitemap (XML), arquivo Figma, ou Miro board. Iterations tracker: test IA v1 → iterate → test v2."
05 Ferramenta UX - Journey Mapping Collaborative Canvas
Tela 1 - Template Gallery:
"Projete uma biblioteca de templates de journey maps: Customer Journey Map (B2C), Service Blueprint (B2B), Experience Map (omnichannel), User Story Map (agile). Cada template como card grande com: preview thumbnail, descrição de quando usar, tempo estimado de workshop, participants recomendados, output examples. Quick start com canvas em branco. Industry-specific templates: e-commerce, SaaS, healthcare, financial. Filtros por: metodologia, complexidade, time commitment. Clone from previous projects. Import from Miro/FigJam. Collaborative workspace setup: invite team members, set permissions."

Tela 2 - Journey Canvas (Workshop Mode):
"Crie um canvas infinito com swimlanes predefinidas: Phases (topo), User Actions, Thoughts, Emotions (emoji scale), Pain Points (vermelho), Opportunities (verde), Touchpoints, Backstage (internal processes). Sticky notes com color-coding. Cursor presence dos colaboradores em tempo real. Drawing tools para conectar elementos. Emoji reactions. Comments threading. Timer para time-boxing de atividades. Templates de stickies: pain point, opportunity, quote. Bulk actions: group, align, distribute. Frames para seções. Background grid. Zoom fit-to-screen. Auto-layout options."

Tela 3 - Persona Selector:
"Projete um painel lateral para selecionar/alternar entre as personas cuja jornada está sendo mapeada. Cada persona card com: foto, nome, key demographics, goals, frustrations. Multi-persona view: overlay de jornadas de diferentes usuários para comparar (color-coded). 'Journey for [Persona]' destacado no topo do canvas. Quick switch com keyboard shortcuts. Link ao documento completo da persona. Edit persona inline. Add new persona on-the-fly durante o workshop. Usage stats: tempo mapeando cada persona. Export da jornada por persona individualmente ou comparativo."

Tela 4 - Research Evidence Panel:
"Crie uma sidebar com research snippets vinculáveis à jornada: video clips de user interviews, quotes, survey data, analytics screenshots, support tickets, NPS scores. Arraste evidência ao canvas como linked notes. Color-coding por fonte. Timestamp em vídeos. Search de evidência: 'frustrated with checkout'. Filtrar por estudo, data, participant. Cada evidence piece com metadata: source, date, participant, study. Pin de key insights. Vote nas evidências mais impactantes. Export da jornada com evidência como appendix PDF. AI suggestions: 'This pain point appears in 8 interviews'."

Tela 5 - Opportunity Prioritization:
"Projete uma visão de síntese pós-workshop: todas as opportunities identificadas como cards em matriz 2x2 (impact vs effort). Arraste para reposicionar. Color-coding por journey phase. Click em um card para ver o contexto na jornada. Voting system: membros do time votam nas prioridades. Filtrar por: quick wins, strategic, backlog. Link de opportunities a Jira/Linear/Asana. Export de action plan: tabela com opportunity, owner, timeline, success metrics. ROI calculator para itens de alto impacto. Dependencies mapping: 'Fix A antes de B'. Roadmap view: Q1-Q4 timeline. Share-out deck auto-gerado com screenshots da jornada + opportunities priorizadas."
01 Ferramenta UI - Design Token Manager
Tela 1 - Token Explorer:
"Projete uma interface tipo IDE com tree view esquerdo mostrando a hierarquia de tokens: Colors (→ Brand, Semantic, Component-specific), Typography (→ Font families, Sizes, Weights), Spacing (→ Scale), Shadows, Borders, Radii, Motion. Cada token expansível. Área principal mostra o token selecionado com: preview grande, value atual ($color-primary: #FF6B00), alias chain se aponta para outro token, usage count, computed value final. Inspector de variações: light/dark mode toggle ao vivo. Search potente com regex support. Recent tokens. Favorites starred."

Tela 2 - Token Editor:
"Crie um editor com dual view: código JSON/YAML à esquerda (syntax highlighting), preview visual à direita atualizando em real-time. Para color tokens: color picker avançado com WCAG contrast checker vs outras cores, accessibility rating, suggested pairings. Para typography: live text preview em múltiplos sizes, line-height calculator. Para spacing: visual scale preview com boxes. Validation: erros se valores inválidos, warnings se quebrar naming convention. Version control: commit message, diff view com a versão anterior. Export options: CSS variables, SCSS, JS object, Figma styles."

Tela 3 - Theme Builder:
"Projete uma interface de geração de temas: base theme selector (light/dark/high-contrast), brand color input (primary, secondary), auto-generate da paleta completa com tints/shades. Side-by-side preview de UI components usando o tema: buttons, cards, forms, todos atualizando live. Accessibility checker: todos os pares de foreground/background rated WCAG AA/AAA. Manual overrides permitidos para qualquer token. Semantic token mapping: 'surface-primary → $color-neutral-100 in light, $color-neutral-900 in dark'. Export theme package. Theme variations: save winter/summer/brand-event themes."

Tela 4 - Token Documentation:
"Crie um site de documentação auto-gerado com cada token categorizado. Cada token page com: visual examples (color swatches, typography specimens), usage guidelines ('Use $color-error for destructive actions'), do's and don'ts com visual examples, code snippets por plataforma (React, iOS, Android), component usage ('Used in Button, Alert, Badge'), deprecation warnings se aplicável. Search indexado. Versioned docs: v1.0, v2.0. Changelog de mudanças entre versões. Embed do tokens site via iframe para compartilhar com developers."

Tela 5 - Sync Dashboard:
"Projete um command center para manter os tokens sincronizados entre ferramentas. Status cards: Figma (synced 2 min ago, verde), Code repo (out of sync, orange warning, 'Push changes'), Design system site (synced). Logs de sync activity. Manual sync triggers: 'Pull from Figma', 'Push to code', 'Sync to [design tool]'. Conflict resolution UI quando valores diferem: side-by-side comparison, choose source of truth. CI/CD integration status: Github Actions passing/failing. Usage analytics: tokens changed most frequently, unused tokens candidates for deprecation."
02 Ferramenta UI - Responsive Layout Inspector
Tela 1 - Device Preview Grid:
"Projete um workspace com múltiplos viewports simultâneos: iPhone 15 Pro, Pixel 8, iPad Pro, Desktop 1440px, Desktop 1920px dispostos em grid. Cada viewport mostra o mesmo design responsivamente. Sincronização: scroll em um, todos scrollam. Interaction em um, todos reagem. Toggle views on/off. Add custom viewport: inserir width/height. Rotacionar orientação para mobile/tablet. Status bar overlays opcionais. Device frames toggle. Zoom controls individual por viewport. Screenshot all devices at once. Highlight differences tool."

Tela 2 - Breakpoint Editor:
"Crie uma timeline horizontal mostrando breakpoints: 320px (mobile-s), 375px (mobile-m), 768px (tablet), 1024px (desktop), 1440px (desktop-l). Arraste breakpoint markers para ajustar. Add custom breakpoints. Viewport ruler no topo mostrando o size atual enquanto você arrasta. Rules panel: define o layout behavior em cada range (columns, padding, font-sizes). Visual diff: overlay do layout anterior vs novo quando você muda o breakpoint. Test tool: arraste lentamente a viewport width para ver o layout se adaptar suavemente. Export breakpoints como CSS media queries, SCSS mixins."

Tela 3 - Layout Issues Detector:
"Projete um auditor automatizado de problemas responsive: overflow horizontal (scrollbars detectados), texto cortado, imagens distorcidas (aspect ratio incorreto), tap targets < 44px, colisões de elementos. Cada issue como card com: severity (critical/warning), screenshot do problema no device específico, localização (CSS selector), sugestão de fix. Bulk view de todas as issues. Filtrar por device, severity. 'Fix now' leva ao inspector com o elemento highlighted. Re-scan após fazer mudanças. Issue trends: 'Fixed 12, introduced 3 new'."

Tela 4 - Component Responsive Variants:
"Crie uma biblioteca de componentes mostrando todas as variantes responsive lado a lado. Ex: 'Navigation' component → mobile (hamburger menu), tablet (híbrido), desktop (full menu). Cada variante com: o viewport onde se aplica, prop overrides por breakpoint, estados (default, hover, active). Interactive playground: ajuste props, veja mudanças across devices. Usage stats: 'Mobile variant usado em 45 screens'. Export design specs por variante. Annotations de comportamento: 'Menu items collapse into drawer <768px'. Design token usage per variant."

Tela 5 - Performance Impact Preview:
"Projete um dashboard de performance metrics por viewport: bundle size affected, render time (mobile slower), image loading (showing responsive image sizes), font loading strategies. Visual budget tracker: 'Mobile bundle: 234KB / 250KB limit'. Suggestions: 'Lazy load carousel images on mobile', 'Use system fonts on mobile to save 45KB'. Lighthouse scores simulation. Network throttling: 3G, 4G, wifi. Critical rendering path visualizado. Before/after optimizations comparison com FPS metrics."
03 Ferramenta UI - Animation Timeline Editor
Tela 1 - Animation Selector:
"Projete uma biblioteca de animações do projeto: lista com thumbnails animados (auto-playing previews), nome, duração, easing, o componente onde é usada, categoria (micro-interaction, page transition, loading, feedback). Filtrar por: duration range, category, complexity. Sort por: recent, most used, alphabetical. Quick actions: duplicate, edit, delete, export. Usage counter: 'Used in 8 components'. Tags: #onboarding #success #error. Create new animation templates: entrance, exit, morph, scale, fade, slide. Import from LottieFiles or code."

Tela 2 - Timeline Editor:
"Crie uma interface tipo After Effects com timeline horizontal embaixo: múltiplas layers (elemento1, elemento2, elemento3), keyframes como diamonds na timeline, properties animadas (x, y, opacity, scale, rotate) expansíveis por layer. Playhead arrastável. Preview pane no topo mostrando a animação. Controls: play/pause, loop, speed (0.5x-2x). Snap to keyframes. Easing curves editor (bezier handles). Add keyframe em uma property. Onion skinning para ver frames anteriores. Current time indicator com frame number. Duration ruler com markers."

Tela 3 - Easing Curve Library:
"Projete um catálogo de easing functions com preview visual: linear, ease-in, ease-out, ease-in-out, custom cubic-bezier. Cada easing como card com: curve visualization, mathematical formula, use case ('ease-out for exits'), animated example (uma bola quicando com aquela curva). Favorites section com os easings mais usados do projeto. Custom curve editor: arraste bezier handles, veja valores numéricos, teste em live preview. Save de um custom como preset. Material Design, iOS, Framer Motion presets importáveis. Comparison mode: A/B test de dois easings lado a lado."

Tela 4 - State Transitions:
"Crie uma visual state machine para componentes: estados como nós (default, hover, active, disabled, loading, error, success), transições como arrows entre eles com animation specs. Click em um arrow para editar: duration, easing, properties animadas. Interactive preview: trigger das transições manualmente ou auto-cycle. Define gestures que disparam transições (tap, swipe, long-press). Conditional transitions: 'if loading >2s → show skeleton'. Export como code (React Spring, Framer Motion, CSS). Validar que não há estados unreachable."

Tela 5 - Performance Analyzer:
"Projete um profiler mostrando um FPS graph durante a animação: quedas abaixo de 60fps highlighted em vermelho. Frame-by-frame analysis: quanto cada frame demora, bottlenecks identificados (layout thrashing, paint operations caras). Recommendations: 'Use transform instead of left/top for 60fps', 'Add will-change for smoother animation'. Comparison tool: hardware simulation (low-end mobile vs high-end desktop). Layer compositing visualizado: quais layers criam new compositor layers. GPU usage. Before/after optimization comparison com FPS metrics."
04 Ferramenta UI - Typography Scale Generator
Tela 1 - Scale Calculator:
"Projete uma calculadora de escala tipográfica com inputs: base size (16px default), scale ratio selector (predefined: Minor Third 1.2, Major Third 1.25, Perfect Fourth 1.333, Golden Ratio 1.618, ou custom ratio). Output: preview de 10 sizes gerados (12px caption, 14px body-small, 16px body, 20px h6, 25px h5, etc.) com labels. Live preview de cada size com Lorem Ipsum. Rounding options: round to pixels, 4px multiples, ou precise decimals. Export as CSS variables, tokens JSON, Figma styles. Quick compare: overlay de different scales side-by-side."

Tela 2 - Type Specimen:
"Crie uma vitrine da família tipográfica escolhida: alfabeto em maiúsculas/minúsculas, números, caracteres especiais, todos em tamanho large. Different weights visualizados (Thin 100 → Black 900) cada um com sample texto. Glyph inspector: click em uma letra para ver detailed metrics (x-height, cap-height, ascenders/descenders, baseline). OpenType features toggle: ligatures, small-caps, stylistic alternates, old-style figures. Language support check: testar strings em espanhol, português, etc. Variable font axes se aplicável: weight slider, width slider com live preview."

Tela 3 - Pairing Tester:
"Projete uma interface para testar pairings de fontes: heading font (dropdown com previews) + body font (outro dropdown). Live preview com UI mocks: hero section, card, form, mostrando hierarquia. Harmony score calculado baseado em: contrast (sans + serif é bom), x-height similarity, visual weight balance. Suggestions panel: 'Popular pairings', 'Try similar fonts'. Font metadata: classification (humanist, geometric, grotesque), mood tags, designed by. Save de pairings como presets. Export pairing specs: sizes, weights usados em cada contexto."

Tela 4 - Vertical Rhythm Calculator:
"Crie uma ferramenta de line-height e spacing: input do baseline grid (8px típico), auto-calculate line-heights para cada font size que alinhem ao grid. Visual grid overlay mostrando como o texto se alinha. Spacing scale gerado baseado no baseline (8, 16, 24, 32, 40px). Margin/padding recommendations para manter ritmo vertical. Examples com real UI: headings + parágrafos alinhados perfeitamente. Deviation checker: highlights de elementos que quebram o grid. Export de spacing tokens. Before/after: design sem vertical rhythm vs com."

Tela 5 - Accessibility Checker:
"Projete um auditor de tipografia com checks: minimum font sizes (mobile 16px for body), line-height ratios (1.5 for body, 1.2 for headings), line length (45-75 characters), contrast ratios vs background colors (WCAG AA/AAA), font weight legibility (no thin fonts <16px). Cada check com pass/fail status, explicação, fix suggestion. Readability scores: Flesch reading ease, grade level. Dyslexia-friendly check: sans-serif, adequate spacing, no italics for body. Senior-friendly check: larger sizes, higher contrast. Export de accessibility report para stakeholders."
05 Ferramenta UI - Icon System Manager
Tela 1 - Icon Library Grid:
"Projete uma galeria de ícones em grid com múltiplas vistas: 16x16, 24x24, 32x32, 48x48 alternáveis. Cada ícone como card: preview no hover mostrando todas as variants (filled, outline, sharp, rounded), nome, tags, usage count. Multi-select para bulk actions. Search potente: por nome, tag, ou desenhando um sketch do ícone (AI search). Filters: category (arrows, social, e-commerce), style (duotone, linear, solid), recentes, favorites. Sort by: alphabetical, most used, recently added. Create new icon: canvas em branco ou import SVG. Grid/list view toggle."

Tela 2 - Icon Editor:
"Crie um editor vetorial simplificado: canvas com grid, vector paths editáveis com pen tool, geometric shapes (circle, rect, polygon), boolean operations (union, subtract, intersect), stroke width control, fill/stroke toggle. Sidebar com layers panel. Snap to pixel grid crucial para sharp renders. Preview em múltiplos sizes simultaneamente (fica bom em 16px?). Optical adjustments: levemente mais bold em sizes pequenos. Export options: SVG optimized, React component, PNG @1x-3x. Accessibility: add title/desc para screen readers."

Tela 3 - Consistency Checker:
"Projete um auditor de consistência cross-icon library: grid size violations (ícones que não preenchem uniformemente o canvas), stroke width inconsistencies (alguns 2px outros 1.5px), style mismatches (maioria outline mas alguns filled), naming convention violations (inconsistent prefixing). Visual comparison: overlay de múltiplos ícones para verificar optical alignment. Color usage: detectar ícones com hardcoded colors vs usando currentColor. Export de audit report. Batch fix tools: 'Normalize all stroke widths to 2px', 'Rename using convention [category]-[name]'."

Tela 4 - Icon Documentation:
"Crie docs auto-gerados por ícone: preview grande, code snippet (React, Vue, Svelte, HTML), installation instructions, props available (size, color, className), usage guidelines ('Use for positive actions'), semantic meaning, accessibility considerations (need aria-label), related ícones (alternatives ou variations). Do's and don'ts com visual examples: contexto de uso correto vs incorreto. Version history: changelog se o ícone foi updated. Contribution stats: designed by, date added. Download options: SVG, PNG, PDF, copy JSX."

Tela 5 - Integration Hub:
"Projete um dashboard de deployment: Figma sync status (last synced, # icons synced, conflicts), NPM package versão (v2.4.1, publish new version button), CDN link gerado (unpkg, jsDelivr), design system documentation embedded status, CI/CD pipeline health. Usage analytics: ícones mais baixados, plataformas usando a biblioteca (web 45%, iOS 30%, Android 25%). Migration guides quando há breaking changes. Deprecation warnings para ícones que serão retirados. Community requests: usuários podem suggest new ícones com voting system. Release notes generator automático."

Prompts por indústria

Cada prompt contém as instruções para gerar 5 telas de um fluxo completo. Copie o prompt completo e cole no Google AI Studio.

01 Fintech - App de Microinvestimentos (Millennials Latinos)
Tela 1 - Splash/Boas-vindas:
"Projete uma tela de boas-vindas para um app de microinvestimentos. Fundo com gradiente violeta a azul, ilustração isométrica de um cofrinho digital flutuante com moedas caindo. Logo centrado no topo, headline 'Invista a partir de R$10' em tipografia bold, subheadline explicativo, e botão CTA 'Começar' em amarelo neon. Estilo fintech moderno."

Tela 2 - Cadastro:
"Crie uma tela de cadastro com campos minimalistas: nome, email, telefone. Cada input com ícones à esquerda (pessoa, envelope, telefone). Progress bar no topo mostrando passo 1/3. Pequena ilustração de foguete no canto superior direito. Botão continuar desabilitado até completar os campos. Checkbox de termos com link destacado."

Tela 3 - Seleção de Perfil de Investidor:
"Projete uma tela com 3 cards verticais: 'Conservador' (cor verde, ícone escudo), 'Moderado' (cor laranja, ícone gráfico balanceado), 'Agressivo' (cor vermelha, ícone foguete). Cada card mostra retorno estimado anual e nível de risco com barras. Headline 'Que tipo de investidor você é?' no topo. Botão continuar embaixo."

Tela 4 - Primeiro Investimento:
"Crie uma tela com slider grande central para selecionar o valor (R$10-R$1000). O número do valor em tipografia extra large. Embaixo, breakdown visual com 3 mini-cards mostrando distribuição sugerida: ações tech 40%, títulos 30%, cripto 30%. Gráfico de rosca colorido. Botão 'Investir agora' em amarelo neon. Texto pequeno 'Você pode mudar isso depois'."

Tela 5 - Confirmação de Sucesso:
"Projete uma tela de sucesso com animação de confetti no background. Ícone de check gigante em círculo verde. Headline 'Seu dinheiro já está trabalhando!'. Mostre o valor investido grande. Projeção estimada para 1 ano embaixo. Dois botões: 'Ver meu portfólio' (primário) e 'Convidar amigos' (secundário). Ilustração de plantas crescendo na parte inferior."
02 HealthTech - Telemedicina para Idosos
Tela 1 - Home Dashboard:
"Projete um dashboard principal com tipografia mínima de 18px. Header com saudação 'Olá, María' e foto de perfil grande. 4 cards grandes com espaçamento generoso: 'Próxima consulta' (ícone calendário), 'Meus medicamentos' (ícone comprimido), 'Resultados médicos' (ícone documento), 'Ligar para médico' (ícone telefone). Cada card com ícone grande à esquerda e texto descritivo. Paleta quente bege/azul suave."

Tela 2 - Agendar Consulta:
"Crie uma tela de calendário mensal grande com números extra visíveis. Dias disponíveis em verde suave, indisponíveis em cinza. Data selecionada com círculo azul sólido. Embaixo, lista de horários disponíveis em cards horizontais grandes: '9:00', '11:00', '14:00'. Cada horário em botão de no mínimo 60px de altura. Botão confirmar sempre visível embaixo."

Tela 3 - Seleção de Especialidade:
"Projete uma lista vertical com 6 especialidades médicas. Cada item como card horizontal grande com foto do médico, nome em bold grande, especialidade embaixo, e rating com estrelas douradas grandes. Ícone da especialidade (coração para cardiologista, etc.) à esquerda. Espaçamento generoso entre os cards. Header 'Qual especialista você precisa?' em tipografia clara."

Tela 4 - Confirmação de Consulta:
"Crie uma tela de resumo com informação hierárquica. No topo: ícone calendário grande. Card central com fundo branco elevado mostrando: foto do médico (grande), nome, especialidade, data e hora em tipografia bold 20px, modalidade 'Videochamada'. Botão 'Confirmar consulta' verde grande (no mínimo 56px de altura). Link 'Mudar horário' embaixo em azul sublinhado."

Tela 5 - Lembrete Pré-Consulta:
"Projete uma tela de preparação com checklist visual. Headline 'Pronto para sua consulta?'. Lista de 4 itens com checkboxes grandes: 'Conexão de internet funcionando', 'Câmera e microfone ativos', 'Documentos médicos à mão', 'Em um lugar tranquilo'. Cada item com ícone ilustrativo grande. Countdown timer destacado '15 minutos para sua consulta'. Botão 'Entrar na consulta' pulsante."
03 EdTech - Aprendizado de Idiomas para Crianças
Tela 1 - Seleção de Avatar:
"Projete uma tela lúdica com 8 avatares de personagens animais em grid 2x4: panda, leão, unicórnio, dragão, etc. Cada avatar em card quadrado colorido com sombra suave e animação no hover. Headline no topo 'Escolha seu companheiro de aventuras!'. Paleta arco-íris. Avatar selecionado com borda dourada brilhante. Botão 'Próximo!' em forma de nuvem com carinha feliz."

Tela 2 - Mapa de Níveis:
"Crie um mapa de progresso estilo videogame com path serpenteante. 10 níveis como ilhas flutuantes conectadas por pontes. Nível atual iluminado e animado, níveis anteriores com check dourado, níveis futuros com cadeado. Cada ilha temática: praia, floresta, montanha. No topo: barra de XP com estrelinhas e avatar da criança. Moedas coletadas no canto superior direito com animação brilhante."

Tela 3 - Lição Ativa:
"Projete uma tela de exercício com ilustração grande no topo (ex: maçã vermelha gigante). A palavra em inglês 'APPLE' em tipografia playful gigante. 4 opções de tradução em botões coloridos tipo candy: cada botão de cor diferente (vermelho, azul, verde, amarelo) com a palavra traduzida. Timer visual tipo ampulheta no canto superior direito. Vidas restantes como corações no canto esquerdo. Ícone de nota musical para ouvir a pronúncia."

Tela 4 - Feedback Correto:
"Crie uma tela de celebração com confetti animado e estrelas caindo. Personagem avatar pulando feliz no centro. Mensagem 'Incrível!' em letras grandes que quicam. Mostre +10 pontos com animação de subida. Barra de progresso da lição se enchendo. Botão 'Próxima palavra' em forma de seta grande e colorida. Efeitos sonoros visuais: notas musicais flutuando."

Tela 5 - Recompensas Desbloqueadas:
"Projete uma tela de conquistas com baú de tesouro se abrindo (animação). Mostre 3 prêmios ganhos: 1) Nova roupa para o avatar, 2) 50 moedas, 3) Selo 'Campeão das frutas'. Cada prêmio em card separado com ilustração detalhada. Headline 'Você completou o nível!' com fogos de artifício. Botões 'Equipar' e 'Continuar aventura'. Background com confetti permanente caindo."
04 E-commerce - Moda Sustentável para Gen Z
Tela 1 - Landing/Feed:
"Projete um feed estilo brutalist com grid assimétrico de produtos. Tipografia Helvetica bold em preto. Imagens dos produtos em preto e branco com um único elemento de cor (a peça). Cada card com overlay no hover mostrando o preço grande e uma etiqueta 'CO2 saved: 2kg'. Header minimalista com logo, busca e carrinho. CTA banner no topo 'Plant a tree with every purchase' em verde neon. Estética crua, bordas sharp."

Tela 2 - Detalhe do Produto:
"Crie um layout split-screen: à esquerda galeria de 4 fotos swipeable com dots indicator. À direita: nome do produto em tipografia huge bold, preço destacado, seletor de tamanho como botões outline grandes (PP-G). Seção expansível 'Impact' com gráfico mostrando água economizada, CO2 reduzido, árvores plantadas. Composição do material com ícones. Reviews com fotos de usuários. Sticky button 'Add to cart' preto sólido."

Tela 3 - Carrinho:
"Projete um carrinho minimalista com lista vertical de produtos. Cada item: thumbnail à esquerda, info no centro (nome, tamanho, preço), quantity selector à direita (- número +), ícone trash. Embaixo: subtotal, desconto estudante (se aplicável), frete, total em bold extra large. Progress bar visual 'Unlock free shipping at R$300'. CTA dual: 'Continue shopping' (ghost button) e 'Checkout' (filled preto). Counter de impacto total: '3 trees planted'."

Tela 4 - Checkout:
"Crie uma tela de pagamento tipo formulário limpo. Steps no topo: Shipping (completo check verde), Payment (ativo), Review (cinza). Campos empilhados: endereço com autocomplete, método de pagamento com cards visuais (Visa, Mastercard, PayPal). Checkbox 'Carbon neutral shipping +R$8'. Order summary sticky na sidebar direita no desktop, collapsible no mobile. Input de código de desconto. Trust badges embaixo: secure payment, easy returns."

Tela 5 - Confirmação:
"Projete uma success page minimalista. Check circle animado grande no topo. Order number em fonte mono-space destacado. Estimativa de entrega com timeline visual de 4 passos: Processing, Shipped, Out for delivery, Delivered. Card de impacto ambiental: 'Your purchase saved 5kg CO2 and planted 2 trees' com ilustração isométrica de árvores crescendo. CTA 'Track order' primário, 'Share your impact' secundário com ícones sociais. Email sent confirmation."
05 FoodTech - Comida Saudável para Profissionais
Tela 1 - Explorar Menu:
"Projete uma tela de categorias com horizontal scroll de collections: 'Breakfast Bowls', 'Power Lunches', 'Protein Boxes', 'Salad Bar'. Cada collection como card com imagem apetitosa, nome, quantidade de opções, tempo médio de preparo. Filtros no topo: dietary (vegan, keto, gluten-free) como chips selecionáveis. Search bar com sugestões inteligentes. Quick actions: 'Repeat last order', 'Chef's special today'. Clean iOS style, muito white space."

Tela 2 - Customizar Bowl:
"Crie uma tela de builder com seções collapsibles: Base (rice, quinoa, greens), Protein (chicken, tofu, salmon), Veggies (6+ opções), Toppings, Dressing. Cada ingrediente como card horizontal com mini foto, nome, +/- quantity, preço extra se aplicável. Sidebar direito sticky: preview visual do bowl sendo montado, calorie counter atualizando em tempo real, macros bar (proteins/carbs/fats). Allergies warning em vermelho se aplicável. Preço total grande embaixo."

Tela 3 - Delivery Time Slot:
"Projete um seletor de horário com calendar view da semana. Dias como tabs horizontais, slots de 30min como grid vertical. Color code: verde (disponível), amarelo (poucos slots), cinza (lotado). Slot selecionado destacado com borda bold. Info no topo: 'Your office: 123 Main St' com link para mudar. Estimativa 'Ready in 25-30min'. Toggle 'Schedule for later' vs 'ASAP'. Delivery fee mostrado claramente. Map preview pequeno com tempo estimado."

Tela 4 - Review Order:
"Crie uma tela de resumo com accordion sections: Order items (editável), Delivery details (address, time, instructions field), Payment method (saved cards com radio buttons). Promo code input expansível. Subtotal breakdown transparente: items, delivery fee, service fee, tip selector (15%, 18%, 20%, custom). Total em tipografia large e bold. Estimativa nutricional do pedido completo embaixo. CTA 'Place order' verde grande com loading state."

Tela 5 - Order Tracking:
"Projete tracking em tempo real com mapa grande no topo mostrando o restaurante, o driver (dot animado), e o destino. Timeline vertical embaixo: Order placed (check), Preparing (in progress com spinner), Out for delivery (pending), Delivered (pending). Foto e nome do driver, rating, botão 'Contact driver'. ETA atualizado em real-time em tipografia grande. Ilustração do prato pedido. Botão 'Cancel order' discreto embaixo."
06 PropTech - Aluguel de Apartamentos para Estudantes
Tela 1 - Busca com Mapa:
"Projete uma split view: mapa interativo à esquerda com pins de propriedades, lista de resultados à direita scrollable. Filtros no topo como chips: price range slider, distance to campus, roommates (0-3+), amenities (wifi, laundry, parking). Cada listing card: foto principal, preço/mês large, endereço, distância à universidade com walk time, roommates atuais (avatares pequenos), quick stats (beds, baths). Card hover expande no mapa. Toggle vista lista/mapa. Results counter '48 apartments found'."

Tela 2 - Detalhe da Propriedade:
"Crie uma tela com galeria fullwidth no topo (swipeable, 8+ fotos, counter '1/8'). Embaixo: preço destacado com breakdown (rent + utilities), botão 'Schedule tour' sticky. Tabs: Overview (descrição, amenities com ícones, rules), Roommates (cards com foto, major, ano, mini bio, compatibility score), Location (mapa com points of interest: campus, grocery, gym), Reviews (rating breakdown, comments com fotos). 3D virtual tour embedded se disponível."

Tela 3 - Agendar Visita:
"Projete um scheduler com dual calendar view: disponibilidade do proprietário à esquerda, seu calendário à direita (opcional sync com Google Cal). Time slots a cada hora das 9h-18h. Tipo de tour: In-person ou Virtual (video call). Input para convidar roommate potencial à visita. Questions para o landlord (textarea). Resumo com: propriedade, data/hora, tipo de tour, attendees. Confirmação via email/SMS toggle. CTA 'Confirm tour' com loading states."

Tela 4 - Match com Roommates:
"Crie uma tela tipo dating app com cards de potenciais roommates. Card grande central com: foto, nome, idade, universidade/major, bio curta, lifestyle tags (early bird, social, quiet, clean freak), budget range, move-in date. Quiz compatibility score '85% match' destacado. Swipe left (pass) ou right (interest), ou botões grandes 'Pass' / 'Connect'. Matches mútuos embaixo como avatares pequenos. Filter preferences: sleep schedule, cleanliness, socialness."

Tela 5 - Aplicação à Propriedade:
"Projete um formulário multi-step com progress bar: Personal info (passo 1/4), Student verification (passo 2/4), Financial (passo 3/4), References (passo 4/4). Upload de documentos: ID, enrollment proof, income/guarantor info. Auto-save progress. Sidebar direito com resumo da propriedade à qual está aplicando. Application fee R$150 claramente mostrado. Background check consent checkbox. Estimativa 'Hear back in 24-48hrs'. CTA 'Submit application' com security badges."
07 Fitness - Treino em Casa para Mulheres 30-45
Tela 1 - Onboarding Goals:
"Projete uma tela de seleção de objetivos com 6 cards ilustrados: 'Lose weight', 'Tone up', 'Build strength', 'Flexibility', 'Stress relief', 'Postpartum recovery'. Cada card com ilustração feminina empowering, título bold, descrição curta. Multi-select permitido. Gradiente motivacional rosa/laranja de fundo. Progress dots embaixo '1 of 4'. Headline 'O que você quer alcançar?'. Ilustração de mulher meditando no canto. Botão 'Continue' grande."

Tela 2 - Fitness Level Assessment:
"Crie um quiz interativo com pergunta grande: 'Há quanto tempo você não se exercita?'. 4 opções como botões grandes com emojis: '< 1 month 💪', '1-6 months 🤔', '6-12 months 😅', '1+ year 😬'. Próxima pergunta ao selecionar. Progress bar animado no topo. Background com subtle pattern de dumbbells. Ilustração de mulher tomando água. Tom motivacional, nunca julgador. Smooth transitions entre as perguntas."

Tela 3 - Treino ao Vivo:
"Projete uma tela de treino com vídeo do instrutor ocupando 60% superior. Overlay transparente embaixo com: temporizador circular grande em countdown, exercício atual em bold, próximo exercício em preview pequeno. Rep counter central animado (10... 9... 8...). Botões: pause (grande), skip exercise, adjust intensity. Music toggle. Progress bar do treino total. Motivational quotes aparecendo a cada 30 segs. Heart rate zone se houver wearable conectado."

Tela 4 - Treino Concluído:
"Crie uma tela de celebração com confetti sutil. Headline 'Treino concluído! 🎉'. Stats destacados em cards: duração, calorias queimadas (com flame icon), personal record se aplicável. Gráfico de intensidade cardíaca durante o treino. Selfie prompt 'Capture your post-workout glow' com câmera. Rating de dificuldade do treino (1-5 estrelas). Share to social com templates pré-desenhados. CTA dual: 'Cool down stretch' e 'Back to home'."

Tela 5 - Progresso Semanal:
"Projete um dashboard de progresso com calendar heat map mostrando treinos concluídos (gradiente de cor por intensidade). No topo: streak atual '7 days 🔥', total de treinos este mês, tempo total. Gráficos: tendência de peso (opcional), measurements changes, strength progression em exercícios-chave. Before/after photo comparison com slider. Next milestone com progress bar. Motivational quote personalizado. Botão 'Schedule next week'. Community feed com conquistas de outras usuárias para motivação."
08 AgriTech - Monitoramento de Cultivos para Pequenos Agricultores
Tela 1 - Dashboard Principal:
"Projete um dashboard simples com 4 cards grandes: 'Meus lotes' (lista de parcelas com estado de saúde), 'Clima hoje' (temperatura, chuva, umidade com ícones grandes), 'Alertas' (notificações importantes com badge vermelho), 'Recomendações' (tarefas sugeridas hoje). Iconografia universal sem dependência de texto. Verde dominante para saúde boa, amarelo aviso, vermelho crítico. Header com nome do agricultor e foto. Offline mode indicator claro."

Tela 2 - Detalhe do Lote:
"Crie uma tela de cultivo específico com foto aérea do lote no topo (se disponível) ou ícone de cultivo grande. Info-chave em cards: umidade do solo (medidor visual tipo tanque se enchendo), última chuva, dias desde o plantio (contador visual), pragas detectadas (lista com ícones e severidade). Gráfico simples de temperatura da última semana. Botão grande 'Regar agora' ou 'Programar irrigação'. Estado de crescimento com ilustrações de plantas em etapas."

Tela 3 - Previsão Semanal:
"Projete um calendário de 7 dias horizontal com cada dia como card: data, ícone de clima grande (sol, nuvens, chuva), temp max/min, probabilidade de chuva em %, recomendação ('Bom dia para fertilizar'). Hoje destacado com borda. Alertas importantes no topo com ícone warning: 'Geada esperada amanhã - proteja os cultivos'. Ilustrações simples que não exijam alta alfabetização. Botões de ação direta: 'Ver dicas', 'Configurar alerta'."

Tela 4 - Recomendações de Irrigação:
"Crie uma tela com calculadora visual simples: ilustração de planta com gotas de água. Input grande para hectares do lote, tipo de cultivo (dropdown com ícones), umidade atual (slider visual). Resultado em card destacado: 'Regar X litros' em número grande, 'Tempo estimado: Y horas', 'Melhor momento: amanhã 6h-8h'. Razão explicada em texto simples. Botão 'Programar lembrete'. Dicas de economia de água embaixo com ícones."

Tela 5 - Registro de Atividades:
"Projete um formulário simples para logging: 'O que você fez hoje?'. Botões grandes com ícones: Regar, Fertilizar, Pulverizar, Colher, Outro. Seletor de lote visual (fotos ou ícones de cultivos). Quantidade usada (input numérico grande). Data/hora com calendário visual. Opção de tirar foto como evidência. Histórico de atividades embaixo como timeline simples. Auto-salvamento com indicador. Funciona offline, sincroniza quando há sinal."
09 TravelTech - Seleção de Assentos Low-Cost
Tela 1 - Visão Completa do Avião:
"Projete uma representação visual do avião visto de cima. Fileiras numeradas claramente, assentos como quadrados com código de cor: verde (disponível), azul (sua seleção), cinza (ocupado), dourado (premium available). Legenda de cores no topo. Zoom controls para mobile. Info do voo no header: origem-destino, duração, data. Quick filters: 'Window only', 'Aisle only', 'Together' se múltiplos passageiros. Preço base 'Included' vs extras mostrados inline."

Tela 2 - Detalhe do Assento:
"Crie um modal/drawer com info do assento selecionado: número grande (12A), tipo (Window), seção (Economy), pitch/recline specs com ícones visuais. Prós/contras: '✓ Extra legroom', '✗ Near bathroom'. User review rating e comments ('Quiet section', 'Good for sleeping'). Preço extra se aplicável em grande (+R$45). Fotos do assento real se disponíveis. Amenities próximas (outlet, wifi). Comparar com assentos adjacentes. CTA dual: 'Select' ou 'Choose different'."

Tela 3 - Upgrade Offers:
"Projete uma tela de upsell com 3 tiers comparativos: 'Current (Economy)', 'Comfort+' (+R$135), 'Premium' (+R$360). Cada tier como coluna com: visual do assento (foto), benefícios em checklist, price delta. Destacar diferenças: legroom measurement visual, priority boarding, free drinks, checked bag. Badge 'Most popular' no tier do meio. Toggle para ver 'Per person' vs 'Total'. Countdown timer sutil 'Upgrade price valid for 10 min'. Skip option clara."

Tela 4 - Múltiplos Passageiros:
"Crie uma interface para atribuir assentos a múltiplos viajantes. Lista de passageiros à esquerda: 'John Doe (Adult)', 'Jane Doe (Child 8yo)'. Mapa do avião à direita com assentos já selecionados numerados e conectados visualmente. Botão 'Auto-assign together' que encontra os melhores assentos contíguos. Individual override permitido. Prioridade mostrada: crianças perto dos pais, preferências individuais lembradas. Total cost atualizando em real-time embaixo."

Tela 5 - Confirmação de Seleção:
"Projete um resumo final com preview dos boarding passes. Cada passageiro como card: nome, assento atribuído visual (12A, window icon), gate info placeholder. Mapa mini do avião mostrando seus assentos destacados. Mudanças permitidas com a penalidade mostrada. Extras adicionados listados: seat selection fee, any upgrades. Add to calendar button. Download/email boarding pass. Reminder setup 'Notify me 24hrs before'. CTA 'Confirm & continue to payment' grande. Secure lock icon."
10 SocialTech - Rede para Criadores de Conteúdo
Tela 1 - Perfil Showcase:
"Projete um perfil maximalista tipo Bento grid: header com cover video/gif animado, avatar grande com borda de cor personalizável. Grid assimétrico de portfolio: vídeos featured, carrosséis de imagens, depoimentos, case studies. Stats destacadas em cards flutuantes: 1.2M followers, 4.5M engagement, R$250 avg collab rate. Bio expansível com tags de nichos (#TechReview #Unboxing). Social links como ícones grandes. Booking calendar integration teaser. Verified badge proeminente. Tema de cor custom do criador."

Tela 2 - Dashboard de Analytics:
"Crie um dashboard de stats com múltiplos widgets: gráfico de crescimento de followers (últimos 30 dias), engagement rate por plataforma (IG, TikTok, YouTube como tabs), top performing posts em grid com metrics overlay, demographic breakdown (idade, localização com mapinha), best time to post heatmap. Revenue tracking este mês. Collaboration requests counter com badge. Export report button. Comparação com o período anterior (+12% growth visual). Filters por date range."

Tela 3 - Collaboration Marketplace:
"Projete um feed de oportunidades de collab com filtro na sidebar: indústria, budget range, tipo de conteúdo (video, foto, story). Cada oportunidade como card: marca logo, brief curto, deliverables, compensation, deadline, aplicantes atuais. Quick apply button. 'Match score' baseado no seu perfil (85%). Status tags: Open, Applied, Under Review, Accepted. Sort by: newest, best pay, best match. Featured collabs no topo com spotlight. Saved/bookmarked section."

Tela 4 - Content Calendar:
"Crie um calendário mensal visual com color-coding por plataforma e tipo de conteúdo. Cada dia com mini-cards de posts agendados: thumbnail, platform icon, hora de publicação, status (draft, scheduled, published). Drag-and-drop para reagendar. Multi-view: mês, semana, dia. Quick add a partir de qualquer data. Template library na sidebar. Bulk schedule option. Collaboration deadlines marcadas com flag icon. Analytics preview no hover. Export do calendário como imagem para o cliente."

Tela 5 - Collaboration Chat:
"Projete um messenger para negociações com marcas. Lista de conversas à esquerda: marca logo, nome, última mensagem, unread badge. Chat à direita: mensagens com timestamps, file sharing (contracts, briefs), media preview. Quick actions: 'Send rate card', 'Share portfolio', 'Propose date'. Contract templates pré-construídos para enviar. Video call button. Payment request integration. Mark as paid/completed. Archive de deals concluídos. Starred messages. Search conversations. Notification preferences por chat."
11 InsurTech - Relatório de Sinistro de Auto
Tela 1 - Início do Relatório:
"Projete uma tela reassuring com ilustração isométrica de dois carros colidindo suavemente (não dramática). Headline calmante 'Estamos aqui para ajudar'. Duas opções grandes como cards: 'Acidente leve' (arranhões, batidas) e 'Acidente grave' (não funciona, ambulância necessária). Cada card com descrição e timeline estimado do processo. Azul tranquilizador dominante. Botão de emergência vermelho pequeno no topo 'Você precisa de ambulância?'. Progresso salvo automaticamente."

Tela 2 - Localização e Fotos:
"Crie uma tela com mapa grande mostrando a localização atual (GPS auto-detected) com pin arrastável para ajustar. Botão 'Usar localização atual' vs 'Inserir endereço manualmente'. Embaixo: upload de fotos com guia visual ilustrado (4 ângulos do dano, placas, outro veículo se aplicável). Camera interface nativa com overlay guide mostrando como enquadrar. Preview thumbnails com opção de refazer. Counter '3/6 fotos'. Dicas: 'Inclua referências de contexto'."

Tela 3 - Detalhes do Incidente:
"Projete um formulário conversacional com uma pergunta por tela, transições suaves. Q1: 'Quando aconteceu?' (date/time picker grande). Q2: 'Você estava dirigindo?' (Yes/No botões). Q3: 'Houve feridos?' (radio buttons com ilustrações). Q4: 'Outros veículos envolvidos?' com opção de adicionar info de terceiros. Q5: 'Reportado à polícia?' com upload do boletim se sim. Progress bar animado no topo. Botão back permitido. Auto-save constante."

Tela 4 - Chat com o Perito:
"Crie uma interface de chat ao vivo com foto e nome do perito designado. Mensagens com timestamps. O perito envia: 'Revisei seu caso, só preciso confirmar...'. Opções de resposta rápida como chips selecionáveis além de input livre. Status no topo: 'Estimativa de resposta: 2hrs'. File sharing para docs adicionais. Video call option se o perito solicitar. Tradução automática se necessário. Notification quando o perito está digitando. Histórico de chat salvo."

Tela 5 - Status e Timeline:
"Projete o tracking do caso com timeline vertical: Relatório recebido (check verde), Revisão em andamento (ativo com spinner), Aprovação (pendente), Pagamento autorizado (pendente). Cada passo com data estimada. Card destacado no topo: 'Estimativa de reparo: R$1.200-R$1.500', 'Oficina recomendada' com mapa/endereço, 'Franquia: R$500'. Opção de escolher oficina alternativa. Status notifications toggle. Documentos gerados (claim number, authorization) baixáveis. CTA 'Contatar perito' sempre visível."
12 PetTech - Gestão Veterinária
Tela 1 - Perfil do Pet:
"Projete um perfil adorável com foto circular gigante do pet no centro (upload custom ou escolher de ilustrações). Nome em tipografia playful no topo. Info básica em cards cute: espécie (ícone cão/gato), raça, idade (com ícone de bolo de aniversário), peso atual (com seta de tendência up/down). Card de health summary: vacinas em dia (green check), próxima consulta, condições crônicas se aplicável. Background com pattern sutil de patinhas. Color scheme baseado no tipo de pet (laranja/gatos, azul/cães)."

Tela 2 - Timeline de Vacinas:
"Crie uma visão de histórico médico como timeline vertical com marcos importantes. Cada vacina como card: nome da vacina, data aplicada (com green check se concluída), próximo reforço com countdown ('Em 45 dias'), veterinário que aplicou. Cards pendentes com alerta amarelo sutil. Filtros: 'Todas', 'Vacinas', 'Vermifugação', 'Check-ups'. Botão add event (+) grande flutuante. Exportar PDF do histórico completo. Lembretes automáticos configuráveis. Ilustrações de seringas e médicos amigáveis, nunca assustadoras."

Tela 3 - Lembretes de Medicamentos:
"Projete uma tela de gestão de meds com lista de medicamentos ativos. Cada med como card expansível: nome, dose, frequência, hora(s) do dia com ícones (manhã sol, noite lua). Toggle para marcar dose como dada com micro-animação de confetti. Push notifications preview. Calendário mensal pequeno mostrando dias de tratamento. Stock counter 'Restam 12 comprimidos, reabasteça em 4 dias'. Link à farmácia/compra. Instruções especiais (com comida, etc). Photo upload do medicamento para fácil identificação."

Tela 4 - Agendar Consulta Vet:
"Crie um scheduler com lista de clínicas veterinárias próximas (map view toggle). Cada clínica com: rating de estrelas, distância, foto, especialidades, próxima disponibilidade ('Hoje 16h'). Filtros: emergências 24/7, especialidades, price range. Selecionar clínica → calendário com slots. Tipo de visita: check-up, vacina, emergência, grooming. Adicionar notas/sintomas. Photo upload se houver ferida/problema visível. Reminder preferences. Add to calendar com endereço. Opção de consulta virtual se disponível."

Tela 5 - Dicas Personalizadas:
"Projete um feed de dicas curado baseado no perfil do pet: idade, raça, condições. Cards de conteúdo: 'Exercício para [raça]' com vídeo, 'Dieta sênior' artigo, 'Cuidado dental' checklist. Cada dica com ilustração custom, source (vet verified badge), save/bookmark. Categorias: nutrição, exercício, comportamento, saúde. Quiz integrado 'Test your pet knowledge'. Community tips de outros donos com a mesma raça. Seasonal reminders (calor, frio). Product recommendations com afiliados. Vet AMA section."