LusoMagnet · Producto-Tech

Cómo funciona el Web Creation Factory

De un formulario rellenado por un cliente, a un sitio web profesional publicado en Vercel — guía visual de todo el circuito, paso a paso.

📝 3 formularios PT·ES·EN 📊 Google Sheet + ✅ Tasks 🤖 9 agentes de IA 🚀 Deploy en Vercel
Mapa general

El flujo en un vistazo

Dos mitades encadenadas: la captación (recoge y ordena la solicitud) y la fábrica (convierte esa solicitud en un sitio real, publicado).

🧑‍💼
Clienterellena el formulario
Captación
📝
Google FormPT · ES · EN
Captación
📊
Sheet + ✅ Tasksolicitud + alerta
Captación
Prompt/briefbotón "Generar"
Fábrica
⌨️
/web-newarranca el proyecto
Fábrica
🤖
9 agentesresearch→diseño→build
Fábrica
QA gatesSEO·a11y·Lighthouse
Fábrica
🚀
Vercelsitio publicado
La regla de oro: el cliente solo toca el formulario; tú solo tocas dos botones (“Generar prompts” y /web-new) y revisas. Todo lo demás está automatizado.
Parte A

La captación: del cliente a un brief listo

Aquí recogemos toda la información que las 8 fases de la fábrica necesitan, sin perseguir al cliente con mil emails.

1

El cliente rellena el formulario

Le envías el enlace en su idioma (PT-PT, ES o EN). Las 25 preguntas cubren negocio, objetivo, persona, referencias, marca, idiomas, dominio, contenido y contacto. Son las mismas preguntas en los 3 idiomas y en el mismo orden.

forms.google.com · LusoMagnet — Pedido de criação de site
LusoMagnet — Pedido de criação de site
Conte-nos sobre o seu negócio para criarmos um site profissional. ~10 min.
Nome do seu negócio ou empresa *
Padaria Aurora
Qual é o objetivo principal do site? *
Já tem um site atualmente? *
Quem é o seu cliente ideal? *
Famílias do bairro, 30-55, procuram pão artesanal e encomendas para eventos…
2

Llega a la Sheet y te avisa en Google Tasks

Al enviarse, un Apps Script (onFormSubmit) hace dos cosas a la vez: añade una fila normalizada a la pestaña Solicitudes (estado pendiente) y crea una tarea de alerta en Google Tasks.

Google Sheets · LusoMagnet — Solicitudes de Web · pestaña “Solicitudes”
timestampidiomaestadoslug_sugeridonegocioobjetivotiene_web
2026-06-03 16:40ptpendientepadaria-auroraPadaria AuroraCaptar contactos / leadsSim
Google Tasks · My Tasks
🌐 Solicitud web: Padaria Aurora (PT)
Nueva solicitud en la Sheet. Slug sugerido: padaria-aurora. Pulsa “Generar prompts no generados”, luego /web-new padaria-aurora. · vence en 2 días
3

Pulsas “Generar prompts no generados”

Abres la Sheet y en el menú LusoMagnet pulsas el botón. El script recorre las filas sin prompt y rellena la columna prompt con un brief estructurado (ensamblado a partir de las respuestas), y pone estado prompt_generado.

Google Sheets · menú personalizado
LusoMagnet ▾
✨ Generar prompts no generados
🛠️ Crear/enlazar formularios (setup)
🔔 Crear tarea de pendientes ahora
columna “prompt” (extracto)
# Brief de proyecto — Padaria Aurora Slug sugerido: padaria-aurora · Idioma de la solicitud: Portugués (PT-PT) ## Negocio - Nombre: Padaria Aurora - Sector: Padaria artesanal - Descripción: Pão de fermentação lenta e encomendas para eventos. ## Objetivo del sitio - Objetivo principal: Captar contactos / leads - CTA principal: Pedir orçamento de encomenda ## Persona / cliente ideal Famílias do bairro (30-55) que procuram pão artesanal… … (negocio, persona, estructura, marca, idiomas, dominio, contenido, restricciones) --- Para producir: en Claude Code ejecuta /web-new padaria-aurora y pega este brief.
Por qué es determinista (sin IA): el prompt se arma con plantilla fija a partir de los campos. Es rápido, gratis y predecible. La IA entra después, en la fábrica.
Parte B

La fábrica: del brief al sitio publicado

Copias el prompt y arrancas el pipeline en Claude Code. Un agente orquestador dirige a otros 8, fase por fase, sin saltarse ningún control de calidad.

4

Arrancas el proyecto: /web-new

Creas el proyecto con el slug sugerido y pegas el brief. Se materializan las carpetas de fase y el estado del proyecto.

