Wireframes: the skeleton in black and white

A wireframe is a drawing of a screen's structure, with no design. White, black and gray. Boxes with an X where a photo will go, lines where text will go, a rectangle where a button will go. Designers use them for websites and apps to decide where each element sits before thinking about how it looks.

And, above all, to decide how it changes at each screen size: on a laptop I see three columns of products, on a tablet two, on a phone one. Those decisions get made here.

Back when we built sites by hand, before AI, wireframes were essential. A lot of people skip them now, start designing straight away with the AI, and then can't work out why the page doesn't look right. This is why. Without a skeleton, every page comes out different and nothing fits together. At The Mariscal we brought this way of working back precisely so we could build quality sites with AI, and so we could try several designs on the same structure, which you'll see two chapters from now.

Step 4: the skill draws them

You say "let's continue" and the skill gets going. The first thing it does is ask for two permissions:

• To run a Python script. That's what builds the HTML files for the wireframes. Accept it.
• To use Chrome. It'll use it to open each wireframe, screenshot it, and check that it adapts to phone and tablet. It'll be using it constantly from here on, so I set it to always allow.

About permissions in general: below ChatGPT's text box you can choose whether it asks you about everything or only the important things. I have it set to only ask about the important things. Otherwise you spend the afternoon clicking "yes."

From there you do nothing. ChatGPT creates one HTML file for every page in the sitemap, links them together, screenshots them at all three sizes, fixes whatever doesn't adapt, and screenshots again. You'll see the captures go by: the checkout, the payment method, the cart. When it's done it tells you the wireframes are ready and you can open them in the browser.

What you'll see

The first page is an index of all the pages. From there you go into each wireframe. You'll see, in gray and white:

• On the home page, a product list that scrolls sideways, the boxes with an X where the photos go.
• On the category page, the filters down one side and the product grid.
• On the product detail, the photos, the size picker, everything the page you handed over had.
• The checkout and the payment page, with their forms.

The only thing that matters right now is structure. The content (the copy, the product names) doesn't. You can change it if you want, but it's better to wait until the end, when the project is built and the copy is edited from a file.

Step 5: fix and approve

This is your chance to make adjustments. Something happened to me that could happen to you: the category page came out cut off, with the images wrong, because the screenshot I'd given it was cut off (remember, the infinite-scroll one?). And it was missing the footer the other pages had.

I told it like this:

On the category page the images are cut off. Fix them like the other pages, and add the footer.

"Like the other pages" works because ChatGPT can check the Obsidian vault and see exactly what it did on the other pages. It's not guessing anything here: we always tell it what to do, and it remembers what it's already done.

Wait for it to run, open the wireframe in the browser, and it has the footer and the full images.

When everything's right, type "done, let's move on." The skill records the version you approved. This matters: that exact version is saved, and everything that comes after has to respect it. The wireframes are now done for desktop, tablet and phone.

Step 5 done. Now, finally: design.