handlagency/accountant-website-builder

Accountant Website Builder (HandL Agency)

Most accountancy websites look the same and say "Welcome to Smith & Co". The design is rarely why they don't bring in clients. The real reasons are an H1 that doesn't say the service and town, no prices, no face, and no way to get in touch where the visitor is reading. This skill builds a page that looks expensive and does the job.

Follow the steps in order.

1. Get the brief (ask once, then decide)

Ask for anything below you can't infer, in one short message. Fill in the rest yourself and say what you chose.

• Firm name, the service (e.g. "Accountants", "Bookkeeping", "Contractor accountants") and the town or area.
• Who they help (one niche beats "all businesses"), and what makes them different (fixed fees, same accountant every call, response time).
• The one action a visitor should take (e.g. "Get a fixed quote"). One main button, used everywhere.
• Mood in three words, brand colours, and their own photos or video if they have them.

2. Write the brief file

Write brief.json using references/brief.md. Copy the closest file in examples/ and change it; don't start from blank. Rules:

• h1 must contain the service and the town. Make it human, not a keyword dump: "Accountants in Bristol, finally on your side."
• sub is 120 to 165 characters, so it doubles as the meta description.
• stats are things the firm actually promises (reply time, check-ins a year). Never invent client results, reviews or awards.
• Pick the layout with references/layouts.md.

3. The hero scene (what makes it stand out)

Default to the stage layout: a cinematic background plate, one finance object that moves (it glides, hovers, floats, spins or flows), particles, a giant echo word behind it for depth, mouse parallax, and the object flies down the page as the visitor scrolls. Build the scene with references/scenes.md:

1. Pick a finance object that fits the firm (coins, an origami crane folded from banknote-style paper, a gold bird, glass parcels, a tax-form paper boat, a chrome ribbon). Ready-made scenes are in assets/scenes/.
2. For a new scene, generate one still with an image model (prompt formula in scenes.md), cut the object out, and ask the model for the same image with the object removed (the plate).
3. Set the motion, particles and echo word in brief.json.

The firm's own team photos go in the sections below the hero. Never hotlink media you don't have the rights to, and never use stock photos of handshakes or calculators.

4. Build

Run python3 scripts/build.py brief.json site/. It writes site/index.html (one file, no build step, opens anywhere) and prints the SEO checks. Fix every failed check in the brief and build again.

5. Look and fix (don't skip this)

Run python3 scripts/shoot.py site/index.html shots/ (it needs Playwright: pip install playwright && python -m playwright install chromium). Open the screenshots, look at them and score the page with references/review.md. Fix the three weakest points and shoot again. Stop when everything scores 4 or more, or after three rounds.

6. Hand over

Give the user:

• The index.html file and how to open it.
• The final desktop screenshot.
• The page title and H1, so they can see they say the service and the town.
• What to swap before going live: real photos, real prices, the booking or contact link, and the firm's regulatory wording (e.g. ICAEW/ACCA/AAT practising details) in the footer.

Files

• references/brief.md: every field in brief.json.
• references/layouts.md: the layouts and when to use each.
• references/scenes.md: how to build an animated hero scene, the motion types, and the image prompts.
• assets/scenes/: six ready-made finance scenes (plates and cut-out objects).
• references/finance-rules.md: the SEO and conversion rules for finance firm websites.
• references/review.md: the scoring rubric for step 5.
• examples/*.json: six finished briefs (accountants, bookkeepers, contractor accountants, e-commerce bookkeeping, tax returns, payroll).
• scripts/build.py and scripts/stage.py: render the page (copying media next to it) and run the SEO checks.
• scripts/shoot.py: desktop and mobile screenshots for the review.