← The ladderAll skillsRung 01 of 07

Rung one

Rebuild Taylor Swift’s website. One skill, six decisions.

One of the most visited pages on earth. Tour dates, a merch link, and that is it. Nothing to type, nothing gets saved, nothing changes when you visit, which is exactly why this is rung one. You learn its layout, then fill that layout with words and pictures that are yours.

Difficultyrung 1 of 7$35to start, plus assets. ~$15/yr to keep.
Time to build
about an hour, most of it waiting
Blast radius
nobody notices until somebody cannot find the tour dates
Reversible
Yes. Push a fix and it is live in about a minute.
Platform floor
~US$15/yr. A domain renewal, and genuinely nothing else.

Use a site builder instead if

you want the URL and nothing else. Squarespace will be faster and it will look fine. This is an hour, and most of that hour is spent understanding what the tool is doing, which is only worth it if that is the thing you came for.

The whole thing is two lines.

Install it once. Then say what you want, and answer six questions while it works.

install the skill, once
mkdir -p ~/.claude/skills/remake-a-site && curl -fsSL https://labs.routiq.ai/skills/remake-a-site/SKILL.md -o ~/.claude/skills/remake-a-site/SKILL.md
then say this to Claude Code
remake taylorswift.com as my artist site

You need Claude Code, and a machine with Homebrew, Git and Node on it. That is Day Zero, it takes about an hour, and you only ever do it once. You do not need a code editor for this rung, and you do not need to know how to code. Every file gets written for you.

What you actually learn

Five tools, one job each: build it, read the site, remember the code, publish the result, make the pictures. That is the real stack behind almost every website, and knowing which does what is the thing you keep. You will not type a single command at any of them, but you will finish knowing what each one was doing on your behalf, and the one way each of them catches people out.

Claude Code

it builds

Writes every file, and drives the other four. You talk to it in plain English and it does the typing.

It is the only thing on this list you actually interact with. That is what separates this from a site builder: you are not dragging blocks around someone's editor, you are writing a brief and getting a site built to it.

What catches people out

It builds exactly what the brief says, so a vague brief gets you a vague site. And every question it has to stop and ask you is a full stop in the middle of a build. On the first run it halted three times on things the brief simply had not answered, which is why the brief now answers them up front.

Firecrawl

it reads

Takes a URL and hands back the page as structured text, plus its stylesheets and its media, in a form a machine can work with.

It is what turns a site you admire into a design brief. Without it you are reading view-source and copying hex values by eye.

What catches people out

What you get depends entirely on which format you ask for. Ask for markdown and every tag is stripped, including the <video> that makes the hero move, so a moving hero comes back as a still and you build the wrong thing. Ask for HTML as well and it is right there. That single distinction cost about an hour.

GitHub

it remembers

Keeps a copy of your code that is not on your laptop, plus every version of it you have ever saved.

Not for backup. Vercel WATCHES it, so pushing to GitHub is the thing that triggers a deploy. That is why the repo gets created before a single line of code exists.

What catches people out

History is one-way. Anything you commit stays in it forever, even after you delete the file, so 24 MB of images on the first run are still in that history now. It is why .gitignore gets written into an empty folder, and why media never goes in.

Vercel

it publishes

Turns your folder into a URL anyone on earth can load, and does it again automatically every time you push.

It is the entire distance between 'works on my machine' and a real website. Once it is linked you never think about deploying again.

What catches people out

Two different things share the name. The deployment is your code, which should be tiny. Blob storage is a separate bucket for your big files, served from a CDN. Keeping images out of the repo is what keeps clones instant and lets you swap an asset without touching git at all.

Higgsfield

it makes the pictures

Generates images and video from a written description, and can train on a face so the same person shows up in all of them.

It is what makes the site yours. You can learn layout from anyone, but the photography has to be your own, and this is how you get photography without a photographer.

What catches people out

