Master JSON Prompt Engineering: 12 Real‑World Cases for Product, UI, Poster, and Illustration

Why Use JSON for Prompts: Boosted Controllability and Reusability

Natural‑language prompts are flexible like spoken language but can become vague and hard to edit in bulk. JSON prompts act like a form: each field has a fixed meaning, so changing one parameter does not affect the others.

Bad Prompt (❌ Natural‑language modification is difficult)

A minimalist product photo of wireless earbuds,
clean white background, soft studio lighting,
top‑down flat lay, modern tech aesthetic,
pastel color accents

Changing the background or style requires rewriting the whole sentence.

Good Prompt (✅ JSON fields are clear and adjustable)

{
  "subject": "wireless earbuds",
  "shot_type": "flat lay overhead",
  "background": "pure white seamless",
  "lighting": "soft studio diffused light",
  "style": "minimalist product photography",
  "colors": "white, silver, pastel blue accents",
  "mood": "clean, modern, premium",
  "output": "product hero image, 1:1 ratio"
}

To change the background, edit only the background field; to change the style, edit only the style field. Fields are independent.

Three Advantages of JSON Prompts

High controllability : each parameter maps to a specific visual dimension, allowing precise adjustments without side effects.

Reusability : store the base structure as a template and replace only subject and colors for different projects, keeping style consistent across batches.

Iterability : during multi‑round revisions, modify only the targeted field in the JSON instead of rewriting the entire sentence, making change tracking easier.

JSON Prompt Basic Structure: Seven Core Fields

GPT‑4 Image understands the following JSON schema. Each field’s purpose and a sample value are listed. subject: what the image depicts – e.g., "a pair of wireless earbuds". style: overall visual style – e.g., "minimalist product photography" or "flat vector illustration". lighting: type and direction of light – e.g., "soft side window light" or "dramatic rim lighting". composition: layout or angle – e.g., "overhead flat lay" or "rule of thirds". colors: color palette – e.g., "navy blue, gold accents, white background". mood: emotional tone – e.g., "luxurious, premium, minimalist". output: usage, aspect ratio, format – e.g., "product hero image, 4:5 ratio, e‑commerce".

Specific scenarios can add custom fields, such as platform for UI cases or panels for comics.

Product Group: Three Practical Cases

Case 1 – E‑commerce Main Image

Scenario: A phone‑case brand needs a clean white‑background product hero for an online store.

{
  "subject": "transparent iPhone case with pressed flower design, flowers: lavender and baby's breath, placed on iPhone 15 Pro",
  "style": "clean product photography, e‑commerce hero shot",
  "lighting": "soft diffused studio light, no harsh shadows",
  "composition": "centered, slight 15‑degree angle, product fills 70% of frame",
  "background": "pure white seamless (#FFFFFF)",
  "colors": "transparent case, purple lavender, white flowers, silver iPhone frame",
  "mood": "feminine, delicate, premium handmade",
  "output": "square 1:1 ratio, e‑commerce main image, high resolution, no watermark"
}

Effect: Placing the phone in a realistic usage context adds product feel; removing harsh shadows keeps the white background clean.

Case 2 – Product Poster

Scenario: A new Bluetooth speaker launch needs a tech‑heavy promotional poster.

{
  "subject": "compact cylindrical Bluetooth speaker, matte black finish, subtle LED ring at top",
  "style": "high‑tech product poster, cinematic CGI render",
  "lighting": "dramatic rim lighting from behind, electric blue glow from LED ring, dark studio environment",
  "composition": "low angle hero shot, speaker positioned center‑left, sound wave visualization on right",
  "background": "deep space black, subtle tech grid lines",
  "colors": "matte black, electric blue (#00D4FF), white text area bottom",
  "mood": "powerful, futuristic, premium audio",
  "text_overlay": "PURE SOUND. NO LIMITS. — centered top area",
  "output": "vertical poster 9:16, space for product name and tagline at bottom"
}

