CH 24 · Site pessoal brutalista: gerar HTML com um prompt
Objetivo do capítulo
Este capítulo não ensina a escrever HTML, CSS, JavaScript — o dsh vai te ajudar a escrevê-los. Tudo o que você precisa fazer é tornar claro "o que eu quero". Usamos um exemplo específico — um site pessoal em estilo brutalista — para percorrer o fluxo completo, do prompt até a geração da página, passando pelo ajuste fino até ficar satisfeito. Depois deste capítulo, você vai saber como pedir ao dsh para te ajudar a gerar uma página web estática do zero, e como iterar e ajustar fino depois de obter o resultado.
Passo 1: preparar um workspace
Escolha um diretório limpo no seu computador, por exemplo E:\software-workspace\DeepSeek harness demo\HTML, e defina-o como o workspace no dsh.
Por que um diretório separado? Porque os arquivos que o dsh gerar vão parar no workspace, misturados com outros projetos é fácil virar bagunça. Este capítulo vai gerar um index.html, então um diretório separado é mais fácil de gerenciar.
Passo 2: escrever o prompt
Este é o passo mais crítico do capítulo. Não diga apenas "me ajude a fazer um site pessoal" — isso provavelmente vai produzir uma página genérica com cara de template. Mas também não precisa escrever todos os detalhes de estilo — o dsh vai pesquisar como é o estilo brutalista por conta própria.
O prompt a seguir pode ser usado diretamente (aqui usamos o nome supermortal como exemplo, substitua pelo seu):
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.A ideia por trás deste prompt: deixe o dsh pesquisar o estilo por conta própria (ele vai buscar as características típicas do brutalismo), você define a estrutura do conteúdo e os requisitos técnicos (o que vai na página, qual tecnologia usar). Com isso, o dsh não precisa adivinhar, só produz.
Envie este prompt para a caixa de entrada do dsh e aguarde terminar. Ele vai pesquisar o estilo sozinho, escrever o arquivo sozinho, abrir o navegador para verificar sozinho, e reportar o resultado sozinho.
Passo 3: olhar o resultado, ajustar fino
Depois que o dsh terminar, há um index.html adicional no workspace. Clique duas vezes para abrir com um navegador e ver o resultado.
A primeira saída provavelmente não vai estar 100% satisfatória. Por exemplo, na primeira vez que rodei, o conteúdo estava grande demais, espremido contra as laterais:
Neste ponto, não precisa mudar o prompt e começar de novo; apenas diga ao dsh o que está errado. Meu prompt de ajuste fino foi:
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 substantialO dsh vai modificar diretamente o index.html, atualize o navegador depois da mudança para ver o efeito:
O que você aprendeu neste capítulo
Você passa se conseguir completar os itens abaixo:
- [ ] Escrever um prompt que faça o dsh gerar uma página web estática
- [ ] Saber que a descrição do estilo pode ser pesquisada pelo dsh, sem precisar escrever tudo
- [ ] Saber como ajustar fino depois de obter a página produzida pelo dsh (basta dizer o que está errado, sem precisar começar de novo com um novo prompt)