Construir un single post preciso y usable es más rápido cuando combinas Figma como referencia visual y Cascade para generar código con prompts claros. Aquí verás cómo adjuntar una captura, validar diffs, detectar bugs en mocks y dejar todo listo para iterar el diseño manteniendo responsive y jerarquía visual.
¿Cómo crear un single post con Cascade y Figma?
Al trabajar en Windsurf, se abre el panel de Cascade, se pega la imagen de Figma del single block y se redacta un prompt directo: usar el mismo header y footer del homepage, seguir el layout de la captura y asegurar responsive y jerarquía visual. Luego se envía para que Cascade procese la imagen y el texto del prompt.
Adjuntar la captura del single block como referencia visual.
Indicar: usar header y footer del homepage.
Pedir layout fiel, responsive y con jerarquía visual.
Enviar y esperar el análisis de imagen y estructura.
¿Qué generó Cascade y cómo validar cambios?
Cascade lee la imagen, compara con el prompt y revisa el homepage para traer header y footer. Entrega un diff con 179 líneas nuevas y reemplazos mínimos, activando “Aceptar todo” o “Rechazar todo”. En el código aparecen la hero section, el content, el título del artículo, el contenido y una sección de posts relacionados inferida por estructura, más el footer reutilizado.
Verificar que la estructura respete la jerarquía visual.
Usar los botones de aceptación para aplicar cambios.
¿Cómo probar en el navegador con npm run dev?
Tras aceptar, se ejecuta “npm run dev” y se navega al blog. Al hacer clic en “Leer más” se abre el single. Se observa que respeta la estructura, pero título y contenido aparecen como placeholders. Los posts relacionados sí funcionan y respetan URL y slug en Next.js.
Abrir el destacado y revisar título, contenido y relacionados.
Confirmar rutas por slug en Next.js.
¿Cómo solucionar la falta de contenido en el single?
Se vuelve al editor con un prompt breve: “no estás mostrando el título ni el contenido del blog post en el single blog”. Cascade deduce que faltan datos en el mock, agrega la estructura de datos con contenido real y un manejo de post no encontrado con mensaje de retorno al blog. El diff muestra 139 líneas nuevas y 9 eliminadas.
Aceptar cambios y refrescar en el navegador.
El post de Next.js ya muestra título, autor y contenido; aparece un issue de estilos pendiente de refactor.
Algunos slugs aún fallan por falta de contenido en los mocks.
¿Qué ajustes de datos realizó Cascade?
El mock original tenía id y autor, pero no contenido. Cascade añadió texto para poder renderizar el cuerpo del artículo y un aviso cuando el post no existe. Esto mejora la experiencia si un usuario escribe una URL inválida.
Agregar campo de contenido en el mock.
Incluir mensaje de “post no ha sido encontrado”.
¿Cómo verificar y encontrar el bug?
Se inspecciona el archivo nuevo: solo Next.js y TypeScript Best Practices tenían contenido real, provocando errores en otros slugs como Tailwind, testing y arquitectura al hacer clic.
Revisar el mock y contar posts con contenido.
Cruzar con los enlaces de relacionados para detectar vacíos.
¿Cómo completar los mocks y cerrar el bug?
Se pide explícitamente: “agrega el contenido de los blog posts faltantes”. Cascade añade 180 líneas nuevas en el mismo archivo, completando Tailwind, React Testing y optimización de rendimiento en Next.js. Tras aceptar, todos los enlaces muestran contenido; el issue de diseño se dejará para la sesión de refactor.
Confirmar contenido en cada slug recomendado.
Validar navegación entre relacionados sin errores.
¿Qué habilidades y conceptos clave se refuerzan?
Redacción de prompts claros: objetivo, layout, reutilización de header/footer y criterios de calidad.
Revisión de diffs: conteo de líneas nuevas (179, 139, 180) y cambios eliminados.
Uso de mocks de datos: detección de campos faltantes y su impacto en la UI.
Manejo de slug y rutas en Next.js: respeto de URL y slug en navegación.
Implementación de posts relacionados: inferencia por estructura visual.
Gestión de errores de contenido: “post no encontrado” y retorno al blog.
QA manual en navegador: flujos de clic, lectura de contenido y estilos.
Criterios de responsive y jerarquía visual: exigidos desde el prompt y verificados en la vista.
Uso responsable de Aceptar/Rechazar cambios: actuar como “senior” que valida cada modificación.
¿Probaste con una referencia más detallada de diseño en Figma? Comparte en comentarios cómo se comportó Cascade y qué ajustes de prompt te dieron mejores resultados.
