What is inside the ZIP #
After your purchase you download a ZIP file. Unpack it completely first. On Windows use a right click and Extract All, on a Mac a double click is enough. What you get is an ordinary folder, and that folder is your project.
Windows shows the content of a ZIP file like an ordinary folder. Changes made in there are lost, and commands do not run there. Unpacking is the first step, not looking inside.
Three kinds of content sit side by side in that folder: the website itself, explanations for you, and instructions for your AI. This overview applies to every AI Website Template.
| What is in the folder | What it is there for |
|---|---|
| START-HIER.md | Your first page. On a single screen it sums up what this template is and how the preview starts. |
| CLAUDE.md | The briefing for your AI. It holds the rules of the project, the colour world, the tone and everything it must never do. |
| .claude/skills | Seven playbooks for your AI, from the rebuild through texts and SEO to quality assurance. The chapter The seven skills goes through them one by one. |
| Wissen | Background on the template for you and your AI: target audience, tone of voice, SEO strategy and the blueprint of the building blocks. |
| styleguide.html | Colours, fonts and building blocks in the browser. This one file may be opened with a double click, it needs no server. |
| src and public | The website itself. In the static template these places are called index.html and assets. |
| README and image credits | A short overview of the template and the source of every image that comes with it. |
The files ending in .md and the style guide are for you. The CLAUDE.md and the .claude folder are for your AI. Both stay on your computer later and never go to the server.
.claude begins with a dot and is therefore invisible in many file managers. Show hidden files, in Windows Explorer via View and Hidden items, on a Mac with Cmd, Shift and period. The folder has to come along whenever you move or copy the project, otherwise your AI will not find the skills.
Two kinds of templates #
Open the folder and check whether it contains a folder called src. That single question decides how you start your preview. Everything else in this documentation applies to both kinds alike.
Template with an src folder
This is the standard case, almost all templates are built this way. The website is assembled from building blocks by a program called Astro. For that you need Node.js and two commands in the terminal.
- npm install · once only, fetches the building blocks
- npm run dev · starts the preview
The preview then runs at http://localhost:4321. As long as it is running, you see every change in the browser right away.
Template without an src folder
Some templates are finished HTML with no build step. You recognise it by an index.html sitting directly in the main folder. There is nothing to build here, what you see is already what will later sit on the server.
A double click on the index.html is still not enough for the preview, because the addresses of the subpages need a small server. Either of these two commands does the job:
- npx serve . · preview server, comes with Node.js
- python -m http.server 8000 · the same thing with Python
The right address then appears in the terminal, usually http://localhost:3000 or http://localhost:8000. Open exactly the address shown there.
Contact forms send nothing on your own computer. Depending on the template, sending is either not wired up yet in the delivered state, or it needs a server with PHP. Both are intended and get sorted before going live, in full in the chapter Going live.
Where the folder belongs #
Before you install anything, put the project folder in a good place. The location decides whether the commands run cleanly later, and it is the most common cause of error messages at the start.
OneDrive, Dropbox, Google Drive and network drives do not suit this project. The paths become too long, and the sync reaches into files while they are being written. The build then stops with messages that look like a fault in the project, even though the project is fine.
Put the folder directly on your hard drive, with a short path. On Windows something like C:\websites\myproject works well, on a Mac /Users/yourname/websites/myproject. Avoid spaces and special characters in the path, that saves you a whole class of error messages.
The Downloads folder is a poor permanent home, because sooner or later it gets cleaned out. And since your project now sits outside the cloud, nothing backs it up automatically any more. How to solve that is in the next section on backups and in full in the chapter Maintaining and extending.
Installing Node.js #
Node.js is the program that can run the commands from your project. It is free, it runs only on your computer, and you will never notice it again after installing. You need it for every template with an src folder. With the static template you only need it if you start the preview with npx serve ..
Open nodejs.org
Download the version marked LTS there. LTS stands for the release with long-term support, which is the stable choice for this project. The site recognises your operating system by itself and offers you the right file.
Run the installer
Double click the downloaded file, accept all defaults and click through to the end. You do not have to choose or adjust anything. This takes one to two minutes.
Open the terminal again
A terminal window that was already open before the installation does not know about Node.js yet. Close it and open a new one. This step is often skipped and is the reason for most of the messages further down.
A quick check
Type node -v into the terminal and press Enter, then npm -v. If two version numbers come back, everything is in place and you are done with this section.
On Windows it is called Windows Terminal or PowerShell, on a Mac simply Terminal. The most convenient one is the built-in terminal of your AI editor, because the project folder is already set correctly there and you do not have to navigate anywhere.
Setting up your AI #
This template is built for working with an AI. You describe in plain sentences what you want, and the AI changes the files. Claude Code is the case this template is tuned to, and therefore the most convenient route.
Two things happen there by themselves. Claude Code reads the CLAUDE.md as soon as you open the folder, and it loads the seven skills from .claude/skills. From the very first message your AI knows the rules of the project, the colour world, the tone and the places where your texts live.
The template works just as well with any other AI that can read and write files in a folder. There you give it the content of the CLAUDE.md yourself at the start and point it at the project folder. All that matters is that it has access to the whole project and not to single files.
I just bought this AI Website Template and opened the folder for the first time. Read the CLAUDE.md and the START-HIER.md and explain to me in plain words what is in here, which commands I need and what I should do first. I am not a developer.
Your AI writes real files on your hard drive. That is the whole point, and it is exactly why you create a backup copy in a moment, before the rebuild begins.
Starting the first preview #
Now everything comes together. These five steps apply to a template with an src folder, so to the standard case.
Open a terminal in the project folder
In Claude Code or your editor the built-in terminal is already in the right folder. Otherwise open a terminal and switch into your project with cd and the path.
Run npm install
This command fetches the building blocks the website is made from and puts them into the node_modules folder. The first time it takes one to three minutes and it never happens again after that. A few warnings along the way are normal, what counts is the message at the end.
Run npm run dev
The preview server starts and keeps running. The terminal is busy afterwards and accepts no further commands, which is how it should be. For other commands you open a second window.
Open the address in the browser
Call up http://localhost:4321. In front of you is the complete website with all subpages, images and texts. Click through the whole menu once, so that you see what you bought.
Change something and watch
As long as the server runs, the page refreshes itself with every change. You can stop it at any time with Ctrl and C in the terminal, on a Mac likewise with Ctrl and C. Next time npm run dev is all it takes, the installation is not needed again.
localhost means your own computer. The preview cannot be reached by anyone else, not even by colleagues on the same network. So you can try out anything. How the website gets a public address is in the chapter Going live.
With the static template npm install is not needed. There you open the terminal in the project folder, start npx serve . and call up the address the terminal gives you.
A backup of the original #
You have the delivered state exactly once. As soon as the rebuild starts, the project changes step by step, and at some point you will want to look up how a place used to be. A copy costs a minute and takes the weight out of every later attempt.
Copy the entire project folder and put the copy next to it, for example with the suffix -original and today's date. You do not need the node_modules folder in the copy, it is by far the largest part and can be recreated at any time with npm install.
Please create a backup of the delivered state before we change anything. Copy the entire project folder into a neighbouring folder with the suffix -original and today's date, without node_modules and without dist. Then tell me where the copy is and how big it is.
Then a first commit in the fresh state is the more convenient backup. You then see exactly what changed with every edit, and you can go back with a single command. Git is not required for this template, it is simply open to you.
The first sentence to your AI #
You do not have to prepare anything, fill in any list or bring any texts. One sentence is enough, your AI asks for everything else on its own.
I just bought the template. Where do I start?
That sentence triggers the skill start. It is built for exactly the moment when someone with no prior knowledge sits in front of an unfamiliar folder, and it guides you through a conversation in four rounds, with one question per message. After each round your AI builds something in and shows it to you in the preview.
Round 1 · Who you are
The name of your business, the person behind it, your city and, in one sentence, what you offer. After that the logo, the header, the page titles and the footer change. This is the moment when the template looks like you for the first time.
Round 2 · Your hard facts
Address, phone, email, availability and your domain. These details end up on the contact page, in the footer and in the machine-readable data that Google reads. Anything you do not have right now goes on a list of open points instead of into the text.
Round 3 · Your offer
Your services with their process, formats and pricing logic, and who they are meant for. After that the service pages, the price details and the matching answers in the frequently asked questions are right.
Round 4 · People and evidence
Do you have a photo of yourself? Are there real client quotes with written approval, real figures, real projects? Everything that is real and approved goes in. Everything else goes out instead of staying on as a pretty placeholder.
After the fourth round the skill template-aufbau takes over the systematic rest: images, search terms, the legal pages and the proof that no placeholder is left in the project. What each single skill can do and how to trigger it deliberately is in the chapter The seven skills.
The person, the company, the phone numbers, the figures, the client quotes and the case examples are placeholders. That is deliberate, so that you see a complete website instead of empty boxes. None of it may go live as it is, and your AI knows that. The photos showing faces are replaced with your own before the start as well.
When something gets stuck #
There is a handful of stumbling blocks at the start, and they all have a short solution.
| What you see | What helps |
|---|---|
| npm is not found | Node.js is missing, or your terminal was already open when you installed it. Close the window, open a new one and type node -v. If no version number comes back, install Node.js once more. |
| The port is in use | A preview is still running in another window. Stop it there with Ctrl and C. Otherwise the server moves to the next free number, 4322 for example, and you simply open the address shown in the terminal. |
| The build stops | Almost always the location. Move the project folder out of the cloud and directly onto the hard drive, delete the node_modules folder there and run npm install again. |
| The page stays white | Look into the terminal, the actual message with file and line is there. If the server runs without errors, check the address including the number and reload the page with the shift key held down. |
| The .claude folder is missing | It is only hidden, because its name starts with a dot. Show hidden files and it is back. |
| Subpages lead nowhere | In the static template you double clicked the index.html instead of starting the preview server. The addresses of the subpages need the small server from the section above. |
If your message is not in the table, hand it to your AI. It knows the structure of your project and usually finds the cause faster than a search on the web. What matters is that you paste the message in full and add what you did last.
I am stuck. I will tell you in a moment which command I ran and what the terminal says. Explain to me in plain words what is causing it, name exactly one next step, and do not change anything before I agree.
How things continue #
If you can say yes to all of these, the setup is done.
- The project folder is unpacked on the hard drive, not in a cloud folder
node -vreturns a version number, provided your template has ansrcfolder- The preview runs and shows the website in the browser
- You have clicked through every subpage once
- A copy of the delivered state sits next to the project
- Your AI has access to the whole folder and knows the
CLAUDE.md - You are clear that every name, figure and quote in the template is a placeholder
Chapter 02 shows you which folder is there for what and where exactly your texts live: The anatomy of your template. If you would rather start rebuilding right away, jump to The seven skills and let the skill start take the lead.