Prompt
{ "type": "mobile game UI mockup", "theme": "sci-fi, cute, glassmorphism, neon blue and purple color palette", "header": { "status_bar": "standard iOS status bar at top", "top_controls": "back button on left, currency display with diamond icon and '128' on right", "title": "{argument name=\"main title\" default=\"机器人盲盒\"}", "subtitle": "{argument name=\"subtitle\" default=\"抽取你的幸运伙伴\"}" }, "layout": { "side_menu": { "position": "top right below currency", "count": 2, "items": [ {"icon": "gift", "label": "奖品池"}, {"icon": "document", "label": "抽取记录"} ] }, "centerpiece": { "description": "clear glass display case containing the main prize", "subject": "{argument name=\"robot character description\" default=\"cute chibi-style robot with glowing blue eyes and white glossy armor\"}", "case_details": [ "label 'NO.001' in top left", "starburst sticker '稀有款 概率UP!' on bottom right", "progress bar at bottom with text '再抽 6 次必出稀有款' and '4/10'" ] }, "background_elements": { "description": "blurred toy store background", "floating_items": { "count": 3, "description": "square boxes labeled 'BLIND BOX' with robot faces, one with a '?' sign" } }, "action_buttons": { "position": "bottom center above nav bar", "count": 2, "buttons": [ {"color": "blue", "text": "{argument name=\"left button text\" default=\"抽一次\"}", "cost": "x 30"}, {"color": "purple", "text": "{argument name=\"right button text\" default=\"抽十次\"}", "cost": "x 270", "tag": "9折"} ] }, "bottom_navigation": { "count": 4, "items": [ {"icon": "home", "label": "抽盲盒", "state": "active"}, {"icon": "store", "label": "商城"}, {"icon": "star", "label": "收藏"}, {"icon": "smiley", "label": "我的"} ] } } }
Prompt structure
- Modelgpt-image-2
- Use caseapp-ui-mockup
- Stylecyberpunk, editorial
- Aspect ratioFlexible
Best used for
- Use caseapp-ui-mockup
- Stylecyberpunk, editorial
- Recommended specs1:1, 4:5, 16:9, or 9:16
- ModelGPT Image 2
How to customize
Use this 抽卡游戏 UI 原型 prompt as a base. Replace the subject, product details, environment, lighting, brand colors, and output ratio while keeping the app-ui-mockup intent and cyberpunk, editorial direction stable.
Recommended specs
Choose the frame for the destination first, then use 1K, 2K, or 4K based on output quality needs. Product images and posters usually benefit from higher resolution.
Related prompts
More prompts in this direction
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" } ] } } } }
Photography
日本新闻广播模拟
A photorealistic television news broadcast scene featuring a {argument name="anchor appearance" default="young Japanese female with shoulder-length dark hair wearing a light beige blouse"} and a small black lapel microphone, sitting at a news desk and speaking directly to the camera. The studio background is modern with blue and white lighting and a blurred nighttime city skyline on the right. In the top left corner, there is a dark blue graphic with the white text "{argument name="channel logo text" default="NEWS TODAY"}". To the anchor's left is a large presentation monitor displaying a news graphic with a white background and light blue network nodes. The monitor features a dark blue "最新情報" tag, the text "{argument name="subheadline" default="OpenAIの新しい画像生成モデル"}", a large prominent headline "{argument name="main headline" default="「GPT-image-2」"}", the text "がリリース", an OpenAI logo, and a dark blue bottom banner reading "より高精細に より正確に 画像生成の可能性がさらに広がる". Across the bottom of the entire screen is a news ticker lower third with a dark blue "速報" box and the scrolling text "{argument name="ticker text" default="OpenAI 画期的な新画像生成モデル「GPT-image-2」をリリース"}".
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." }
Photography
社交媒体视频 App UI 模型
{ "type": "social media short video app interface mockup", "main_image": { "subject": "{argument name=\"subject description\" default=\"young Asian woman with long dark hair wearing a white off-the-shoulder top\"}", "pose": "looking back over her shoulder at the camera, gentle smile, hair blowing slightly in the wind", "setting": "{argument name=\"background location\" default=\"riverside promenade at sunset with a tall modern tower and city skyline\"}", "lighting": "golden hour, warm sunlight reflecting on the river" }, "ui_layout": { "top_bar": { "status_icons": ["time 9:41", "cellular signal", "wifi", "battery 100"], "navigation": { "left": "menu icon", "center_tabs": ["经验", "团购", "关注", "{argument name=\"active top tab\" default=\"推荐\"}"], "right": "search icon" } }, "right_sidebar": { "count": 6, "elements": [ "profile picture with pink plus button", "heart icon with text '23.6万'", "chat bubble icon with text '1.6万'", "star icon with text '2.8万'", "share arrow icon with text '3.7万'", "spinning music record icon" ] }, "bottom_left_overlay": { "username": "{argument name=\"username\" default=\"@小鹿的日常\"}", "caption": "{argument name=\"caption text\" default=\"吹着晚风，看着日落，这一刻好治愈~ 🌅\"}", "audio_track": "🎵 原声 @小鹿的日常创作的原声" }, "bottom_navigation_bar": { "count": 5, "tabs": [ "首页", "朋友 (with red badge '2')", "central plus button in rounded square", "消息 (with red badge '5')", "我" ] } } }