handlagency/accountant-website-builder

Accountant Website Builder (HandL Agency)

Die meisten Buchhaltungswebseiten sehen gleich aus und sagen „Willkommen bei Smith & Co.“ Das Design ist selten der Grund, warum sie keine Kunden bringen. Die wahren Gründe sind eine H1, die weder Dienstleistung noch Stadt nennt, keine Preise, kein Gesicht und keine Möglichkeit, dort Kontakt aufzunehmen, wo der Besucher gerade liest. Dieses Skill erstellt eine Seite, die teuer aussieht und die Arbeit erledigt.

Befolge die Schritte der Reihe nach.

1. Das Briefing einholen (einmal fragen, dann entscheiden)

Frage alles ab, was du nicht ableiten kannst, in einer kurzen Nachricht. Fülle den Rest selbst aus und teile mit, was du gewählt hast.

• Firmenname, die Dienstleistung (z. B. „Buchhalter“, „Buchhaltung“, „Contractor-Buchhalter“) und die Stadt oder Region.
• Wen sie unterstützen (eine Nische schlägt „alle Unternehmen“) und was sie anders macht (Festpreise, stets der gleiche Ansprechpartner, Reaktionszeit).
• Die eine Aktion, die ein Besucher ausführen soll (z. B. „Festpreis anfordern“). Ein Hauptbutton, überall verwendet.
• Stimmung in drei Wörtern, Markenfarben und eigene Fotos oder Videos, falls vorhanden.

2. Die Briefing-Datei schreiben

Schreibe brief.json mit references/brief.md. Kopiere die nächstgelegene Datei aus examples/ und ändere sie; fange nicht bei null an. Regeln:

• h1 muss die Dienstleistung und die Stadt enthalten. Mach es menschlich, kein Keyword-Stuffing: „Buchhalter in Bristol, endlich auf Ihrer Seite."
• sub hat 120 bis 165 Zeichen, fungiert also gleichzeitig als Meta-Beschreibung.
• stats sind Dinge, die die Firma tatsächlich verspricht (Antwortzeit, Prüfungen pro Jahr). Erfinde niemals Kundenresultate, Bewertungen oder Auszeichnungen.
• Wähle das Layout mit references/layouts.md.

3. Die Hero-Szene (was sie hervorhebt)

Standardmäßig das stage-Layout: eine kinoreife Hintergrundplatte, ein Finanzobjekt, das sich bewegt (gleitet, schwebt, treibt, dreht oder fließt), Partikel, ein riesiges Echo-Wort dahinter für Tiefe, Maus-Parallaxe, und das Objekt fliegt beim Scrollen die Seite hinunter. Baue die Szene mit references/scenes.md:

1. Wähle ein Finanzobjekt, das zur Firma passt (Münzen, ein Origami-Kranich aus banknotenähnlichem Papier, ein goldener Vogel, Glaspakete, ein Steuerformular-Papierboot, ein Chromband). Fertige Szenen sind in assets/scenes/.
2. Für eine neue Szene erstelle ein Standbild mit einem Bildmodell (Prompt-Formel in scenes.md), schneide das Objekt aus und bitte das Modell um dasselbe Bild ohne das Objekt (die Platte).
3. Setze Bewegung, Partikel und Echo-Wort in brief.json.

Die eigenen Teamfotos der Firma kommen in die Abschnitte unterhalb der Hero. Verlinke niemals Medien, für die du keine Rechte hast, und verwende niemals Stockfotos von Händeschütteln oder Taschenrechnern.

4. Bauen

Führe aus: python3 scripts/build.py brief.json site/. Es schreibt site/index.html (eine Datei, kein Build-Schritt, öffnet überall) und gibt die SEO-Prüfungen aus. Behebe jeden fehlgeschlagenen Check im Briefing und baue erneut.

5. Anschauen und korrigieren (nicht überspringen)

Führe aus: python3 scripts/shoot.py site/index.html shots/ (benötigt Playwright: pip install playwright && python -m playwright install chromium). Öffne die Screenshots, betrachte sie und bewerte die Seite mit references/review.md. Korrigiere die drei schwächsten Punkte und fotografiere erneut. Stoppe, wenn alles 4 oder mehr Punkte erreicht oder nach drei Runden.

6. Übergeben

Gib dem Benutzer:

• Die index.html-Datei und eine Anleitung zum Öffnen.
• Den finalen Desktop-Screenshot.
• Den Seitentitel und die H1, damit er sieht, dass sie die Dienstleistung und die Stadt nennen.
• Was vor dem Livegang ausgetauscht werden muss: echte Fotos, echte Preise, der Buchungs- oder Kontaktlink und die regulatorischen Angaben der Firma (z. B. ICAEW/ACCA/AAT-Praxisdetails) in der Fußzeile.

Dateien

• references/brief.md: jedes Feld in brief.json.
• references/layouts.md: die Layouts und wann sie verwendet werden.
• references/scenes.md: wie man eine animierte Hero-Szene baut, die Bewegungsarten und die Bild-Prompts.
• assets/scenes/: sechs fertige Finanzszenen (Platten und ausgeschnittene Objekte).
• references/finance-rules.md: die SEO- und Konversionsregeln für Finanzfirmen-Websites.
• references/review.md: die Bewertungsmatrix für Schritt 5.
• examples/*.json: sechs fertige Briefings (Buchhalter, Buchhaltung, Contractor-Buchhalter, E-Commerce-Buchhaltung, Steuererklärungen, Lohnabrechnung).
• scripts/build.py und scripts/stage.py: rendern die Seite (kopiert Medien daneben) und führen die SEO-Prüfungen aus.
• scripts/shoot.py: Desktop- und Mobile-Screenshots für die Überprüfung.