Example prompt new block theme for WordPRess

prompt-new-block-theme.md

Crea un nuevo tema de bloques en wp-content/themes/ llamado editorial-brut, inspirado en la intersección de la tipografía editorial clásica (estilo The New Yorker, Bloomberg Businessweek) con la sobriedad brutalist contemporánea de Vercel y Linear. Editorial pero con confianza tipográfica, sin decoración sobrante.

ANTES DE CODIFICAR: entra en plan mode y enséñame el plan completo. No escribas ni un archivo hasta que apruebe.

REFERENCIAS ESTÉTICAS CONCRETAS:

• Titulares: serif con carácter — Fraunces o Instrument Serif (Google Fonts). Tamaños grandes (clamp hasta 5rem), tracking apretado (-0.02em), peso 500-600.
• Cuerpo: sans neutra — Inter o IBM Plex Sans, 17-18px base, leading 1.6.
• Mono para metadatos, fechas, captions: JetBrains Mono.
• Paleta: fondo #FAFAF7 (off-white cálido), texto #0A0A0A, línea separadora #E5E2DA, acento #D24A26 (naranja brutalist). Variación oscura inversa.
• Espaciado generoso, separadores como líneas de 1px, sin sombras blandas, sin gradientes, sin border-radius (cero — esquinas rectas).
• Layout asimétrico cuando aporte. Ancho de contenido para texto: 680px.

ENTREGABLES:

1. theme.json (schema 3) con:
   • palette completa con los colores anteriores como slugs semánticos
   • typography.fontFamilies con @font-face desde Google Fonts
   • typography.fontSizes con clamp() responsive
   • spacing scale fluida
   • layout.contentSize / wideSize
   • una styleVariation "Dark Editorial" (invertida)
2. templates/: index, single, page, 404, archive
3. parts/: header (logo tipográfico + nav inline minimal), footer (línea + créditos en mono)
4. patterns/:
   • hero-editorial: kicker en mono + titular serif gigante + lead + meta en mono
   • two-column-quote: cita serif a 2.5rem + atribución en mono
   • post-grid-editorial: grid asimétrico de posts con mixed type sizes

RESTRICCIONES TÉCNICAS:

• API moderna de patterns (PHP header comments en patterns/*.php).
• theme.json schema 3, valida contra el schema antes de terminar.
• Nada deprecado: toda la estética vive en theme.json, sin CSS suelto vía add_editor_style salvo lo imprescindible para fuentes locales.
• Si dudas de sintaxis actual, consulta context7.
• Fuentes: descárgalas localmente a assets/fonts/ (woff2) y refer- éncialas vía @font-face en theme.json con src apuntando a file:./assets/fonts/.... No uses la CDN de Google (motivo: GDPR + performance). Si necesitas descargar los archivos, usa fonts.google.com vía curl o el endpoint google-webfonts-helper.

TRAS IMPLEMENTARLO:

• Activa el tema con wp_cli desde la sesión.
• Crea un post de ejemplo con el pattern hero-editorial y contenido lorem editorial (3 párrafos, una cita, un H2).
• take_screenshot del front.
• Usa el skill frontend-design para criticar el resultado y proponer 2 mejoras concretas — no las apliques, solo proponlas.

Variantes de anchor estético (sustituye el primer párrafo):

• Terminal / dev-nostalgia: "inspirado en interfaces de terminal modernas y la estética de los manuales técnicos antiguos — mono everywhere, green-tint discreto sobre crema, ASCII como decoración funcional"
• Swiss / Bauhaus: "inspirado en el cartelismo suizo de los 60 — Helvetica/Inter en todo, rojo y negro sobre blanco puro, grid estricto, geometría como protagonista"
• Magazine maximalist: "inspirado en revistas independientes contemporáneas como The Gentlewoman o Apartamento — mix de serif display y grotesque, paleta cálida tipo crema/burdeos/oliva, capitulares grandes, columnas estrechas"

MODO DECISIÓN: toma decisiones razonables por defecto siguiendo las mejores prácticas actuales sin pedirme confirmación. Solo pregúntame si: (a) hay un riesgo destructivo no reversible, o (b) hay dos caminos con trade-offs serios y no tengo cómo inferir cuál prefiero. Todo lo demás: decídelo y sigue. Documenta la decisión en una línea del plan.

---

Prompt 1 — Scaffolding (target ~60s, directo, sin plan mode)

Crea la estructura mínima de un tema de bloques llamado editorial-brut en la carpeta actual. Solo lo imprescindible para que active sin errores:

• style.css con el header del tema (Name: Editorial Brut, Version, etc.)
• theme.json mínimo válido (schema 3, $schema apuntando a wp.org)
• templates/index.html con un Group + Post Title + Post Content básicos
• functions.php vacío salvo enqueue de style.css

Activa el tema con wp_cli al terminar. Sin plan mode — esto es mecánico.

MODO DECISIÓN: toma defaults razonables sin preguntar.

---

Prompt 2 — Estética en theme.json (target ~90-120s, plan mode breve)

Ahora extiende theme.json con la estética completa. Plan mode CORTO (máximo 6 bullets, sin re-explorar el proyecto).

Estética: editorial brutalist — fusión New Yorker × Vercel/Linear.

• Paleta (con slugs semánticos): bg #FAFAF7, text #0A0A0A, line #E5E2DA, accent #D24A26. Más una styleVariation alternativa "Dark Editorial" con bg #0A0A0A, text #FAFAF7, accent #D24A26.
• Tipografías DESCARGADAS LOCALMENTE a assets/fonts/ (woff2):
  • Titulares: Fraunces (peso 500-600)
  • Cuerpo: Inter (400, 500)
  • Mono: JetBrains Mono (400, 500) Usa google-webfonts-helper o curl directo. Referéncialas en theme.json con src: file:./assets/fonts/.... No CDN de Google.
• fontSizes con clamp() responsive: small, medium, large, x-large, huge.
• spacing scale fluida (50, 60, 70, 80 con clamp).
• layout.contentSize: 680px, wideSize: 1200px.
• NADA de border-radius, shadows ni gradients en cualquier sitio.

MODO DECISIÓN: decide y avanza sin preguntar.

---

Prompt 3 — Templates y parts (target ~90s, directo)

Añade los templates y parts. Sin plan mode.

parts/header.html: logo como texto serif grande "Editorial Brut" + nav inline minimal con tipografía mono.

parts/footer.html: línea separadora de 1px arriba + créditos en mono pequeño.

templates/:

• index.html: header part + query loop con post-grid asimétrico + footer part
• single.html: header + post title XL serif + meta en mono + content centrado a 680px + footer
• page.html: igual que single pero sin meta
• 404.html: titular serif gigante "404" + nota en mono + link home
• archive.html: header + título de archivo + query loop + footer

MODO DECISIÓN: defaults razonables, sigue.

---

Prompt 4 — Patterns (target ~90-120s, plan mode breve)

Crea los 3 patterns en patterns/*.php con header comments (API moderna). Plan mode CORTO antes — solo para validar el approach de cada pattern.

1. hero-editorial.php:

   • kicker en mono uppercase pequeño ("ISSUE 01 · MAY 2026")
   • titular serif XL (clamp hasta 5rem, tracking -0.02em)
   • lead serif medium
   • línea de 1px
   • meta en mono ("By Author · 12 min read")

2. two-column-quote.php:

   • dos columnas asimétricas: izquierda 1fr texto, derecha 2fr la cita
   • cita en serif 2.5rem
   • atribución en mono pequeño

3. post-grid-editorial.php:

   • grid 3 columnas asimétrico (la primera col más ancha)
   • cada item: kicker mono + título serif + excerpt
   • mix de tamaños tipográficos para crear jerarquía visual

Categoriza todos los patterns como "editorial" en su header.

MODO DECISIÓN: decide sin preguntar.

---

Prompt 5 — Validación visual y crítica (target ~60s, directo)

Cierra el flujo:

1. Crea un post de ejemplo con wp_cli titulado "Why we still build for the open web", insertando el pattern hero-editorial al principio y 3 párrafos lorem editorial + un H2 + el pattern two-column-quote.
2. take_screenshot del front (home) y del single del post creado.
3. Invoca el skill frontend-design para criticar visualmente las dos capturas y proponer 2 mejoras concretas. NO las apliques — solo lístalas para que yo decida.