Effect: Dramatic rim lighting plus dark studio creates a classic tech‑poster look; the text_overlay field reserves space for later typography.

Case 3 – Brand VI Showcase

Scenario: A coffee brand wants a visual identity board showing logo, packaging, and accessories.

{
  "subject": "craft coffee brand brand identity mockup, items: paper cup with logo, kraft paper bag, business card, circular logo badge",
  "style": "brand identity flatlay photography, editorial design mockup",
  "lighting": "soft natural daylight from top‑left",
  "composition": "overhead flat lay, items arranged in relaxed asymmetric layout, wooden board surface",
  "colors": "warm cream, dark roast brown (#3D1C02), forest green (#2D5016), kraft paper beige",
  "mood": "artisan, warm, authentic, specialty coffee",
  "brand_elements": "logo: circular badge with coffee branch illustration, font: serif elegant",
  "output": "landscape 16:9, brand presentation image, editorial magazine style"
}

Effect: The brand_elements field describes logo style and typography, ensuring AI generates consistent visual elements; the asymmetric layout feels more premium than a centered grid.

UI Group: Three Practical Cases

Case 4 – App Interface

Scenario: A meditation app needs a polished screenshot for the App Store.

{
  "subject": "meditation app mobile interface, main session screen showing: breathing animation circle, session timer 12:00, mood selector (calm/focus/sleep), progress rings",
  "platform": "iOS app, iPhone 15 Pro screen",
  "style": "Apple HIG design, premium wellness app aesthetic",
  "design_system": {
    "typography": "SF Pro Display, rounded",
    "corner_radius": "large, 20px+",
    "cards": "frosted glass (blur effect)",
    "spacing": "generous whitespace"
  },
  "colors": "deep navy background (#0A0E27), soft lavender accents (#9B8EC4), warm white text, gradient aurora: purple to teal",
  "mood": "calm, serene, premium wellness",
  "output": "portrait 9:19.5, App Store screenshot quality, realistic device mockup"
}

Effect: The nested design_system object controls typography, corner radius, card style, and spacing—four parameters that differentiate a “premium” app from a basic one.

Case 5 – Dashboard Data Panel

Scenario: A SaaS platform needs a dashboard screenshot for its website.

{
  "subject": "SaaS analytics dashboard, web application main view",
  "platform": "web browser, 1440px desktop",
  "layout": {
    "sidebar": "dark left navigation, width 240px, icons + labels",
    "header": "top bar with search, notifications, avatar",
    "main_content": [
      "4-column KPI cards: Revenue $124K, Users 8.4K, Conversion 3.2%, Churn 1.1%",
      "line chart: 6-month revenue trend",
      "donut chart: traffic source breakdown",
      "data table: recent transactions, 5 rows"
    ]
  },
  "style": "modern B2B SaaS, dark mode data dashboard",
  "colors": "background #0F1117, sidebar #1A1D2E, cards #252836, accent blue #4361EE, positive green #06D6A0, warning orange #FFB703",
  "typography": "Inter font family, numbers bold and large",
  "mood": "professional, data‑driven, enterprise",
  "output": "16:9 ratio, marketing screenshot quality, no personal data"
}

Effect: The nested layout object describes sidebar, header, and main content, and each KPI card includes concrete numbers, so the generated image matches the data precisely.

Case 6 – Website Homepage

Scenario: An AI productivity tool needs a homepage mockup for Product Hunt and media.

{
  "subject": "AI productivity tool website homepage",
  "platform": "desktop website, 1440px wide",
  "hero_section": {
    "headline": "Write 10x Faster with AI",
    "subheadline": "Your AI writing assistant for teams",
    "cta_button": "Start for Free — bright orange, large",
    "hero_image": "split layout: left text, right product UI preview"
  },
  "style": "modern SaaS website, clean minimal layout, high conversion design",
  "colors": "white background, dark text #1A1A2E, primary purple #6C63FF, CTA orange #FF6B35",
  "typography": "large bold headline 60px+, clean sans‑serif body",
  "mood": "trustworthy, innovative, approachable",
  "output": "16:9, above‑the‑fold view only, marketing quality screenshot"
}

