Modelo de Wireframe Esboçado
Wireframes de baixa fidelidade desenhados à mão que parecem explicitamente rascunhos — para convidar feedback sobre layout, sinalizar 'não é para entrega' ou documentar IA sem se comprometer com o design visual.
⚠️ ESCOLHA O ESQUELETO PRIMEIRO
O maior modo de falha deste skill: o modelo herda os traços (tremedeira, tracejado, escrita manual) mas escreve a estrutura de documento errada — por exemplo, produzir 3 telas de aplicativo isoladas quando um documento de fluxo multi-tela era necessário, ou encher um sitemap com figuras editoriais.
Antes de escrever uma única linha, declare em sua resposta qual esqueleto você está usando e por quê. Combine as palavras do usuário com uma das opções:
| O usuário diz | Esqueleto | Por quê |
|---|---|---|
| jornal / revista / landing / site oficial / folheto / página única / one-pager / editorial | A. Página Única Editorial | Uma página longa, seções empilhadas, denso em conteúdo |
| aplicativo / mobile / celular / app desktop / fluxo SaaS / caminho do usuário / fluxo de cadastro / fluxo de checkout / multi-tela / multi-página / registro / login / onboarding / configurações / aba / fluxo de formulário | B. Fluxo Multi-Tela de Aplicativo | Múltiplas telas, navegação, estados, gatilhos |
| arquitetura de informação / IA / sitemap / mapa do site / fluxograma / grafo de relacionamento / grafo de nós / fluxo de dados / máquina de estados / matriz de permissões | C. Diagrama de IA / Sitemap | Nós + arestas, sem telas reais |
| não está claro / o usuário não disse / tanto faz | pergunte ao usuário antes de escolher — não use o padrão | — |
Se o usuário deu um tópico mas nenhuma dica de esqueleto, pergunte qual deles. Escolher errado = fazer o trabalho duas vezes.
Esqueleto A — Página Única Editorial
foolscap-wireframe.html é a referência para este esqueleto. Use quando o artefato for uma única página rolável (jornal, revista, wireframe de landing page, folheto, ilustração de PRD de página única).
Seções necessárias (em ordem, pode-se pular 1–2, mas mantenha o ritmo):
- Cabeçalho / banner — título, edição/versão, data
- Destaque principal — um grande bloco de abertura com título + introdução + placeholder de ilustração desenhada à mão
- 3–5 seções de conteúdo — cada uma com seu próprio h2, mistura de figuras de texto e ilustrações esboçadas
- Barra lateral / resumo / bloco de lista — itens curtos, tipo denso, quebra o ritmo
- CTA / cadastro / rodapé
Densidade: busque o conteúdo por polegada quadrada da referência foolscap — wireframes de página única esparsos parecem um esboço, não um rascunho.
Esqueleto B — Fluxo Multi-Tela de Aplicativo ⛔ MÍNIMOS OBRIGATÓRIOS
foolscap-wireframe.html não é a referência para este esqueleto — apenas tome emprestado seus filtros SVG, pilha de fontes e estética de célula tracejada. A estrutura do documento deve ser montada a partir da lista de verificação abaixo.
Seções necessárias (TODAS devem estar presentes — a página está incompleta caso contrário)
- Capa — nome do aplicativo + versão + função/persona + escopo em 1 linha ('MVP / beta / v0.3 / apenas controle de despesas, sem investimentos')
- Sitemap / diagrama de navegação — árvore visual ou grade mostrando todas as telas e seus relacionamentos. Não é uma lista — é um diagrama real com caixas + linhas.
- 6–8+ telas principais como blocos
figure. Para um aplicativo de controle de despesas, no mínimo: inicial/boas-vindas → início (visão geral) → adicionar entrada (valor → categoria → nota → salvar) → detalhe da conta → estatísticas mensais → gerenciamento de categorias → configurações de orçamento → perfil/configurações. 3 telas não é um documento de wireframe, é uma amostra de esboço. - Pelo menos 1 diagrama de fluxo com setas mostrando o caminho do usuário entre as telas (ex.: 'início → tocar em '+' → adicionar entrada → salvar → toast → voltar ao início'). Não coloque apenas uma única
↓entre as telas — escreva o gatilho na seta. - Pelo menos 1 variante de estado para cada tela que tenha estado: vazio / carregando / erro / sucesso. Escolha as telas onde isso importa (página de lista → estado vazio; formulário → estado de erro).
- Material final — perguntas em aberto / lista de TBD / registro de versão / próximas decisões a serem tomadas
Requisitos por tela
Todo bloco de tela deve ter:
- Número da figura —
Fig. 02(use a forma localizada ao escrever em chinês), sequencial, referenciado a partir dos diagramas de fluxo - Responsabilidade em uma linha — 'adicionar entrada · acessado a partir do botão '+' no início; mostra um toast ao salvar e retorna ao início'
- Anotações de gatilho — quais pontos de entrada levam aqui, quais saídas vão para onde
- Marginalia — pelo menos 1 nota manuscrita lateral por tela não trivial (restrição, caso de borda, 'TBD', pergunta em aberto)
Layout
- Pilha vertical de telas com seta explícita + rótulo do gatilho entre cada uma (não uma
↓passiva) - Ou faixa de fluxo horizontal com telas em ordem da esquerda para a direita — funciona bem para fluxos lineares como onboarding/checkout
- Não coloque telas em uma grade sem indicação de fluxo — isso é uma galeria de telas, não um documento de fluxo
Linhas vermelhas de densidade de conteúdo
- < 5 telas → rejeite-se, peça ao usuário mais fluxos ou reduza o escopo honestamente
- Sem sitemap → rejeite-se, o documento é ilegível sem ele
- Sem variantes de estado → pelo menos marque os pontos vazio/erro mesmo que não os desenhe ('estado vazio: ver Fig. 04a / TBD')
- Nenhuma marginalia em lugar algum → você copiou o traço mas não a linguagem; volte e anote
Esqueleto C — Diagrama de IA / Sitemap
Documento puramente estrutural — sem telas reais, apenas diagramas de nós e arestas da arquitetura da informação, navegação, fluxo de dados ou máquinas de estados.
Seções necessárias:
- Título + legenda — o que as caixas significam, o que os tipos de linha significam (sólida = navegação direta, tracejada = condicional, dupla = vínculo de dados)
- Diagrama principal — a árvore/grafo em si, central, grande
- Mini-especificação por nó — para nós não óbvios, 1–3 linhas do que vive ali
- Matriz de permissão / função se aplicável
- Perguntas em aberto no final
Tremedeira e escrita manual ainda se aplicam. Layout de caixa e linha, bastante espaço em branco, cor de destaque única para o 'caminho atual' / destaque 'padrão'.
Linguagem de Marginalia (esqueletos B e C devem usar; A opcional)
Marginalia é o que separa um wireframe de baixa fidelidade real de um 'rascunho de alta fidelidade fingindo ser baixa fidelidade'. Use estes movimentos:
| Marca | Quando | Como |
|---|---|---|
| Nota lateral | Restrição ou justificativa | <aside class="margin"> em fonte manuscrita, cor de destaque, puxada para a margem |
| Círculo + seta | Chamando a atenção para um elemento específico | SVG <circle> + <path> com filter:url(#wobble), traço de destaque |
| TBD / ? | Decisão não resolvida | 'TBD' manuscrito em cor de destaque, às vezes dentro de um círculo tremido |
| Riscado | Ideia antiga mantida para contexto | text-decoration:line-through + leve rotação transform:rotate(-1deg) |
| Sublinhado + ! | Importante / deve ser discutido | Sublinhado ondulado SVG abaixo do termo |
| Chamada numerada | Referência a uma tabela de legenda abaixo | Dígito circulado em cor de destaque, com <ol> legenda no final da seção |
Cor da tinta da marginalia = a única cor de destaque (o template usa azul brilhante). A tinta do corpo permanece monocromática.
Marcas Desenhadas à Mão
Wireframes de baixa fidelidade dependem fortemente de marcas desenhadas no lugar, não de ícones ou fotos reais. Construa uma pequena biblioteca no topo do arquivo:
- Caixa com X — placeholder de imagem:
<rect>+ duas<line>, tudo sobfilter:url(#wobble) - Texto com linha ondulada — placeholder de cópia: 3–5
<path>de rabiscos horizontais em larguras decrescentes - Ícones de bastão — ícones de navegação como caminhos SVG de 8–16 px (casa, mais, gráfico, engrenagem), traço de 1.4 px + tremedeira
- Spinner de carregamento — círculo tremido com uma abertura, sem animação necessária para entrega estática
- Círculo de avatar — círculo + iniciais em fonte manuscrita
- Ossos de gráfico — barras / pontos / linhas tremidos, sem rótulos de eixo além do número da figura
Não importe uma fonte de ícones, lucide, heroicons, etc. Ícones reais entram em conflito com a tremedeira e quebram instantaneamente o registro de baixa fidelidade.
Leitura Obrigatória
Leia este SKILL.md primeiro, do início ao fim. Não abra foolscap-wireframe.html até que você tenha escolhido um esqueleto.
Então:
- Esqueleto A → leia foolscap completamente, tanto para estrutura quanto para vocabulário de traço
- Esqueleto B → abra foolscap APENAS para copiar: os valores de turbulência SVG do
<filter>, o padrão de fundo pontilhado, os caminhos de divisória tracejada/ondulada, a pilha de fontes manuscritas. Não copie a estrutura de cabeçalho/destaque/textos longos — esqueleto errado. - Esqueleto C → igual ao B, extração apenas do traço
Nunca copie o texto editorial de placeholder, legendas de figuras ou nomes de classes do foolscap integralmente.
Estratégia de Design
Trave o nível de fidelidade no topo:
- estrutura pura (apenas caixas + rótulos, sem tipo real além dos nomes de campo) → tremedeira máxima, conteúdo mais esparso
- estrutura + conteúdo de amostra (títulos de placeholder, rótulos reais, números falsos como ¥3.280) → tremedeira moderada, mais densidade
- estrutura + anotações (setas, marginalia, 'TBD', rótulos de gatilho) → tremedeira + marginalia + destaques em cor de acento
Escolha um e mantenha a linha em todo o documento — misturar fidelidades parece inconsistente. O Esqueleto B quase sempre quer o nível 3.
Viés de Layout
Prefira:
- fundo de papel branco puro — sem fingir ser bloco amarelo
- tinta monocromática (preto + 2–3 tons de cinza), no máximo uma cor de destaque (azul brilhante ou vermelho) para marginalia e destaque 'atual/padrão'
- uma fonte CJK manuscrita (Ma Shan Zheng / Long Cang) + uma fonte latina manuscrita (Caveat / Kalam)
- pilha mono (maiúsculas, espaçamento apertado) para 'rótulos' / 'números de figura' / 'chamadas'
- divisórias tracejadas ou onduladas entre seções — nunca regras sólidas e limpas
- intensidade de tremedeira consistente — não aumente e diminua por elemento; um filtro global + talvez um 'mais forte' para formas pequenas
- figuras numeradas ('Fig. 01'; use a forma localizada ao escrever em chinês) para tudo que for referenciado de outra parte do documento
- margens laterais generosas para dar espaço para marginalia
Evite:
- ícones de produção reais ou ilustrações SVG polidas (eles entram em conflito com o quadro de esboço)
- fotos coloridas (use placeholders de esboço — caixas com X ou texto com linha ondulada)
- emoji
- misturar wireframe com componentes de alta fidelidade na mesma página
- forçar o filtro de tremedeira em cada elemento até a página se tornar ruidosa — tremedeira é um tempero, não uma lavagem
- uma única
↓usada como anotação de fluxo — escreva o gatilho na seta - entregar apenas 3 telas isoladas em um cenário de aplicativo — isso é uma amostra de tela, não um documento de wireframe
Anti-padrões (autoverificação antes de entregar)
- Cenário de aplicativo mas sem sitemap → rejeite, adicione um
- Cenário de aplicativo mas < 5 telas → rejeite, expanda ou reduza o escopo honestamente
- Telas conectadas apenas por
↓sem rótulo de gatilho → anote cada seta - Nenhuma marginalia / TBD / marcas circuladas em lugar algum → você herdou os traços mas não a linguagem; volte e anote
- Usou lucide/heroicons/emoji/fontes de ícones reais → substitua por caminhos SVG desenhados à mão
- Intensidade de tremedeira varia → unifique para 1–2 IDs de filtro
- Números de figura ausentes embora referenciados a partir de diagramas de fluxo → adicione numeração
- Cópia muito 'finalizada' (texto de marketing completo / redação de produto final) → volte para placeholders ('descrição de uma linha do recurso A')
- Usou um fundo de bloco amarelo brilhante → volte para papel branco simples
- Mais de 1 cor de destaque → corte
Plataforma / Tamanho
Renderiza como uma página web, normalmente capturada como um screenshot longo para incorporação em PRDs / Notion / Confluence / documentos Lark. Não foi projetado para interação em tempo real — é uma entrega estática que parece desenhada à mão.
Para o Esqueleto B, largura de página de 720–960 px funciona bem (corresponde à largura de leitura em ferramentas de documento). Para o Esqueleto A, 960–1100 px (formato editorial). Para o Esqueleto C, frequentemente mais largo (1200+) para caber sitemaps.