Walkthrough

From download to a finished site

From downloading SignOff Kit to a finished one-page site, in 17 steps. Each step has what to do, what to type, what you should see, and what to do if it goes wrong.

Written for the free Kit (signoff-kit-free.zip). The Kit is built for Claude Code, Cursor, and Codex. Pick yours below.

On Windows? Follow the Windows walkthrough.

Step 1: Download the free Kit

Go to signoffkit.com, click “Try it for free” in the hero, then click “Download The Free Kit”. No account, checkout or license key.

Do this

https://signoffkit.com → Try it for free → Download The Free Kit
→ signoff-kit-free.zip in ~/Downloads

You should see

signoff-kit-free.zip (about 48 KB) is in ~/Downloads.

Troubleshooting

If Safari unzipped it for you, you'll see a signoff-kit-free folder instead of the zip. That's fine; skip the unzip line in step 3.

Step 2: Check the basics

Make sure Node 18+ and python3 are installed. The installer uses python3 to update the router note, and the Kit's lint scripts run on Node. Using Cursor? Use the Cursor desktop app, not Cursor on the web. The web version runs in the cloud, so it can't see the folders on your computer.

Run

node -v
python3 --version

You should see

node -v prints v18 or higher. python3 --version prints a version number.

Troubleshooting

If Node is missing or older than 18, install the current LTS from nodejs.org and open a new terminal.

Step 3: Unzip the Kit

Unzip into Downloads and check the installer is executable.

Run

cd ~/Downloads
unzip -o signoff-kit-free.zip
ls -l signoff-kit-free/install.sh

You should see

A signoff-kit-free folder appears (README.md, LICENSE, NOTICE, UPSTREAM-SKILLS.md, install.sh, adapters/, skills/) and install.sh shows -rwxr-xr-x.

Troubleshooting

If the exec bit is missing, run the installer with bash in front of it in step 5.

Step 4: Make a project folder

Make an empty folder for your site and move into it. Use a fresh folder for each new site.

Run

mkdir -p ~/my-first-site && cd ~/my-first-site

You should see

You're in an empty folder. The installer puts the skills in this folder, so each site gets its own copy.

Troubleshooting

Claude Code

If the folder already has files from an earlier run, pick a new name (say ~/my-second-site) and use it in place of ~/my-first-site in later steps.

Cursor

If the folder already has files from an earlier run, pick a new name (say ~/my-second-site) and use it in later steps. Cursor also picks up .claude/skills and .agents/skills, so a folder with installs for more than one agent shows every skill more than once.

Codex

If the folder already has files from an earlier run, pick a new name (say ~/my-second-site) and use it in place of ~/my-first-site in later steps.

Step 5: Install for Claude CodeInstall for CursorInstall for Codex

Claude Code

Run the free installer with --claude. It only copies files from the folder; it downloads nothing.

Cursor

Run the free installer with --cursor. It only copies files from the folder; it downloads nothing.

Codex

Run the free installer with --codex. It only copies files from the folder; it downloads nothing.

Claude Code

Run

~/Downloads/signoff-kit-free/install.sh --claude

Cursor

Run

~/Downloads/signoff-kit-free/install.sh --cursor

Codex

Run

~/Downloads/signoff-kit-free/install.sh --codex

You should see

Claude Code

It prints Claude Code: then skills -> …/.claude/skills, then router note -> CLAUDE.md, then Done. Install the upstream skills you want (see UPSTREAM-SKILLS.md), then ask: "Use site-from-brief-lite to build a one-page site for <your business>." To try only what's in the free zip, skip the upstream skills for now.

Cursor

It prints Cursor: then skills -> …/.cursor/skills, then rule -> .cursor/rules/signoff-kit-free.mdc, then Done. Install the upstream skills you want (see UPSTREAM-SKILLS.md), then ask: "Use site-from-brief-lite to build a one-page site for <your business>." To try only what's in the free zip, skip the upstream skills for now.

