Crear una página About con Cascade dentro de Windsurf es tan simple como escribir un prompt bien estructurado y dejar que la herramienta analice, planifique y construya la sección completa. Si estás armando tu portafolio de desarrollador y ya tienes homepage y blog, esta es la pieza que te falta para cerrar el proyecto.

Qué construimos en la página About

La meta es sencilla: contar la historia del desarrollador en una página que reutilice el mismo header y footer del homepage. Nada de reinventar la navegación, solo mantener coherencia visual con lo que ya existe.

El prompt que preparamos le pide a Cascade una sección de About me en un contenedor destacado a dos columnas en desktop. Del lado izquierdo va la imagen de perfil con esquinas redondeadas, usando un placeholder y un alt descriptivo. ¿Por qué ese detalle? Porque un texto alternativo bien escrito mejora el SEO de la página.

A la derecha colocamos el título de About me, tres o cuatro líneas de presentación y un botón de link para contactar. Simple, directo y funcional.

¿Para qué sirve el atributo alt en una imagen? Es el texto alternativo que describe la imagen para motores de búsqueda y lectores de pantalla. Un alt descriptivo mejora el SEO y la accesibilidad de tu página.

Cómo estructurar el prompt para Cascade

Un buen prompt no solo describe lo que quieres ver, también incluye los detalles de implementación. Aquí está la diferencia entre un resultado aproximado y uno que respeta tu intención.

En el prompt pedimos varias secciones concretas:

• Una sección de projects con una grilla de cuatro tarjetas.
• Una sección de charlas o talks con su propio contenido.
• Detalles de implementación: usar arrays en un mock parecido al que ya habíamos hecho con los blog posts, pero ahora para proyectos y charlas.

La clave está en pedirle que mapee esos arrays para renderizarlos, que el diseño sea responsivo y que mantenga una jerarquía visual simple con titulares por sección y espaciado consistente entre bloques [01:04].

Cuando le das a send, Cascade hace tres cosas en orden: analiza tu prompt, revisa su contexto y arma un listado de tareas que él mismo se impone. Luego ejecuta ese listado uno a uno siguiendo todo el contexto que mencionaste [01:47].

¿Qué es un mock en desarrollo web? Es un conjunto de datos de prueba, normalmente en arrays, que simula información real. Sirve para renderizar contenido antes de conectar una base de datos verdadera.

Cómo revisar y aceptar los cambios generados

Al terminar, Cascade entrega un sumario donde explica qué realizó respondiendo a cada ítem que listaste en el prompt. En este caso generó un archivo About con 298 líneas nuevas y una línea reemplazada [02:13].

El sumario detalla la sección de proyectos, la de charlas, la implementación técnica y te permite revisar cómo quedó el archivo. Casi todas las líneas son nuevas, excepto donde se define la función, porque la estructura inicial solo contenía el título de la sección [02:40].

Como la base estaba casi vacía, puedes aceptar los cambios con confianza y pasar directo al navegador para verlo funcionando.

Qué resultado ves en el navegador

Al revisar en el navegador aparece todo lo pedido:

• La sección principal del About con imagen, perfil y biografía del desarrollador.
• La sección de proyectos con cuatro tarjetas que salen del mock creado.
• La sección de charlas ubicada a dos columnas, tal como lo indicaba el prompt.

Lo interesante aquí es que Cascade respetó tanto las reglas que seteaste al inicio del proyecto como los requerimientos específicos de cada prompt [03:09]. Esa consistencia es lo que hace útil trabajar con reglas base desde el arranque.

Cómo refinar la página con prompts pequeños

Una vez construida la estructura, el trabajo fino viene con iteraciones cortas. Prueba a refinar textos, tamaños y espaciados con pequeños prompts hasta que la vista quede como la imaginaste [03:24].

Esta es una habilidad que vale la pena practicar: en lugar de pedir todo de nuevo, haces ajustes puntuales. Cambiar un espaciado, mover un titular o editar el texto de presentación. Así mantienes el control sobre el resultado sin rehacer la página completa.

Con esto ya tienes tu proyecto cerrado: homepage, blog y la sección About trabajando juntas. El siguiente paso natural es pedirle a Cascade que edite lo que creamos, corrija issues y mejore la estructura general.

¿Qué prompt usaste tú para tu página About? Comparte tus screenshots y los prompts que creaste en los comentarios.