hero-site-gen
Build a distinctive personal "hero" website — a fast, polished showcase of who you are and
what you've done — by talking to Claude. You bring your résumé/bio; Claude gathers the details,
helps you pick sections, lets you choose a look in a live browser preview, builds the site, and
walks you through putting it online on your own domain.
No web-development experience required. You will mostly answer questions and click things.
What you'll end up with
A modern, statically generated website (Next.js + Tailwind) that:
- showcases your work with the right sections for your kind of career,
- has a custom, hand-picked design (you choose from live options in your browser),
- is fast, accessible, and good for search engines,
- lives on your own domain (e.g.
yourname.com) with automatic redeploys when you change it.
Before you start — what you'll need
You can get all of these for free (the domain costs a few dollars/year).
| # | What | Why | How to get it |
|---|
| 1 | A computer with a web browser | You'll preview and pick your design in the browser | You already have this |
| 2 | Claude Code (via Claude Desktop or cowork) | This plugin runs inside Claude | Open Claude Desktop; Claude Code is available there |
| 3 | Node.js 20+ | Runs the website on your machine while you build it | Install from https://nodejs.org (the "LTS" button). Verify: node --version |
| 4 | Git | Saves versions of your site and pushes it online | https://git-scm.com/downloads. Verify: git --version |
| 5 | A GitHub account | Stores your site's code; Vercel deploys from it | Sign up at https://github.com, then run gh auth login |
| 6 | A Vercel account | Hosts your live website (free) | Sign up at https://vercel.com with your GitHub account |
| 7 | A domain from Hover | Your custom web address | Buy one at https://hover.com (~$15/yr) |
Don't have a domain yet? You can still build and deploy — Vercel gives you a free
yourname.vercel.app address, and you can add a custom domain later.
Install the plugin
In Claude Code:
/plugin marketplace add swinney/hero-site-gen
/plugin install hero-site-gen
This adds three commands: /hero, /hero-design, and /hero-deploy.
Recommended companion plugins (install these too)
The workflow works best with a few helpers. Install what you can; the plugin still runs without
them, just with reduced polish.
| Plugin / tool | Install | Why it helps |
|---|
| superpowers (brainstorming) | /plugin marketplace add obra/superpowers then /plugin install superpowers | Runs the "discovery" conversation that figures out what your site should be |
| frontend-design | bundled in many setups; otherwise add the marketplace that provides it | Makes the generated designs distinctive instead of generic |
| vercel plugin | /plugin marketplace add vercel/vercel then /plugin install vercel | Smooths the deploy step (deploy, environment, logs) |
| Context7 MCP | Add the Context7 MCP server in your Claude MCP settings | Pulls current Next.js/Tailwind docs so the code is up to date |
If a helper isn't installed, Claude will tell you which step is affected and continue with a
built-in fallback.
Build your site — the whole path
Once the prerequisites and plugin are in place, this is the entire journey. Run it in order.
1. /hero
└─ Claude walks you through SIX phases, asking what it needs at each:
0) Setup check — confirms your tools are ready
1) Discovery — what's the site FOR? which "persona" fits you?
2) Content — paste your CV/LinkedIn/bio; Claude turns it into the site's data
3) Sections — Claude suggests the right sections; you add/remove
4) Design — Claude opens a LIVE preview in your browser with 3 looks; you click one
5) Build — Claude finishes the site and checks it builds
6) Deploy — hands off to /hero-deploy
2. /hero-design (anytime you want different looks)
└─ Regenerate the 3 design options. Don't like them?
/hero-design --regenerate "warmer, less corporate"
3. /hero-deploy (put it online)
└─ Pushes to GitHub, deploys to Vercel, connects your Hover domain.
The design step, in plain terms
Claude generates three genuinely different looks, starts your site on your own computer, and
opens it in your browser showing your real content. You flip between the looks and click
"Choose this look." That choice flows straight back to Claude — you don't have to describe
anything. Want different options? Ask for a regenerate with a hint like "more colorful".
Hosting & domain — what we recommend
