⁠Usa la voz para darle instrucciones a Windsurf

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.