Codex

It prints Codex: then skills -> …/.agents/skills, then router note -> AGENTS.md, then Done. Install the upstream skills you want (see UPSTREAM-SKILLS.md), then ask: "Use site-from-brief-lite to build a one-page site for <your business>." To try only what's in the free zip, skip the upstream skills for now.

Troubleshooting

Claude Code

permission denied: run bash ~/Downloads/signoff-kit-free/install.sh --claude. Can't find the Kit's skills next to install.sh means the path is wrong; check where the folder unzipped.

Cursor

permission denied: run bash ~/Downloads/signoff-kit-free/install.sh --cursor. Can't find the Kit's skills next to install.sh means the path is wrong; check where the folder unzipped.

Codex

permission denied: run bash ~/Downloads/signoff-kit-free/install.sh --codex. Can't find the Kit's skills next to install.sh means the path is wrong; check where the folder unzipped.

Step 6: Confirm the install

Check the 4 skills and the router hook are in place.

Claude Code

Run

ls .claude/skills

Cursor

Run

ls .cursor/skills

Codex

Run

ls .agents/skills

You should see

Claude Code

4 folders: signoff-copy-lite, signoff-kit-router, signoff-photos, site-from-brief-lite. The router hook is a SignOff Kit Free block in CLAUDE.md.

Cursor

4 folders: signoff-copy-lite, signoff-kit-router, signoff-photos, site-from-brief-lite. The router hook is the always-on rule .cursor/rules/signoff-kit-free.mdc.

Codex

4 folders: signoff-copy-lite, signoff-kit-router, signoff-photos, site-from-brief-lite. The router hook is a SignOff Kit Free block in AGENTS.md.

Troubleshooting

Fewer than 4 folders means the zip didn't fully extract. Unzip again and re-run the installer; re-running is safe and replaces the skills in place.

Step 7: Start Claude CodeStart CursorStart Codex

Claude Code

Install Claude Code in Terminal, then add it to your PATH so claude works in every new window. You need a Claude Pro, Max, Team, Enterprise or Console account. On Linux, use ~/.bashrc. Then open Terminal in the project folder and start Claude Code.

Cursor

Install the Cursor desktop app, open it and sign in. Use the Cursor desktop app, not Cursor on the web. The web version runs in the cloud, so it can't see the folders on your computer. Then open the project folder and the Agent chat. In the folder path, ~ means your home folder, the one with your name on it. In the Open Folder window, press Cmd+Shift+H to jump there, then pick my-first-site.

Codex

Install the Codex CLI, turn on network access for its sandbox, then start Codex in the project folder. The first time it runs, sign in with your ChatGPT account or an OpenAI API key. Prefer Homebrew? Run brew install --cask codex instead of the first line.

Claude Code

Install Claude Code (first time only)

curl -fsSL https://claude.ai/install.sh | bash
echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc && source ~/.zshrc
claude --version

Codex

Install Codex (first time only)

curl -fsSL https://chatgpt.com/codex/install.sh | sh
codex --version

Codex

Let Codex reach the internet (first time only)

mkdir -p ~/.codex && touch ~/.codex/config.toml && if grep -q 'sandbox_workspace_write' ~/.codex/config.toml; then echo 'Already set: check it says network_access = true'; else printf '\n[sandbox_workspace_write]\nnetwork_access = true\n' >> ~/.codex/config.toml; fi
grep -A1 'sandbox_workspace_write' ~/.codex/config.toml

Cursor

Install Cursor (first time only)

https://cursor.com/downloads → download the macOS installer (.dmg) → drag Cursor to Applications → open Cursor and sign in

Claude Code

Run

cd ~/my-first-site
claude

Codex

Run

cd ~/my-first-site
codex

Cursor

Do this

File → Open Folder… → ~/my-first-site

You should see

Claude Code

