Resumen
Construye una página About completa y responsiva con Cascade en Windsurf. Con un prompt claro, el agente analiza el contexto, define tareas y genera el archivo listo para revisión. El enfoque prioriza SEO, jerarquía visual simple y un flujo ágil que combina comandos de voz, referencia gráfica y prompt de texto.
¿Qué se construye en la página about y por qué importa?
La meta es terminar el proyecto sumando la sección About al homepage y al blog. Se busca consistencia visual, contenido claro y una estructura accesible.
- Usa el mismo header y footer del homepage.
- Sección About Me en contenedor destacado, a dos columnas en desktop.
- Imagen de perfil con esquinas redondeadas, con placeholder y alt descriptivo para SEO.
- Título, tres o cuatro líneas de presentación y botón de link para contactar.
- Sección de projects: grilla de cuatro tarjetas.
- Sección de charlas o talks con disposición a dos columnas.
- Responsivo y con espaciado consistente entre bloques.
Esta estructura garantiza claridad: titulares por sección, bloques definidos y contenido escaneable.
¿Cómo se formula el prompt en Cascade desde Windsurf?
El flujo inicia en Windsurf, apartado de Cascade: pegar o escribir el prompt y ejecutar con “Ejecutar” o Send. El prompt orienta cada sección y define la implementación para que el agente actúe con precisión.
¿Qué incluye el prompt?
- Objetivo: crear la página About según la descripción dada.
- Reuso: mismo header y footer del homepage.
- Contenido: About Me, projects y talks con títulos claros.
- Presentación: imagen con placeholder y alt para SEO, texto breve y botón de contacto.
- Diseño: dos columnas en desktop y grilla de cuatro tarjetas para projects.
¿Qué pide la implementación técnica?
- Uso de arrays en un mock para proyectos y charlas, similar al de los blog posts.
- Mapear los arrays para renderizar cada tarjeta/ítem.
- Mantener una jerarquía visual simple: titulares por sección y espaciado consistente.
- Asegurar responsividad en todos los bloques.
¿Qué resultados entrega Cascade y cómo validarlos?
Cascade analiza el prompt, revisa su contexto, crea un listado de tareas y ejecuta paso a paso. Muestra un sumario de lo realizado y los cambios de archivos para revisión.
- Genera el archivo de About con 298 líneas nuevas y 1 línea reemplazada.
- Permite ver el sumario y confirmar cada ítem solicitado en el prompt.
- Se acepta el cambio y se prueba en el navegador.
En la prueba, se observa la sección principal con imagen y bio del desarrollador, la grilla de cuatro proyectos desde el mock, y la sección de charlas a dos columnas. Se confirma que respetó reglas globales y requerimientos específicos.
Para pulir la vista, se recomienda refinar textos, tamaños y espaciados con pequeños prompts hasta lograr el resultado esperado. Como siguiente paso, se puede pedir que edite lo creado para corregir issues y mejorar la estructura del proyecto.
¿Probaste este flujo? Comparte tus screenshots y los prompts que usaste en los comentarios.