Quality is not the hard part, consistency is. Any tool will make you one good image. Twelve images with the same recognisable person across a hero, three product shots and eight tiles is a different problem, and solving it is the entire reason the face gets trained before anything else is generated.

It stops six times and makes you decide.

That is deliberate. If it did the whole thing without asking, you would learn nothing and a site builder would be the better tool. These six are the reason to do it this way.

  1. 01

    Which site, and what did you notice

    You open it and scroll it once. Does the hero move? Do the carousels loop? How many different layouts can you count? Thirty seconds that saves an hour, and the first time you look at a website as a structure rather than a picture.

  2. 02

    Which colour does which job

    The crawl reads the real hex values off the CSS and measures every pairing. You say which is text, which is background, which is accent. If the site you admire runs body copy below 4.5:1, you find out now rather than inheriting it.

  3. 03

    What to spend, and whose face

    You see the price before anything is generated, and you approve it. Then you approve the trained face, because a hero, three product shots and eight tiles all key off it, and getting it wrong means regenerating twelve things.

  4. 04

    Your actual words

    Six questions, one at a time. This is the part no tool can do for you, and the part people lose the most time pretending otherwise. The banned-words list is what stops the output sounding like every other site.

  5. 05

    Read the brief before it runs

    You see exactly what is about to be built and get to change it. Then it runs start to finish without stopping, which is the only way a build stays fast.

  6. 06

    Look at it yourself

    On a phone, before it ships. You decide what looks wrong, not the tool. The last cheap moment to change anything.

Everything else runs itself.

Nobody has ever learned anything from gh auth setup-git. These happen silently, and you only hear about them if one fails.

Five things it already knows.

Each one cost real time on the first filmed run. This is what the skill carries that a fresh session does not.

A screenshot cannot tell you a hero is a video
Markdown strips tags. Read the page as text or pixels and a video hero comes back as an image, so you build the wrong thing and it looks almost right.
A page limit drops the about page silently
Crawlers default to a handful of pages and the ones they drop are the dull ones at the bottom of the nav: about, contact, privacy, terms. You find out when the footer links point at nothing.
Set up git last and you spend commits undoing commits
Writing .gitignore into a folder that is already full produced three commits whose only purpose was undoing earlier ones, plus commits stamped with the wrong email.
Committing media puts it in history forever
The first run put 24 MB of binaries into git. Deleting the files later does not remove them. Blob storage before the first push, or a history rewrite after.
Generate the poster separately and the video jumps
The still has to be frame one of the video, pulled with ffmpeg, or you see a visible jump the moment it starts playing.

How long it really takes.

About an hour, of which 20 minutes is waiting for the build and 15 is waiting for assets to generate. Your hands are on it for maybe ten minutes of that, across six questions.

Not 'a couple of minutes'. People told minutes, who then spend an hour, quit.

What it costs.

USD list price, checked August 2026. The two columns are what you pay ONCE to get it live, and what you pay every year to keep it there. They add up to the totals at the bottom, so you can check the arithmetic rather than take the headline on trust.

That $35 is one month of Claude plus a domain, and $15 of it is the only thing that recurs. If you already pay for Claude it is $15 to start. Asset generation sits on top of both numbers, which is why it is the one line above without a figure.

Nothing on that list needs feeding. No database bill, nothing to patch, nothing that pages you at 2am. The site could sit untouched for five years and still work. That is rung one, and it is the last rung where that sentence is true.

One thing to be straight about

Learning layout from a site you admire is normal practice. Copying its photography, wordmarks and written copy onto a public URL is not, and the line is not blurry.

This generates your own assets for exactly that reason. The layout lesson is identical. The difference is you end up with something you can put your name on.

Not covered here

  • Anything dynamic. Real carts, real mailing lists, real payments. The moment something gets typed and saved you are on rung two, and the shape of the work changes.
  • A CMS, or editing the content without touching code.
  • Analytics, and SEO beyond a title and a social card.
  • Putting someone else's images on a public site. Do not.
← All seven rungsThe rest of the skills →