claude --version prints a version number. Then Claude Code opens in the project folder. It reads CLAUDE.md on startup, which carries the SignOff Kit Free router note.

Cursor

The folder opens with .cursor/skills and .cursor/rules in the file tree. The SignOff Kit Free rule is on for every Agent chat, so you never have to mention it. Press Cmd+I to open the Agent chat.

Codex

codex --version prints a version number. The config check prints [sandbox_workspace_write] and network_access = true. Codex runs commands in a sandbox with network access off by default, and the photo step needs it on. The first time you run codex, choose Sign in with ChatGPT (or an API key) and finish signing in. Then Codex starts in the project folder. Its docs say it reads AGENTS.md before doing any work and finds skills in .agents/skills.

Troubleshooting

Claude Code

command not found: claude: open a new Terminal window and run claude --version again. Using Bash instead of zsh? Put the PATH line in ~/.bash_profile. Don't use sudo to install it.

Cursor

.cursor starts with a dot, which makes it a hidden folder. You only need to open my-first-site, though. Cursor's file tree shows .cursor inside it.

Codex

command not found: codex: open a new Terminal window and run codex --version again. If it still fails, run the install line again. If Codex asks whether to trust the folder, say yes. If the config check prints Already set, open ~/.codex/config.toml and make sure network_access = true sits under [sandbox_workspace_write].

Step 8: Check the skills are loaded

Claude Code

Ask Claude Code which SignOff Kit skills it can see.

Cursor

Confirm Cursor sees the Kit's skills.

Codex

Confirm Codex sees the Kit's skills.

Claude Code

Type this prompt

What SignOff Kit skills do you have in this project? List them.

Cursor

Do this

Type / in the Agent chat and search for site-from-brief-lite

Codex

Type this

$sign

You should see

Claude Code

It names the 4 skills in .claude/skills: site-from-brief-lite, signoff-copy-lite, signoff-photos and signoff-kit-router.

Cursor

Project skills in .cursor/skills/ load automatically and show up when you type / in Agent chat. site-from-brief-lite should appear in the list. In Cursor, open Customize in the sidebar and go to Skills to see them listed.

Codex

Typing $ opens Codex's skill list, and $sign filters it to signoff-copy-lite, signoff-kit-router and signoff-photos. Type $site to see the fourth, site-from-brief-lite. /skills shows the same list, but it starts with Codex's built-in skills and scrolls alphabetically, so scroll down to find the Kit's. Delete the $ text before you go on.

Troubleshooting

Claude Code

If it lists none, quit (/exit), check you started claude inside ~/my-first-site, and start it again.

Cursor

If nothing shows, reload the window (Command Palette → Developer: Reload Window) and type / again.

Codex

If they're missing, quit, check you launched codex from inside ~/my-first-site, and start it again.

Step 9: Kick off the build

Ask for a site in plain English, naming the free workflow skill.

Type this prompt

Use site-from-brief-lite to build a one-page site for my bike repair shop in Columbus, Ohio. We open 8–6, do same-day fixes, and want people to book by phone.

Already have a brief? Paste the client's brief into the chat with your prompt, or point the agent at the file. It still sends its questions in one message, but drops the ones your brief already answers.

Paste your brief

Use site-from-brief-lite. Here's the brief: …

Or point it at the file

Use site-from-brief-lite. The brief is in client-brief.md in this folder.

You should see

Claude Code

It reads the SignOff Kit router first, then site-from-brief-lite. It should say that taste, hallmark and the other upstream skills aren't installed and that it will follow the router's house rules itself. Then it sends ONE message with 8 numbered questions, each with a default in brackets worked out from the industry, skipping anything your prompt already answered, and tells you to reply skip or use defaults. Claude Code asks before it runs shell commands. Approve the Kit's node … scripts and the npm i @fontsource/… font install as they come up.

Cursor

