Four versions of the home page: choose with your head, not a magnifying glass

This is where everything we've done comes together: the wireframes (the structure), the four design.md files (the skin) and the brand. The skill is going to take the home page wireframe and apply each design file to it. One copy per design. You'll see the same page four times, with four different skins, and you'll pick one.

This is the moment you understand what the wireframes were for. If the structure had been different, the design would be the same but the page would be different. Structure and design are two separate things, and that's why they can be combined.

Step 10: the proposals

When you say "let's move on," the skill tells you what it's going to use: the four designs (Dark, Green, Purple and Pink) and two of the skills it installed at the start, one for design and one for prototyping.

It asks you a question about images: what do we put where the product photos go? Since ChatGPT can generate images, I asked it to use sample photos: to generate example sneaker photos, so I see something as close as possible to the final result. You can give it your real photos if you have them.

And off it goes. This takes a while: it generates one HTML file per design, home page only, plus an index page to see them all together. For each one it opens Chrome, screenshots it on desktop, on tablet, on a phone in portrait and in landscape, and fixes whatever doesn't adapt. You'll see the captures go by. Notice that the modal (the pop-up window, as developers call it) gets designed too.

When it's done, open the index and you see the four proposals. The structure is identical in all of them; the colors, the typography, the buttons, the photos change. That's the magic of the skill: all the information it pulled from your references, applied to your structure.

There's something else I like pointing out: every stage creates documents that you can later change to your liking, but that carry the specific information for that step. This isn't "make me the best website in the world." It's having found references, having built them up, and seeing the result applied to something that was already yours.

Choosing

I thought the Dark design was very solid. But the one that felt most right for a sneaker store was Purple. I show you all four in the video, including Pink, with a very different typeface.

Here's something I want to say clearly: this is not the time to be picky. You pick whatever fits best what you want and you move on. You can ask for changes (it'll generate a new design file), but don't start fine-tuning now. The time for that will come. Think of it this way: we already had the structure with the wireframes, and now we're putting the body on it, the skin. Nothing more than that.

Let's go with Purple.

ChatGPT notes the decision and starts step 11.

Step 11: the final version of the home page

Before building every page, the skill refines the home page with the chosen design. It starts bringing in slightly nicer design touches: how it places the photo, how it uses the typography. And it audits again that the design is responsive, that it adapts to every resolution.

Here's an example of why that matters. The hero (the first part of the page, what you see when you land) has two columns: on the left the headline, the description and the button; on the right the image. It's a very common layout, because people read in an F shape: first the bar with the brand, then the headline, then the subhead, then the action button (the call to action, the button that invites you to do the main thing). On a phone those two columns become one, and the right-hand one goes on top. It could also be the other way round, but it's usually best to keep the text below the image.

When the home page is ready it asks you to approve it. Notice it says "version 1." From this step on, every change you ask for creates a new version. If you later prefer version 2, or want to go back to 1, you can. Nothing gets overwritten.

Since I agreed with it, I approved it. Step 11 done. Now, every page.