Constructor de Sitios Web para Contables (HandL Agency)

¿Qué hace Constructor de Sitios Web para Contables (HandL Agency)?

La mayoría de los sitios web de contabilidad se ven iguales y dicen "Bienvenido a Smith & Co". Rara vez el diseño es la razón por la que no consiguen clientes. Las verdaderas razones son un H1 que no menciona el servicio y el pueblo, la ausencia de precios, la falta de un rostro humano y ninguna forma de contactar donde el visitante está leyendo. Este skill construye una página que se ve cara y hace el trabajo.

Sigue los pasos en orden.

1. Obtén el brief (pregunta una vez, luego decide)

Pregunta cualquier cosa de abajo que no puedas inferir, en un solo mensaje corto. Rellena el resto tú mismo y di lo que elegiste.

• Nombre de la firma, el servicio (ej. "Contables", "Teneduría de libros", "Contables para autónomos") y el pueblo o área.
• A quién ayudan (un nicho es mejor que "todas las empresas"), y qué los hace diferentes (tarifas fijas, el mismo contable en cada llamada, tiempo de respuesta).
• La única acción que un visitante debe tomar (ej. "Solicitar un presupuesto fijo"). Un botón principal, usado en todas partes.
• Estado de ánimo en tres palabras, colores de marca, y sus propias fotos o video si los tienen.

2. Escribe el archivo del brief

Escribe brief.json usando references/brief.md. Copia el archivo más cercano en examples/ y cámbialo; no empieces desde cero. Reglas:

• h1 debe contener el servicio y el pueblo. Hazlo humano, no un volcado de palabras clave: "Contables en Bristol, por fin de tu lado."
• sub tiene entre 120 y 165 caracteres, para que funcione también como meta descripción.
• stats son cosas que la firma realmente promete (tiempo de respuesta, revisiones al año). Nunca inventes resultados de clientes, reseñas o premios.
• Elige el diseño con references/layouts.md.

3. La escena heroica (lo que la hace destacar)

Por defecto, el diseño stage: un fondo cinematográfico, un objeto financiero que se mueve (se desliza, flota, planea, gira o fluye), partículas, una palabra gigante de eco detrás para dar profundidad, paralaje con el ratón, y el objeto vuela hacia abajo en la página mientras el visitante hace scroll. Construye la escena con references/scenes.md:

1. Elige un objeto financiero que encaje con la firma (monedas, una grulla de origami hecha de papel billete, un pájaro dorado, paquetes de vidrio, un barco de papel de formulario de impuestos, una cinta cromada). Las escenas prefabricadas están en assets/scenes/.
2. Para una escena nueva, genera una imagen fija con un modelo de imagen (fórmula de prompt en scenes.md), recorta el objeto, y pídele al modelo la misma imagen sin el objeto (el fondo).
3. Configura el movimiento, partículas y palabra de eco en brief.json.

Las fotos del equipo de la firma van en las secciones debajo del héroe. Nunca enlaces medios a los que no tengas derechos, y nunca uses fotos de stock de apretones de manos o calculadoras.

4. Construye

Ejecuta python3 scripts/build.py brief.json site/. Escribe site/index.html (un solo archivo, sin paso de compilación, se abre en cualquier lugar) e imprime las comprobaciones SEO. Corrige cada comprobación fallida en el brief y vuelve a construir.

5. Mira y corrige (no te saltes esto)

Ejecuta python3 scripts/shoot.py site/index.html shots/ (necesita Playwright: pip install playwright && python -m playwright install chromium). Abre las capturas de pantalla, míralas y puntúa la página con references/review.md. Corrige los tres puntos más débiles y vuelve a tomar capturas. Detente cuando todo puntúe 4 o más, o después de tres rondas.

6. Entrega

Dale al usuario:

• El archivo index.html y cómo abrirlo.
• La captura de pantalla de escritorio final.
• El título de la página y el H1, para que vean que mencionan el servicio y el pueblo.
• Qué cambiar antes de publicar: fotos reales, precios reales, el enlace de reserva o contacto, y la redacción regulatoria de la firma (ej. datos de práctica ICAEW/ACCA/AAT) en el pie de página.

Archivos

• references/brief.md: todos los campos en brief.json.
• references/layouts.md: los diseños y cuándo usar cada uno.
• references/scenes.md: cómo construir una escena heroica animada, los tipos de movimiento y los prompts de imagen.
• assets/scenes/: seis escenas financieras prefabricadas (fondos y objetos recortados).
• references/finance-rules.md: las reglas SEO y de conversión para sitios web de firmas financieras.
• references/review.md: la rúbrica de puntuación para el paso 5.
• examples/*.json: seis briefs terminados (contables, tenedores de libros, contables para autónomos, teneduría de libros de comercio electrónico, declaraciones de impuestos, nóminas).
• scripts/build.py y scripts/stage.py: renderizan la página (copiando los medios junto a ella) y ejecutan las comprobaciones SEO.
• scripts/shoot.py: capturas de pantalla de escritorio y móvil para la revisión.