El humo de los cinco minutos
Dicen que con IA programas una web en cinco minutos. Lo que se programa en cinco minutos se tira a la basura en diez.
Abro Instagram, TikTok o LinkedIn y veo lo de siempre. Un señor con auriculares enseñando una web «hecha por IA en cinco minutos». Tiene tres bloques. Una imagen de stock. El gradient violeta de siempre. Si pasas el cursor, el botón no responde. Si bajas, el footer está roto. Pero el vídeo tiene doscientos mil likes y un comentario que dice «esto cambia el juego».
No cambia nada. Lo que se programa en cinco minutos lo tiras a la basura en diez. Y si no lo tiras tú, lo tira el primer usuario que entra.
Yo me he pasado diez días rediseñando mi web con IA. Pero no con un prompt de Instagram. Con disciplina. Con un plugin oficial de Anthropic que se llama Superpowers. Y con la versión más fuerte que tienen ahora mismo: Claude Code.
Y esto es lo que pasó.
El tema de este artículo no es mira qué rápido. Es mira qué disciplinado. Y por qué sin disciplina la IA es un desastre. Aunque venga firmada por Anthropic.
Qué es Superpowers, en plata
No es un modelo nuevo. No es más inteligencia. Es disciplina forzada.
Superpowers es un plugin oficial de Anthropic para Claude Code. Lo que añade no es un modelo más potente. Lo que añade son skills: workflows con checklist, reglas explícitas y puertas de seguridad que Claude invoca cuando detecta que la tarea encaja.
Tres ideas que entiendes en treinta segundos.
Disciplina sobre improvisación
Cualquier tarea no trivial pasa por cuatro fases: brainstorm, spec, plan, ejecutar. No se salta ninguna. La idea cruda no se convierte en código hasta que ha pasado por un spec aprobado y un plan ejecutable.
Subagentes en aislamiento
Cada tarea grande se ejecuta en un proceso hijo con contexto limpio. El Claude principal no se llena de basura técnica. Cada subagente hace su trabajo, vuelve con un resumen limpio, y cuando termina pasa por un reviewer que verifica antes de cerrar la tarea.
Hard gates
Hay puntos del flujo donde Claude no puede avanzar hasta que tú apruebas lo anterior. No escribe código hasta que apruebas el spec. No lanza subagentes hasta que apruebas el plan. Esto es lo que cambia la experiencia entera.
Lo que pasa sin Superpowers
Claude se entusiasma y empieza a programar en cuanto huele una idea. Te enseña una arquitectura preciosa, un diagrama maravilloso, un flujo perfecto. Y empieza a escribir código en una dirección que no querías.
Con Superpowers te pregunta primero y te enseña lo que va a hacer antes de hacerlo. Eso es todo. Pero eso lo cambia todo.
El flujo de trabajo real
Cuatro fases. Cada flecha es un hard gate. No avanzas hasta que apruebas lo anterior.
Antes de meternos en los cuatro casos reales, déjame enseñarte el flujo. Así entiendes por qué cada sesión tarda lo que tarda.
Las cuatro skills que importan
Brainstorming
Convierte una idea vaga en un spec. Te hace preguntas una a una, no en bloque. Prefiere multiple choice. Te propone dos o tres approaches con tradeoffs antes de decidir nada. Te presenta el diseño por secciones y pide tu OK tras cada una. El hard gate: no invoca ninguna skill de implementación hasta que apruebas el spec por escrito.
Writing Plans
Coge el spec aprobado y lo descompone en tareas ejecutables, de dos a cinco minutos cada una. Lista exacta de archivos a tocar. Código real, no pseudocódigo. Mensaje de commit. La regla: prohibido escribir «TODO», «TBD» o «implementar después». Si el plan no es ejecutable en frío por alguien que no conoce el proyecto, no pasa.
Subagent-Driven Development
Por cada tarea del plan, lanza un subagente implementer con contexto curado, solo recibe su tarea, no el plan entero. Cuando termina, lanza un subagente reviewer que verifica el código contra el spec. No confía en el informe del implementer. Si encuentra problemas, vuelve al implementer y repite hasta APPROVED.
Visual Companion
Servidor local que sirve mockups HTML al navegador. Cada vez que Claude escribe un mockup nuevo, lo veo en tiempo real. Comparar tres mockups por chat es ilegible. Comparar en pantalla completa cambia la decisión.
La trampa que evita Superpowers
Sin hard gates, Claude se entusiasma. Te enseña una arquitectura preciosa y empieza a programar antes de que tú hayas dicho que sí. Cuando te quieres dar cuenta, lleva media hora escribiendo código en una dirección que no querías.
Con hard gates, no avanza. Te espera. Y eso es lo que necesitas en un proyecto real.
Los cuatro casos reales
Cuatro páginas de mi web. Cuatro sesiones. Diez días en total. Lo bueno, lo malo y lo que aprendí.
Estos son los cuatro casos reales del rediseño de Mili Pérez · Mugen AI. Cada uno con sus números, sus errores y sus aprendizajes.
Rediseñar la home — 6 a 8 horas en 2 días
El objetivo era rediseñar la home entera. Pasar de la landing genérica que tenía a algo editorial, más manifiesto que folleto. En el brainstorming rechacé dos direcciones de hero antes de aceptar una. Una era una red neuronal en 3D. Bonita en el demo, pero leía como «una landing IA más». Y mi web entera dice lo contrario.
El visual companion me ahorró días. Vi tres heros animados en mi navegador antes de aprobar uno.
- ~34 commits en main (solo esta sesión)
- ~25 subagentes lanzados (implementers + reviewers)
- 10 bloques rediseñados (hero, problema, sistema, infra, operativa, LinkedIn, testimonios, inversión, contacto, footer)
- 3 vídeos animados generados con Remotion
- 1 imagen editorial generada con Higgsfield
- 6 testimonios reales integrados
Qué falló: los subagentes metieron copy inventado en el bloque «Sistema». Hubo que rehacerlo entero. Qué funcionó: los reviewers atraparon CSS huérfano y variables que el implementer había inventado. Tareas paralelas no chocaron porque tocaban archivos distintos.
Rediseñar la página «tech» — 3 horas
El «sobre mí» de mi web (que vive en /tech) tenía contenido que se solapaba con el manifiesto. Hábitos, recorrido, cifras por un lado. Tesis y doctrina por otro. Pero estaban mezclados. El objetivo: separar quirúrgicamente.
Quedó así: hero, hábitos en tres cards, recorrido en timeline de cinco etapas, cifras, qué construyo hoy, fit y no-fit, cuéntame.
- 6 commits incrementales
- Patrón q-grid importado limpio del manifiesto sin reescribirlo
- División tech (sobre mí) vs manifiesto (tesis) quedó nítida
Qué falló: el hero quedó enorme en la primera versión. H1 por encima de sesenta píxeles en desktop. Tuve que decirlo en voz alta otra vez: el hero está enorme. Patrón recurrente. Y los subagentes volvieron a poner el «fake terminal» que ya estaba en la home, porque tienden a copiar el patrón de la página anterior.
Auditoría narrativa cross-página — 5 horas
Sesión maratón. Auditoría narrativa cruzada entre home, tech y manifiesto. Diagnosticar canibalización, decidir qué bloque vive en qué página, reubicar contenido, limpiar.
Y hubo dos errores que no quiero repetir nunca. Los cuento sin maquillar porque son la lección más útil del artículo entero.
Error 1 — Worktree cuando yo quería main. Por inercia, Claude trabajó en un worktree separado porque su memoria vieja decía «siempre worktree». Yo quería trabajar en main. Tuve que parar y decir literal: yo quiero en main, no quiero trabajar en otro repositorio. Pérdida de tiempo. Cambios que hubo que reaplicar.
Error 2 — sed por rango sin verificar lo de alrededor. Para borrar un keyframe muerto, Claude usó sed '281,291d'. El rango se cargó también dos keyframes que sí estaban en uso. Las líneas se habían desplazado. El hero quedó con opacity cero permanente. Catástrofe silenciosa.
- Reducción real de líneas: -295 en manifiesto, -239 en tech
- Las reglas anti-sobrepoda quedaron explícitas y se respetaron desde ahí
- El spec maestro sirvió de brújula para las dos sesiones siguientes
Rediseñar la página de agentes de voz — 5 horas
Página de producto. Antes voz-ia.html. Renombrada por SEO a agentes-de-voz-ia.html. Cambio de URL más actualización en canonical, og, schema, nav, footer. Siete archivos tocados.
El hero se rehizo cuatro veces. Una terminal estática. Un mock flotante. Una terminal con señal animada. Y al final, un feed estilo «57 llamadas en curso». El cuarto fue el bueno.
Y una calculadora de rentabilidad nueva. Ocho inputs. Fórmula con ahorro vs coste actual. Algo simple sobre el papel. Tres bugs antes de que estuviera bien.
- ~430 líneas netas eliminadas en limpieza
- Bloque entero «Mientras la llamada sigue» eliminado por redundante
- Despigmentación del ámbar: de catorce usos en la calculadora a cuatro
El bug honesto: la cifra anual mostraba ahorro × 12 cuando la frase ancla decía «te cuesta seguir a mano». Inconsistencia matemática. Corregí a coste humano × 12. Honestidad antes que humo: que el placeholder que ves al cargar coincida con lo que el JS calcula. Si no, es marketing engañoso disfrazado de demo.
Los números totales
Captura esta sección. Esto es lo que no enseña nadie.
Si has llegado hasta aquí, mereces la foto completa. Aquí están todos los números agregados de los diez días.
Las cifras del rediseño
- Días de trabajo: 10 (del 18 al 27 de mayo de 2026)
- Horas estimadas: 20-25 horas de conversación efectiva
- Páginas tocadas: 4 (home, tech, manifiesto, agentes-de-voz-ia)
- Commits en main: 35+
- Subagentes lanzados: 50+
- Specs escritos: 3 (home, tech, auditoría narrativa)
- Planes escritos: 2 (home, agentes-de-voz-ia en 3 fases)
- Vídeos animados generados: 3 (con Remotion)
- Imágenes editoriales: 1 (con Higgsfield)
- Iteraciones de hero por página: 3-4 en cada página
- Reescrituras completas de bloque: 5
- Errores críticos documentados: 8 (los publico mañana)
Si esto te parece mucho, tienes razón. Si te parece poco para rediseñar cuatro páginas con la calidad final que tienen, también tienes razón. La pregunta no es cuánto tarda. La pregunta es cuánto tardaría sin disciplina. Y la respuesta es: el doble, con la mitad de calidad y el triple de rework.
Frases típicas mías hablando con Claude
Esto es lo que sale de verdad de una sesión real. Sin filtro. La conversación cruda.
Una cosa que nadie cuenta de trabajar con IA en producción: el tono. La gente piensa que se le habla como en los prompts bonitos de Twitter. «Por favor, podrías considerar…». No. Conmigo, al menos, no. Conmigo es esto.
«Tírale.» Traducción: ejecuta directamente, no me propongas más, ya hemos discutido bastante.
«Vamos con cuchillo afilado.» Para tareas de poda y limpieza. Sin miedo. Sin medias tintas.
«No me entero.» No me expliques dónde meter el cambio. Hazlo tú. Y enséñame el resultado.
«Te has cargado todo el diseño.» Cuando el hero quedó con opacity cero permanente después de un sed mal calculado.
«El hero está enorme.» Patrón recurrente. Cada vez que Claude pone clamp en el H1, crece a ochenta píxeles en desktop.
«Eso ya está en otra página, no se repite.» Cuando Claude vuelve a poner el mismo patrón visual (terminal, pills flotantes) que ya usó antes.
«Yo quiero en main, no en otro repositorio.» Para cortar el worktree por inercia cuando lo que quiero es trabajar directo en main.
«Eso no es mío, lo has inventado.» Cuando aparece copy en el spec que yo no he validado y los subagentes lo meten tal cual.
«Primero supervisamos, luego dejamos volar.» Mi mantra. Nada en automático sin haberlo visto funcionar antes a mano.
«Desde las trincheras.» Lo digo casi en cada sesión. Para recordarle que estamos en producción real, no en demo.
Lo que aprendí del tono
Hablo con Claude como hablaría con un compañero de equipo: directa, corta, correctiva. Sin envolver. Sin «podrías considerar». Y funciona mejor.
Las instrucciones cortas y claras producen mejor código que las largas y educadas. La IA no se ofende. Aprovéchalo.
Por qué baja la velocidad inicial y cae el rework
La paradoja del flujo disciplinado. Te parece más lento. En realidad es más rápido.
El brainstorming y el spec antes de codear parecen ralentizar. Pasas una hora discutiendo en vez de escribiendo código. Tu instinto dice que estás perdiendo el tiempo.
En realidad estás ahorrando rework. Y mucho.
Sin Superpowers, Claude lanza una arquitectura en cinco minutos. Pero esa arquitectura asume integraciones que no tienes, rellena huecos con suposiciones y mete copy inventado. Tres horas después, tiras la mitad y rehaces.
Con Superpowers, pasas la primera hora discutiendo el approach. Cuando empiezas a programar, ya sabes que el spec está limpio. Tiras menos.
Las lecciones meta de fondo
Lo que viene mañana
Hoy has visto la cicatriz. Mañana abro el capó.
Lo que has leído hoy es el qué. Mañana publico el cómo.
Mañana viene el manual de campo. Qué skill exacta uso para qué tipo de tarea. Qué modelo de Claude para qué fase: Opus para decidir, Sonnet para ejecutar, Haiku para leer. Los ocho errores documentados con su solución exacta. Y el checklist de cierre de sesión que aplico ahora antes de hacer commit.