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.
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.
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.appaddress, and you can add a custom domain later.
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.
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.
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.
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: Vercel. Free, fast, and redeploys automatically every time your site changes.
- Domain: Hover. Simple, no-upsell domain registrar.
/hero-deploy handles the details, including two snags that trip people up:
⚠️ Vercel "Framework Preset." When you set up the Vercel project, the Framework Preset must be Next.js and the Output Directory must be left empty. If it's set to "Other" /public, your whole site shows a 404. (Tell-tale sign: an image URL loads but the homepage 404s.)/hero-deployreminds you.
⚠️ Domain email forwarding. If you point your Hover domain at Vercel, then DNS records you add at Hover do nothing — Vercel is in charge of DNS. So if you wantyou@yourdomain.comto forward to your Gmail, the mail (MX) records must be added in Vercel's dashboard, not Hover's./hero-deploywalks this and shows you how to verify it.
Do I need to know how to code? No. You answer questions and pick a design. Claude writes everything.
Can I change things later? Yes. Your content lives in simple data files; tell Claude what to change and push — Vercel redeploys automatically.
What if I don't have a domain yet? Deploy to the free *.vercel.app address now; add a Hover
domain later by re-running the domain step of /hero-deploy.
Is my email safe from spam on the site? Yes — the generated site hides your email from scrapers (it's encoded and only assembled in a real browser).
.claude-plugin/marketplace.json ← lets Claude Code add this as a marketplace
hero-site-gen/
.claude-plugin/plugin.json ← the plugin manifest
commands/ hero, hero-design, hero-deploy
agents/ design-variant ← generates one distinct look (run 3 in parallel)
skills/ hero-site-method, hero-content-intake, hero-design-system
hero-site-method/presets/ ← per-persona sections + design briefs
hero-site-method/templates/ ← reference code the generator adapts