Style Reference UI Design System

Create a square UI design-system board from an uploaded visual style reference, including web, mobile, cards, controls, buttons, and themed component examples.

Output

1:1 ・ 4K

0 uses

0 views

1:1 ・ 4K

GPT Image 2

Create from this prompt

Copy the prompt, then open ChatGPT and paste it in.

Prompt Template

Template uses

Template views

Reference needed before use

Style Reference ImageRequired

Upload a UI screenshot, design-board image, or visual reference whose style should guide the generated UI design system.

Using the uploaded style reference image as the visual guide, generate a complete UI design system board in a 1:1 square composition. Include web layout examples, mobile screens, cards, controls, buttons, and other interface components. Use the referenced visual style to guide the color palette, typography, spacing, surfaces, icon style, and component treatment, then apply it to a webpage design direction. Explore universe, flight, and butterfly themed variations or motifs within the same coherent design system. Present the result like a polished product design-system showcase with clear component groups, refined hierarchy, readable labels, consistent alignment, and 1:1 aspect ratio.

2. Open ChatGPT

One template = one prompt = one image