Glossary and common problems

Every word that came up in the guide, in the order you'll need them, and what to do when something doesn't go to plan.

The words

The tools

Skill. An ability you install in ChatGPT: detailed instructions on how to do a task. It makes the result the same every time. The Mariscal's runs when you type / and pick it from the list.

Obsidian. A note-taking app where the notes link to each other. The skill uses it as the project's memory: every decision gets written down there, which is why ChatGPT can pick up where it left off with a "let's continue."

Vault. In Obsidian, a folder of notes. "Open vault" means opening your project folder.

GitHub. The platform where code and all its versions are stored. ChatGPT uses it on your behalf. GitHub Desktop is the desktop app for creating repositories and authorizing your account.

Repository. A folder GitHub keeps an eye on and saves every version of. For you: the project folder.

Vercel. The host where the site gets published. It connects to GitHub: when something lands on main, it publishes it. The Hobby plan is free.

Structure and design

Structure. Which pages the site has and what goes on each one, with no design. You get it from screenshots of other sites, a pencil sketch or a design of your own.

Sitemap. The list of the site's pages and how they connect.

Wireframe. A drawing of a page with no design: white, black and gray. It shows what goes where and how it changes on desktop, tablet and phone.

Responsive. The site adapts to any screen size. Three columns on a laptop, two on a tablet, one on a phone.

design.md. The design file: the site's rulebook. Colors, fonts, sizes, buttons. Every page gets built from it, which is why they all match.

Reference. An image you give ChatGPT to teach it what you like. For structure (it cares about layout) or for design (it cares about colors and typography). Nothing gets copied; a sense of taste gets extracted.

Brand. The logo, the name in type, the symbol on its own, the color and black-and-white versions. The skill generates all of them and builds a brand profile.

Hero. The first part of a page, what you see when you land. Usually the headline, a subhead, a button and an image.

Call to action (CTA). The button that invites you to do the main thing: buy, sign up, get in touch.

Modal (pop-up). A panel that appears on top of the page.

Prototype. The whole site with the design applied, in HTML, for reviewing and fixing before the final project gets built.

Version. Every change you ask for from step 11 onward creates a new version. Nothing gets overwritten; you can go back to any of them.

The project

HTML. The file format web pages are made of. The wireframes and the prototype are HTML.

React. The most widely used library in the world for building websites. Made by Facebook.

Framework. A pre-built toolbox so you don't start from scratch. It gives you structure and security.

Next.js. The framework that works with React and that we use for the final project. The standard for professional sites.

Component. A piece of the site you build once and use on many pages: the top bar, the footer, a product card. Lego bricks.

Localhost. Your own computer acting as a web server. You see the site in your browser, but only you can.

Compile (build). Export the site to the version that goes on the internet. Errors you don't see locally surface when you compile. The skill compiles at every step.

404. The page people see when they go to an address that doesn't exist on the site.

content and data. Two folders in the Next.js project. In content are the copy and the products, as text files, for editing from Obsidian. In data, what the site needs to run.

Publishing

Deploy. Put the site on the internet so everyone can use it.

main. The main branch: the code that's in production.

Branch. A parallel copy of main where work happens without touching what's live.

Commit. A submission of changes to GitHub. ChatGPT makes one at the end of each step.

Pull request (PR). The request to merge a branch into main. ChatGPT opens it and describes it; you approve it.

Merge. Join a branch's changes into main. Done by pressing a button on GitHub.

Preview. The test version Vercel builds from a pull request before you merge it.

Production. The site running on the internet, for everyone.

Framer Motion. An animation library for React. You ask for it by name when you want things to move.

When something doesn't go to plan

My ChatGPT plan ran out halfway through. Sign out, sign in with another account (or wait for it to reset), import the same folder and type "let's continue." The skill reads Obsidian and carries on where it left off. Nothing is lost.

ChatGPT says it can't publish to GitHub. That's the first-time authorization. Grant it permanently. On a Mac, also enable Accessibility and Screen Recording under Privacy & Security.

It asks for permission to run a script or use Chrome. That's normal: the script builds the wireframes, Chrome is for taking screenshots and auditing. Accept. And below the text box you can set it to only ask about the important things.

A wireframe or a page came out cut off. Almost always because the screenshot you gave it was cut off (infinite-scroll pages). Tell it: "fix it like the other pages," and if something's missing (the footer, say), ask for it in the same message.

ChatGPT carried on without waiting for my answer. Hit "regenerate response" and answer what it was asking. That way it doesn't make things up.

It gets stuck saving. Happens sometimes on the long steps. Save by hand and carry on. Other times ChatGPT presses save on its own, and even renames the file: that's not a problem.

I ran out of disk space. ChatGPT leaves temporary files around. Free up some space and tell it to continue. Always keep some headroom.

I want to change something in the design, but I'm on the wireframes step. Not the time. Each step fixes its own thing: structure on the wireframes, design when you choose the proposal, animations at the end. Write it down and ask when it's time.

Some things don't work on the live site (the filters, the cart). That's because so far we've only done the design. You ask for them afterward, like any change: with a screenshot and a description.

I don't know which skill to ask for in a change. For design: Huashu, UI UX Pro Max, Apple Design. For animations: GPT Taste with Framer Motion. If you're not sure, don't name any: ChatGPT will check the project folder and choose.

I want to go back to an earlier version. Tell it "let's go back to version 1 of the home page" (or whichever). From step 11 on, every change was saved as a version.

I walked away for a week. Open the project, type "let's continue." That's all.