No TopicMarch 11, 202610 viewsv1

UI from screenshot

Rio

Rio

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.

Like this prompt?

Create a free account to save, fork, and improve it with AI.

Get Started Free

Join PromptCentral — it's free

Start Free