Copy a design

Hand a screenshot to your agent and have it rebuild the layout in a Next.js + Tailwind starter.

Goal

Recreate a visual you like from the public web: layout, hierarchy, tone, and key components. This is not pixel-perfect cloning. The exercise is about using images and references well, iterating with critique, and stopping when the result is good enough to ship a prototype.

Getting started

A blank Next.js + Tailwind canvas is waiting in the repository.

npm install
npm run dev

Open the URL the terminal prints (usually http://localhost:3000). You will see a placeholder homepage in app/page.tsx. That is your canvas.

What you do

Pick a reference: a public page, marketing site, or product screenshot you are allowed to reference. No paywalled or private material. Respect copyright. This is a learning exercise, not a way to clone a brand.

Capture screenshots: one or a few. Crop tightly: hero, card grid, nav, pricing table.

Drop the screenshots into the references/ folder of the demo so you can find them again.

Attach the image in your agent and ask for a first pass that rebuilds the layout on app/page.tsx. State the stack explicitly: Next.js App Router, Tailwind classes only, no extra libraries.

Review in the browser and give concrete follow-ups. "Increase vertical rhythm by 8 px," "left-align this column," "make the CTA full-width on mobile". Avoid vague asks like "make it look better".

Constraints (avoid junk output)

Pick one main viewport first (desktop or mobile). Add responsive tweaks in a follow-up. Do not let the model guess all breakpoints in one go.
If the source uses custom artwork or logos you do not own, use placeholders or free assets like Unsplash or your own brand kit.

Done when

You have a runnable page that resembles the reference for layout and feel, and you can list three deliberate design decisions the agent got wrong and how you fixed them (or would fix them) without auto-piloting the next request.

Optional stretch

Add a light or dark variant.
Re-run the same screenshot with a stricter system prompt in AGENTS.md and compare the first output to the ad-hoc chat.