What you're going to build, and why you can't just ask ChatGPT for it

You've probably tried this already. You opened ChatGPT, typed "I want a stunning website" and waited. And something came out. A page with a big headline, three cards and a blue button. It wasn't terrible, but it wasn't yours either. The same thing happened to me when I started, and it happens to everyone. Don't worry about it.

The problem isn't ChatGPT. The problem is that ChatGPT has no idea what "stunning" means to you. It doesn't know which pages you want, how they connect, what your taste is, or how to build a site that looks right on a laptop and on a phone. It also doesn't know how the people who build sites for a living actually think about them.

That's what this skill is for. Instead of one prompt and a wish list, you follow a method: the same one we use at The Mariscal to build sites for clients, packaged so ChatGPT can run it on its own and only ask you what it needs. You describe, you look, you approve, you ask for changes. That's the whole job.

What you'll have when you're done

An online sneaker store. I picked that example because it's a real site, with several pages that have to talk to each other: the home page, the categories, each product's detail page, the cart, the checkout. By the end of this guide you'll have that site live on the internet, with an address you can send to anyone, a consistent design across every page, animations, and copy you can edit from a plain text file.

And it all starts with an empty folder and one sentence: "I want to build a website to sell sneakers."

If your idea is something else (a site for your studio, a portfolio, your business's page), the path is exactly the same. The screenshots you hand over change, and so does the brand name. The steps don't.

What a skill is

A skill is exactly what it sounds like. When you install a skill in ChatGPT, you're giving it very specific instructions on how to do a certain job. In our case, how to build a professional website: in what order, what to ask, what to check, when to stop and ask for approval.

That has a huge advantage over writing prompts: every time you run the skill, ChatGPT does the same thing. The results are consistent. You're not relying on having had a good writing day.

The Mariscal skill also comes bundled with other people's skills. Design skills, animation skills, interface audit skills. You don't have to install them one by one or remember which one to use when: ours installs them at the start and calls them when they're needed.

What Obsidian is, and why it gives ChatGPT a memory

I'm sure this has happened to you: you talk to ChatGPT one day, come back the next, and it remembers nothing. On a project that takes several hours, that's a disaster.

Obsidian is a note-taking app. But not loose notes: the notes link to each other and form a map. The skill uses that map as the project's memory. Every decision, every screenshot you hand over, every design you approve, gets written down there. When ChatGPT needs to remember something, it finds it in a second.

In practice, that means you can close ChatGPT, switch accounts, leave the project for a week. You come back, type "let's continue," and it picks up exactly where it left off. You'll see this happen more than once in this guide, because while I was recording the video I hit my plan's limit twice and had to switch accounts.

You'll barely ever touch Obsidian. You install it, the skill fills it up, and at the end you'll use it for one very nice thing: editing your site's copy without ever opening the code.

The map of the whole journey

The skill has nineteen steps, numbered 0 to 18. Sounds like a lot. It isn't: ChatGPT does most of them on its own and you just approve. But it helps to have the map in your head before you start, because the order is half the trick.

First you tell it the idea and the skill writes the plan. Then you work on structure: which pages exist and what goes on each one, with no design at all. From that come the wireframes, the site in black and white. Only then do you look for design and brand references, choose, and apply them on top of the wireframes. You build a prototype of the whole site in HTML, and once it's approved, it gets turned into a professional Next.js project. You publish it. And as a bonus, you add the magic: animations, a home page redesign, the details that make the difference.

Notice something: design doesn't show up until halfway through. That's the difference between a site that turns out well and one that doesn't, with or without AI. Skeleton first, skin later.

How to use this guide

The guide follows the video step by step, but at a calmer pace and with diagrams. Each chapter covers one or two steps of the skill. At the end there's a glossary with every odd word that comes up (repository, branch, merge, wireframe, framework) and a list of common problems.

If you sign in with your The Mariscal account (it's free), you can highlight, stick post-its and download the whole guide as a PDF. If you don't, it reads just the same.

Let's get to work.