Effect: Splitting the hero into independent fields ( headline, subheadline, cta_button, hero_image) guides the AI to produce a clear, layered layout.

Poster Group: Three Practical Cases

Case 7 – Event Poster

Scenario: An AI‑themed offline salon needs a promotional poster.

{
  "subject": "tech conference event poster, topic: AI & Future of Work",
  "style": "modern graphic design poster, geometric abstract background",
  "layout": {
    "top": "event name large: 'AI SUMMIT 2025'",
    "middle": "abstract geometric illustration: interconnected nodes representing AI neural network",
    "bottom": "event details: Date: September 15, Venue: TechHub, registration link area"
  },
  "colors": "deep black background, electric blue #00D4FF lines, neon green #39FF14 accents, white typography",
  "typography": "bold geometric sans‑serif, large display type",
  "mood": "futuristic, cutting‑edge, energetic",
  "output": "vertical A4 poster, print‑ready quality, 2:3 ratio"
}

Effect: Dividing the poster into top/middle/bottom zones tells the AI exactly where each element belongs, avoiding a crowded layout.

Case 8 – Music Album Cover

Scenario: An independent musician needs an electronic‑music album cover.

{
  "subject": "electronic music album cover art",
  "album_info": {"artist": "NEON GRID", "album_title": "Pulse", "genre": "ambient electronic, synthwave"},
  "style": "abstract digital art, synthwave aesthetic, retrofuturism",
  "visual_concept": "glowing grid landscape extending to horizon, sun setting behind, soft purple and pink gradient sky, light trails suggesting speed",
  "lighting": "atmospheric glow, neon light bleed, no harsh shadows",
  "colors": "deep purple #1A0033, hot pink #FF006E, electric cyan #00FFFF, gold #FFD700 sun glow",
  "mood": "nostalgic, dreamy, electric, expansive",
  "output": "square 1:1, album cover format, text placement: artist top‑left, title bottom‑center"
}

Effect: The album_info field stores textual metadata, while visual_concept describes the main visual metaphor, giving the AI a clear separation between text and image.

Case 9 – Holiday Greeting Card

Scenario: A company needs a Chinese New Year greeting card for social media.

{
  "subject": "Chinese New Year greeting card illustration",
  "style": "modern Chinese illustration, fusion of traditional and contemporary",
  "visual_elements": [
    "blooming plum blossoms (梅花) as main motif",
    "traditional red lanterns in background",
    "abstract gold geometric patterns border",
    "auspicious cloud (云纹) decorative elements"
  ],
  "color_scheme": {"primary": "vermillion red #CC2200", "accent": "gold #D4AF37", "background": "warm ivory #FFF8E7", "details": "dark ink #1A0A00"},
  "typography_area": "space at bottom for '新年快乐' text, brush calligraphy style placeholder",
  "mood": "festive, auspicious, warm, culturally rich",
  "output": "square 1:1, social media ready, premium brand feel"
}

Effect: Listing visual elements and separating the color scheme into primary, accent, background, and details makes the prompt precise for decorative illustrations.

Illustration Group: Three Practical Cases

Case 10 – Technical Blog Illustration

Scenario: A blog about React performance optimization needs a header image.

{
  "subject": "technical blog illustration, topic: React performance optimization",
  "style": "isometric flat illustration, editorial tech blog art",
  "visual_metaphor": "split screen comparison: left side (slow): tangled wires, spinning loading indicators, frustrated developer; right side (fast): clean arrows, React logo in center glowing, happy developer",
  "color_scheme": "left side cool grey #9EA7B4, right side vibrant blue #61DAFB (React blue), orange accents #FF6B35, white background",
  "labels": "Chinese labels on key elements, React terminology in English",
  "mood": "informative, engaging, developer‑friendly",
  "output": "16:9 landscape, blog header image, visually explains the concept"
}

