Design references and the design.md file

I want to slow down a little here too. The difference between a professionally built page and one that isn't is, very often, a single file. It's called design.md.

It's your site's design rulebook. Which colors it uses and what each one is for. Which font goes in the headings and which in the body text. What sizes. What the buttons, the borders, the shadows, the spacing look like. All of that, written in a file that ChatGPT reads every time it's about to draw a page.

What's interesting is what that produces: it unifies the design across every page on the site. The button on the product page matches the button on the checkout because they both come from the same file. Without design.md, every page is an adventure.

In this step we're not going to write that file by hand. We're going to generate several of them, from images of designs we like. The skill turns each image into a design file.

Step 6: finding references

After you approve the wireframes, the skill asks whether you already have design files from another project. If you've used this skill to build another site, you can import the ones you generated then and skip this step. Since I was starting from zero, I told it to analyze.

To search I went to Dribbble, a site where designers from all over the world show their work. We're not copying anything: we're teaching ChatGPT what counts, for us, as a design that works. I searched for "store," "shop," "e-commerce." When something caught my eye, I downloaded it to the Downloads folder.

Two things I learned doing this:

Look at the design, not the structure. This is the opposite of the screenshots step. Now ChatGPT is going to pay attention to the colors, the typography, the spacing, the style of the buttons. Not how the page is organized. So it doesn't matter whether the reference is from a store: it could be a bank, a portfolio, anything. What matters is that you like how it looks.

Four is enough. Chosen with some thought. You can add more, but then you'll have to generate more proposals, more templates, and the process gets longer and costs more. Four you actually like and that resemble what you want to build beat eight picked at random.

I took my time, because the first ones I found all looked alike and I wanted something different. It's worth the effort: this search lays the foundations the whole design gets built on.

A name for each one

You hand each reference to ChatGPT by dragging the image in, and you tell it how you want it saved:

This design is called Dark.

I don't overthink the names. I called mine Dark, Green, Purple and Pink, after each one's dominant color. This is one stage among many, and the design will be changed later; the names are there so you can tell the versions apart when you compare them.

For every image, ChatGPT generates a .md file in the Obsidian vault: a design.md with what it extracted from that reference. Those are the ones you'll be able to reuse on your next project.

Once you've got yours (three, four), type "done" and then "let's continue."

Closing the references

The skill closes the list, checks that the four files make sense, and asks for your approval. If you've changed your mind about a reference, now's the time. If not, we move on: next comes the brand.