What you’ll make
One section sketch that answers a buyer question with your own content.
Which kit would help with your first episode?
A landing page for two podcast kits
Say you sell a kit for solo podcast episodes and another for interviews. I’d want to see what comes in each and work out which one fits the episode I’m planning.
Reference notes
Three questions to answer in order
- What is it? Put an episode outline beside ‘See what’s inside.’
- What do I get? Label the sample outline and recording checklist so you can see what each does.
- Which one should I choose? Lead with ‘Record on your own’ and ‘Prepare for a guest.’
Phone sketch
Give each kit its own button
- Show the labeled preview, then the Solo Kit with ‘Choose Solo Kit’ and the Interview Kit with ‘Choose Interview Kit.’
- Keep each button with the details for its own kit.
Before you start
- Write down what you’re offering and the one thing you hope someone does next. Gather the real copy, product images, and details you can back up.
- Find a few examples you can look at on a phone and a computer. If you found a screenshot in a gallery, try opening the page so you can see what comes before and after it.
Choose the question that still needs an answer
Pick one question a buyer needs answered before acting. Find one section in a reference that answers a similar question, then note the detail you want to try.
Make the sketch with your content
Copy the prompt below into Claude. Attach the reference or describe the exact detail you want to use, along with your real copy and images. Send it once the action and destination are clear.
Sketch one section for a buyer question
Use the details I provide in this chat or in my attachments. Draft one section using only my offer, supplied copy or images, and the reference detail I chose. Show the exact heading, supporting words, image or placeholder, and action in desktop and phone reading order. Keep each action with the content it belongs to. Identify any missing asset or destination. Ask if you don’t know the buyer question or which action the section should support.
Keep one layout with the right words
Choose a sketch you can read at phone width. Save the heading, preview, and action in the order you’ll use them.
I give Claude the Solo Kit and Interview Kit descriptions and their checkout links.
On a phone, the sketch might put Choose Solo Kit under the first kit, with Choose Interview Kit under the second.
Read the sketch from top to button
Start with the buyer question and follow the section down. If you built a preview, open the links yourself. Otherwise, write each destination beside its button.
- Find the answer in the section without using your notes.
- Keep the caption and action next to the item they describe.
- Match each button to its own destination.
Optional: Try your section in the full page
Drop the sketch between the sections people will actually read before and after it. Scroll from the offer to the button and look for a question the new section still leaves open.
Plan my page around the questions people ask
Use this with your offer, real assets, and references to make a page plan before you wireframe.
This page is for [audience] deciding [decision]. I offer [product or service] and want visitors to [main action and where it leads]. Here are my [approved copy, images, proof, and site styles] and [reference links or screenshots]. Start with the three or four questions someone needs answered before acting. Put them in order and give each a section. Make a table with question, reference and exact spot, what the layout helps someone notice, my content for that spot, and what moves on a phone. Then sketch the content order for both widths using my actual headings, images, and button labels. Keep product claims tied to the material I provided. If a reference won’t open, work from the supplied screenshots or notes and say what’s unconfirmed. Call out any section that needs a missing asset or repeats an answer.
Sketch this section with what I have
Use this at the wireframe step when you have a layout idea and need to see it with your real content.
Sketch [section and its question] using [exact copy, photos, labels, and button destination]. It sits between [previous and next sections] and shares [type, spacing, content width, and button styles]. Give me a desktop and phone wireframe in reading order. Include the actual words that sit next to the image and the actual button label. Show where a long heading wraps, which part of the image needs to stay visible, and how labels stay with their pictures. If the image or proof is missing, leave a labeled spot or propose a version that works with the assets I have.
Find where a new visitor gets stuck
Use this with your page draft to find the first answer that’s missing or hard to spot.
Here’s [full draft at phone and desktop widths]. Someone should be able to explain [offer] and choose [next action]. Walk the page from top to bottom. For each answer the reader needs, point to the line, image, or button that supplies it. Mark missing answers, repeated answers, detached labels, and actions with unclear destinations. If you only have screenshots, list destinations as checks for me. Pick the first change worth making. Tell me exactly what to look for when I open the revised page.
Optional worksheet: Landing page reference worksheet
Fill this in as you go. Keep this page open while you work. Reloading it clears your answers.
Troubleshooting
Why does every section feel like it came from a different site?
Line up the content edges and use the same heading, spacing, and button styles. Then look at two sections together to see where the page still feels like it jumps.
What if my reference has a photo I can’t match?
Ask what the photo helped someone decide. Try a detail shot or a labeled product preview that answers the same question with what you have.