Usa imágenes como referencia en Cascade

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.

• Confirmar elementos: hero section, contenido principal, relacionados, footer.
• 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.