Building a blog page with voice commands in Windsurf turns Cascade into a hands free coding partner. Aquí te muestro cómo describir un wireframe hablando, dejar que la IA lo traduzca en código y obtener una página responsiva sin escribir una sola línea de prompt manual.
¿Cómo activo el comando de voz en Cascade?
Dentro de Windsurf, abres el panel de Cascade y buscas el ícono del micrófono en la esquina inferior derecha. Al hacer clic, ya puedes hablarle directamente a Cascade y él transcribe lo que dices en el campo del prompt.
Lo interesante es que las reglas del proyecto ya están activas, así que Cascade hereda convenciones, estilos y stack sin que tengas que repetirlos. Tú solo describes el requerimiento con tu voz y él hace el resto.
¿Qué es un comando de voz en Windsurf? Es una función de Cascade que transcribe tu audio en un prompt escrito y lo envía como instrucción para generar o modificar código.
¿Qué wireframe le describí a Cascade hablando?
Leí un prompt preparado para mantener la clase fluida, pero la idea es que tú improvises con tu propio requerimiento. La instrucción pedía actualizar la página de blog respetando el header y footer del homepage, con esta estructura:
Hero destacado en dos columnas, imagen grande a la izquierda y a la derecha título del post, resumen de dos o tres líneas y botón de leer más.
Cuadrícula de dos columnas por tres filas con seis tarjetas de post, cada una con miniatura cuadrada, título, resumen breve y botón de leer.
Diseño responsivo: en móvil todo apilado, en desktop el hero en dos columnas y la grilla en dos columnas.
También pedí reutilizar el mock de posts creado para el homepage, mapear los ítems para renderizar las tarjetas, no agregar dependencias nuevas y respetar las reglas del proyecto.
¿Por qué reutilizar el mock del homepage?
Mantener una sola fuente de datos evita inconsistencias entre páginas. Cuando Cascade mapea el mismo array en el homepage y en el blog, cualquier cambio en el contenido se refleja en ambos lados sin duplicar lógica.
¿Qué genera Cascade después de enviar el prompt por voz?
Al darle send, Cascade interpreta el mensaje y empieza a trabajar en el archivo page.tsx dentro de la carpeta blog. Crea su propio listado de tareas y arranca por la primera: incorporar el header y footer desde el homepage.
El resumen que devuelve detalla los cambios aplicados. En este caso reportó un archivo modificado con 222 líneas nuevas y 2 líneas eliminadas. En el editor, el verde marca lo añadido y el rojo lo removido, así puedes revisar antes de aceptar.
¿Puedo aceptar los cambios por partes? Sí. Cascade permite aprobar bloques individuales de recomendaciones o aceptar todo de una vez según tu nivel de confianza en el resultado.
Al revisar el archivo aparece la estructura de posts en un mock, el menú, el header, el hero section, la grilla de tarjetas y el footer. Cascade siguió usando Tailwind sin que lo mencionara en el prompt, porque lo infiere desde las reglas del proyecto.
¿Cómo verifico el resultado en el navegador?
Abres la terminal, ejecutas npm run dev y esperas a que el servidor local esté listo. Refrescas el homepage, haces clic en el enlace del blog en el menú superior y la nueva sección aparece renderizada.
El resultado respeta el hero moderno con el post destacado, donde el título corresponde al primer artículo del mock y los demás se listan en la grilla. Si quieres ajustes finos, como reducir el tamaño de la imagen o pasar la grilla a tres columnas en desktop, puedes pedírselo en una iteración de refactor posterior.
¿Por qué iterar con voz en lugar de tipear?
Cascade entiende español con buena precisión y capta microajustes sin fricción. Eso te permite probar variaciones rápidas, como cambiar el orden de las tarjetas, ajustar textos o redefinir el tamaño del bloque destacado, sin abrir el teclado.
Habilidades, conceptos y datos clave de la clase
Antes de practicar, vale la pena fijar los elementos técnicos que aparecieron en la sesión:
Comando de voz en Cascade: micrófono en la esquina inferior derecha del panel para dictar prompts [0:25].
Wireframe descrito por voz: hero a dos columnas más grilla de seis tarjetas en 2x3 [0:55].
Diseño responsivo: apilado en móvil y dos columnas en desktop [1:25].
Reutilización del mock de posts del homepage para mapear tarjetas [1:35].
Reglas de proyecto activas que infieren Tailwind sin mencionarlo en el prompt [2:35].
Archivo modificado: app/blog/page.tsx con 222 líneas nuevas y 2 eliminadas [2:15].
Flujo de aceptación: bloques individuales o aceptar todo desde el diff [2:20].
Verificación con npm run dev y navegación desde el menú al /blog [2:50].
Prueba variar el orden de las tarjetas, los textos o el tamaño del bloque destacado siempre hablándole a Cascade. Cuéntame en los comentarios cómo te fue hablándole a Windsurf.
