El procedimiento real del pipeline LeadForge

Qué pasa entre --url y un HTML servido. Qué pasos usan un modelo, cuáles son deterministas, y dónde divergen los tres outputs: el render por defecto (lo que ya tenés), Curated (A) y Freestyle (B).

scripts/demo_pipeline.py · v2 sections-composer · backend: Claude CLI (Plan subscription)

← Volver al comparador meg4.dev · A meg4.dev · B

1. El pipeline (compartido por A, B y default)

Pasos 1 → 6 son idénticos para los tres outputs. El paso 7 es donde diverge.

STEP 01 / 07

Scrape DOM

Determinista

Playwright en Docker carga la página, espera networkidle, extrae texto + metadatos estructurados y los emite como TOON.

Output:
/tmp/leadforge_dom/<slug>.toon

STEP 02 / 07

Screenshot

Skipped

Opcional. Solo se ejecuta con --with-screenshot para alimentar el Analyzer-vision. Por defecto: off.

Output:
/tmp/leadforge_screens/<slug>.png

STEP 03 / 07

Analyzer

Claude CLI

Lee el TOON, infiere brand: nombre, tagline, niche, ciudad, tone, paleta, typography_vibe, radius, contact. Output literal (sin razonamiento expuesto).

Output:
brand_profile JSON

STEP 04 / 07

Composer

Claude CLI

Recibe brand_profile + TOON. Elige 7–10 sections del schema v2 (hero, value_props, services, process, social_proof, faq, cta, contact, footer) y rellena cada una con copy específico de esta marca.

Output:
sections: Section[]

STEP 05 / 07

Assemble

Determinista

Python ensambla LandingPayload v2: { schema_version, slug, source_url, brand_profile, sections, meta }. Valida.

Output:
payload.json

STEP 06 / 07

Write & package

Determinista

generate_independent.py copia el cf-worker-template, inyecta el payload, hace tsc, deja proyecto wrangler standalone listo.

Output:
/home/meg4/generated/<slug>/

STEP 07 / 07 — diverge

Render HTML

3 caminos

Aquí el mismo payload produce 3 outputs diferentes según qué renderer ejecute. Ver tabla abajo.

Output:
index.html servido por Worker

2. Step 07 · Las tres formas de renderizar el mismo payload

Mismo payload.json entra, tres HTML distintos salen.

Default actual

Lo que el pipeline produce hoy. Lo que motivó esta discusión.

Un solo landing.ts de 1004 líneas
CSS genérico parametrizado por 5 variables (--bg --fg --primary --accent --muted)
10 sections × 2-3 variants, pero todas comparten layout, motion, espaciado
Sin diferencia visual entre brutalist y warm-luxury — solo cambia el color
Resultado: indistinguible de Bootstrap template gratuito

Renderer:: cf-worker-template/src/landing.ts
Modelo:: Ninguno (TS puro)
Coste/landing:: $0
Tier sugerido:: —

A · Curated propuesto

Tu plan original recuperado: N renderers, uno por aesthetic.

renderer_brutalist.ts, renderer_editorial.ts, etc.
CERO CSS compartido entre renderers — cada uno con identidad propia
Tipografía, motion, layout, espaciado son únicos por plantilla
Classifier elige aesthetic; Composer rellena slots; renderer ejecuta
Replicable: una vez escrito, sirve a cientos de landings

Renderer:: 1 de N TS modules
Modelo:: Ninguno en render
Coste/landing:: $0 (post-build)
Tier sugerido:: $1k – $3k

B · Freestyle propuesto

Designer-mode. Sin schema, sin renderer. Opus pinta libre.

Prompt entrega DOM + screenshot + brand_profile + 2-3 referencias visuales
Claude Opus 4.7 produce HTML+CSS+JS completo, bespoke por marca
Componentes únicos (terminales, schematics SVG, sticky scroll) por landing
Necesita validadores: screenshot diff, Lighthouse, axe accessibility
No replicable: cada landing es un nuevo pago a Anthropic

Renderer:: Claude Opus 4.7 (Anthropic API)
Modelo:: ~$0.50 – $2 por landing
Coste/landing:: tokens API
Tier sugerido:: $5k – $15k

3. Tabla cruda

Lo mismo, lado a lado.

Atributo	Default	A · Curated	B · Freestyle
¿Qué decide el LLM?	Copy + variantes	Copy + variantes + aesthetic class	Todo (HTML, CSS, layout, motion)
¿Modelo en render?	ninguno	ninguno	Opus 4.7
Identidad visual	genérica	fuerte por aesthetic	única por marca
Replicable	sí	sí (post-build)	no
Coste por landing	$0	$0	~$0.50–$2 + validación
Riesgo de slop	visual slop alto	cero	moderado (necesita gates)
Esfuerzo inicial	Hecho	~3 días/aesthetic × 6 = ~3 semanas	~1 día (prompt + validators)
Tier de precio	—	$1k – $3k	$5k – $15k
Volumen viable	infinito	infinito	~10–50/día (rate-limit)

4. Línea de tiempo · qué pasó ahora con okastore.net

Lo que ves en los previews fue producido por este pipeline real, sin intervención manual sobre los datos.

T+0s

Disparo

python3 scripts/demo_pipeline.py --url https://okastore.net --force

T+~5s

Step 01 — Scrape

Playwright Docker baja la imagen oficial si no está. Carga okastore.net, espera networkidle, lee DOM, emite TOON.

T+~30s

Step 03 — Analyzer

Claude CLI infiere brand_profile (nombre, tagline, niche, paleta, typography_vibe).

T+~90s

Step 04 — Composer

Claude CLI elige sections + copy. Misma llamada-única.

T+~95s

Step 05–06 — Assemble + Write

payload.json escrito en previews/okastore-net/.

T+~100s

Step 07 — Render × 3

El mismo payload renderizado con el default actual, con A (curated nueva plantilla que matche aesthetic detectado), y con B (Opus libre con el mismo payload + brand info).