It reads the SignOff Kit router first, then site-from-brief-lite. It should say that taste, hallmark and the other upstream skills aren't installed and that it will follow the router's house rules itself. Then it sends ONE message with 8 numbered questions, each with a default in brackets worked out from the industry, skipping anything your prompt already answered, and tells you to reply skip or use defaults. Cursor's Agent asks before it runs terminal commands unless you've allowed them. Approve the Kit's node … scripts and the npm i @fontsource/… font install as they come up.

Codex

It reads the SignOff Kit router first, then site-from-brief-lite. It should say that taste, hallmark and the other upstream skills aren't installed and that it will follow the router's house rules itself. Then it sends ONE message with 8 numbered questions, each with a default in brackets worked out from the industry, skipping anything your prompt already answered, and tells you to reply skip or use defaults. Codex runs commands inside its sandbox and asks for approval depending on your approval mode. The font install (npm i @fontsource/…) and the photo step (photos.mjs) both need network access, so Codex may ask to leave the sandbox for them.

Troubleshooting

If it starts building without asking, or asks questions one at a time, it didn't load the skill. Say: “Read the SignOff Kit router and follow site-from-brief-lite from step 1.”

Step 10: Answer the intake

Answer a few questions and let the rest default. Short answers by number work. Match the numbers to the questions it actually asked.

Type this prompt

1: Spoke & Sprocket, bike repairs and servicing at 41 Mill Street, Columbus, Ohio. 3: call (614) 555-0142 to book. 6: Unsplash. Use defaults for the rest.

You should see

It writes BRIEF.md with every defaulted answer listed under assumed: (including voice.spelling: US). Facts you didn't give, like prices, show up as marked placeholders such as [[PRICE]], never made up. It shows you the brief. It usually goes straight on to the spec. If it asks you a question first, just answer it.

Troubleshooting

If it invents prices, reviews or hours you didn't give, say: “Don't invent facts. Use [[PLACEHOLDER]]s as site-from-brief-lite says.”

Step 11: Spec

The agent writes DESIGN.md and checks it with design-lint. If it paused after the brief, tell it to carry on.

Type this prompt

Brief looks good. Write the spec.

Claude Code

The agent runs

node .claude/skills/site-from-brief-lite/scripts/design-lint.mjs DESIGN.md

Cursor

The agent runs

node .cursor/skills/site-from-brief-lite/scripts/design-lint.mjs DESIGN.md

Codex

The agent runs

node .agents/skills/site-from-brief-lite/scripts/design-lint.mjs DESIGN.md

You should see

DESIGN.md appears in Google's DESIGN.md format (YAML tokens for colors, type, radius and spacing between --- lines, then the idea, sections, icons, the motion moment and the “don't” list). design-lint prints OK. It shows you DESIGN.md. The free Kit has no direction picker, so you get one direction, not three.

Troubleshooting

If design-lint fails, it names the rule (banned palette, non-OFL font, more than two families, contrast). Ask the agent to fix DESIGN.md and run it again until it prints OK.

Step 12: Build the page

Tell it to go ahead.

Type this prompt

Looks good, build it.

You should see

site/index.html and site/styles.css appear, with every color and font as a CSS custom property, lang="en-US", Lucide SVG icons, and photo spots marked data-photo-slot, plus a slots.json and a  marker in the footer. Fonts are self-hosted in site/fonts/ with their license text (installed with npm i @fontsource/<font>), not loaded from a font CDN. No illustrations drawn in SVG or CSS.

Troubleshooting

A generic cream-and-serif page with a clay-orange accent, or fonts from fonts.googleapis.com, means the skill was skipped. Point it back at the router and DESIGN.md.

Step 13: Copy check

The agent checks every word with signoff-copy-lite and rewrites until the lint is clean. You watch; no input needed.

Claude Code

The agent runs

node .claude/skills/signoff-copy-lite/scripts/copy-lint.mjs site/index.html

Cursor

The agent runs

node .cursor/skills/signoff-copy-lite/scripts/copy-lint.mjs site/index.html

