Prompt structure
Product type, Screen content, Layout, Device frame, Visual system are the core details to include. A strong prompt tells GPT Image 2 what the image is for, what should be visible, and how the output should be composed.
Prompt use case
App UI Mockup Prompts
Prompt examples for AI-generated app screens, SaaS dashboards, product UI previews, and website mockups.
app UI mockup promptAI dashboard promptwebsite mockup prompt
Search intent
This page targets users looking for app UI mockup prompt and AI dashboard prompt. It pairs examples with copyable prompt text and a direct route into the Image2Studio workbench.
Best used for
- App screens
- Dashboards
- Product previews
- Website mockups
Prompt structure
- Product type
- Screen content
- Layout
- Device frame
- Visual system
Prompt examples
Copy-ready examples
UI Mockups
视频流媒体平台主页 UI
{ "type": "web browser UI mockup", "platform": "{argument name=\"platform name\" default=\"YouTube\"}", "browser_window": { "style": "macOS light mode", "tab": "YouTube", "url_bar": "youtube.com" }, "layout": { "header": { "components": ["hamburger menu", "platform logo", "search bar", "create video icon", "notifications bell", "user profile avatar"] }, "sidebar": { "position": "left", "item_count": 11, "sections": [ { "name": "Main", "items": ["Home", "Shorts", "Subscriptions", "Originals", "YouTube Music"] }, { "name": "Explore", "items": ["Trending", "Shopping", "Music", "Movies", "Live", "Gaming"] } ] }, "main_content": { "category_tags": { "count": 10, "labels": ["All", "Gaming", "Music", "Live", "Podcasts", "AI", "Cars", "Mixes", "News", "Recently uploaded"] }, "video_grid": { "card_count": 5, "cards": [ { "position": "top left", "size": "large", "thumbnail_description": "Sam Altman and Greg Brockman sitting on a stage next to a standing humanoid robot, text overlay 'OpenAI Introducing Our Humanoid Robot', LIVE badge", "video_title": "{argument name=\"featured live stream title\" default=\"Introducing Our Humanoid Robot\"}", "channel_name": "{argument name=\"featured live stream channel\" default=\"OpenAI\"}", "metadata": "482K watching now" }, { "position": "top right", "size": "large", "thumbnail_description": "surprised man's face on the left, a large mansion hidden in a forest with an explosion on the right, bold yellow text overlay '{argument name=\"top right thumbnail text\" default=\"TOTAL SECRECY\"}'", "video_title": "{argument name=\"top right video title\" default=\"I Bought 100 Million Dollar Secret House!\"}", "channel_name": "MrBeast", "metadata": "4.1M views, 19 hours ago, 20:49 duration" }, { "position": "bottom left", "size": "small", "thumbnail_description": "Steve Carell holding a laptop showing a scene from The Office", "video_title": "Steve Carell Breaks Down His Most Iconic Characters | GQ", "channel_name": "GQ", "metadata": "987K views, 2 days ago, 17:46 duration" }, { "position": "bottom middle", "size": "small", "thumbnail_description": "man looking through a spyglass at a sailing ship on the ocean at sunset", "video_title": "Black Sails Is Beautiful!", "channel_name": "Savage Books", "metadata": "606K views, 2 days ago, 17:46 duration" }, { "position": "bottom right", "size": "small", "thumbnail_description": "creepy masked killer character from a video game with text overlay 'DEAD OF DAYLIGHT'", "video_title": "Playing As The Seekers In Dead By Daylight", "channel_name": "Unknown", "metadata": "806K views, 1 day ago, 28:39 duration" } ] } } } }
Poster
AI 编程助手宣传信息图
{ "type": "app promotional infographic poster", "style": "clean, modern, glassmorphism, soft shadows, 3D icons", "theme": "{argument name=\"primary color theme\" default=\"blue and white\"}", "header": { "title": "{argument name=\"app name\" default=\"CodePilot\"}", "subtitle": "{argument name=\"subtitle\" default=\"你的 AI 编程副驾驶\"}", "features_list": "智能补全 · 代码生成 · 问答调试 · 代码解析", "main_icon": "glossy 3D rounded square, blue gradient, white {argument name=\"main icon symbol\" default=\"</>\"} and sparkles" }, "layout": { "sections": [ { "title": "feature_cards", "position": "middle grid", "count": 4, "items": [ { "label": "智能代码补全", "icon": "blue lightning bolt", "description": "上下文感知, 精准补全 让编码更快一步", "ui_element": "macOS style code window with Python calculate_total function" }, { "label": "AI 代码生成", "icon": "purple magic wand", "description": "根据自然语言描述 一键生成函数 & 脚本", "ui_element": "chat prompt bubble and code window with Python quick_sort function" }, { "label": "对话 & 调试助手", "icon": "green chat bubble", "description": "自然语言提问、定位 Bug 边聊边改, 高效解决问题", "ui_element": "chat interface with user question and green AI resolution bubble" }, { "label": "代码解析 & 注释", "icon": "orange document with magnifying glass", "description": "快速理解复杂代码 自动生成注释与说明", "ui_element": "code window with JS fetchData function and 3 floating action tags: 自动注释, 逻辑解析, 一键复制" } ] }, { "title": "为什么选择 CodePilot?", "position": "bottom left", "count": 4, "labels": ["提升效率", "精准可靠", "隐私安全", "易于集成"], "icons": ["clock", "checkmark", "shield", "puzzle piece"] }, { "title": "立即体验", "position": "bottom right", "count": 1, "elements": ["GitHub 开源项目", "{argument name=\"github link\" default=\"github.com/op7418/CodePilot\"}", "QR code"] } ] } }
UI Mockups
深色模式 AI API 定价页面模型
{ "type": "dark mode web page UI mockup", "theme": "sleek, modern, dark theme with white and light grey text", "header": { "logo": "{argument name=\"company name\" default=\"OpenAI\"}", "navigation": ["Research", "Products", "Safety", "Company"], "actions": ["Search icon", "Log in", "Try ChatGPT button"] }, "layout": { "left_column": { "label": "PRICING", "headline": "{argument name=\"model name\" default=\"GPT-8\"}", "subheading": "{argument name=\"main tagline\" default=\"Our most powerful model yet.\"}", "description": "GPT-8 is designed for intelligence, reliability, and real-world impact. Built with multimodal reasoning, long-context understanding, and advanced tool use.", "button": "GET STARTED", "features": { "count": 3, "items": [ {"icon": "brain", "title": "Frontier intelligence", "desc": "State-of-the-art reasoning, coding, and problem solving."}, {"icon": "shield", "title": "Trusted by design", "desc": "Stronger safety, more steerability, and enterprise-grade reliability."}, {"icon": "lightning bolt", "title": "Built for builders", "desc": "Native tool use, structured outputs, and long-context workflows."} ] } }, "right_column": { "type": "pricing card", "header": "PRICING - Simple, token-based pricing. No hidden fees.", "toggle": ["INPUT", "CACHE READ"], "token_pricing": { "count": 5, "rows": [ {"name": "Text tokens", "unit": "Per 1M tokens", "price": "{argument name=\"text token price\" default=\"$3.00\"}"}, {"name": "Image tokens", "unit": "Per 1M tokens", "price": "$10.00"}, {"name": "Audio tokens", "unit": "Per 1M tokens", "price": "$6.00"}, {"name": "Video tokens", "unit": "Per 1M tokens", "price": "$15.00"}, {"name": "Output tokens", "unit": "Per 1M tokens", "price": "{argument name=\"output token price\" default=\"$12.00\"}"} ] }, "additional_features": { "count": 2, "rows": [ {"name": "Caching", "desc": "Save on repeated inputs with caching.", "price": "$0.30 / 1M tokens"}, {"name": "Batch API (50% discount)", "desc": "Lower costs for asynchronous workloads.", "price": "-50%"} ] }, "footer_links": ["LEARN MORE", "Model docs", "Pricing details"] } }, "footer": "Prices are in USD. View the full pricing table in our docs." }
UI Mockups
ChatGPT 界面截图
Computer Screenshot of {argument name="subject" default="ChatGPT’s Super App"}
Poster
阿马尔菲海岸复古旅行海报
Modern pencil illustration of {argument name="location" default="Vintage travel poster illustration of the Amalfi Coast, Italy"}, panoramic coastal cliff road scene, classic 1960s white car driving along a curved seaside road, deep blue Mediterranean sea with small sailboats, colorful pastel hillside village, bright blue sky with soft clouds, lemon tree branches with vibrant yellow lemons framing the foreground, warm summer sunlight, bold vibrant colors, {argument name="style" default="retro 1950s travel poster"} style, cinematic composition, high detail, screen print texture, graphic illustration. Hand-drawn style, illustration with loose strokes and defined contours. High-contrast color palette, maintaining chromatic harmony between background and elements. Contemporary and decorative aesthetic.
UI Mockups
科技界 CEO 大逃杀游戏大厅
{ "type": "battle royale lobby UI", "characters": [ { "name": "{argument name=\"left character name\" default=\"SamAltman\"}", "outfit": "tactical green shirt, khaki pants", "pose": "dancing with crossed arms on blue platform", "ui": "Level 87, OpenAI icon, Not Ready" }, { "name": "{argument name=\"center character name\" default=\"DarioAmodei\"}", "outfit": "brown jacket with AI text, glasses, jeans", "pose": "dancing with crossed arms on blue platform", "ui": "Level 92, AI shield icon, Not Ready" }, { "name": "{argument name=\"right character name\" default=\"ElonMusk\"}", "outfit": "red and black futuristic armor", "pose": "dancing with crossed arms on blue platform", "ui": "Level 114, X icon, Not Ready" } ], "background": "stylized landscape, flying battle bus, purple llama piñata", "ui": { "top_nav": ["PLAY", "LOCKER", "SHOP", "BATTLE PASS", "QUESTS", "COMPETE", "CAREER"], "left_panel": { "title": "{argument name=\"season text\" default=\"CHAPTER 5 SEASON 2\"}", "stats": "LVL 127, BATTLE PASS TIER 100", "daily_quests": 3 }, "bottom_right": { "mode": "{argument name=\"game mode\" default=\"ZERO BUILD\"}", "status": "RANKED: OFF, TRIO - NO FILL", "button": "READY!" }, "bottom_bar": { "party_channels": 3, "prompts": ["HOLD TO CHAT", "EMOTE", "SQUAD FORMATION"] } } }
UI Mockups
动作 RPG Boss 战截图
A highly realistic AAA video game screenshot depicting a boss fight inside a dusty, golden-lit {argument name="setting" default="ancient Egyptian temple"}. In the center background, a massive {argument name="boss name" default="ANUBIS"} boss monster with a jackal head, glowing eyes, and ornate gold armor roars while wielding a staff, kicking up swirling sand. In the left foreground, a muscular, bald warrior with red body tattoos faces the boss, holding a {argument name="weapon" default="curved blade"}. In the right midground, a young boy aims a bow at the boss. The image features 4 distinct UI components: a top-center red boss health bar labeled '{argument name="boss name" default="ANUBIS"}', a right-aligned quest tracker labeled '{argument name="quest name" default="THE JACKAL'S PATH"}' with the subtext 'Defeat Anubis', a bottom-left player status HUD showing health and rage bars alongside 4 diamond-shaped skill icons with button prompts, and a bottom-right companion HUD showing 2 circular skill icons.
UI Mockups
FPS 自定义武器皮肤截图
First-person perspective video game screenshot showing hands wearing {argument name="glove style" default="Spider-Man suit"} gloves holding an AK-47 assault rifle. The weapon features a custom {argument name="weapon theme" default="Spider-Man"} skin with a red and blue color scheme, black webbing patterns, a white spider emblem on the receiver, "CS2" on the handguard, "MARVEL" on the magazine, and "SPIDER-MAN" on the stock. The background is a dusty Middle Eastern town street resembling a tactical shooter map, featuring a sign reading "HOTEL AURORE" with an arrow pointing to "A". The top center UI displays a red shield with a black spider, the text "{argument name="weapon title" default="AK-47 | Web-Slinger"}", and "The CS2 Collection" above a red line. The bottom UI features exactly 5 minimalist white icons on the left and the word "CLOSE" on the right.
UI Mockups
YouTube 深色模式桌面端 UI 原型
{ "type": "desktop UI mockup", "application": "YouTube homepage", "theme": "{argument name=\"theme\" default=\"dark mode\"}", "browser_window": { "url_bar": "{argument name=\"browser URL\" default=\"youtube.com\"}", "tabs": 1, "elements": ["back/forward buttons", "refresh", "extensions", "profile avatar"] }, "layout": { "sidebar": { "position": "left", "sections": [ { "title": "Main", "count": 3, "items": ["Home", "Shorts", "Subscriptions"] }, { "title": "You", "count": 6, "items": ["Your channel", "History", "Playlists", "Your videos", "Watch later", "Liked videos"] }, { "title": "Subscriptions", "count": 8, "items": ["Linus Tech Tips", "MrBeast", "Kurzgesagt - In a...", "ColdFusion", "3Blue1Brown", "Khan Academy", "Veritasium", "Show more"] }, { "title": "Explore", "count": 7, "items": ["Trending", "Music", "Films", "Live", "Gaming", "News", "Sport"] }, { "title": "More from YouTube", "count": 3, "items": ["YouTube Premium", "YouTube Music", "YouTube Kids"] } ] }, "top_filter_bar": { "count": 11, "labels": ["All", "Gaming", "Music", "Live", "Podcasts", "Mixes", "Science", "Lo-fi", "Thrillers", "Recently uploaded", "Watched"] }, "video_grid": { "layout": "4 rows by 3 columns", "count": 12, "videos": [ { "title": "Why Build Your Own GPU is Almost Impossible", "channel": "Linus Tech Tips", "thumbnail": "GPU chip with red arrow" }, { "title": "Survive 100 Days In Circle, Win $500,000", "channel": "MrBeast", "thumbnail": "MrBeast smiling with contestants in background" }, { "title": "What If We Nuke an Asteroid?", "channel": "Kurzgesagt - In a Nutshell", "thumbnail": "Missile approaching an asteroid in space" }, { "title": "How Dubai Became a $10 Billion City", "channel": "ColdFusion", "thumbnail": "Man next to Dubai skyline with text '$0 TO $10B'" }, { "title": "The Beautiful Math of Euler's Identity", "channel": "3Blue1Brown", "thumbnail": "Math equation and spiral graph on black background" }, { "title": "The World in 2040 - Population, Climate & More", "channel": "Veritasium", "thumbnail": "Lush green forest with text 'The World in 2040'" }, { "title": "I've Been Using Linux For 12 Years, This Is What Finally...", "channel": "DistroTube", "thumbnail": "Laptop and smartphone with a blue arrow connecting them" }, { "title": "Black Holes Explained - From Birth to Death", "channel": "Khan Academy", "thumbnail": "Glowing orange accretion disk of a black hole" }, { "title": "The Problem With Diet Advice", "channel": "Andrew Huberman", "thumbnail": "Man in black shirt with text 'the problem with diet advice'" }, { "title": "How to Learn Anything (Evidence-Based)", "channel": "Ali Abdaal", "thumbnail": "Flat illustration of a man reading a book surrounded by colorful leaves" }, { "title": "The Last of Us Part 2 is a Masterpiece", "channel": "Naughty Dog", "thumbnail": "Gritty portrait of Ellie with game logo" }, { "title": "lofi hip hop radio - beats to relax/study to", "channel": "Lofi Girl", "thumbnail": "Anime girl studying at a desk with city view at sunset" } ] } }, "os_environment": { "os": "{argument name=\"operating system\" default=\"Windows 10\"}", "taskbar_position": "bottom", "visible_icons": ["Start", "Search bar", "Task View", "File Explorer", "Edge", "Spotify"], "system_tray": ["network", "volume", "battery", "clock showing 08:34 03/04/2024"] } }
UI Mockups
复杂 AI 模型分析信息图
{ "type": "infographic dashboard", "style": "corporate presentation slide, dense information layout, flat design", "header": { "left_title": "{argument name=\"main title\" default=\"ChatGPTに『gpt-image-2』は来たのか？\"}", "right_subtitle": "{argument name=\"subtitle\" default=\"公式確認で読む ChatGPT Images / GPT Image 1.5 曼荼羅\"}", "background_color": "{argument name=\"theme color 1\" default=\"dark blue\"}" }, "layout": { "columns": 3, "sections": [ { "id": 1, "title": "① 噂の整理 / 公式名称", "color": "{argument name=\"theme color 2\" default=\"red\"}", "content_type": "3 bullet points" }, { "id": 2, "title": "② 進化タイムライン", "color": "gold", "content_type": "3 timeline bullet points" }, { "id": 3, "title": "③ 小さい文字・レイアウト・説明図", "color": "blue", "content_type": "2 embedded images showing text document and icon grid" }, { "id": 4, "title": "④ ChatGPTでの操作フロー", "color": "green", "content_type": "UI mockups showing chat interface and dog image" }, { "id": "central", "title": "中央結論：なにが『凄い』のか", "color": "dark blue", "subtitle": "{argument name=\"central conclusion\" default=\"“綺麗な絵”から“使える画像生成”へ軸足が移った\"}", "content_type": "2 columns of 4 bullet points each" }, { "id": 5, "title": "⑤ 編集の強さ：保持しながら変える", "color": "red", "content_type": "3 sequential images showing photo editing progression" }, { "id": 6, "title": "⑥ 何が改善したか：比較で見る", "color": "gold", "content_type": "6 comparison images (This time vs Before) for posters, crowds, textures" }, { "id": 7, "title": "⑦ API / 実務で刺さる理由", "color": "blue", "content_type": "3 bullet points" }, { "id": 8, "title": "⑧ 制約・地雷・過信禁止ポイント", "color": "red", "content_type": "3 bullet points" }, { "id": 9, "title": "⑨ 安全・出所・ガバナンス", "color": "gold", "content_type": "3 bullet points" }, { "id": 10, "title": "⑩ ソース要約 / 読み筋", "color": "dark blue", "content_type": "list of 7 sources and a summary box" } ] } }
UI Mockups
直播界面 UI 模型
{ "type": "live stream interface mockup", "subject": { "description": "young East Asian woman, long dark wavy hair, gentle smile, silver clover necklace, wired earphones", "clothing": "{argument name=\"clothing\" default=\"white lace-trimmed camisole with a small blue bow, light blue cardigan, grey pleated skirt\"}", "pose": "sitting at a desk, looking directly at the camera, one hand on an RGB mechanical keyboard" }, "environment": { "foreground": "professional condenser microphone on a boom arm with a small white plush keychain attached", "background": "gaming room setup, large computer monitor displaying a {argument name=\"game on monitor\" default=\"MOBA game\"}, shelf with a glowing moon lamp and a pink bunny plushie", "lighting": "soft indoor lighting with purple and blue ambient glow from the monitor and a neon '{argument name=\"neon sign text\" default=\"LIVE ♡\"}' sign on the wall" }, "layout": { "sections": [ { "title": "Top Left Profile", "position": "top-left", "count": 4, "labels": ["{argument name=\"username\" default=\"草莓味小羊 🍓\"}", "12.8万本场点赞", "关注", "小时榜第3名"] }, { "title": "Top Right Stats", "position": "top-right", "count": 4, "labels": ["3 viewer avatars", "6.7万", "X", "礼物展馆 2/24"] }, { "title": "Chat Overlay", "position": "bottom-left", "count": 7, "labels": [ "{argument name=\"chat message 1\" default=\"宝宝下次打什么呀？\"}", "主播好美！！！", "主播带带我～", "声音也太温柔了吧", "这波操作666", "晚安宝宝么么哒", "进来就被美到了～" ] }, { "title": "Input Bar", "position": "bottom", "count": 5, "labels": ["说点什么...", "smiley icon", "heart icon", "gift icon", "three dots icon"] } ] } }
Social Ads
Google 搜索结果模拟页面
{ "type": "web browser screenshot", "interface": "Google search results page", "header": { "logo": "Google", "search_bar": { "query": "{argument name=\"search query\" default=\"openai gpt-image 2 image generator\"}", "icons": ["clear", "microphone", "camera", "search"] }, "right_actions": ["settings gear", "apps grid", "blue Sign in button"] }, "navigation_tabs": ["All", "Images", "News", "Videos", "Shopping", "Short videos", "Forums", "Web", "More", "Tools"], "results_stats": "About 18,200,000 results (0.32 seconds)", "search_results": { "count": 3, "items": [ { "source": "OpenAI", "url": "https://openai.com > index > gpt-image-2", "title": "{argument name=\"result 1 title\" default=\"GPT-Image-2 | OpenAI\"}", "snippet": "{argument name=\"date\" default=\"Apr 1, 2025\"} — GPT-Image-2 is our new image generation model that delivers state-of-the-art image quality, finer details, better text rendering, and more precise instruction following.", "sitelinks": ["Research", "Safety", "Try in ChatGPT"] }, { "source": "OpenAI Platform", "url": "https://platform.openai.com > docs > gpt-image-2", "title": "GPT-Image-2 - OpenAI API", "snippet": "Learn about GPT-Image-2, OpenAI's most advanced image generation model, available via the Images API. Create high-quality images with improved realism, text rendering, and instruction ...", "sitelinks": ["Quickstart", "Edit images", "Example code"] }, { "source": "The Verge", "url": "https://www.theverge.com > openai-gpt-image-2-launch", "title": "OpenAI's GPT-Image-2 brings major improvements to AI ...", "snippet": "Apr 1, 2025 — OpenAI has officially launched GPT-Image-2, its next-generation image generator that offers better photorealism, improved text rendering, and more accurate adherence to user ..." } ] }, "people_also_ask": { "title": "People also ask", "count": 4, "questions": [ "What is GPT-Image-2?", "How is GPT-Image-2 different from previous models?", "Can I try GPT-Image-2 in ChatGPT?", "Is GPT-Image-2 available through the API?" ] } }
Photography
短视频 App UI 原型
{ "type": "mobile short-video app interface mockup", "background_image": "{argument name=\"landscape subject\" default=\"majestic snow-capped mountain peak illuminated by golden hour sunlight with a winding river in a lush green valley\"}", "layout": { "top_status_bar": { "time": "9:41", "icons": ["cellular signal", "wifi", "battery"] }, "top_navigation": { "left_icon": "hamburger menu", "right_icon": "search magnifying glass", "center_labels": ["经验", "同城", "关注", "商城", "{argument name=\"active tab\" default=\"推荐\"}"] }, "right_interaction_bar": { "count": 6, "items": [ {"icon": "profile picture with red plus button"}, {"icon": "heart", "label": "{argument name=\"like count\" default=\"360.8万\"}"}, {"icon": "speech bubble", "label": "16.6万"}, {"icon": "star", "label": "38.0万"}, {"icon": "share arrow", "label": "164.5万"}, {"icon": "spinning music record"} ] }, "bottom_left_info": { "username": "{argument name=\"username\" default=\"@摄影师-青锋\"}", "caption": "{argument name=\"video caption\" default=\"川西真的美成了仙境，一定要和心爱的人去一次川西！#川西 #旅行 #雪山 #... 展开\"}", "music_ticker": "去汽水听 > 风吹又日晒 (DJ版) - 张" }, "bottom_navigation": { "count": 5, "items": [ {"label": "首页"}, {"label": "朋友", "badge": "24"}, {"icon": "square plus button"}, {"label": "消息", "badge": "4"}, {"label": "我"} ], "home_indicator": "horizontal line at bottom" } } }
UI Mockups
体素生存游戏 Boss 战 HUD
{ "type": "first-person video game screenshot", "setting": "blocky voxel world at night, purple corrupted biome with dark water and glowing torches", "entities": [ "1 giant floating eyeball boss shooting a purple laser", "1 giant blue slime boss wearing a golden crown", "1 giant purple segmented worm monster", "1 player character in dark armor holding a green sword", "2 flying purple bat monsters", "2 blocky zombies", "2 blocky skeletons", "1 pink flamingo", "1 small blue slime" ], "perspective": "first-person, holding a large pixelated sword on the right side, white crosshair in center", "ui_elements": [ { "position": "top-left", "text": "X: 340\nY: 64\nZ: -190\nBiome: {argument name=\"biome\" default=\"Corruption\"}" }, { "position": "top-center", "text": "{argument name=\"boss name\" default=\"Eye of Cthulhu\"}", "description": "purple boss health bar" }, { "position": "top-right", "text": "New Recipes Unlocked! Check your recipe book", "icon": "small floating eyeball" }, { "position": "bottom-left", "text": "{argument name=\"player name\" default=\"Steve\"} has made the advancement [{argument name=\"boss name\" default=\"Eye of Cthulhu\"}]" }, { "position": "bottom-center", "description": "HUD with 10 red hearts, 10 hunger drumsticks, green experience number 15, and a 9-slot hotbar", "hotbar_items": [ "purple sword", "pickaxe", "axe", "green weapon", "gun", "30 red potions", "64 brown blocks", "8 golden apples", "2 blue stars" ] } ] }
UI Mockups
体素沙盒 Boss 战 UI
{ "type": "voxel video game screenshot", "style": "crossover between Minecraft and Terraria", "environment": "nighttime blocky landscape, purple-tinted corruption biome, water pools, trees", "first_person_view": "holding a large blocky sword on the right side of the screen", "entities": { "boss": "giant floating eyeball with red veins shooting a purple laser", "player_avatar": "character in dark armor holding a green sword, viewed from behind", "mobs": [ "1 giant crowned blue slime", "1 small blue slime", "2 zombies", "2 skeletons", "2 purple bats", "1 pink flamingo" ] }, "user_interface": { "boss_bar": "top center, purple bar, text '{argument name=\"boss name\" default=\"Eye of Cthulhu\"}'", "coordinates": "top left, text 'X: 340 Y: 64 Z: -190 Biome: {argument name=\"biome name\" default=\"Corruption\"}'", "notification": "top right, white box, text '{argument name=\"notification text\" default=\"New Recipes Unlocked! Check your recipe book\"}'", "chat": "bottom left, text 'Steve has made the advancement [{argument name=\"advancement name\" default=\"Eye of Cthulhu\"}]'", "status_bars": "bottom center, 10 red hearts, 10 hunger icons, green XP bar showing level 15", "hotbar": "bottom center, 9 slots containing: purple sword, pickaxe, axe, green tool, gun, 30 red potions, 64 brown blocks, 8 golden apples, 2 blue stars" } }
Social Ads
Vice City 风格游戏菜单模型
{ "type": "video game main menu UI mockup", "background": { "setting": "Miami-style city skyline across water at sunset", "sky": "vibrant pink and purple with scattered clouds", "elements": [ "wooden dock in foreground left", "boat bow in foreground right", "palm trees framing left and right edges", "helicopter with spotlight", "airplane in distance", "speedboat on water", "neon sign on right shore reading '{argument name=\"city sign text\" default=\"VICE CITY WELCOME YOU\"}'" ] }, "ui_layout": { "top_left": { "logo": "{argument name=\"game title\" default=\"grand theft auto VI\"}", "style": "stacked white text, 'VI' is a neon pink/purple gradient with palm tree silhouettes" }, "top_right": { "text": "Signed in as: {argument name=\"username\" default=\"GTAVI_01\"}" }, "mid_left": { "menu_count": 5, "menu_items": [ "{argument name=\"highlighted menu item\" default=\"START GAME\"} (highlighted with pink gradient bar and '>' arrow)", "SETTINGS", "ONLINE", "SOCIAL CLUB", "QUIT GAME" ] }, "bottom_left": { "logo": "R* icon" }, "bottom_right": { "text": "Account Picker Y, Select A" } } }
Social Ads
电子游戏主菜单 UI 设计草图
{ "type": "video game main menu UI mockup", "theme": "{argument name=\"color palette\" default=\"purple, pink, and orange synthwave\"}", "background": { "setting": "coastal city skyline at {argument name=\"time of day\" default=\"sunset\"}", "elements": [ "water reflecting city lights", "wooden dock in foreground", "speedboat on the water", "helicopter with spotlight", "airplane in the sky", "palm trees framing left and right edges", "neon sign reading '{argument name=\"city name\" default=\"VICE CITY\"} WELCOME'" ] }, "ui_layout": { "top_left": "Large logo '{argument name=\"game title\" default=\"grand theft auto VI\"}' with neon gradient roman numerals", "middle_left": { "type": "vertical menu", "count": 5, "items": [ "START GAME (highlighted with pink gradient and > arrow)", "SETTINGS", "ONLINE", "SOCIAL CLUB", "QUIT GAME" ] }, "top_right": "Text 'Signed in as: {argument name=\"username\" default=\"GTAVI_01\"}'", "bottom_left": "Developer star logo 'R*'", "bottom_right": "Controller prompts 'Account Picker Y, Select A'" } }
UI Mockups
8 格漫画风格信息图
{ "type": "8-panel manga comic strip", "layout": "4 rows, 2 columns grid, reading right-to-left, top-to-bottom", "character": { "appearance": "{argument name=\"character appearance\" default=\"chibi anime girl, blonde twin tails, black bows, brown eyes, black gothic dress, heart choker\"}" }, "panels": [ { "number": 1, "position": "top right", "visual": "Character waving and smiling happily against a sparkling white background.", "speech_bubble": "{argument name=\"panel 1 text\" default=\"こんにちは！リサだよ！今日はOpenAIの凄い噂、GPT-image-2について教えるね！\"}" }, { "number": 2, "position": "top left", "visual": "Character looking surprised at a futuristic blue holographic screen displaying the OpenAI logo and '{argument name=\"topic\" default=\"GPT-image-2\"}'.", "screen_subtext": "{argument name=\"panel 2 screen text\" default=\"Smarter - Sharper - More Creative\"}", "speech_bubble": "According to leak info, this update is seriously crazy!" }, { "number": 3, "position": "row 2 right", "visual": "Character pointing at a green cafe sign outside a brick building.", "sign_text": ["CAFE OPEN", "Cafe is open", "Coffee & Sweets"], "speech_bubble": "First, text! Signboards and menus won't have spelling mistakes anymore! It's perfect!" }, { "number": 4, "position": "row 2 left", "visual": "Character holding a large smartphone displaying a mobile app interface.", "ui_elements": { "header": ["My Day", "Make life creative"], "search_bar": "Search ideas...", "buttons_count": 4, "buttons_labels": ["Explore", "Create", "Gallery", "Profile"], "bottom_nav_icons_count": 4 }, "speech_bubble": "It can even make app screens! The pro-designer quality is surprising!" }, { "number": 5, "position": "row 3 right", "visual": "Character looking amazed at a before-and-after image comparison graphic.", "graphic_elements": { "left_image": "Blurry photo of a woman", "left_label": "Conventional AI image (blurry)", "right_image": "Sharp, realistic 4K photo of the same woman", "right_label": "{argument name=\"topic\" default=\"GPT-image-2\"} (4K super real)", "separator": "Blue arrow pointing right" }, "speech_bubble": "It's like a photo in 4K resolution! Skin texture and lighting are super realistic!" }, { "number": 6, "position": "row 3 left", "visual": "Character winking and pointing, surrounded by floating objects on a purple starburst background.", "floating_objects_count": 7, "floating_objects_labels": ["wooden palette with 2 brushes", "DSLR camera", "glowing lightbulb", "landscape photograph", "vintage lantern", "cup of coffee on saucer", "notepad with pencil and the word IDEA"], "speech_bubble": "Complex instructions are perfect too. Camera composition and prop placement are exactly as you want!" }, { "number": 7, "position": "row 4 right", "visual": "Character pointing at a wooden whiteboard displaying a character reference sheet of herself.", "whiteboard_title": "Character consistency", "character_views_count": 5, "character_views_labels": ["front full-body", "side full-body", "front face winking", "side face", "half-body pointing"], "speech_bubble": "And character consistency! You'll be able to draw characters like me in the exact same appearance!" }, { "number": 8, "position": "row 4 left", "visual": "Character giving a thumbs up, winking, and smiling broadly against a sparkling pink background.", "speech_bubble": "{argument name=\"panel 8 text\" default=\"AIと人間が一緒に物語を作る時代、ワクワクするね！みんなも注目だよ！\"}" } ] }
UI Mockups
卫星异常界面模型
{ "type": "satellite imagery web interface mockup", "main_display": { "imagery": "greyscale satellite view of ocean clouds featuring a {argument name=\"anomaly shape\" default=\"massive, perfectly geometric dark triangle\"} in the center", "annotation": "red handwritten text '{argument name=\"annotation text\" default=\"Natural formation???\"}' with a red arrow pointing to the anomaly", "overlay": "faint blue latitude and longitude grid lines with coordinate labels like 40N, 30N, 160W" }, "ui_layout": { "top_header": { "left_section": "NOAA logo, text '{argument name=\"satellite name\" default=\"GOES-18 ABI CONUS - Sector View\"}', '{argument name=\"timestamp\" default=\"2024-03-15 14:32:20 UTC\"}', and 'Band 2 (0.64µm) - Visible Light'", "right_section": "4 navigation icons with labels: Home, Share, Help, Settings" }, "left_sidebar": { "count": 7, "items": ["Layers", "Products", "Basemap", "Measure", "Location", "Legend", "Download"] }, "bottom_panel": { "timeline": { "controls": "Play button, left/right arrows, text '6 Scenes', '6 of 6'", "thumbnails": { "count": 6, "description": "sequential satellite images showing the anomaly's progression, with hourly timestamps from 08:32 UTC to 14:32 UTC" } }, "data_readout": { "coordinates": "{argument name=\"coordinate text\" default=\"Lat/Lon: 28.12°N, 162.08°W\"}", "elevation": "Elevation: 0.5°", "scale": "Distance Scale bar from 0 to 1000 km" } } } }
UI Mockups
体素生存游戏联动 UI
{ "type": "first-person video game screenshot", "style": "voxel-based 3D blocky graphics mixed with 2D sprite elements", "environment": { "setting": "nighttime blocky landscape with purple-tinted lighting", "terrain": "grass blocks, water pools, purple-leaved trees, torches" }, "entities": [ "1 giant floating eyeball boss {argument name=\"boss action\" default=\"shooting a purple laser beam\"}", "1 giant blue slime wearing a jeweled gold crown", "1 regular blue slime", "1 zombie", "2 skeletons", "2 flying purple bat creatures", "1 pink flamingo", "1 player character wearing {argument name=\"player armor\" default=\"dark iron armor\"}" ], "first_person_view": { "right_hand": "holding a {argument name=\"main weapon\" default=\"large iron sword\"}" }, "user_interface": { "top_left": ["X: 340", "Y: 64", "Z: -190", "Biome: {argument name=\"biome name\" default=\"Corruption\"}"], "top_center": "purple boss health bar labeled {argument name=\"boss name\" default=\"Eye of Cthulhu\"}", "top_right": "white notification popup: New Recipes Unlocked! Check your recipe book", "bottom_left": "chat text: Steve has made the advancement [{argument name=\"boss name\" default=\"Eye of Cthulhu\"}]", "bottom_center": { "stats": "10 red hearts, 10 armor icons, 10 hunger shanks, experience level 15", "hotbar_items": [ "purple sword", "pickaxe", "axe", "green staff", "musket", "30 red potions", "64 wood blocks", "8 golden apples", "2 blue stars" ] } } }
Poster
体素游戏办公室截图
A first-person voxel game screenshot. The player's blocky right hand holds a paper reading 'INTERNAL DOCUMENT', '{argument name="document title" default="CLAUDE OPUS 5"}', and a 6-item bulleted list ending with 'Release: 2025'. A white crosshair sits center screen. Ahead is a dark gray desk holding a black monitor and a paper stack marked 'CONFIDENTIAL' in red. The back white wall displays an orange asterisk and black text '{argument name="company name" default="Claude"}' above 'HEADQUARTERS'. A right hallway shows hanging lanterns and a poster reading 'LONG-TERM MEMORY', 'NUANCED RESPONSES', 'AI FOR HUMANITY'. The bottom HUD features yellow chat text '{argument name="chat message" default="Claude joined the game"}', 10 red hearts, a green experience bar with '7', 10 hunger drumsticks, and a 9-slot hotbar with a document icon in the first slot.
UI Mockups
教育科学信息图
{ "type": "educational infographic", "style": "clean, modern, scientific illustration", "background": "dark blue gradient", "header": { "title": "{argument name=\"main title\" default=\"Wavefunction Collapse\"}", "subtitle": "From Many Possibilities to One Outcome" }, "layout": { "structure": "3 columns separated by thin vertical lines, connected by 2 horizontal right-pointing arrows", "sections": [ { "heading": "{argument name=\"step 1 title\" default=\"Before Measurement\"}", "subheading": "{argument name=\"subject\" default=\"Electron\"} as a Probability Wave", "visual": "diffuse, glowing blue cloud of particles resembling a nebula", "labels": ["Probable Locations", "Superposition of all possibilities"] }, { "heading": "{argument name=\"step 2 title\" default=\"Measurement\"}", "subheading": "We Measure the {argument name=\"subject\" default=\"Electron\"}'s Position", "visual": "grey rectangular measuring device with a green screen and red button, with a downward arrow pointing to a flattened, glowing blue and yellow particle cloud" }, { "heading": "{argument name=\"step 3 title\" default=\"After Measurement\"}", "subheading": "Wavefunction Collapses", "visual": "single, solid yellow sphere emitting radial light rays", "labels": ["Single, Definite Location"] } ] }, "footer": { "explanation": "'Collapse' means the wavefunction goes from a spread of possibilities to one specific result.", "summary": "From Multiple Potentials [yellow right arrow] To One Certain Outcome" } }
Photography
YouTube 直播演示界面模型
{"type": "YouTube desktop dark mode UI mockup", "header": {"logo": "YouTube", "search_bar": "Search", "icons_count": 5, "icons": ["search", "mic", "create", "notifications", "profile"]}, "video_player": {"top_left_badge": "LIVE", "left_side": {"subject": "{argument name=\"presenter description\" default=\"man in green sweater at wooden podium\"}", "podium_logo": "OpenAI"}, "right_side_presentation": {"text_elements": ["OpenAI", "INTRODUCING", "{argument name=\"product name\" default=\"GPT-Image-2\"}", "{argument name=\"tagline\" default=\"More Realistic. More Useful. More Creative.\"}"], "sample_images_count": 4, "sample_images": ["mountain lake with boat", "woman portrait with dappled light", "cute robot with lantern in forest", "starry night cafe painting"]}, "bottom_controls_count": 10, "bottom_controls": ["pause", "next", "volume", "LIVE", "red progress bar", "CC", "settings", "miniplayer", "theater mode", "fullscreen"]}, "video_details": {"title": "{argument name=\"video title\" default=\"OpenAI Live: Introducing GPT-Image-2\"}", "channel": {"name": "{argument name=\"channel name\" default=\"OpenAI\"}", "verified": true, "subscribers": "1.36M", "button": "Subscribe"}, "action_buttons_count": 5, "action_buttons": ["Like 12K", "Dislike 497", "Share", "Save", "More"], "description_box": {"stats": "95,237 watching now Started streaming 7 minutes ago", "tags": "#OpenAI #GPTImage2 #AI", "text": "Join us for a special live event as we introduce GPT-Image-2, our latest and most advanced image generation model. See new capabilities, live demos, and hear from the team ...more"}}}
FAQ
Common questions
What should a app ui mockup prompts prompt include?
Start with Product type, Screen content, Layout, then add style, lighting, output ratio, and where the image will be used.
Can I generate from these prompts directly?
Yes. Open any prompt in Image2Studio, adjust the text, choose ratio and resolution, then generate and save the result.
Start generating from this direction
Copy an example, open the studio, then adjust product, scene, style, and frame details.