CH 24 · Sitio personal brutalista: produce HTML desde un único prompt
Objetivo del capítulo
Este capítulo no te enseña a escribir HTML, CSS ni JavaScript — dsh te ayudará a escribirlos. Lo único que tienes que hacer es dejar claro "qué quiero". Usamos un ejemplo concreto — un sitio personal de estilo brutalista — para recorrer el flujo completo: desde el prompt, hasta la generación de la página, hasta el ajuste fino hasta quedar conforme. Tras este capítulo, sabrás cómo hacer que dsh te ayude a generar una página web estática desde cero y cómo iterar y ajustar después de obtener el resultado.
Paso 1: Prepara un workspace
Elige un directorio limpio en tu equipo, por ejemplo E:\software-workspace\DeepSeek harness demo\HTML, y configúralo como workspace en dsh.
¿Por qué un directorio aparte? Porque los archivos que dsh genere caerán en el workspace; mezclados con otros proyectos es fácil que se vuelva un lío. Este capítulo generará un index.html, así que un directorio aparte es más fácil de gestionar.
Paso 2: Escribe el prompt
Este es el paso más crítico del capítulo. No te limites a decir "ayúdame a hacer un sitio personal" — eso probablemente produzca una página genérica con sabor a plantilla. Pero tampoco necesitas escribir todos los detalles de estilo — dsh irá a buscar por su cuenta cómo es el estilo brutalista.
El siguiente prompt se puede usar directamente (aquí usamos el nombre supermortal como ejemplo, sustitúyelo por el tuyo):
Help me make a Brutalism-style personal site, single-file HTML (CSS and JS inlined in index.html).
First go learn about the typical features and visual style of Brutalist web design, then do it in that style.
Page content:
- Top: name supermortal + a one-sentence self-introduction
- Middle: three sections — About me, Project list, Contact
- Project list has at least 3 projects, each with a name, one-sentence description, a link (use # as placeholder)
- Bottom: copyright + a "back to top" button
Technical requirements:
- Pure HTML + CSS + vanilla JS, no frameworks
- Responsive, also viewable on mobile
- All text content uses placeholder text, I'll modify later
- Write the file directly to the current workspace, filename index.html
After writing, open it in the browser to verify the page renders normally, then tell me where the file is.La idea detrás de este prompt: deja que dsh busque el estilo por su cuenta (buscará las características típicas del brutalismo), tú defines la estructura de contenido y los requisitos técnicos (qué va en la página, qué tecnología usar). Con esto, dsh no necesita adivinar, solo produce.
Envía este prompt a la caja de entrada de dsh y espera a que termine. Buscará el estilo por sí mismo, escribirá el archivo por sí mismo, abrirá el navegador para verificar por sí mismo y reportará el resultado por sí mismo.
Paso 3: Mira el resultado y ajusta el detalle
Cuando dsh termine, hay un index.html adicional en el workspace. Haz doble clic para abrirlo con un navegador y mira el resultado.
Es probable que la primera salida no sea 100 % satisfactoria. Por ejemplo, la primera vez que lo ejecuté, el contenido era demasiado grande y demasiado pegado a los lados:
En este punto no hace falta cambiar el prompt y volver a empezar; basta con decirle a dsh qué falla. Mi prompt de ajuste fue:
The content is too large, can be slightly smaller, and move the content slightly toward the center, don't crowd against the sides, the page should be more substantialdsh modificará directamente index.html; tras el cambio, refresca el navegador para ver el efecto:
Lo que aprendiste en este capítulo
Apruebas si puedes completar los puntos siguientes:
- [ ] Escribir un prompt que consiga que dsh genere una página web estática
- [ ] Saber que la descripción de estilo la puede buscar dsh, no hace falta escribirla entera
- [ ] Saber cómo ajustar después de obtener la página producida por dsh (solo di qué falla, no hace falta empezar de nuevo con otro prompt)