Effect: The visual_metaphor field structures an abstract concept (fast vs. slow) so the AI can render a clear comparison.

Case 11 – Story Illustration

Scenario: An article about an indie developer’s journey needs a scene illustration.

{
  "subject": "story illustration for indie developer journey",
  "style": "warm editorial illustration, semi‑flat modern art style",
  "scene": {
    "character": "young developer, casual hoodie, focused expression, sitting at cluttered desk",
    "environment": "cozy home office at night, multiple monitor screens glowing, coffee cup, sticky notes on wall",
    "atmosphere": "late night hustle, single desk lamp illuminating workspace",
    "symbolic_elements": "code on screens, small plant on desk, motivational post‑it notes"
  },
  "colors": "warm amber lighting #F5A623, dark night outside window, screen blue‑white glow, soft shadows",
  "mood": "determined, focused, solo journey, warm human story",
  "output": "16:9, article header image, emotional and relatable"
}

Effect: The nested scene object breaks the complex illustration into character, environment, atmosphere, and symbolic elements, improving fidelity.

Case 12 – Avatar Design

Scenario: A personal brand needs a consistent set of virtual avatars.

{
  "subject": "personal brand avatar illustration, character: young Asian male tech blogger",
  "style": "modern vector avatar, semi‑realistic illustration, LinkedIn/Twitter professional avatar style",
  "character_design": {
    "face": "friendly smile, sharp eyes, clean‑shaven, short neat hair",
    "clothing": "dark navy crewneck sweater, simple and clean",
    "pose": "slight 3/4 angle facing right, confident and approachable",
    "background": "solid circle background, gradient: deep blue to purple"
  },
  "style_details": "clean line art, flat shading with subtle gradients, no complex textures",
  "colors": "skin tone: warm medium, hair: dark brown, clothes: navy #1A2B4A, background circle: #4361EE to #7B2FBE",
  "mood": "professional, approachable, modern tech persona",
  "output": "square 1:1, avatar format 512x512, suitable for profile picture"
}

Effect: Splitting the avatar into face, clothing, pose, and background ensures consistent colors and proportions across multiple generations.

Quick Reference: Common Fields and Values

style

: minimalist product photography / cinematic CGI render / flat vector illustration / isometric design / editorial illustration / watercolor painting / manga line art lighting: soft diffused studio light / dramatic rim lighting / natural window light / golden hour sunlight / neon ambient glow / chiaroscuro dark lighting composition: overhead flat lay / centered symmetry / rule of thirds / low angle hero shot / wide establishing shot / close‑up macro mood: clean and premium / warm and cozy / futuristic and bold / calm and serene / energetic and vibrant / professional and trustworthy output: square 1:1 / portrait 9:16 / landscape 16:9 / A4 portrait print / 4:5 Instagram / 21:9 ultra‑wide banner

Debug Checklist

Is subject specific enough? ("wireless earbuds" is better than "headphones")

Are colors given as hex values? (e.g., #4361EE is more precise than "blue")

Is composition detailed with an angle? (e.g., overhead flat lay)

Do mood and style words align? ("futuristic" + "watercolor painting" would clash)

Are complex scenes described with nested fields? (UI, characters, posters, etc.)

Conclusion

JSON prompts are not mandatory, but they become valuable when you need batch consistency, precise parameter tweaking across iterations, or fine‑grained control over multi‑layered scenes. The seven core fields ( subject, style, lighting, composition, colors, mood, output) cover 80% of use cases. Nested fields such as design_system, layout, and character_design act as advanced tools for UI, posters, and avatars. Remember to use hex codes for colors and keep mood consistent with style —these details are key to stable JSON prompt results.