Claude Code · web-creation
/web-new padaria-aurora Creado projects/padaria-aurora/ 00-brief/ 01-estrategia/ 02-investigacion/ 03-estructura/ 04-diseno/ 05-copy/ 06-build/ 07-qa/ 08-deploy/ site/ brief.md sembrado · project-state.json (fase: strategy) → entregando control al web-orchestrator…
5

El pipeline de 9 agentes

El web-orchestrator invoca a cada especialista en orden. Cada uno lee lo que produjo el anterior, escribe su entregable en su carpeta y pasa un gate de calidad antes de ceder el turno.

orquesta
🎯 web-orchestrator
Dirige todo, valida gates, bucle de QA.
opus
fase 0
🧭 brand-strategist
Posicionamiento, naming, tono, persona.
opus
fase 1
🔎 ux-researcher
Benchmarking, persona única, SEO de intención.
sonnet
fase 2
🗺️ information-architect
Arquitectura, página gravitacional, elige stack.
opus
fase 3
🎨 design-system-architect
Tokens (color, tipografía, espaciado).
opus
fase 3b
✍️ copywriter
Copy trilingüe EN/ES/PT, microcopy.
sonnet
fase 4
🧱 frontend-developer
Construye el site/: tokens + content + SEO + a11y.
sonnet
fase 5
🔬 qa-auditor
SEO, a11y, Lighthouse, usabilidad.
sonnet
fase 6
🚀 deploy-engineer
Repo GitHub + Vercel + dominio + smoke test.
sonnet

Cada fase deja su rastro en una carpeta numerada del proyecto:

projects/padaria-aurora/
├── brief.md                 ← el prompt que pegaste
├── project-state.json       ← la “máquina de estados” (fase actual + gates)
├── 01-estrategia/          🧭 posicionamiento, naming, tono
├── 02-investigacion/       🔎 benchmarking, persona.json, journeys
├── 03-estructura/          🗺️ ia-sitemap.json, página gravitacional, stack
├── 04-diseno/              🎨 design-tokens.json  → :root{} / Tailwind
├── 05-copy/                ✍️ content.json (EN/ES/PT, paridad de claves)
├── 07-qa/                  🔬 qa-report.json (severidad Nielsen)
├── 08-deploy/              🚀 deploy-record.json (repo, URL, dominio)
└── site/                    🧱 el código del sitio, listo para Vercel
Gates de calidad (no se avanza si no pasan): SEO (h1 único, hreflang real, sitemap, robots, JSON-LD, OG) · Accesibilidad WCAG AA (focus visible, contraste, alt, aria) · Lighthouse (rendimiento ≥ 90, a11y ≥ 95). Si el QA falla, vuelve al frontend (máx. 4 iteraciones quirúrgicas).
6

Publicación en Vercel (con tu visto bueno)

El deploy-engineer crea el repo en GitHub, despliega un preview para que lo audites y, solo cuando el gate está verde y tú confirmas, lo promueve a producción y conecta el dominio.

deploy-engineer · Vercel
gh repo create padaria-aurora (privado) deploy preview → https://padaria-aurora-xxxx.vercel.app Lighthouse perf 98 · a11y 100 · seo 100 ⏸ esperando tu confirmación para producción… producción → https://padariaaurora.pt · smoke test PT/ES/EN OK
El resultado

Un sitio profesional, multilingüe y publicado

Estático y rápido (o Next/Astro según el caso), con SEO técnico completo, accesible, en EN/ES/PT con hreflang real, y desplegado en Vercel con su dominio.

https://padariaaurora.pt
Pão artesanal · Lisboa

Padaria Aurora

Fermentação lenta, encomendas para eventos.
Pedir orçamento
Y el círculo se cierra: en la Sheet cambias el estado de la solicitud a entregada y le mandas al cliente su nueva web. 🎉
Referencia rápida

Comandos, estados y enlaces

Comandos del factory

ComandoQué hace
/web-new <slug>Crea el proyecto, siembra brief y estado, arranca la fase 0.
/web-run-all <slug>Encadena todas las fases respetando los gates (cadencia automática).
/web-phase <slug> <fase>Ejecuta una sola fase (control manual).
/web-status <slug>Muestra el estado del proyecto (solo lectura).
/audit · /shipAtajos: auditar QA · publicar.

Estados de una solicitud (columna “estado”)

pendiente  →  prompt_generado  →  en_produccion  →  entregada  ·  descartada

Enlaces del sistema

RecursoDónde
Sheet de solicitudesDrive › LusoMagnet › 05-producto-tech · “LusoMagnet — Solicitudes de Web”
Formularios (cliente)pestaña Config de la Sheet (PT · ES · EN)
Código del factorygithub.com/elchamoluso/web-creation-factory (privado)
Código del intakecarpeta intake/ del repo + Apps Script vinculado a la Sheet