O que imagine-it faz?
Transforme uma especificação em um mockup especulativo: um pequeno conjunto de arquivos .html simples que mostram como uma funcionalidade poderia se parecer dentro deste produto. É uma peça de conversa para humanos reagirem, não código de produção — portanto, velocidade e verossimilhança superam completude.
Entrada (todos opcionais, em qualquer ordem): URL de issue/PR ou #123, chave ou URL do Jira, caminho de arquivo, texto livre, além de flags:
--wireframe— força esquema de cinza (wireframe) em vez da aparência do repositório.--out <dir>— diretório raiz de saída (padrão.imagine-it/na raiz do repositório). A saída sempre vai para<out>/<slug>/.--screens <n>— limita ou força o número de arquivos de tela.--screenshot[=png|jpeg]— também captura imagens das telas (PNG padrão).--states— com screenshot, captura todos os estados, não apenas o inicial.--viewport <LxA>— tamanho da captura (padrão 1440x900; 390x844 para produtos mobile-first).--notes— captura com a sobreposição de notas da especificação ativada (padrão desligado).
Sem nenhuma entrada, a especificação é a conversa atual.
Fluxo de trabalho
Execute as etapas em ordem. Cada uma produz um artefato que a próxima consome; mantenha-os em suas notas de trabalho — apenas o HTML é gravado em disco.
1. Digestão da especificação
Busque e destile a especificação em um resumo da especificação: título, slug, objetivo, atores, pontos de entrada, fluxo principal, entidades com valores de amostra realistas, estados, critérios de aceitação numerados AC-1…, fora de escopo, suposições, perguntas em aberto.
Cada lacuna que você preencher se torna uma suposição; decisões que apenas um humano pode tomar se tornam perguntas em aberto. Continue em frente — pergunte ao usuário apenas quando não existir especificação alguma em lugar nenhum (nenhum argumento, nada na conversa).
Concluído quando: todos os campos do resumo estão preenchidos (ou explicitamente "nenhum") e cada AC está numerado. Detalhes, busca por fonte e um exemplo: references/context-intake.md.
2. Briefing de design
Varra o repositório (somente leitura) e escreva um briefing de design: modo (hi-fi ou wireframe), stack, um bloco de tokens :root pronto para colar usando os nomes de variáveis canônicos, modo escuro, shell da aplicação, notas sobre componentes, 1–3 telas de referência mais próximas da funcionalidade, estilo de ícones, localidade da UI e os arquivos fonte de onde tudo veio.
Se seu ambiente suportar subagentes, delegue essa varredura a um e receba apenas o briefing; caso contrário, faça a varredura inline dentro do mesmo orçamento de leitura. O modo é wireframe quando --wireframe é passado ou o repositório não tem UI para imitar; diga o motivo no briefing. Em seguida, atualize os Pontos de entrada do resumo com as rotas/rótulos reais encontrados.
Concluído quando: o bloco de tokens usa todos os nomes de variáveis canônicos (a menos que wireframe: Tokens = nenhum) e cada grupo de tokens cita um arquivo fonte. Matriz de detecção de stack, onde os tokens se escondem, nomes canônicos: references/design-discovery.md.
3. Planejamento de telas
Decida os arquivos antes de escrever qualquer HTML: uma tabela de # | arquivo | propósito | estados | ACs cobertos, em ordem de fluxo. Um arquivo por view distinta ou overlay com conteúdo denso; estados (vazio, carregando, erro, sucesso…) vivem como seções dentro de sua tela. Quantos forem necessários, o mínimo possível — tipicamente 2–6.
Concluído quando: todo AC aparece na coluna "ACs cobertos" de pelo menos uma linha. Regras e um exemplo: references/screen-planning.md.
4. Gerar
Escreva em <out>/<slug>/:
index.html hub: resumo da especificação, fluxo, cobertura de ACs, suposições, perguntas em aberto, fontes de design
styles.css tokens do briefing de design + assets/base.css na íntegra + estilos dos componentes da funcionalidade
ii.js copiado na íntegra de assets/ii.js (barra de ferramentas do mockup: navegação, notas, estados, tema)
01-<tela>.html um por linha do planejamento de telas
02-<tela>.html
Comece de assets/index-template.html e assets/screen-template.html; copie assets/base.css e assets/ii.js desta pasta da skill. Imite as telas de referência: mesmo shell, rótulos de navegação, formas de componentes e tom de texto, na linguagem de UI do repositório. Preencha com dados realistas do domínio. Marque cada elemento que satisfaz um AC com data-note="AC-n: …" e cada escolha de design especulativa com data-note="NOTE: …".
A saída é HTML/CSS simples autocontido com JavaScript vanilla mínimo, aberto diretamente do disco: apenas links relativos, ícones SVG inline, fallbacks de fontes do sistema para as fontes do repositório. Contrato completo de saída e checklist pré-entrega: references/html-conventions.md.
5. Verificar
Execute o checklist pré-entrega em references/html-conventions.md. Concluído quando todos os itens do checklist passarem; corrija e verifique novamente caso contrário.
6. Capturar (apenas com --screenshot)
Pulado inteiramente sem a flag de screenshot. Caso contrário, renderize as telas planejadas (e o hub, por último) para imagens em <out>/<slug>/screenshots/ e adicione uma seção de Screenshots ao index.html. Um problema de captura nunca bloqueia a execução.
Concluído quando: toda imagem planejada existe, não está vazia, tem os bytes mágicos corretos e a primeira imagem foi visualizada; capturas puladas são reportadas com o comando manual. Flags, claro/escuro, nomenclatura, escada de ferramentas e fallbacks: references/screenshots.md.
7. Entregar
Responda com: o caminho para index.html, a tabela de planejamento de telas, os caminhos das screenshots (mais as capturas puladas e seus comandos manuais), as suposições e perguntas em aberto, e uma oferta para abrir (start no Windows, open no macOS, xdg-open no Linux). Se <out> estiver dentro do repositório e ainda não estiver ignorado, sugira adicioná-lo ao .gitignore.
Acompanhamentos: reconstrua o contexto a partir de <out>/<slug>/index.html (suposições, fontes de design) e styles.css; não varra o repositório novamente; mantenha o slug; atualize index.html para corresponder; re-execute o passo 5 (e, se screenshots existiam, recapture as telas afetadas e o hub).