Chapter 3Structure: screenshots of other sites, with no design at all

Chapter 3 · Steps 2 and 3

Structure: screenshots of other sites, with no design at all

4 min · 823 words

I want to slow down here, because this chapter is the difference between a website that turns out well and one that doesn't. With AI or without it.

Before you design anything, you need to know which pages your site will have and what goes on each one. That's called structure. It has no colors, no fonts, no photos: it's the skeleton. If you've got a sheet of paper handy, draw it in pencil: a box that says "home," an arrow to "products," another to "product detail," another to "cart," another to "checkout." With that alone you know more about your site than most people who ask ChatGPT for a website.

Structure first, design later IdeaStructureWireframesDesignPrototype"A sneaker store"the skeletonthe skinhomecategoryproductcartcheckoutYou can sketchit in pencil
Figure 6. Structure is the skeleton: which pages exist and what goes on each. It has no colors.

At The Mariscal we have a whole book about this, "How to Think Through an App": how to get from an idea to a structure, draw the wireframes, and get everything ready to work with AI. It's at book.themariscal.com, it's €10, and you read it online with highlights, like this guide. I mention it because the skill is about to do this step for you, but the more you understand what it's doing, the better you'll do with anything you build with AI afterward.

Step 2: one screenshot per page

The skill asks you for structure references. What we're going to do is hand it screenshots of other websites, one for each page we want to have. We're not stealing anything from anyone: it doesn't care about the design, it cares about how the page is organized. A header, a carousel, a product grid with filters on the left, a footer. That's it.

For the sneaker store I used Puma's website, because it has a fairly conventional e-commerce structure, which is exactly what I wanted.

How to capture a whole page

Pages are longer than the screen, and a normal screenshot cuts them off. There's a Chrome trick for capturing the whole page at once:

  1. Right-click the page → Inspect.
  2. With the panel open, press Cmd + Shift + P on a Mac (Ctrl + Shift + P on Windows).
  3. Type "screenshot" and pick "Capture full size screenshot."

It saves an image of the entire page, top to bottom, in Downloads. Drag that image into ChatGPT and tell it which page it is:

This is the home page.

ChatGPT analyzes it, writes the structure into a .md file in the Obsidian vault (no design information, just the layout), and asks whether you want to add more pages.

The other pages

Repeat the same thing for every page on your site. In my case:

  • Product detail: a product's page, with the photos, the sizes, the buy button. Full screenshot, and I tell it "this is the product page."
  • Checkout: the shipping details form. To get there I had to fill Puma's form with fake data; otherwise it won't let you through.
  • Payment: choosing the payment method. Another full screenshot.
  • Category: a category's product list with the filters. This page has infinite scroll, so the full-page capture doesn't work. I took a regular screenshot of one section with Cmd + Shift + 4 (on a Mac it lets you pick a rectangle of the screen; on Windows, the Snipping Tool). You can take several screenshots of the same page and hand them over together if one isn't enough.

When you don't want to add any more, type "done."

If you'd rather not screenshot other sites

There are three other ways, and all three work just as well:

  • A pencil drawing on a sheet of paper. Take a photo of it.
  • A collage: take the header you like from one site, the carousel from another, paste them together in Photoshop or any app, and hand it the image.
  • A design you already have, in Figma, in Photoshop, wherever.

And if you already have a site and want to redesign it, give it screenshots of your own site. The skill will take your current structure and put a new design on it.

Step 3: the sitemap

When you say "done," the skill gathers all the pages you loaded and builds the sitemap: a file in the Obsidian vault with the list of pages and how they link to each other. Home leads to categories, category leads to product, product to checkout, checkout to payment. It needs this to build the wireframes and, later, the clickable prototype.

The store's sitemap HomeCategoryProductCartCheckoutPaymentOne screenshot perpagesitemap.md
Figure 7. The sitemap: the pages you loaded and how they link. The skill builds it in step 3.

It shows it to you and asks you to approve it. This is a good moment to correct things: a page is missing, two should be one, one shouldn't be there. In my case it was fine, so I typed "let's continue."

Step 3 done. Now comes the part I most enjoy showing.