Task prompt · Websites & Apps
Recreate a website from a screenshot
by Agent Yard TeamTurn a screenshot of any page into clean, responsive HTML and CSS you can edit.
You'll attach
Needs screenshot
Works with
Cursor
Claude Code
Codex
Claude
ChatGPT
GeminiUse cases
- Turn a screenshot of any page into clean, responsive HTML and CSS you can edit.
- When you already have a screenshot and want the AI to work from it instead of starting from scratch.
- Reuse it as often as you like: fill in the blanks (framework or none; my brand name) with new details and copy again.
- With Cursor, Claude Code, Codex and more, the AIs that support what this prompt needs.
Featured in: Best Cursor prompts for building websites, Best ChatGPT prompts for websites.
How to use it
- Open Cursor or Claude Code in your terminal (or another AI listed here).
- Attach the screenshot (or paste it straight into the chat).
- Fill in the highlighted blanks ([FRAMEWORK OR NONE], [MY BRAND NAME]) below, or edit them after pasting.
- Copy the prompt, paste it into the chat and send.
- For pixel-close results, attach a full-page screenshot plus a mobile screenshot.
Fill in the blanks (optional)
Prompt
Recreate the page in the attached screenshot as a responsive web page. - Match layout, spacing, type scale, colors and border radius as closely as you can. Estimate values in px and list the color palette as CSS variables. - Use semantic HTML (header, nav, main, section, footer) and modern CSS (flex, grid, clamp). No frameworks unless I say otherwise: [FRAMEWORK OR NONE]. - Replace logos and photos with labeled placeholders. - Make it work from 360px to 1440px wide and describe what changes at each breakpoint. - Don't copy brand names or trademarks; use [MY BRAND NAME] instead. Return the full code, then a short list of anything you had to guess.
One email a week
The Weekly is presented byyour brandSponsored · openThe best new prompts and personas, nothing else.