En shipant une app ou un SaaS, les calendriers design bloquent sur trois assets : splash / lancement, cartes bénéfices fonctionnalités et illustrations d’état vide. Les composants existent dans Figma, mais captures store et onboarding manquent encore de visuels ; l’externalisation prend une semaine par tour alors que le copy change sans cesse.
Image 2 convient mieux : traitez le besoin comme une ligne de production de slots visuels UI — verrouillez couleur de marque et hiérarchie typo, puis livrez splash → onboarding → cartes fonctionnalités → empty state → mock réglages → cadre store. Ce post partage 6 prompts image-2 testés pour des écrans App / UI prêts pour review.
Utilisez-le comme playbook produit-design : un job par frame, copy mot pour mot, vérifiez l’orthographe des boutons et titres avant export.
📌 Les prompts ci-dessous sont en anglais (Image 2 gère bien l’anglais structuré et le texte in-image). Relisez manuellement le copy UI, marques déposées et contraste accessible ; le polish final doit arriver dans Figma sur grille 8pt avec de vrais composants.
1. Pourquoi Image 2 convient au travail « App / UI screen »
Plutôt qu’espérer qu’un modèle d’illustration générique ait de la chance, Image 2 gagne car :
-
Le texte in-image reste lisible — titres splash, cartes fonctionnalités trois lignes, CTAs empty state — un rendu texte ~99% niveau benchmark bat « générer puis coller la typo dans PS » pour livrer de l’art d’interface IA.
-
Les edits multi-tours échangent le copy sans casser le layout — le PM change une ligne d’onboarding ; remplacez-la en chat en gardant illustration et forme du bouton — les edits conversationnelles Image2 brillent ici.
-
Les contraintes de style deviennent des champs design system — HEX marque, rayon d’angle, force d’ombre, style d’illustration (flat / soft 3D) dans chaque prompt rend la série cohérente comme un Design System.
Pour les partenaires produit et design : les assets visuels UI peuvent être générés depuis une architecture d’information, pas en attendant un calendrier d’illustration.
2. Workflow standard (cinq étapes)
-
Lister les slots visuels UI — minimum six : ① splash/lancement ② page onboarding ③ cartes bénéfices (3 points) ④ empty state ⑤ mock réglages/profil ⑥ cadre capture App Store / store. Ne jamais entasser une app interactive complète dans une image.
-
Écrire contraintes marque et typo — couleurs primaire/secondaire, fond clair/sombre, limites de longueur de titre ; éviter de falsifier le chrome OS protégé (barres d’état génériques OK).
-
Un job par frame + copy mot pour mot — chacun répond à une question utilisateur : première impression à l’ouverture ? pourquoi rester ? que faire sans données ? à quoi ça ressemble en store ?
-
Unifier les ratios — splash/store souvent 9:16 ; cartes fonctionnalités 1:1 ou 4:5 ; garder une famille de ratio dans le set.
-
Trois checks avant Figma — orthographe, contraste, rayon d’angle vs DS — corriger la dérive avec edits multi-tours Image 2 au lieu de tout regénérer.
3. Six prompts UI testés (copier-coller)
Produit exemple : une app fictive de productivité « FlowDay ». Remplacez nom et bénéfices par les vôtres. Gardez un accent marque dans chaque prompt (exemple : #4F46E5 indigo).
Slot 1 : Splash / écran de lancement
Scénario : impression marque au cold start — logo centré + tagline court.
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.
Résultat : un visuel splash app prêt pour review.
Slot 2 : Page onboarding unique
Scénario : page valeur à la première ouverture — copy + illustration.
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.
Résultat : copy et art onboarding en une unité — rapide pour lignes A/B.
Slot 3 : Cartes bénéfices (trois points)
Scénario : rangée fonctionnalités site ou header paywall avec trois cartes égales.
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.
Résultat : cartes fonctionnalités structurées — le frame qui exige le plus de précision texte.
Slot 4 : Écran empty state
Scénario : pas de tâches/notifications — guidance amicale, pas « c’est cassé ».
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.
Résultat : l’empty state devient actionnable au lieu de vide.
Slot 5 : Mock réglages / profil
Scénario : montrer l’IA aux stakeholders — non interactif OK.
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.
Résultat : mock réglages suffisant pour réunions sans prétendre qu’il est tappable.
Slot 6 : Cadre capture store (avec appareil)
Scénario : asset listing — chrome téléphone + UI clé + légende haut.
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.
Résultat : frame direction ASO ; swapper vraies captures plus tard dans Figma.
4. Modèle universel à remplir
Changez seulement la ligne job et le copy in-image par 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. Illustration externalisée vs slots UI Image 2 vs collage d’icônes
| Dimension | Illustration externalisée complète | Ligne slots UI Image 2 | Collage icônes / captures |
|---|---|---|---|
| Vitesse révision copy | Lente (redessiner) | Rapide (multi-tour une ligne) | Rapide mais look cheap |
| Cohérence design system | Dépend du brief | HEX / champs style verrouillent | Dérive facile |
| Meilleure étape | Versions majeures marque | Itération hebdo, reviews, brouillons ASO | Brouillons internes seulement |
| Risque principal | Planning | Relecture humaine typo & grille | Écart conversion / polish |
6. Qui devrait utiliser cette méthode ?
✅ PMs / chefs de projet
Remplir splash, empty states et direction store avec Image 2 avant reviews — moins de slides « laisser vide ».
✅ Designers UI / UX
Traiter image-2 comme couche d’exploration visuelle : verrouiller couleur et typo, générer, puis aligner vrais composants dans Figma.
✅ Indie builders / petites équipes
Pas d’illustrateur dédié ? Une famille de prompts produit quand même un splash app et cartes fonctionnalités cohérents.
✅ Growth & ops ASO
Les légendes store changent souvent — edits multi-tours battent refaire tout le cadre device.
7. Trois modes d’échec courants
-
❌ Une image qui simule une app entière tappable — Image 2 devient soupe UI encombrée. Découper par slot ; garder prototypes interactifs dans Figma/code.
-
❌ Copy vague type « du texte de fonctionnalité » — la dérive typo tue la livraison design UI. Titres et boutons doivent être
exactly: "...". -
❌ Détails marque OS falsifiés sans check contraste — barres d’état génériques suffisent ; vérifier accessibilité clair-sur-clair avant export.
8. Conclusion
Image 2 pour visuels App / UI ce n’est pas « rouler une single plus flashy » — c’est verrou marque → slots UI → copy mot pour mot → polish multi-tours → finish Figma.
La prochaine fois qu’il manque splash, carte fonctionnalité ou empty state, pas de collage stock. Ouvrez le workbench Image2 et lancez ces six slots — vous obtiendrez un set AI interface unifié et lisible prêt pour review, itération et démarrages cadres store.
Le splash porte la marque, les cartes disent la valeur, l’empty state montre la prochaine étape — c’est la boucle produit-design image-2.
Notes pratiques ; prompts libres à copier et adapter. Confirmez copy, marques et règles captures store avant shipping.