Codex

The agent runs

node .agents/skills/signoff-copy-lite/scripts/copy-lint.mjs site/index.html

You should see

copy-lint shows 0 FAIL. The copy reads as flowing paragraphs with concrete details (Columbus, same-day fixes, 8–6), with no fragment headlines or hype. There's no copy score in the free Kit; the lint is the check.

Troubleshooting

The agent rewrites until it passes.

Step 14: Photos

signoff-photos fills the photo slots with credited Unsplash photos through the SignOff Kit photo service. No key needed.

Claude Code

The agent runs

node .claude/skills/signoff-photos/photos.mjs --slots slots.json --html site/index.html

Cursor

The agent runs

node .cursor/skills/signoff-photos/photos.mjs --slots slots.json --html site/index.html

Codex

The agent runs

node .agents/skills/signoff-photos/photos.mjs --slots slots.json --html site/index.html

You should see

Real photos land in the slots (hotlinked from images.unsplash.com), one credit line appears in the footer, and photos.json is written. If a photo is off-subject, the agent changes that slot's subject and reruns.

Troubleshooting

If photos can't load, the build finishes with tidy placeholders. Run the photo step again later to fill them.

Step 15: Final design check

The agent re-runs design-lint against the finished site. No input needed.

Claude Code

The agent runs

node .claude/skills/site-from-brief-lite/scripts/design-lint.mjs DESIGN.md --site site/

Cursor

The agent runs

node .cursor/skills/site-from-brief-lite/scripts/design-lint.mjs DESIGN.md --site site/

Codex

The agent runs

node .agents/skills/site-from-brief-lite/scripts/design-lint.mjs DESIGN.md --site site/

You should see

It prints OK: palette, fonts, contrast, no font CDN links and no drawn illustrations.

Troubleshooting

The agent fixes it until it passes.

Step 16: Phone and desktop check

The agent opens the page at phone and desktop widths and fixes anything broken. Then open it yourself and scroll it top to bottom.

Open it yourself: Mac

open site/index.html

Open it yourself: Windows (Command Prompt)

start "" site\index.html

Open it yourself: Windows (PowerShell)

start site\index.html

Open it yourself: Linux

xdg-open site/index.html

You should see

The page opens straight from disk with its own fonts. Photos load from images.unsplash.com. At phone width there's no sideways scroll and the phone number is the main action. The free Kit has no screenshot audit, so how the agent checks the widths depends on what your tool can do.

Troubleshooting

Something look off on a phone? Describe it (or screenshot it) and say “fix this.” Photos need a connection; run the photo step again once you're online.

Step 17: Files handed over

The agent stops and hands you the files. This is where the free Kit's flow ends.

Run

ls
ls site

You should see

BRIEF.md, DESIGN.md, slots.json, photos.json and site/ (index.html, styles.css, fonts/). There's no deploy step, static export, HANDOFF.md or BRAND.md in the free Kit, so it shouldn't offer any of those. Its final message opens with where your site is and how to open it, then a SignOff checks block like the one below, run on the finished files (the date and time show when it ran). Each check reads Passed. If one says Needs another pass, the agent fixes it and runs the checks again.

Checks in its final message

SignOff checks, run on the finished files (Oct 25, 2026, 4:41 PM)
  Design check    Passed
  Copy check      Passed
  Page structure  Passed
  Photo credit    Passed
All checks passed.

Troubleshooting

If it offers to deploy or publish, say no. The router forbids deploying without your explicit OK, and deploying isn't part of the free Kit.

That's the whole flow

With the free Kit you now have BRIEF.md, DESIGN.md and a finished one-page site in site/ that opens straight from disk.

What the paid Kit adds

You've built a site. The paid Kit builds the kind you hand to a paying client: the full workflow from brief to client-ready handoff, with design directions to choose from and every page checked on phone, tablet and desktop before your client sees it. Get it at signoffkit.com.