UX Pattern - Image Generation

Google AI Studio

Google AI Studio

Tools

Google AI Studio

Figma Make


Context

An experimental web interface built with Google AI Studio that explores how prompt-based image generation can feel tactile, conversational, and immediate.


It combines a layered image deck with a chat-style prompt editor, allowing users to extract creative metadata directly from images and regenerate new visuals on the fly, all within a single desktop view.


Key Features

Design Rationale

  • Image Deck: A stacked, card-style gallery where each click reveals the next image; an Extract button pulls its embedded prompt.

  • Prompt Editor: Chat-like interface to edit extracted prompts and parameters such as aspect ratio, style, and speed.

  • Image Output: Generates up to four images at once, displayed as equal cards with upload placeholders when fewer are created.

  • Single-Screen Layout: Entire workflow—deck, prompts, and outputs—visible at once, with no scrolling.


The deck interaction translates digital generation into a more physical gesture, clicking through layered images echoes flipping through ideas or iterations. Extracting prompts from images keeps users in the creative loop, avoiding the need to switch between tools or text fields.


Create a free website with Framer, the website builder loved by startups, designers and agencies.