StartupMarch 11, 2026198 viewsv1

Pixel-Perfect Mobile UI Replication Prompt for AI Coding Tools

Recreate your app screen design with pixel-perfect accuracy, ensuring every detail matches the original screenshot for a flawless user experience.

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