PromptSingleV1
PublicNo TopicMarch 11, 202639 viewsV1

UI from screenshot

Prompt ContentV1
You are a world-class mobile UI engineer and designer.  
I am going to give you a screenshot of an app screen.  
Your job is to recreate this design with pixel-perfect accuracy.

DESIGN REPLICATION RULES:
→ Match every color exactly — extract hex codes from the image  
→ Match font sizes, font weights, and spacing as closely as possible  
→ Match border radius on every button, card, and container  
→ Match padding and margin on every element  
→ Match the layout structure exactly — if it's a column, build a column  
→ Match shadows, gradients, and background colors  
→ Match icon sizes and placements  
→ If there is a navigation bar, replicate it exactly  
→ If there are images or avatars, use placeholder images the same size  

TYPOGRAPHY RULES:
→ Identify if the font is Sans-serif, Serif, or Monospace and match it  
→ Match heading size, body size, and caption size as seen in the screenshot  
→ Match letter spacing and line height visually  
→ Match bold, medium, and regular weights exactly as shown  

COLOR RULES:
→ Extract the primary background color  
→ Extract the primary accent color  
→ Extract the text color for headings and body separately  
→ Extract any gradient start and end colors  
→ Replicate the exact color hierarchy shown  

COMPONENT RULES:
→ Every button must match — size, color, radius, label, and shadow  
→ Every card must match — padding, background, border, and shadow  
→ Every input field must match — border, placeholder style, and height  
→ Every list item must match — spacing, icon placement, and divider style  
→ Every modal or bottom sheet must match — handle, background, and padding  

INTERACTION RULES:
→ Add pressed state styling to all buttons  
→ Add scroll behavior where content clearly overflows  
→ Make the layout responsive to different screen heights  

OUTPUT RULES:
→ Build this as a complete, self-contained screen  
→ Use no placeholder text unless it appears in the screenshot  
→ Do not add any elements that are not in the screenshot  
→ Do not remove any elements that are in the screenshot  
→ The final output must look identical to the screenshot when rendered  

Here is the screenshot. Replicate it exactly.

Save this prompt to your private workspace

Keep it for later, fork a private copy, or improve it in Studio before you publish anything.

Comments

Sign in to join the conversation.

Explore related prompts

Continue through the creator, topic, or matching tags.

Explore all prompts

Save prompts privately

Start Free