The image-generation demos that took over X the past two weeks are wild.
The one that broke containment: an AI was asked to generate a picture of a programmer's screen, code and all.
Someone then typed the code out of the picture into a real app, and it actually ran.
The model was going beyond just drawing what code "looks like." It was reasoning about what real working code on that screen would actually say.
That reasoning is what makes a much bigger use case possible:
Show an AI a picture of a finished website, get a real working version back.
Now, without a real workflow, you'll land something close on maybe one try in four.
This week's edition is the workflow I've been using to push that hit rate up.
Six steps, deliberately simple.
The point is to spend less time wrestling with the AI's randomness, and more time refining something that's already close to what you want 👇
1. Brief the AI
Open a session in Codex (OpenAI's coding assistant) and install the img-to-frontend skill (a pre-built workflow I'll share in the Prompt Drop section below).
Think of a "skill" as a recipe the AI follows step by step, so you don't have to script the whole process yourself (and check out our last edition for a more in-depth guide).
Then give it a real brief. The more specific you are, the closer the first mockup batch will land.
A good brief covers:
What you're building and who it's for
The vibe you want, and the vibe you'd rather avoid
Aesthetic notes (color palette, density, photography vs. illustration)
Concrete references (a site you like, a brand, a logo file, a screenshot)
Here’s an example brief:
Build a website for Peak Path Fitness, a small training studio focused on 1:1 coaching, mobility work, and recovery sessions for working adults — beginners, returning athletes, desk-job stiffness, post-injury comebacks.
Feel: expert, calm, motivating. Reads as a coaching practice, more clinical than commercial.
Aesthetic: warm neutrals, real photography, generous whitespace.
Primary goals: get visitors to book a free movement assessment, communicate the service menu, build trust via credentials and client outcomes.If you have no idea what you want, that's fine.
Leave room for the model to surprise you. A vague brief still beats none.
2. Brainstorm with mockups
The skill produces four stylistically distinct image mockups against your brief. Let it work (this part takes a few minutes)
Two rules I stick to:
If none of the four land, change the brief and rerun. Trying to drag a near-miss across the line burns tokens for a worse result than starting fresh.
Skip the busy mockups. Dashboards with eight charts and twenty icons photograph beautifully and render terribly.
Pick the closest one and move on. The remaining gap closes in code.
3. Turn the image into a prompt (the step most guides skip)
This is where most workflows leak quality.
People go straight from "I picked image #3" to "now build it," and the AI has to reconstruct what was actually in the picture from scratch.
The fix is to have the AI describe the picture in detail first (in writing) and use that description as the build instructions.
Something like this 👇
I like #3. Walk through every element on the page — the gradient that fades from text into the hero image, the spacing around the main container, the font, the overall aesthetic.
Then write out a prompt detailed enough that another AI could replicate this image as a real, working website.The img-to-frontend skill does this automatically when you confirm a pick, but the nudge helps.
Use GPT-5.5 for the whole workflow. The model's reasoning is doing the heavy lifting here.
If the mockup is missing pieces you want (footer, pricing section, testimonials), tell it to extend the page in the same aesthetic.
4. Build with the image in context
Read the generated prompt before you spend more time on it. Add anything that's missing.
Then paste the original mockup image back into the chat with your AI and run this prompt:
Build the website as outlined. While you work, keep referring back to the original image — spacing, font, icons, logos, layout, copy.
Match the small details.
Prioritize accuracy over speed and make sure it works on mobile.
Iterate in a loop: compare to the original, fix anything that's off, repeat, until the output is a direct match.Keeping the image visible to the AI is the load-bearing piece of this whole workflow.
Without it, the AI is working from a description of a description.
With it, there's a real target to compare against on every pass.
5. Tweak in the preview browser
You'll have spacing issues, mismatched fonts, weird icons, and the occasional cursed graphic. That's expected.
Open the rendered page in Codex's built-in preview browser (View → Open Browser Tab if it doesn't pop up automatically).
Click "Annotate" in the top right, then start pointing out things you want fixed.
Click directly on an element, or drag a box around an area.
Stack as many notes as you want before sending one batch prompt to fix everything at once. Voice input works if you're tired of typing.
Two or three rounds is usually enough. Write each fix the way you'd brief a designer who has never seen the page before: specific, concrete, with the actual change you want.
6. Expand
You now have a working visual system and a real, functioning website 🙌
Use it as the basis for the rest of the site (additional pages, sections, and graphics).
The image model will generate logos, hero photography, illustration spots, and icons in the same aesthetic.
For motion, generate a still image first, then run it through Bytedance Seedream 2.0, a tool that turns still images into short videos.
Most builds I've run land in under ten follow-up tweaks after Step 4 (your mileage will vary by mockup complexity).
Here’s the skill that makes it all happen 👇 img-to-frontend is a Codex skill that runs the whole image-to-website workflow above (from brief to ready-to-build prompt).
Once installed, you give the skill a brief and it generates four stylistically distinct image mockups for you to choose from.
After you pick one, the skill writes a detailed build prompt based on the image you chose, and hands the whole package off to your “build agent” ( an AI that can actually take actions like writing files and running code, rather than just chatting back).
Your roundup of the latest model releases and updates from the biggest AI labs.
Anthropic ships managed agents in public beta. Claude can now run long workflows on its own (think hours of work, not minutes) in areas like coding, finance, and legal review. The new piece: instead of you babysitting each step, you set the goal and a rubric for "what good looks like," and Claude grades its own work as it goes. It can also spin up other instances of itself to handle sub-tasks. Worth experimenting with if you've been waiting for an AI that can carry a project across a whole workday (Anthropic)
GPT-5.5 Instant becomes ChatGPT's default. OpenAI rolled out GPT-5.5 Instant as ChatGPT's default model, replacing GPT-5.3 Instant. Internal evaluations show 52.5% fewer hallucinations on high-stakes prompts (medicine, law, finance) and 37.3% fewer inaccuracies in conversations users had previously flagged. Plus and Pro users also get memory across past chats, files, and Gmail. Free users get 10 messages every five hours before falling back to the smaller GPT-5.5 mini. (TechCrunch)
Google I/O is next week. Expect a big Veo 4 reveal (Google has used I/O for major Veo launches two years running), plus a fresh round of Gemini updates aimed at letting AI work proactively in the background rather than only when you ask. Worth blocking off time for the keynote if you're building anything that touches video, voice, or assistants. (Google)
Sora is gone; the new video lineup is set. OpenAI shut down the Sora app and web experience on April 26 (the API goes dark September 24). The three tools filling the gap: Google's Veo 3.1, which now generates dialogue and ambient audio synced to the video; ByteDance's Seedance 2.0, the one most creators are landing on for multi-shot storytelling with consistent characters; and Kling 3.0, the cheapest per second of video. If you're making any kind of AI video, this is the moment to pick a new home (Reddit)
Advertise with Build with AI
Get in front of an audience of professionals using AI day-to-day: founders, engineers, operators, and product builders.
Interested in advertising? Respond to this email for rates and details.
Until next time,
William Ryan
Editor-in-Chief @ Build with AI
PS: Follow me on X for daily updates and AI workflows.