SignOff Kit
Steps

Walkthrough

From download to a finished site on Windows

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

On Windows, the Kit is set up inside WSL (Windows Subsystem for Linux), which runs Ubuntu in a terminal window. Windows is supported through WSL. Written for the free Kit (signoff-kit-free.zip). On a Mac or Linux? Follow the Mac and Linux walkthrough. The Kit is built for Claude Code, Cursor, and Codex. Pick yours below.

Step 1: Install WSL

WSL runs Ubuntu Linux inside Windows, and the Kit is set up from its terminal. You need Windows 11, or Windows 10 version 2004 or later. Right-click Start, open Windows PowerShell (or Terminal) as Administrator, run the command, then restart your computer.

In PowerShell (as Administrator)
wsl --install
Then Ubuntu shows
Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: 
New password:
Retype new password:

You should see

Ubuntu's prompt looks like name@computer:~$. PowerShell's looks like PS C:\...>. Kit commands go in Ubuntu. After the restart, Ubuntu opens (or open it from the Start menu). When you see Please create a default UNIX user account, WSL is waiting for you. Type a short lowercase username and press Enter. Then create a password and type it again. Nothing appears as you type, and that's normal. You'll need this password later. The username and password are separate from your Windows login. You then get a prompt like you@PC:~$. This window is your Ubuntu terminal; every later command runs in it.

Troubleshooting

If wsl --install only prints help text, WSL is already installed: run wsl --list --online, then wsl --install -d Ubuntu. If the install sits at 0.0%, run wsl --install --web-download -d Ubuntu. An error saying virtualization is off (or 0x80370102) means virtualization is turned off in your PC's firmware (BIOS/UEFI) settings; turn it on and try again. Microsoft's guide: https://learn.microsoft.com/windows/wsl/install

Step 2: Install Node, python3 and unzip

Start in your Linux home: run cd ~ first. Your project then lives in Ubuntu, not in /mnt/c/Users/<you>, so everything runs faster and file permissions behave. Install the tools inside Ubuntu, not in Windows. Windows copies of Node won't be used. The installer uses python3 to update the router note, the Kit's scripts run on Node 18+, and unzip unpacks the Kit. Node comes from nvm, the Linux install method on nodejs.org.

Run (in Ubuntu)
cd ~
sudo apt update && sudo apt install -y unzip python3
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.8/install.sh | bash
. "$HOME/.nvm/nvm.sh"
nvm install --lts
Check
node -v
python3 --version
unzip -v | head -1

You should see

sudo asks for the Linux password you just made. node -v prints v18 or higher, python3 --version prints a version number, and unzip -v prints a version line.

Troubleshooting

node: command not found in a new window: close Ubuntu and reopen it, so nvm loads. A network error here just means the download was interrupted. Run the line again once you're online.

Step 3: Install Claude Code inside WSLInstall Cursor on WindowsInstall the Codex CLI inside WSL

Claude Code

Install Claude Code from your Ubuntu 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.

Cursor

Install the Cursor desktop app on Windows from cursor.com, 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. Cursor runs on Windows and connects to WSL in step 9, so the agent works on the files inside Ubuntu. There's nothing to install in Ubuntu for this step.

Codex

Install the Codex CLI from your Ubuntu terminal with npm (it uses the Node from step 2). You sign in with your ChatGPT account or an OpenAI API key the first time you start Codex in step 9.

Claude Code
Run (in Ubuntu)
curl -fsSL https://claude.ai/install.sh | bash
echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.bashrc && source ~/.bashrc
claude --version
Codex
Run (in Ubuntu)
npm install -g @openai/codex
codex --version
Cursor
Do this
https://cursor.com/downloads → download the Windows installer (.exe) → run it → open Cursor and sign in

You should see

Claude Code

claude --version prints a version number.

Cursor

Cursor opens on Windows and you are signed in.

Codex

codex --version prints a version number.

Troubleshooting

Claude Code

command not found: claude: close Ubuntu, open it again and run claude --version. Don't use sudo to install it.

Cursor

You'll connect Cursor to WSL in step 9. If your Cursor version doesn't offer to connect to WSL there, update Cursor.

Codex

command not found: codex: check node -v works first (step 2), then close and reopen Ubuntu. Don't use sudo with npm here; nvm installs need no sudo.

Step 4: Download the free Kit

In your Windows browser, 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 your Windows Downloads folder

You should see

signoff-kit-free.zip (about 48 KB) is in your Windows Downloads folder. Leave it zipped; you unzip it inside Ubuntu next.

Troubleshooting

If your browser saved it somewhere else, use that folder in the next step. Don't unzip it in Windows and copy the folder over: unzipping in Ubuntu keeps the installer's permissions.

Step 5: Copy the Kit into WSL and unzip it

