Resumen
Construye una sección de blog profesional usando tu voz en Windsurf con Cascade. Aquí verás cómo dictar un prompt detallado, aplicar cambios en el archivo page.tsx y validar un diseño responsivo con Tailwind, sin agregar dependencias nuevas y respetando estilos existentes.
¿Cómo construir el blog con voz en Windsurf?
Usar la voz acelera el flujo: abres Cascade, dictas el requerimiento del wireframe y aceptas los cambios sugeridos. Cascade entiende en español, transcribe, crea tareas y edita el archivo del blog con una implementación completa.
¿Dónde activar el micrófono de Cascade?
- Ir al panel de Cascade en Windsurf.
- Ubicar el ícono del micrófono en la esquina inferior derecha.
- Hacer clic y hablar con claridad el prompt.
¿Cómo enviar el prompt y aplicar cambios?
- Dictar un prompt con instrucciones precisas del wireframe.
- Pausar y revisar la transcripción. Presionar Send.
- Cascade entiende el mensaje y trabaja en el archivo del blog: page.tsx dentro de la carpeta blog.
- Ver el resumen de cambios: listado de tareas, rutas y líneas afectadas.
- Identificar líneas nuevas en verde y eliminadas en rojo.
- Aceptar todo si el cambio global es correcto o aceptar por bloques.
¿Qué diseño y requisitos se implementan?
El layout solicitado replica el header y footer del homepage, incluye un hero destacado en dos columnas y una cuadrícula de tarjetas. Todo debe ser responsivo, con contenido tomado del mock ya existente y mapeado para renderizar los posts.
¿Qué incluye el wireframe del blog?
- Reusar el mismo header y footer del homepage.
- Hero en dos columnas: imagen grande a la izquierda; a la derecha, título del post, 2–3 líneas de resumen y botón de “Leer más”.
- Debajo, cuadrícula de 2 columnas x 3 filas con 6 tarjetas.
- Cada tarjeta: miniatura cuadrada, título, resumen breve y botón de “Leer”.
- Requisitos: debe ser responsivo; en móvil, todo apilado; en desktop, hero en dos columnas y grilla de dos columnas.
- Datos: usar el mismo Array mock de posts del homepage y mapear items para las tarjetas.
- Restricción: no agregar dependencias nuevas y respetar las reglas y estilos ya definidos.
¿Cómo se valida el resultado en el navegador?
- Abrir la terminal y ejecutar: npm run dev.
- Entrar al navegador, refrescar el homepage y abrir “blog” desde el menú superior.
- Ver un hero moderno con post destacado: el primer post del mock va arriba.
- Ver el resto de artículos enlistados en la grilla.
- Ajustes futuros posibles: reducir tamaño de imágenes o probar 3 columnas en desktop.
¿Qué habilidades y conceptos refuerzas?
Dominas el dictado de prompts, el diseño por wireframe y la revisión de cambios en el flujo de Cascade, a la vez que aplicas principios de UI responsiva y reutilización de contenido con mapeo de datos.
¿Qué conceptos, keywords y prácticas aplicas?
- Prompt detallado por voz: instrucciones claras, estructura, restricciones y datos a usar.
- Wireframe a implementación: traducir layout hablado a componentes reales.
- Reutilización de UI: mismo header y footer del homepage.
- Hero destacado: imagen, título, resumen y CTA “Leer más”.
- Cuadrícula de tarjetas: 2x3 con miniatura, título, resumen y botón.
- Responsivo: móvil apilado; desktop en dos columnas.
- Array mock y mapeo: renderizar tarjetas desde datos existentes.
- Estilos con Tailwind: inferido por reglas del proyecto sin pedirlo en el prompt.
- Gestión de cambios: ver líneas nuevas en verde y eliminadas en rojo; opción “Aceptar todo”.
- Ejecución local: npm run dev para verificar en el navegador.
- Iteración por voz: microajustes en español para velocidad y precisión.
¿Ya probaste variar el orden de las tarjetas, los textos o el tamaño del destacado hablándole a Cascade? Cuéntame en los comentarios cómo te fue con Windsurf.