Skip to content

GIGA-IFITS/PromptUIUX_GIGAJAM26

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 

Repository files navigation

UI/UX Prompt Format Experiment

Eksperimen membandingkan format prompt berbeda untuk menghasilkan output yang sama. Setiap bagian menguji apakah format penulisan prompt (plain text, JSON, atau Markdown) mempengaruhi kualitas hasil yang dihasilkan.

Daftar Isi

Bagian 1 — 3D Isometric Object

Tool: Gemini Nano Banana 2

Objek target: Ilustrasi 3D isometrik mobil sport coupe, body hitam midnight, velg gold multi-spoke, jendela tinted dengan refleksi biru-teal, latar belakang putih solid #FFFFFF, tanpa ground plane atau elemen lain.

Prompt 1 — Plain Text

Prompt ditulis sebagai satu paragraf narasi biasa.

Generate a single 3D isometric illustration of a sleek modern sports car, viewed from a front-left elevated angle at 45 degrees. The car should be a stylized coupe silhouette inspired by Mercedes-Benz or BMW, not a real licensed model. The body is deep midnight black with subtle dark navy undertones. Rims are multi-spoke gloss gold. Windows are dark tinted with a very subtle blue-teal reflection. Headlights emit a soft cold white glow. The surface has smooth matte finish with very gentle specular highlight along the roofline and hood. No hard shadows on the car body itself. A very soft diffused shadow pool sits directly beneath the car. Background is plain solid white #FFFFFF. No ground plane, no floor texture, no environment, no scene, no text, no labels. The car is centered with equal margin on all sides. Style is clean editorial 3D render, similar to a product shot for a luxury brand campaign. Smooth surfaces, no photorealism, slightly stylized proportions. Output as a single isolated object on white background.

Hasil:

Hasil Plain Text Prompt


Prompt 2 — JSON

Prompt disusun sebagai objek JSON terstruktur dengan key-value.

{
  "prompt": {
    "object": "Single 3D isometric sports car illustration",
    "style": "Clean editorial 3D render, stylized product shot, luxury brand aesthetic",
    "dimension": "3D isometric",
    "view_angle": "Front-left elevated, 45 degree isometric",
    "silhouette": "Sleek modern coupe, inspired by Mercedes-Benz or BMW, not a licensed model",
    "body": {
      "color": "Deep midnight black with dark navy undertones",
      "finish": "Smooth matte with gentle specular highlight on roofline and hood"
    },
    "rims": {
      "style": "Multi-spoke",
      "finish": "Gloss gold"
    },
    "windows": {
      "tint": "Dark tinted",
      "reflection": "Subtle blue-teal reflection"
    },
    "headlights": {
      "glow": "Soft cold white emission glow"
    },
    "shadow": {
      "type": "Soft diffused shadow pool directly beneath car only",
      "hard_shadow": false
    },
    "background": {
      "type": "Solid plain white",
      "color": "#FFFFFF"
    },
    "excluded_elements": [
      "No ground plane",
      "No floor texture",
      "No environment or scene",
      "No text or labels",
      "No humans or figures"
    ],
    "composition": {
      "position": "Centered with equal margin on all sides",
      "isolation": "Single object only"
    },
    "output": {
      "format": "PNG on white background",
      "style_reference": "Luxury automotive product campaign render"
    }
  }
}

Hasil:

Hasil JSON Prompt

Prompt 3 — Markdown

Prompt disusun sebagai dokumen Markdown dengan heading dan bullet points.

# Car Object Prompt — 3D Isometric Illustration

## Object
Single 3D isometric sports car illustration, isolated, one object only.

## Style
- Clean editorial 3D render
- Stylized product shot aesthetic
- Luxury automotive brand campaign feel
- Slightly stylized proportions, not photorealistic

## Dimension & View
- **Dimension:** 3D Isometric
- **View Angle:** Front-left elevated, 45 degree isometric
- **Silhouette:** Sleek modern coupe inspired by Mercedes-Benz or BMW, not a licensed model

