Crear una homepage completa con un único prompt es posible cuando aprovechas el contexto de reglas previas en Cascade dentro de Windsurf. Aquí verás cómo traducir un wireframe a texto, generar la página en Next.js con TypeScript y Tailwind, evitar nuevas dependencias y validar el resultado en el navegador con rapidez y control.
¿Cómo generar la homepage con un único prompt en Cascade?
Para empezar, se verifican las reglas activas en Cascade y se pega un prompt detallado que traduce el wireframe a texto. El sistema confirma que entiende el objetivo y modifica el archivo existente respetando el contexto de reglas iniciales. Así, no repites convenciones ni estilos y te enfocas en la estructura.
Verificar reglas activas en Cascade.
Pegar un prompt que describe secciones y requisitos.
Ejecutar y aceptar los cambios propuestos.
¿Qué reglas y herramientas se respetan?
El proceso conserva las tecnologías definidas: se mantiene TypeScript, Tailwind y Next.js. Además, no agrega dependencias nuevas y cumple con que el sitio sea responsivo. Aunque estos puntos no estaban todos en el prompt, sí estaban en las reglas generales cargadas previamente.
¿Cómo se registraron los cambios en el archivo?
Tras la generación, se reporta un archivo modificado con 239 líneas nuevas y 2 líneas eliminadas en la homepage. También se entrega un sumario técnico por secciones: header, about me, blog y footer, indicando que se siguieron las indicaciones sobre estructura y estilo.
¿Qué estructura tiene el homepage y cómo quedó implementada?
La página se construye a partir de una descripción precisa de secciones. Se refleja fielmente el wireframe: navegación clara, bloque de presentación personal y blog con un featured post, más un footer con enlaces de texto para redes sociales.
¿Cómo se modelaron los posts con un mock?
Se generó un mock de posts para poblar el listado del blog. Incluye: id, title, summary, slug y un booleano feature que marca el post destacado y más grande en la homepage. Luego, una función mapea los posts para renderizarlos.
// Estructura del mock de postsconst posts =[{ id:'1', title:'...', summary:'...', slug:'...', feature:true},{ id:'2', title:'...', summary:'...', slug:'...', feature:false},// ...];
Se añadieron comentarios en el código para ubicar cada sección, incluido el menú mobile. Para mejorar la lectura de clases de Tailwind, se sugiere usar la extensión Tailwind Fold, que oculta clases largas y permite expandirlas con un clic.
¿Cómo se estructuraron header, about me, blog y footer?
Header: menú de navegación y versión mobile.
About me: imagen, biografía y call to action hacia la sección.
Blog: un featured post y un listado de tres posts adicionales tomados del mock.
Footer: enlaces de texto a TikTok, Twitter/X, LinkedIn y GitHub, sin íconos para evitar librerías extra.
¿Cómo probar en el navegador y qué observar?
Para validar el resultado se ejecuta el servidor local y se refresca el navegador. Verás que la composición respeta el diseño planteado con solo el prompt: navegación, enlaces, bloque de about me, featured post y listado de posts, además del footer con enlaces de texto.
npm run dev
Confirmar que la barra de navegación funciona.
Verificar el about me con biografía y botón.
Revisar el featured post y los otros tres posts.
Validar que el footer no usa íconos, solo texto.
Comprobar que el layout es responsivo.
¿Cómo iterar y qué mejoras se anticipan?
Con la base lista, puedes iterar con prompts breves para ajustar contenido y layout sin romper la estructura. Más adelante, tiene sentido refactorizar header y footer como componentes y llevarlos a un layout de Next.js.
¿Ya generaste tu homepage con un prompt distinto? Comparte tu versión y el prompt que usaste en los comentarios.
