Task prompt · Websites & Apps
Turn a hand-drawn sketch into a working page
by Agent Yard TeamPhotograph a paper wireframe and get a working, styled prototype.
You'll attach
Needs photo
Works with
Cursor
Claude Code
Codex
Claude
ChatGPT
GeminiUse cases
- Photograph a paper wireframe and get a working, styled prototype.
- When you already have a photo and want the AI to work from it instead of starting from scratch.
- Reuse it as often as you like: fill in the blanks (what the page is for; audience; style, e.g. minimal, playful, corporate) 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.
How to use it
- Open Cursor or Claude Code in your terminal (or another AI listed here).
- Attach the photo or image.
- Fill in the highlighted blanks ([WHAT THE PAGE IS FOR], [AUDIENCE], [STYLE, E.G. MINIMAL, PLAYFUL, CORPORATE]) below, or edit them after pasting.
- Copy the prompt, paste it into the chat and send.
Fill in the blanks (optional)
Prompt
The attached photo is a hand-drawn wireframe for [WHAT THE PAGE IS FOR]. Build it as a working prototype. 1. First, list every element you can identify in the sketch and how you interpret it. Mark anything ambiguous. 2. Build it as a single HTML file with Tailwind via CDN. Use realistic placeholder copy for [AUDIENCE], not lorem ipsum. 3. Make buttons, tabs and forms actually work with minimal JS (no backend). 4. Use this style: [STYLE, E.G. MINIMAL, PLAYFUL, CORPORATE]. Finish with three suggestions that would make the page clearer for users.
One email a week
The Weekly is presented byyour brandSponsored · openThe best new prompts and personas, nothing else.