mochi-redesign

/mochi-redesign

Un flujo de trabajo de rediseño guiado. No aplica un aspecto fijo. Aplica un proceso fijo: entender a la persona, encontrar un concepto, construir un sistema de diseño pequeño, poner todo lo importante en la primera pantalla como tarjetas, mover el detalle a popups enriquecidos y páginas dedicadas, escribir copia honesta y verificar cada cambio en tamaños de pantalla reales antes de mostrarlo.

Se destiló de un portafolio real que pasó de ser una plantilla simple de una columna a un sitio estilo bento tras muchas rondas de retroalimentación del dueño. Las lecciones de esas rondas (lo que funcionó, lo que se rechazó, lo que se rompió) están codificadas abajo y en references/.

El resultado nunca debe verse como el sitio del que proviene este skill. Misma disciplina, identidad diferente: nuevo concepto, nuevas fuentes, nuevos colores, nuevo detalle distintivo. Si te sorprendes recurriendo a un trazo de pincel caléndula, una mascota o una cuadrícula bento porque "eso es lo que hace el skill", detente y vuelve a la Fase 1.

Cómo ejecutarlo

Los argumentos son texto libre opcional, p. ej. /mochi-redesign cliente/ o /mochi-redesign solo la página de inicio, mantén el blog como está.

Trabaja a través de las fases en orden. Cada fase termina en una puerta: muestra el resultado al dueño (capturas de pantalla, no descripciones) y espera su reacción antes de continuar. Los rediseños fallan cuando se acumulan varias decisiones no revisadas.

Fase	Leer primero	Puerta
0. Encuesta y auditoría	references/01-intake-audit.md	El dueño confirma objetivos, audiencia, alcance, lo que no debe cambiar
1. Concepto y sistema	references/02-concept-system.md	El dueño elige una dirección; tokens escritos
2. Verdad del contenido	references/03-content.md	El dueño aprueba afirmaciones (sin exageraciones)
3. Primera pantalla	references/04-layout.md	Cabe en una pantalla de portátil en cada tamaño objetivo
4. Capa de detalle	references/05-interaction.md	Los popups se desplazan internamente, bloquean la página, sin cambio de diseño
5. Páginas secundarias	references/06-content-pages.md	Las listas y páginas de lectura coinciden con el sistema
6. Medios (opcional)	references/07-media.md	Demostraciones reales, comprimidas, se reproducen solo a la vista
7. Pulido y QA	references/08-qa.md	Clip check superado, ambos temas, móvil, lint, build
8. Entrega	references/09-feedback-and-handoff.md	Diff limpio, documento de diseño actualizado, el dueño decide sobre commit

references/10-anti-patterns.md es la lista de errores cometidos la primera vez. Léelo una vez antes de la Fase 1 y nuevamente antes de la Fase 7.

No negociables

1. Mira antes de cambiar. Lee el código existente, ejecuta el sitio, toma capturas de pantalla en los tamaños objetivo. Nunca rediseñes solo desde el código.
2. Una identidad por sitio. El concepto proviene del tema (lo que la persona o producto realmente es), no de una tendencia ni del origen de este skill.
3. Todo lo importante en la primera pantalla. Los visitantes deben ver quién, qué y prueba (mejor trabajo) sin desplazarse. El detalle está a un clic de distancia, no a cinco pantallas.
4. Copia honesta. Ninguna afirmación que el dueño no pueda respaldar en una entrevista. Prefiere "practicado", "he hecho", "donde encaja" sobre "cada", "siempre", "todo". Muestra pruebas (números, cosas enviadas) en lugar de adjetivos.
5. Verifica en tamaños, no en tu cabeza. Cada cambio visual va seguido de la verificación de recorte (scripts/clip-check.mjs) y al menos una captura de pantalla. Nunca reportes "hecho" desde un cambio que no hayas mirado.
6. Pasos pequeños y reversibles. Cambia una cosa, muéstrala, escucha. Si el dueño rechaza algo dos veces, deja de adivinar: ofrece 2–3 opciones concretas con vistas previas y deja que elijan. Si piden revertir, restaura la versión anterior exactamente, no una reconstrucción "más o menos".
7. No rompas lo que está en vivo. Mantén funcionando las rutas antiguas, no toques páginas no relacionadas, no reformatees archivos que no necesitabas cambiar (el churn del formateador oculta el diff real), no hagas commit o push sin que te lo pidan.
8. Suelo de accesibilidad. Alcanzable con teclado, foco visible, botones y enlaces reales, prefers-reduced-motion respetado, contraste verificado en ambos temas, nada importante se comunica solo al pasar el ratón.

Cómo se ve "terminado"

• Una primera pantalla que cabe en un portátil (1280×720 hasta 1920×1080) sin contenido recortado, sin desplazamiento horizontal y con un punto focal claro.
• Un sistema de diseño pequeño y escrito (tokens, tipo, radio, reglas de movimiento) que cada nuevo componente utiliza.
• Tarjetas que abren detalles enriquecidos (diálogos o páginas) en lugar de desplazamiento largo.
• Copia que el dueño aprobó línea por línea.
• Páginas secundarias (listas, lectores, casos de estudio) que se sienten como el mismo sitio.
• Un documento de diseño en el repositorio (DESIGN.md o similar) que describe el sistema y las decisiones, para que la próxima persona (o agente) lo mantenga coherente.

Archivos en este skill

SKILL.md                         este archivo: flujo de trabajo, puertas, reglas
references/01-intake-audit.md    preguntas que hacer, cómo auditar el sitio actual
references/02-concept-system.md  encontrar un concepto; tokens, tipo, detalle distintivo
references/03-content.md         escribir copia veraz, escaneable y destacada
references/04-layout.md          diseño de primera pantalla tipo bento y recetas de tarjetas
references/05-interaction.md     diálogos, hover, movimiento, pequeños deleites
references/06-content-pages.md   páginas de blog/lista/lector que mantienen a la gente leyendo
references/07-media.md           grabar demostraciones y avances del trabajo real
references/08-qa.md              matriz de viewport, clip check, temas, accesibilidad
references/09-feedback-and-handoff.md  iterar con el dueño; finalizar limpiamente
references/10-anti-patterns.md   lo que salió mal la primera vez y la solución
scripts/clip-check.mjs           Script CDP: tarjetas recortadas, desbordamiento, ajuste al pliegue
scripts/shots.mjs                Script CDP: capturas de pantalla por viewport y tema
templates/                       fragmentos independientes del framework (React + Tailwind)