handlagency/accountant-website-builder

Constructeur de site web pour comptables (HandL Agency)

La plupart des sites web de comptabilité se ressemblent et disent « Bienvenue chez Smith & Co ». La conception n’est rarement la raison pour laquelle ils n’attirent pas de clients. Les véritables raisons sont un H1 qui ne mentionne pas le service et la ville, aucun prix, aucun visage et aucun moyen de contact là où le visiteur lit. Cette compétence construit une page qui a l’air chère et qui fait le travail.

Suivez les étapes dans l’ordre.

1. Obtenez le brief (demandez une fois, puis décidez)

Demandez tout ce que vous ne pouvez pas déduire ci-dessous, en un seul message court. Remplissez le reste vous-même et dites ce que vous avez choisi.

• Nom du cabinet, le service (p. ex. « Comptables », « Tenue de livres », « Comptables pour indépendants ») et la ville ou la région.
• À qui ils s’adressent (un créneau bat « toutes les entreprises »), et ce qui les rend différents (honoraires fixes, même comptable à chaque appel, temps de réponse).
• L’action unique qu’un visiteur doit effectuer (p. ex. « Obtenir un devis fixe »). Un bouton principal, utilisé partout.
• L’ambiance en trois mots, les couleurs de la marque et leurs propres photos ou vidéos s’ils en ont.

2. Rédigez le fichier de brief

Écrivez brief.json en utilisant references/brief.md. Copiez le fichier le plus proche dans examples/ et modifiez-le ; ne partez pas d’un fichier vierge. Règles :

• h1 doit contenir le service et la ville. Rendez-le humain, pas un bourrage de mots-clés : « Comptables à Bristol, enfin de votre côté ».
• sub fait entre 120 et 165 caractères, pour faire office de méta-description.
• stats sont des choses que le cabinet promet réellement (délai de réponse, nombre de bilans par an). N’inventez jamais de résultats clients, d’avis ou de récompenses.
• Choisissez la mise en page avec references/layouts.md.

3. La scène d’accroche (ce qui la rend remarquable)

Par défaut, utilisez la mise en page stage : un arrière-plan cinématographique, un objet financier qui bouge (il glisse, plane, flotte, tourne ou coule), des particules, un mot géant en écho derrière pour la profondeur, un parallaxe à la souris, et l’objet descend dans la page pendant que le visiteur fait défiler. Construisez la scène avec references/scenes.md :

1. Choisissez un objet financier qui correspond au cabinet (pièces, une grue en origami pliée à partir d’un billet de banque, un oiseau doré, des colis en verre, un bateau en papier de formulaire fiscal, un ruban chromé). Des scènes prêtes à l’emploi sont dans assets/scenes/.
2. Pour une nouvelle scène, générez une image fixe avec un modèle d’image (formule de prompt dans scenes.md), découpez l’objet, et demandez au modèle la même image avec l’objet retiré (le fond).
3. Définissez le mouvement, les particules et le mot d’écho dans brief.json.

Les photos d’équipe du cabinet sont placées dans les sections sous l’accroche. Ne liez jamais de médias sans avoir les droits, et n’utilisez jamais de photos de stock de poignées de main ou de calculatrices.

4. Construction

Exécutez python3 scripts/build.py brief.json site/. Cela écrit site/index.html (un seul fichier, sans étape de construction, s’ouvre n’importe où) et affiche les vérifications SEO. Corrigez chaque vérification échouée dans le brief et reconstruisez.

5. Inspectez et corrigez (ne sautez pas cette étape)

Exécutez python3 scripts/shoot.py site/index.html shots/ (nécessite Playwright : pip install playwright && python -m playwright install chromium). Ouvrez les captures d’écran, regardez-les et notez la page avec references/review.md. Corrigez les trois points les plus faibles et refaites une capture. Arrêtez-vous quand tout obtient une note de 4 ou plus, ou après trois tours.

6. Remise

Remettez à l’utilisateur :

• Le fichier index.html et comment l’ouvrir.
• La capture d’écran finale du bureau.
• Le titre de la page et le H1, pour qu’ils voient qu’ils mentionnent le service et la ville.
• Ce qu’il faut remplacer avant la mise en ligne : les vraies photos, les vrais prix, le lien de réservation ou de contact, et les mentions réglementaires du cabinet (p. ex. les détails d’exercice ICAEW/ACCA/AAT) dans le pied de page.

Fichiers

• references/brief.md : chaque champ de brief.json.
• references/layouts.md : les mises en page et quand les utiliser.
• references/scenes.md : comment construire une scène d’accroche animée, les types de mouvement et les prompts d’image.
• assets/scenes/ : six scènes financières prêtes à l’emploi (fonds et objets découpés).
• references/finance-rules.md : les règles SEO et de conversion pour les sites web de cabinets financiers.
• references/review.md : la grille de notation pour l’étape 5.
• examples/*.json : six briefs complets (comptables, teneurs de livres, comptables pour indépendants, tenue de livres e-commerce, déclarations fiscales, paie).
• scripts/build.py et scripts/stage.py : rendu de la page (copie des médias à côté) et exécution des vérifications SEO.
• scripts/shoot.py : captures d’écran bureau et mobile pour la revue.