M-08 · Entrada 15 de 25

W-frames · Frame hi-fi del Hero

Qué es esto

D-wireframe del hero hi-fi; checkpoint, no build.

Fase del Bridge

COMBO W-frames-hero (M-08) · D-wireframe.

M-08 · W-frames-hero — Frame hi-fi del HERO (BEAT 0)

Rafaella (D-wireframe). COMBO W-frames-hero, BEAT 0. Producir el frame hi-fi del hero para el checkpoint CEO (NO build — el build es M-09). Artifact Dev OS: 1d9c5151-b18c-4f8d-947d-5139e019213d.

Qué se ha producido

  • landing/design/frames/hero-beat0.html — frame de visualización autocontenido (HTML+CSS inline, etiquetado “FRAME · no build”), tokens anclados 1:1 a design-system.md.
  • landing/design/frames/hero-beat0.png — render 1440×900 @2x (el frame de referencia para el checkpoint).
  • landing/design/frames/hero-beat0-seal-crop.png — crop del sello (la pieza-firma, para Vision element-level).
  • landing/design/frames/hero-beat0-reduced.png — variante prefers-reduced-motion (contrato A11y).

Decisión de método: (c) frame HTML estático, NO Stitch/Magic

El gate de la tarea ofrecía (a) Stitch design-gen, (b) Magic, (c) frame HTML autocontenido. Elegí (c) por una razón de control de gusto, no por falta de herramienta:

  • El frame debe respetar valores HEX exactos (hueso #F7F5F0, acento #1B4DCC, teal-evidencia #0E7C66/#0A6353, slate #3A4F6B), la escala tipográfica modular y la sombra editorial fría — los generadores texto→imagen producen layouts plausibles pero no clavan tokens ni el sello SVG específico de 4 trazos. Re-introducir Stitch aquí era arriesgar exactamente lo vetado: glow, dark drift, headline genérico.
  • El sello («output → corre → criterio → sello», ensamblado en 4 trazos) es la metáfora-madre de la marca. Necesita ser un SVG real con stroke-draw, no una aproximación rasterizada. Sólo el control frame-perfecto lo entrega.
  • (c) es 100% verificable (DC-2): render Playwright aislado + Vision + probe de colores computados. Cero dependencia de auth-wall de design-gen.

Esto NO es el app Next (M-09): es un frame de intención para que el CEO ratifique el gusto antes de codear (Q4=A “frames Figma primero”).

La tensión crítica de M-08 — cómo la resuelve este frame

Art-direction §⚠️: data-viz orgánica (fácil en oscuro por glow) + fondo CLARO institucional tiran en direcciones opuestas. El frame demuestra la vía clara, pieza por pieza:

  1. Profundidad sin luz — la stage se eleva del hueso por contraste de superficie (tarjeta blanca) + sombra editorial fría (--shadow-lg, tinta HSL 222/25/18 a 8% opacidad, desenfoque amplio). Nunca negro duro, nunca bloom.
  2. Organicidad por trazo, no por brillo — el sello se dibuja (stroke-draw con --ease-organic): el anillo, dos ticks teal, el check azul, y el label aparece al cerrar. El “ajá” es el ensamblaje, no un resplandor.
  3. El dato corre, no decora — la tool (silueta de IDE, NO logo literal) tiene un micro-output que se ejecuta (líneas que se dibujan por scaleX), y un haz que baja del output hacia el sello: continuidad de objeto («el artefacto corre hacia la verificación»). Llena el vacío de la tarjeta con narrativa, no con ornamento.
  4. Acento escaso = acento con peso — el azul-evidencia sólo aparece en: “verificado” del H1, el check del sello, el haz, la flecha del CTA. La escasez ES la jerarquía (regla §4.1.5).
  5. Honestidad en pantalla — las 4 garantías mapeadas a los 4 trazos (mono + display), y el slot ROI [a validar] vacío y rehusado (borde punteado hairline). El diferencial de due diligence, visible desde el hero.

Wedge — copy literal (sin desviación)

H1 = “Tu primer output verificado sobre tu herramienta real. No vídeos.” · subhead canon “Verified Execution — construible hoy…” · CTA “Ver cómo se construye la evidencia ↓” · 2027+ · hipótesis falsable visible. Guardarraíles paper respetados: lead vocab Verified Output, nivel agregado implícito, cero rol→desplazamiento, slot ROI sin rellenar.

Verificación (V-visual DC-2 · real, no self-report)

  • Render: Playwright aislado (chromium headless-shell 1223 cacheado vía executablePath · NO toca Chrome 9255 · file:// local) @1440×900 dpr2.
  • Console: 0 errores.
  • Probe de colores computados: bg rgb(247,245,240)=#F7F5F0 ✓ · H1 rgb(22,25,31)=#16191F ✓ · “verificado” rgb(27,77,204)=#1B4DCC ✓ · eyebrow rgb(10,99,83)=#0A6353 (evidence-text AA) ✓ · H1 61px (text-5xl clamp top) ✓.
  • Vision pass 1 → 2 defectos: (a) label del sello colisionaba con el tick inferior del anillo; (b) vacío muerto bajo el sello + tool pequeña → composición desbalanceada y estática.
  • Fix: viewBox 140×162 (label y=150 bajo el anillo r=54, dasharray 340) · tool 70% · haz tool→sello · sello 50%.
  • Vision pass 2 → label limpio, tarjeta equilibrada top-to-bottom, el haz da lectura de “el output corre hacia el sello”. APPROVE.
  • Reduced-motion: sello completo (4 trazos + label), líneas en estado final, sin secuencia, sin nudge ni pulse — contrato cumplido.

Pendiente (lo cierra M-09, no este frame)

  • Frames de los 6 keyframes restantes (BEAT 1-5) → checkpoint CEO completo.
  • Tras ratify: widgets standalone → page composition → V3-Visual (Premium Floor 6 human-eye + 7 visual-critic adversarial Opus 3-lens).
  • El sello SVG de este frame es el contrato visual del componente real (SVG+GSAP timeline onLoad) en M-09.

W-frames-hero · A-retro + verdict (APPROVE)

A-heartbeat (COMBO-CHECK)

Cadena COMBO del COMBO W-frames-hero registrada server-side (mcpstartupos Dev OS) sin COMBO_SEQUENCE_VIOLATION: A-heartbeat 5bf2037b-bc4e-407b-bfc4-e72978165312 + A-retro fd15cdab-c9d8-4402-bd34-5a40d2f92dc4 (combo_state a3e08d20-6563-46c2-b2ef-ac294e71a441). Estado runtime sano: freeze.lock ausente, bridge-active.lock presente (modo no-stop), cero screenshots temporales sueltos en repo root. Los .png/.html del frame viven en landing/design/frames/ (contrato visual versionado), no en root.

A-retro · semáforo GREEN

  • Qué shipea este SKU: frame hi-fi del hero BEAT0 en fondo CLARO para checkpoint CEO. NO es build de sitio (eso es M-09); es el contrato visual del componente real.
  • Disciplina honrada: art-direction-locked.md como LEY (tono claro hueso #F7F5F0, acento evidencia frío #1B4DCC, teal #0E7C66, profundidad por sombra/contraste/peso, cero glow/neón). Headline = WEDGE literal sin desviación. Guardarraíles paper intactos (lead vocab Verified Output, nivel agregado, cero rol→desplazamiento, slot ROI [a validar] rehusado).
  • Verificación V-visual DC-2: real (Playwright aislado file:// @1440×900 dpr2 + probes de color computado + Vision 2 pasadas con fix intermedio), no self-report. Console 0 errores. Reduced-motion contrato cumplido.
  • Deuda / pendiente (no de este SKU): BEAT 1-5 restantes → M-09 completa el checkpoint; tras ratify CEO, widgets standalone → page composition → V3-Visual (Premium Floor + critic adversarial).

Verdict

APPROVE (V-review 292531b8-5925-4aa1-b267-ca6a7ecfe7f0 · vvisual=true). Fondo claro institucional confirmado a 1280px y 390px; cero glow/neón (sello a strokes planos, profundidad editorial por sombra+contraste+peso); WEDGE literal con “verificado” en azul-evidencia; data-viz editorial seria (instrumento auditable); acento del sistema exacto; ROI slot no rellenado; guardarraíles paper OK; jerarquía/legibilidad/premium fuertes; reflow mobile 390px correcto.

Semáforo: GREEN — COMBO W-frames-hero cerrado.