## Car Body
- **Color:** Deep midnight black with dark navy undertones
- **Finish:** Smooth matte with gentle specular highlight along roofline and hood

## Details
- **Rims:** Multi-spoke, gloss gold finish
- **Windows:** Dark tinted with subtle blue-teal reflection
- **Headlights:** Soft cold white emission glow

## Lighting & Shadow
- No hard shadows on car body
- Soft diffused shadow pool directly beneath the car only
- Uniform studio-style light diffusion

## Background
- Plain solid white #FFFFFF
- No ground plane
- No floor texture
- No environment or scene

## Composition
- Car centered with equal margin on all sides
- Single isolated object, nothing else in frame
- No text, no labels, no humans, no props

## Output
- **Format:** PNG on white background
- **Reference Style:** Luxury automotive product campaign render

Hasil:

Hasil Markdown Prompt

Bagian 2 — UI/UX Design & Prototype

Tools: v0, Lovable, Figma Make

Objek target: Premium car marketplace mobile app — dark luxury theme, React + Tailwind CSS, responsive mobile & desktop, 5 halaman utama (Home, Browse, Detail, History, Profile).

Prompt 4 — Plain Text

Prompt ditulis sebagai deskripsi naratif panjang dalam satu blok teks.

Build a premium car marketplace mobile app UI using React with Tailwind CSS.

App Overview:
A modern luxury-feel car buying and selling app featuring Toyota, Mercedes-Benz, Ford Mustang, BMW, and other brands. Similar to a premium version of OLX or CarGurus.

Design System:
Typography uses Bebas Neue or Barlow Condensed for headings and DM Sans for body text, imported from Google Fonts. Color palette: background #0D0D0D deep black, surface cards #161616 and #1E1E1E, primary accent #C8A96E warm gold for luxury feel, secondary accent #E8E8E8 light silver, CTA highlight #FF4C29 red-orange for buttons, primary text #FFFFFF, muted text #888888, success green #22C55E. Visual style is dark luxury automotive theme with glassmorphism cards with subtle gold border, smooth rounded corners 16 to 24px radius, subtle grain texture on background, gradient overlays on car images fading to black at bottom, and bold wide-spaced typography on headings.

Responsive Behavior:
On mobile under 768px use full screen layout with fixed bottom navigation bar containing four tabs Home, Browse, History, and Profile. Bottom nav has gold active indicator dot and safe area padding for notch devices. On desktop 768px and above use sticky top navbar with logo on left, nav links in center, and CTA button on right. Desktop uses 3-column grid for car listings.

Pages and Screens:

Home Screen includes a hero section with full-width featured car image with gradient overlay showing car name in large bold type with price and View Details button. Below that is a horizontal scrollable brand filter with pills for All, Toyota, Mercedes, BMW, Mustang, Porsche, and Lamborghini. Then sections for Hot Deals, Recently Viewed, and Popular in Your City as horizontal scroll cards. Each car card shows image, brand logo badge, car name, year, price, mileage, and fuel type.

Browse Screen has a search bar at top with mic and filter icons, filter chips for Price Range, Brand, Year, Fuel Type, and Condition, and sort options for Newest, Price Low to High, and Most Popular. Car listings show in 2-column grid on mobile and 3-column on desktop with image, bookmark icon, brand badge, name, specs, and price.

Car Detail Screen shows full-bleed hero image with back, share, and bookmark buttons and a swipeable image gallery. Below shows car name in large heading, year badge, condition badge, price with Best Price Guarantee label, and a quick specs row for Engine, Transmission, Mileage, and Fuel. Tabs for Overview, Specs, Reviews, and Similar Cars. Seller info card shows avatar, name, verified badge, and response rate. Sticky bottom bar has Chat Seller and Buy Now buttons.

History Screen has tabs for Viewed, Inquired, and Purchased. Shows timeline list with car thumbnail, name, date, and status badge. Status badges are Ongoing in yellow, Completed in green, and Cancelled in red. Includes empty state with illustration.

