AI Image Generator UI Mockup

AI Image Generator UI Mockup

原始文档

GPT Image 2 · en

{
  "type": "UI/UX Web Application Prototype",
  "theme": "Dark mode",
  "sidebar": {
    "logo": "{argument name=\"app name\" default=\"ChatGPT\"}",
    "navigation_items": 5,
    "recent_chats_count": 8,
    "user_profile": "Users, Free Version"
  },
  "main_content": {
    "header": "image",
    "input_bar": {
      "placeholder": "{argument name=\"input placeholder\" default=\"Describe a new image...\"}",
      "model_selector": "{argument name=\"model name\" default=\"GPT Image 2\"}"
    },
    "sections": [
      {
        "title": "{argument name=\"hero title\" default=\"New feature: GPT Image 2 is now available!\"}",
        "description": "Our next-generation image models are designed to achieve greater realism, better typography, and deeper understanding of the world.",
        "feature_tags_count": 4,
        "hero_images_count": 3,
        "hero_images_descriptions": [
          "Mountain lake landscape",
          "Neon Cyberpunk Streets",
          "Poster layout"
        ]
      },
      {
        "title": "Apply styles to images",
        "style_thumbnails_count": 8,
        "style_labels": [
          "cartoon",
          "painting",
          "Cinematic",
          "3D rendering",
          "Line Art",
          "Pixel Art",
          "watercolor",
          "Cyberpunk"
        ]
      },
      {
        "title": "Explore new features",
        "feature_cards_count": 6,
        "feature_labels": [
          "Advanced text rendering",
          "Consistent roles and scenes",
          "Greater sense of realism",
          "World Knowledge",
          "Precise editing",
          "More creative styles"
        ]
      },
      {
        "title": "My Image",
        "recent_images_count": 6,
        "recent_images_descriptions": [
          "Anime boy portrait",
          "tabby kitten",
          "tabby kitten",
          "Sleeping Arctic fox",
          "Wedding Invitation",
          "Code editor terminal"
        ]
      }
    ]
  }
}

使用方法

  1. 复制完整原始提示词,并保留其中的参数。
  2. 按需求替换主体、文字和构图要求。
  3. 在兼容的外部工具中使用,核对当前使用条件并检查结果。

开始前需了解

  • 先确认是否需要参考图。标注兼容模型,不代表该示例由这个模型生成。
  • 核对名称、数字与画面文字;不同模型版本的结果可能不同。

相似案例

E-commerce Product Page Generator
GPT Image 2en

One{argument name="platform" default="Taobao"} of{argument name="robot model" default="T-800 robot"} The product details page displays the robot's front, side, and rear views, as well as product price, product details, features, and usage scenarios.

Live Stream App Screenshot Generator
GPT Image 2en

{ "type": "Screenshot of mobile live streaming app", "aspect_ratio": "9:16", "subject": { "description": "{argument name=\"subject description\" default=\"A beautiful young Asian woman with long black hair, wearing an off-the-shoulder white top.\"}", "action": "Smil

AI Image Generator Collage Failure Screenshot
GPT Image 2en

Goal: Create a dark-mode mobile chat screenshot showing an AI image generator response that incorrectly combines four requested images into one 2x2 collage. Canvas: Square screenshot, approximately 768×768 px, black background, cropped like a smartphone app interface in dark mod