Open source · Homepage design
One Box > Chapter Website Redesign Claude Playbook
One Box > Chapter Website Redesign Claude Playbook is a free, MIT-licensed Claude Code skill for rebuilding a product homepage. The hero says what the product is in one small line and gives visitors one box where they try it for free. Below it, one-screen chapters each show the product doing one thing. The new page ships as a 50/50 A/B against your current homepage, and it may not be heavier or slower than the old one. We built it to rebuild gethandler.ai, then used it again on flamme.app.
Published 30 October 2026 · Updated 30 October 2026 · By An Nayal
What does One Box > Chapter Website Redesign Claude Playbook do?
- The order of work. Read the current page and your inspiration sites, pick the box, list the chapters, build on a hidden route, review in numbered rounds with screenshots, ship as an A/B, then read the funnel.
- Hero rules. The H1 is the plain line that says what the product is. The button is short and says free. The box is visible on load on desktop and phone. A hero that already works stays, and the box becomes the first chapter.
- Chapter rules. Each chapter fits one screen and something moves in every one. Real data only. Claims carry their source in plain words.
- A/B kit for Next.js. A split helper with tests, the middleware block (or proxy.ts on Next 16), a sticky cookie, exposure and click events, and one setting from 0 to 100 that ends the test or ships the winner.
- A weight budget. Entrances move with transform only, chapters use content-visibility, and the new page has to load as fast as the old one on a throttled phone.
- Two real builds. The gethandler.ai rebuild with every review note, and the flamme.app rebuild where the box moved out of the hero.
What it will not do
- It does not design for you. It gives your agent the method, the rules and the A/B code, and you approve every round.
- The A/B kit is written for Next.js. Other stacks can copy the logic, which is a few lines.
Who is it for?
Founders and small teams who want a homepage that lets visitors try the product, and want the data to say whether it beats the old one.
How do you set it up?
You need:
- Claude Code, or any agent that reads SKILL.md files.
- A Next.js site for the A/B kit (the method works on any stack).
git clone https://github.com/Git-Agni/one-box-chapter-website-redesign-claude-playbook ~/.claude/skills/one-box-chapter-website-redesign-claude-playbook
- Clone the repo into your skills folder.
- Ask your agent to redesign your homepage, and name the sites you like.
- Review the sample in numbered rounds until you approve it.
- Ship it as a 50/50 A/B and read the funnel after 3 to 4 weeks.
The full instructions live in the README on GitHub.
More open source from Agniverse
Flight Pass
Swap contacts at events with a boarding pass and a 10 second rocket flight to Mars.
Built and published by An Nayal at Agniverse. MIT licensed. All our open source.