Profile Screen has a hero card with avatar, name, member since date, and verified badge. Stats row shows Cars Viewed, Inquiries Sent, and Purchases. Menu items include My Listings, Saved Cars, Payment Methods, Notifications, Help and Support, Privacy and Security, and a dark mode toggle. Logout button in subtle red at bottom.

Components to build include BottomNav with blur backdrop and gold active dot, TopNav that is transparent on top and solid on scroll, CarCard as dark glass card with image on top and specs below, BrandPill as scrollable filter chips, HeroSlider with gradient overlay, SpecBadge as small icon and text pill, StatusBadge as colored pill, and StickyBookButton as floating CTA on detail page.

Animations include car cards scale up on hover to 1.02, bottom nav icons bounce on tap, hero image subtle parallax scroll, page transitions slide in from right, and skeleton loading placeholders for images.

Tech stack is React with functional components and hooks, Tailwind CSS, placeholder images from unsplash for car and luxury queries, lucide-react for icons, and hardcoded mock data for 8 to 10 cars with no backend needed.

Avoid generic white backgrounds, boring flat cards, system fonts, overcrowded layouts, and purple gradients.

Hasil:

Prompt 5 — JSON

Prompt disusun sebagai objek JSON dengan struktur hierarkis per komponen dan screen.

{
  "project": {
    "name": "Car Marketplace Mobile App",
    "type": "Mobile-first React Web App",
    "description": "A premium dark-themed car buying and selling app featuring brands like Toyota, Mercedes-Benz, Ford Mustang, and BMW. Inspired by a luxury version of OLX or CarGurus.",
    "tech_stack": {
      "framework": "React (functional components + hooks)",
      "styling": "Tailwind CSS",
      "icons": "lucide-react",
      "fonts": "Google Fonts",
      "images": "Unsplash placeholder — query: car, luxury",
      "data": "Hardcoded mock data, 8 to 10 cars, no backend"
    }
  },
  "design_system": {
    "typography": {
      "heading": "Bebas Neue or Barlow Condensed",
      "body": "DM Sans",
      "source": "Google Fonts"
    },
    "color_palette": {
      "background": "#0D0D0D",
      "surface_card_1": "#161616",
      "surface_card_2": "#1E1E1E",
      "primary_accent": "#C8A96E",
      "secondary_accent": "#E8E8E8",
      "cta_highlight": "#FF4C29",
      "text_primary": "#FFFFFF",
      "text_muted": "#888888",
      "success": "#22C55E"
    },
    "visual_style": {
      "theme": "Dark luxury automotive",
      "card_style": "Glassmorphism with subtle gold border",
      "border_radius": "16px to 24px",
      "background_texture": "Subtle grain and noise overlay",
      "image_overlay": "Gradient fade to black at bottom",
      "typography_style": "Bold, wide letter-spacing on headings"
    }
  },
  "responsive": {
    "mobile": {
      "breakpoint": "max-width 768px",
      "layout": "Full screen, no horizontal scroll",
      "navigation": "Fixed bottom nav bar",
      "nav_tabs": ["Home", "Browse", "History", "Profile"],
      "nav_active_indicator": "Gold dot below active icon",
      "safe_area": "Padding for notch devices"
    },
    "desktop": {
      "breakpoint": "min-width 768px",
      "navigation": "Sticky top navbar",
      "navbar_layout": "Logo left, nav links center, CTA button right",
      "listing_grid": "3 columns"
    }
  },
  "screens": [
    {
      "name": "Home",
      "sections": [
        {
          "type": "hero",
          "description": "Full-width featured car image with gradient overlay, large bold car name, price, and View Details CTA button"
        },
        {
          "type": "brand_filter",
          "description": "Horizontal scrollable pill filters",
          "items": ["All", "Toyota", "Mercedes", "BMW", "Mustang", "Porsche", "Lamborghini"]
        },
        { "type": "section", "title": "Hot Deals", "layout": "Horizontal scroll cards" },
        { "type": "section", "title": "Recently Viewed", "layout": "Horizontal scroll cards" },
        { "type": "section", "title": "Popular in Your City", "layout": "Horizontal scroll cards" }
      ],
      "car_card_info": ["image", "brand_logo_badge", "car_name", "year", "price", "mileage", "fuel_type"]
    },
    {
      "name": "Browse",
      "elements": [
        { "type": "search_bar", "icons": ["mic", "filter"] },
        { "type": "filter_chips", "options": ["Price Range", "Brand", "Year", "Fuel Type", "Condition"] },
        { "type": "sort", "options": ["Newest", "Price Low to High", "Most Popular"] },
        {
          "type": "listing_grid",
          "mobile_columns": 2,
          "desktop_columns": 3,
          "card_elements": ["image", "bookmark_icon", "brand_badge", "car_name", "specs_row", "price"]
        }
      ]
    },
    {
      "name": "Car Detail",
      "elements": [
        {
          "type": "hero_image",
          "features": ["back_button", "share_button", "bookmark_button", "swipeable_gallery", "dots_indicator"]
        },
        {
          "type": "info_section",
          "fields": ["car_name_large", "year_badge", "condition_badge", "price", "best_price_guarantee_label"]
        },
        { "type": "specs_row", "items": ["Engine", "Transmission", "Mileage", "Fuel"] },
        { "type": "tabs", "items": ["Overview", "Specs", "Reviews", "Similar Cars"] },
        { "type": "seller_card", "fields": ["avatar", "name", "verified_badge", "response_rate"] },
        { "type": "sticky_bottom_bar", "buttons": ["Chat Seller", "Buy Now"] }
      ]
    },
    {
      "name": "History",
      "tabs": ["Viewed", "Inquired", "Purchased"],
      "list_item": ["car_thumbnail", "car_name", "date", "status_badge"],
      "status_badges": { "Ongoing": "yellow", "Completed": "green", "Cancelled": "red" },
      "empty_state": "Illustration with message"
    },
    {
      "name": "Profile",
      "hero_card": ["avatar", "name", "member_since", "verified_badge"],
      "stats_row": ["Cars Viewed", "Inquiries Sent", "Purchases"],
      "menu_items": [
        "My Listings", "Saved Cars", "Payment Methods",
        "Notifications", "Help and Support", "Privacy and Security"
      ],
      "extras": ["Dark mode toggle", "Logout button in red"]
    }
  ],
  "components": [
    { "name": "BottomNav", "notes": "Blur backdrop, gold active dot below icon" },
    { "name": "TopNav", "notes": "Transparent at top, solid background on scroll" },
    { "name": "CarCard", "notes": "Dark glass card, image top, specs bottom, gold border" },
    { "name": "BrandPill", "notes": "Horizontal scrollable filter chip" },
    { "name": "HeroSlider", "notes": "Full-bleed image with gradient overlay" },
    { "name": "SpecBadge", "notes": "Small icon and text pill" },
    { "name": "StatusBadge", "notes": "Colored pill — green, yellow, or red" },
    { "name": "StickyBookButton", "notes": "Floating CTA on car detail page" }
  ],
  "animations": [
    { "element": "CarCard", "effect": "Scale up to 1.02 on hover" },
    { "element": "BottomNav icons", "effect": "Bounce on tap" },
    { "element": "Hero image", "effect": "Subtle parallax on scroll" },
    { "element": "Page transitions", "effect": "Slide in from right" },
    { "element": "Car images", "effect": "Skeleton loading placeholder" }
  ],
  "avoid": [
    "Generic white or light backgrounds",
    "Flat cards without depth or shadow",
    "System fonts like Arial or Roboto",
    "Overcrowded or cluttered layouts",
    "Purple gradient color schemes"
  ]
}

Hasil:

Kesimpulan

Kelima prompt di atas menyampaikan informasi yang sama persis dengan format berbeda. Eksperimen ini melihat apakah struktur penulisan prompt dan tools yang digunakan mempengaruhi kualitas dan konsistensi output model.

About

No description, website, or topics provided.

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors