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.

PromptCentral
Official@promptcentralPrompt
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.