Copy the zip from your Windows Downloads folder into your Ubuntu home folder, unzip it there, and check the installer is executable. Replace <you> with your Windows user name; ls /mnt/c/Users lists them.

Run (in Ubuntu)
cp /mnt/c/Users/<you>/Downloads/signoff-kit-free.zip ~/
cd ~
unzip -o signoff-kit-free.zip
ls -l ~/signoff-kit-free/install.sh

You should see

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

Troubleshooting

No such file: check the user name with ls /mnt/c/Users and the file with ls /mnt/c/Users/<you>/Downloads. unzip: command not found: run sudo apt install -y unzip. Keep the Kit and your project in the Ubuntu home, not under /mnt/c: files there can lose the exec bit and run slowly.

Step 6: 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 7: 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
~/signoff-kit-free/install.sh --claude
Cursor
Run
~/signoff-kit-free/install.sh --cursor
Codex
Run
~/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 ~/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 ~/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 ~/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 8: 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 9: Start Claude CodeStart CursorStart Codex

Claude Code

In your Ubuntu window, go to the project folder and start Claude Code.

Cursor

Open the Cursor desktop app on Windows, connect it to WSL, open the project folder inside WSL, then open the Agent chat. Inside WSL, ~ means your Linux home folder, /home/<linux-user>. Once Cursor is connected, Open Folder shows your Linux folders, so type the full path. From Windows File Explorer, the same folder is \\wsl$\Ubuntu\home\<linux-user>\my-first-site.

Codex

In your Ubuntu window, turn on network access for the Codex sandbox, then go to the project folder and start Codex.

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
Claude Code
Run
cd ~/my-first-site
claude
Codex
Run
cd ~/my-first-site
codex
Cursor
Do this
In Cursor on Windows: Ctrl+Shift+P → WSL: Connect to WSL
then File → Open Folder… → /home/<linux-user>/my-first-site

You should see

Claude Code

Claude Code opens in the project folder. It reads CLAUDE.md on startup, which carries the SignOff Kit Free router note.

Cursor

The bottom-left corner of the window says WSL: Ubuntu, and 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 Ctrl+I to open the Agent chat.

Codex

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 means Claude Code isn't installed inside WSL or isn't on your PATH. Go back to step 3, then close and reopen Ubuntu.

Cursor

If there's no WSL: Connect to WSL command, install Cursor's WSL extension when Cursor offers it (Cursor's own extension, anysphere.remote-wsl) and try again. .cursor starts with a dot, which makes it a hidden folder on Linux. Cursor's file tree shows it, and so does ls -a in the Cursor terminal.

Codex

command not found: codex means the Codex CLI isn't installed inside WSL. Go back to step 3. The first time Codex starts, choose Sign in with ChatGPT (or an API key). 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 10: 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 11: 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 12: 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 13: 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 14: 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 <!-- photo-credits --> 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 15: 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 16: 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 17: 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 18: 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: Windows (WSL)
explorer.exe "$(wslpath -w 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 19: 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.

Windows troubleshooting

  • Virtualization is off. WSL 2 needs hardware virtualization. If wsl --install or Ubuntu's first start reports it (for example error 0x80370102), turn on virtualization in your PC's firmware (BIOS/UEFI) settings, restart and try again.
  • wsl --install errors. Only help text means WSL is already installed: run wsl --list --online, then wsl --install -d Ubuntu. Stuck at 0.0%: wsl --install --web-download -d Ubuntu. Check what's installed with wsl -l -v in PowerShell. Microsoft's guides: Install WSL and Troubleshooting WSL.
  • Finding your files from Windows. Your Ubuntu home shows up in File Explorer under Linux → Ubuntu, or type \\wsl$\Ubuntu\home\<linux-user>\my-first-site in the address bar (newer Windows also uses \\wsl.localhost\Ubuntu\…). From Ubuntu, explorer.exe . opens the current folder in File Explorer. Your Windows drive is /mnt/c inside Ubuntu.
  • Line endings. An error like /usr/bin/env: 'bash\r': No such file or directory means a script picked up Windows line endings, usually from being unzipped or edited on the Windows side. Delete the Kit folder and unzip the zip again inside Ubuntu (step 5).
  • Permissions. permission denied on install.sh: run it with bash in front. Keep the Kit and your project in your Ubuntu home (~), not under /mnt/c, where Linux permissions aren't kept the same way. Don't use sudo for the Kit's installer or for npm.
  • Opening the site. explorer.exe "$(wslpath -w site/index.html)" hands the file to your default Windows browser. It can report an exit code of 1 even when it worked; if the page opens, ignore it. If nothing opens, paste the path that wslpath -w site/index.html prints into your browser's address bar. wslview also works, but it isn't installed by default; it comes with sudo apt install -y wslu.

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.