PromptSingleV1
PublicStartupMarch 11, 2026503 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.

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