# Esboçador de Mockups HTML > Gere 2-3 variantes interativas de mockup HTML para comparar direções de design UI/UX antes de se comprometer com uma única abordagem. Explore rapidamente diferentes posturas visuais e colete feedback. - Canonical: https://nanoskill.ai/pt/skills/html-mockup-sketcher - Markdown: https://nanoskill.ai/pt/skills/html-mockup-sketcher.md - Author: NousResearch - Published: 2026-06-04T05:30:00.000Z - Updated: 2026-07-21T18:34:02.819Z - Language: pt - Source type: github - Popularity signal: 2137 ## Sources - https://github.com/NousResearch/hermes-agent ## Install ```shell npx skills add https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/sketch ``` ## About O Esboçador de Mockups HTML é uma habilidade poderosa projetada para ajudar usuários a explorar e comparar rapidamente direções de design UI/UX por meio de mockups HTML descartáveis. Em vez de se comprometer com um único design, esta ferramenta gera 2-3 variantes interativas, permitindo comparação lado a lado de diferentes posturas visuais. É ideal para exploração de design em estágio inicial, ajudando você a visualizar conceitos e coletar feedback antes de investimento significativo em desenvolvimento. Esta habilidade foca na criação de mockups HTML funcionais e interativos que vão além de imagens estáticas. Cada variante é um arquivo HTML autocontido com CSS inline, fontes do sistema e conteúdo realista. Crucialmente, os mockups incluem interatividade básica, como links clicáveis, estados de hover e pelo menos uma transição de estado, proporcionando uma sensação mais tangível da experiência do usuário. Ferramentas de navegador integradas permitem verificação visual, garantindo que os mockups estejam limpos e sem erros. Para facilitar a tomada de decisão informada, o Esboçador de Mockups HTML fornece uma comparação estruturada. Cada variante vem com um \`README.md\` detalhado descrevendo seus princípios de design, escolhas-chave, trade-offs e casos de uso mais adequados. Após a geração, uma tabela comparativa resume as diferenças em várias dimensões de design, acompanhada por uma análise opinada para ajudar você a selecionar um vencedor, combinar elementos ou iterar ainda mais. ## Key features - **Gerar Múltiplas Variantes de Design**: Produzir simultaneamente 2 a 3 variantes distintas de mockup HTML, cada uma explorando uma abordagem de design diferente (por exemplo, densidade, ênfase, estética, layout) para comparação lado a lado. - **Mockups HTML Interativos**: Criar arquivos HTML autocontidos com CSS inline, fontes do sistema e conteúdo falso realista. Os mockups são interativos, permitindo links clicáveis, hovers e pelo menos uma transição de estado. - **Verificação Visual com Ferramentas de Navegador**: Utilizar navegação integrada no navegador e ferramentas de visão para inspecionar e verificar visualmente cada mockup HTML, garantindo que os layouts estejam limpos, legíveis e livres de erros antes da apresentação. - **Documentação Estruturada de Variantes**: Cada variante de mockup HTML inclui um \`README.md\` detalhando sua abordagem de design, escolhas principais (layout, tipografia, cor, interação), trade-offs e casos de uso ideais para facilitar a comparação informada. - **Tabela de Análise Comparativa**: Apresentar todas as variantes de mockup HTML geradas em uma tabela comparativa, destacando diferenças em dimensões-chave como densidade, visibilidade da ação principal, escaneabilidade e sensação geral, juntamente com um resumo opinativo. ## Use cases - **Explorar Direções de Design UI/UX**: Gerar e comparar rapidamente várias variantes de mockup HTML para explorar diferentes ideias de design de interface e experiência do usuário antes de investir tempo significativo de desenvolvimento. - **Coletar Feedback sobre Conceitos Visuais**: Apresentar mockups HTML interativos a partes interessadas ou usuários para coletar feedback antecipado sobre várias direções visuais, ajudando a refinar conceitos e tomar decisões de design informadas. - **Prototipagem Rápida para Novos Recursos**: Criar mockups HTML descartáveis para prototipar rapidamente novos recursos ou telas, focando na funcionalidade principal e no fluxo visual em vez de código pronto para produção. ## Result preview Veja HTMLs reais sobre sites de hotéis boutique gerados por esta Habilidade de Agente. ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-1.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-2.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-3.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-4.jpg) ## Result walkthrough ### Etapa 1：Instalar Adicione a habilidade ao seu agente. ![a simple demonstration of the first step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-1.jpg) ### Etapa 2：Descreva seu site Explique as informações detalhadas (por exemplo, estilo, tipo) do site que deseja criar. ![a simple demonstration of the second step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-2.jpg) ### Etapa 3：Revisar Resultado Revise e compare os mockups HTML gerados. ![a simple demonstration of the third step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-3.jpg) ## Skill definition # Esboço Use esta habilidade quando o usuário quiser **ver uma direção de design antes de se comprometer** com uma — explorando uma ideia de UI/UX como maquetes HTML descartáveis. O objetivo é gerar 2-3 variantes interativas para que o usuário possa comparar direções visuais lado a lado, não produzir código entregável. Carregue esta habilidade quando o usuário disser coisas como "esboce esta tela", "mostre-me como X poderia parecer", "compare layout A vs B", "dê-me 2-3 opiniões sobre esta UI", "deixe-me ver algumas variantes", "faça uma maquete disto antes de eu construir". ## Quando NÃO usar - O usuário quer um componente de produção — use `claude-design` ou construa-o adequadamente - O usuário quer um artefato HTML refinado de uso único (página de destino, apresentação) — `claude-design` - O usuário quer um diagrama — `excalidraw`, `architecture-diagram` - O design já está definido — apenas construa-o ## Se o usuário tiver o sistema GSD completo instalado Se `gsd-sketch` aparecer como uma habilidade irmã (instalado via `npx get-shit-done-cc --hermes`), prefira **`gsd-sketch`** para o fluxo de trabalho completo: pasta persistente `.planning/sketches/` com MANIFEST, análise de modo frontier, auditorias de consistência entre esboços passados e integração com o resto do GSD. Esta habilidade é a versão leve e autônoma — esboços únicos sem a máquina de estado. ## Método principal ``` entrada → variantes → comparação frente a frente → escolher vencedor (ou iterar) ``` ### 1. Entrada (pule se o usuário já forneceu o suficiente) Antes de gerar variantes, obtenha três coisas — uma pergunta de cada vez, não todas de uma vez: 1. **Sensação.** "Como isto deve parecer? Adjetivos, emoções, uma vibração." — *"calmo, editorial, como o Linear"* diz mais do que *"minimalista"*. 2. **Referências.** "Quais aplicativos, sites ou produtos capturam a sensação que você está imaginando?" — referências reais superam descrições abstratas. 3. **Ação central.** "Qual é a coisa mais importante que um usuário faz nesta tela?" — as variantes devem todas servir bem a isto; se não, são apenas decoração. Reflita brevemente sobre cada resposta antes da próxima pergunta. Se o usuário já forneceu todos os três de antemão, pule diretamente para as variantes. ### 2. Variantes (2-3, nunca 1, raramente 4+) Produza **2-3 variantes** de uma só vez. Cada variante é um arquivo HTML completo e autônomo. Não descreva variantes — construa-as. O objetivo é a comparação. Cada variante deve adotar uma **postura de design diferente**, não valores de pixels diferentes. Três bons eixos de variação: - **Densidade:** compacta / arejada / ultra-densa (escolha dois polos contrastantes) - **Ênfase:** conteúdo primeiro / ação primeiro / ferramenta primeiro - **Estética:** editorial / utilitária / lúdica - **Layout:** coluna única / barra lateral / painel dividido - **Fundação:** baseado em cartões / conteúdo simples / estilo documento Escolha um eixo e destaque as diferenças a partir dele. Duas variantes que diferem apenas na cor de destaque são esforço desperdiçado — o usuário não consegue distingui-las. **Nomeação de variantes:** descreva a postura, não o número. ``` esbocos/ ├── 001-calm-editorial/ │ ├── index.html │ └── README.md ├── 001-utilitarian-dense/ │ ├── index.html │ └── README.md └── 001-playful-split/ ├── index.html └── README.md ``` ### 3. Torne-os HTML reais Cada variante é um **único arquivo HTML autocontido**: - ` ``` ### 4. README da variante O `README.md` de cada variante responde: ```markdown ## Variante: {stance name} ### Postura de design Uma frase sobre o princípio que impulsiona esta variante. ### Decisões-chave - Layout: ... - Tipografia: ... - Cor: ... - Interação: ... ### Compensações - Pontos fortes: ... - Pontos fracos: ... ### Mais adequado para - O tipo de usuário ou caso de uso que esta variante realmente atende ``` ### 5. Comparação frente a frente Após todas as variantes serem construídas, apresente-as como uma comparação. Não apenas liste — **opine**: ```markdown ## Três visões sobre a tela inicial | Dimensão | Calmo editorial | Utilitário denso | Lúdico dividido | |-----------|----------------|-------------------|---------------| | Densidade | Baixa | Alta | Média | | Visibilidade da ação principal | Baixa | Alta | Média | | Legibilidade de varredura | Alta | Média | Baixa | | Sensação | Calmo, confiável | Nítido, como ferramenta | Convidativo, energético | **Minha opinião:** Utilitário denso para usuários avançados, calmo editorial para públicos focados em conteúdo. Lúdico dividido é o mais fraco — tenta fazer ambos e não se compromete com nenhum. ``` Deixe o usuário escolher um vencedor, ou combinar dois em um híbrido, ou pedir outra rodada. ## Tematização (quando o projeto tem uma identidade visual) Se o usuário tiver um tema existente (cores, fontes, tokens), coloque os tokens compartilhados em `esbocos/temas/tokens.css` e use `@import` em cada variante. Mantenha os tokens mínimos: ```css /* esbocos/temas/tokens.css */ :root { --color-bg: #fafafa; --color-fg: #1a1a1a; --color-accent: #0066ff; --color-muted: #666; --radius: 8px; --font-display: "Inter", sans-serif; --font-body: -apple-system, BlinkMacSystemFont, sans-serif; } ``` Não coloque tokens demais em um esboço descartável — três cores e uma fonte geralmente são suficientes. ## Barra de interatividade Um esboço é interativo o suficiente quando o usuário pode: 1. **Clicar em uma ação principal** e algo visível acontecer (mudança de estado, modal, aviso, finta de navegação) 2. **Ver uma transição de estado significativa** (filtrar uma lista, alternar um modo, abrir/fechar um painel) 3. **Passar o mouse sobre affordances reconhecíveis** (botões, linhas, abas) Mais do que isso é excesso de engenharia para algo descartável. Menos do que isso é uma captura de tela. ## Modo Frontier (escolhendo o que esboçar em seguida) Se já existirem esboços e o usuário disser "o que devo esboçar em seguida?": - **Lacunas de consistência** — duas variantes vencedoras de esboços diferentes fizeram escolhas independentes que ainda não foram compostas juntas - **Telas não esboçadas** — referenciadas, mas nunca exploradas - **Cobertura de estados** — o caminho feliz foi esboçado, mas não os estados vazio / carregando / erro / 1000 itens - **Lacunas responsivas** — validado em um viewport; será que se mantém em mobile / ultrawide? - **Padrões de interação** — existem layouts estáticos; transições, arrastar, comportamento de rolagem não existem Proponha 2-4 candidatos com nome. Deixe o usuário escolher. ## Saída - Crie `esbocos/` (ou `.planning/sketches/` se o usuário estiver usando convenções GSD) na raiz do repositório - Um subdiretório por variante: `NNN-nome-da-postura/index.html` + `README.md` - Diga ao usuário como abri-los: `open esbocos/001-calm-editorial/index.html` no macOS, `xdg-open` no Linux, `start` no Windows - Mantenha as variantes descartáveis — um esboço que você sentiu necessidade de preservar deve ser promovido ao código real do projeto, não curado como um recurso **Sequência típica de ferramentas para uma variante:** ``` terminal("mkdir -p esbocos/001-calm-editorial") write_file("esbocos/001-calm-editorial/index.html", "...") write_file("esbocos/001-calm-editorial/README.md", "## Variante: Calmo editorial\n...") browser_navigate(url="file://$(pwd)/esbocos/001-calm-editorial/index.html") browser_vision(question="Como isso parece? Algum problema óbvio de layout?") ``` Repita para cada variante e então apresente a tabela de comparação. ## Atribuição Adaptado do fluxo de trabalho `/gsd-sketch` do projeto GSD (Get Shit Done) — MIT © 2025 Lex Christopherson ([gsd-build/get-shit-done](https://github.com/gsd-build/get-shit-done)). O sistema GSD completo inclui estado persistente de esboço, referências de padrões de tema/variante e fluxos de trabalho de auditoria de consistência; instale com `npx get-shit-done-cc --hermes --global`. ## FAQ ### O que é um mockup HTML? Um mockup HTML é uma página web interativa e descartável, construída com HTML e estilização básica (geralmente CSS inline), para visualizar e comparar rapidamente diferentes ideias de design UI/UX. Não é destinado à produção, mas sim à exploração de design em fase inicial. ### Quantas variantes de mockup HTML essa habilidade gera? Essa habilidade normalmente gera de 2 a 3 variantes de mockup HTML interativos por vez. O objetivo é fornecer abordagens de design contrastantes para comparação, não uma lista exaustiva de pequenas variações. ### Posso usar essa habilidade para criar código pronto para produção? Não, essa habilidade é projetada especificamente para mockups HTML 'descartáveis' para explorar direções de design. Para componentes prontos para produção ou artefatos refinados, você deve usar outras ferramentas ou habilidades como \`claude-design\`. ### Que tipo de interatividade os mockups HTML possuem? Os mockups HTML gerados são interativos, ou seja, links são clicáveis, hovers são reais e há pelo menos uma transição de estado (por exemplo, abrir/fechar um painel, filtrar uma lista). Isso permite uma sensação mais realista do que imagens estáticas. ### Como essa habilidade me ajuda a comparar designs diferentes? Após gerar os mockups HTML, a habilidade fornece uma tabela comparativa que destaca as principais diferenças em várias dimensões de design (por exemplo, densidade, layout, estética). Ela também oferece um resumo opinativo para orientar sua tomada de decisão. ### Quais informações preciso fornecer para gerar um mockup HTML? Para gerar mockups HTML eficazes, você será perguntado sobre a 'sensação' desejada (adjetivos, vibe), aplicativos/sites de referência que capturam essa sensação e a 'ação principal' mais importante que um usuário realiza na tela.