Ao lançar uma app ou SaaS, calendários de design travam em três assets: splash / lançamento, cartões de benefícios de funcionalidades e ilustrações de estado vazio. Componentes existem no Figma, mas capturas de loja e onboarding ainda carecem de visuais; terceirizar leva uma semana por ronda enquanto o copy muda sem parar.
Image 2 encaixa melhor: trate a necessidade como uma linha de produção de slots visuais UI — fixe cor de marca e hierarquia tipográfica, depois entregue splash → onboarding → cartões de funcionalidades → empty state → mock de ajustes → frame de loja. Este post partilha 6 prompts image-2 testados para ecrãs App / UI prontos para review.
Use como playbook produto-design: um trabalho por frame, copy literal, confirme ortografia de botões e títulos antes de exportar.
📌 Os prompts abaixo estão em inglês (Image 2 gere bem inglês estruturado e texto in-image). Revise manualmente copy de UI, marcas registadas e contraste acessível; o acabamento final deve chegar ao Figma em grelha de 8pt com componentes reais.
1. Por que Image 2 encaixa no trabalho «App / UI screen»
Versus esperar que um modelo genérico de ilustração tenha sorte, Image 2 ganha porque:
-
Texto in-image mantém-se legível — títulos de splash, cartões de funcionalidades de três linhas, CTAs de empty state — ~99% de renderização de texto nível benchmark supera «gerar e colar tipografia no PS» para entregar arte de interface IA.
-
Edições multi-turno trocam copy sem estragar layout — PM muda uma linha de onboarding; substitua em chat mantendo ilustração e forma do botão — edições conversacionais Image2 brilham aqui.
-
Restrições de estilo tornam-se campos do design system — HEX de marca, raio de canto, intensidade de sombra, estilo de ilustração (flat / soft 3D) em cada prompt faz a série parecer um Design System.
Para parceiros de produto e design: assets visuais UI podem ser gerados a partir de uma arquitetura de informação, não esperando um calendário de ilustração.
2. Fluxo de trabalho padrão (cinco passos)
-
Liste os slots visuais UI — mínimo seis: ① splash/lançamento ② página de onboarding ③ cartões de benefícios (3 pontos) ④ empty state ⑤ mock de ajustes/perfil ⑥ frame de captura App Store / loja. Nunca meta uma app interativa completa numa imagem.
-
Escreva restrições de marca e tipografia — cores primária/secundária, fundo claro/escuro, limites de comprimento de título; evite falsificar chrome de SO com marcas registadas (barras de estado genéricas estão bem).
-
Um trabalho por frame + copy literal — cada um responde a uma pergunta do utilizador: impressão ao primeiro abrir? por que ficar? e se não houver dados? como fica na loja?
-
Unifique proporções — splash/loja muitas vezes 9:16; cartões de funcionalidades 1:1 ou 4:5; mantenha uma família de ratio dentro do set.
-
Três verificações antes do Figma — ortografia, contraste, raio de canto vs DS — corrija deriva com edições multi-turno Image 2 em vez de regenerar tudo.
3. Seis prompts UI testados (copiar-colar)
Produto exemplo: uma app fictícia de produtividade «FlowDay». Troque nome e benefícios pelos seus. Mantenha um acento de marca em cada prompt (exemplo: #4F46E5 índigo).
Slot 1: Splash / ecrã de lançamento
Cenário: impressão de marca em cold start — marca centrada + tagline curto.
App splash / launch screen mock with Image 2 for mobile UI.
Vertical 9:16, clean modern iOS-like frame (generic status bar, no trademarked icons).
Centered app mark: simple indigo rounded-square icon with white "F" monogram.
Headline exactly: "FlowDay"
Subline exactly: "Plan less. Finish more."
Background: soft indigo-to-white gradient, subtle geometric glow, ample padding.
Sharp legible type, Image2 text accuracy, premium SaaS look.
Do not clutter with fake notifications. No watermark.
Resultado: um visual de splash de app pronto para review.
Slot 2: Página única de onboarding
Cenário: página de valor ao primeiro abrir — copy + ilustração.
Mobile onboarding screen UI mock using Image 2.
Vertical 9:16, light mode, generous bottom padding for a primary button.
Top illustration: soft 3D calendar and checkmarks, brand color #4F46E5 accents.
Title exactly: "Your day, in one timeline"
Body exactly: "Drag tasks into focus blocks. FlowDay keeps priorities visible."
Primary button label exactly: "Continue"
Keep layout airy, 8pt rhythm feel, Image 2 commercial UI quality.
Do not invent extra menus. Do not misspell.
Resultado: copy e arte de onboarding como uma unidade — rápido para linhas A/B.
Slot 3: Cartões de benefícios (três pontos)
Cenário: fila de funcionalidades do site ou header de paywall com três cartões iguais.
App feature benefit cards board with Image 2 (UI marketing).
1:1 or 4:5, white background, three equal cards in a row with soft shadow.
Card icons in #4F46E5. Exact English labels:
Card1 title: "Focus Blocks" / line: "Timeboxed deep work"
Card2 title: "Smart Reminders" / line: "Nudge only what matters"
Card3 title: "Weekly Review" / line: "See progress at a glance"
Modern SaaS marketing UI, crisp type, Image2 text accuracy.
No fake App Store badges. No overcrowded icons.
Resultado: cartões de funcionalidades estruturados — o frame que mais precisa de precisão de texto.
Slot 4: Ecrã de empty state
Cenário: sem tarefas/notificações — orientação amigável, não «está partido».
Empty-state mobile screen with Image 2 for product UI.
Vertical 9:16, light gray background, large friendly illustration center:
soft 3D empty inbox with a single indigo plus badge.
Title exactly: "Nothing here yet"
Body exactly: "Create your first focus block to start the day."
Secondary text button exactly: "Create task"
Clean, calm, accessible contrast, Image 2 UI illustration quality.
Do not make it look like an error. No scary red alerts.
Resultado: empty state torna-se acionável em vez de vazio.
Slot 5: Mock de ajustes / perfil
Cenário: mostrar IA a stakeholders — não interativo está bem.
Settings / profile screen mock with Image 2 (non-interactive UI visual).
Vertical 9:16, light mode list UI, rounded group cells.
Header: avatar circle + name "Alex Chen" + plan chip "Pro".
List rows with exact labels: "Notifications" / "Calendars" / "Appearance" / "Export Data".
Accent switches and chevrons in #4F46E5, generous spacing, SF-like but generic typography.
Image2 clean UI mock quality. Do not copy real iOS glyphs trademarked details.
No tiny unreadable text.
Resultado: mock de ajustes suficiente para reuniões sem fingir que é tocável.
Slot 6: Frame de captura de loja (com dispositivo)
Cenário: asset de listagem — chrome de telefone + UI chave + legenda superior.
App Store screenshot composition with Image 2.
Vertical 9:16 marketing frame: large caption on top, phone device mock below.
Caption exactly: "Focus blocks that actually stick"
Inside the phone: a clean task timeline UI using brand #4F46E5, legible list titles.
Soft studio shadow under device, light gray backdrop, premium DTC style.
Image 2 commercial ASO visual. Exact text, no gibberish.
Do not invent fake star ratings. Do not overcrowded stickers.
Resultado: frame de direção ASO; troque capturas reais depois no Figma.
4. Modelo universal de preenchimento
Altere apenas a linha de trabalho e o copy in-image por slot:
Image 2 App / UI visual slot.
Brand lock: primary #[HEX], [light|dark] mode, [flat|soft-3D] illustration style.
Frame job (ONE only): [splash / onboarding / feature cards / empty state / settings mock / store screenshot].
Aspect: [9:16 | 1:1 | 4:5].
On-image copy exactly: "[titles/buttons]" — verbatim, no extra claims.
Do not: [fake OS trademarks / unreadable microcopy / cluttered chrome].
Output: review-ready UI visual, Image2 quality.
5. Ilustração terceirizada vs slots UI Image 2 vs collage de ícones
| Dimensão | Ilustração terceirizada completa | Linha de slots UI Image 2 | Collage de ícones / capturas |
|---|---|---|---|
| Velocidade de revisão de copy | Lenta (redesenhar) | Rápida (multi-turno uma linha) | Rápida mas aspecto barato |
| Consistência do design system | Depende do brief | HEX / campos de estilo fixam | Deriva fácil |
| Melhor fase | Versões major de marca | Iteração semanal, reviews, rascunhos ASO | Apenas rascunhos internos |
| Risco principal | Calendário | Revisão humana de tipografia e grelha | Lacuna de conversão / acabamento |
6. Quem deve usar este método?
✅ PMs / líderes de projeto
Preencha splash, empty states e direção de loja com Image 2 antes de reviews — menos slides «deixar em branco».
✅ Designers UI / UX
Trate image-2 como camada de exploração visual: fixe cor e tipografia, gere, depois alinhe componentes reais no Figma.
✅ Indie builders / equipas pequenas
Sem ilustrador dedicado? Uma família de prompts ainda produz splash de app e cartões de funcionalidades coerentes.
✅ Growth e ops ASO
Legendas de loja mudam frequentemente — edições multi-turno superam refazer todo o frame do dispositivo.
7. Três modos de falha comuns
-
❌ Uma imagem que simula uma app tocável completa — Image 2 vira sopa de UI confusa. Divida por slot; mantenha protótipos interativos no Figma/código.
-
❌ Copy vago como «algum texto de funcionalidade» — deriva tipográfica mata entrega de design UI. Títulos e botões devem ser
exactly: "...". -
❌ Detalhes de marca de SO falsificados sem verificar contraste — barras de estado genéricas bastam; confirme acessibilidade claro-sobre-claro antes de exportar.
8. Encerramento
Image 2 para visuais App / UI não é «gerar uma single mais chamativa» — é bloqueio de marca → slots UI → copy literal → polish multi-turno → acabamento Figma.
Da próxima vez que faltar splash, cartão de funcionalidade ou empty state, não faça collage de stock. Abra o workbench Image2 e execute estes seis slots — obterá um set AI interface unificado e legível pronto para review, iteração e início de frames de loja.
O splash sustenta a marca, os cartões declaram o valor, o empty state mostra o próximo passo — esse é o loop produto-design image-2.
Notas práticas; prompts livres para copiar e adaptar. Confirme copy, marcas registadas e regras de capturas de loja antes de publicar.
