# Kit Prompt > Entrevista sobre o site e gera um PROMPT DE CONSTRUÇÃO completo, no padrão dos prompts já validados do acervo — com stack, fontes, paleta, estrutura seção a seção, medidas exatas e proibições explícitas. O resultado é texto para você levar a outra ferramenta (v0, Lovable, Cursor, outro modelo) ou guardar; não é código escrito no projeto. Use quando o usuário pedir "gera um prompt", "monta o prompt pra esse site", "quero um prompt pra clínica", "preciso de um brief pra passar pro v0", ou invocar /kit-prompt. Se ele quiser o site construído aqui e agora, é a kit-montar, não esta. - Skill: `harebeats/kit-prompt` (Agent Skill, multi-file: 53 files) - Install (CLI): `npx skillmds@latest add harebeats/kit-prompt` - Raw SKILL.md: https://api.skillmd.com/api/skills/harebeats/kit-prompt/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: AI & ML - Author: harebeats (https://skillmd.com/u/harebeats) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/harebeats/kit-prompt --- # kit-prompt — gerar o prompt, não o site ## Antes de qualquer comando: resolva o `SKILL_DIR` Todo comando abaixo roda um script que viaja junto desta skill, em `SKILL_DIR/scripts/`. Defina `SKILL_DIR` como o **caminho absoluto da pasta que contém ESTE SKILL.md que você acabou de ler** — o seu harness informou esse caminho no resultado da leitura. Funciona em qualquer hospedeiro, sem depender de variável de ambiente de nenhum agente específico: ``` ~/.claude/plugins/cache/cannonball/cannonball//skills//SKILL.md ~/.codex/skills//SKILL.md ~/.gemini/skills//SKILL.md ~/.agents/skills//SKILL.md ``` Em todos, `SKILL_DIR` é a pasta do `SKILL.md`, e `SKILL_DIR/scripts/` está ao lado. A diferença que define esta skill: **`kit-montar` escreve código no projeto; esta produz texto.** Um prompt que você leva para outro lugar, reusa, edita, guarda. O trabalho aqui é gerar mais um prompt no padrão dos que já funcionaram, alimentado pelas peças que já existem. Veja o que existe antes de começar: ```bash python "${SKILL_DIR}/scripts/perfil.py" python "${SKILL_DIR}/scripts/buscar.py" --familia prompt --qualidade favorito ``` **Acervo vazio não impede nada aqui** — o padrão abaixo é a regra, não um resumo estatístico do acervo. Só peça material ao usuário se ele quiser um prompt calcado em alguma peça específica. ## O que separa um prompt bom de um mediano Não é opinião: sai de comparar os marcados `favorito` contra os comuns. | Marcador | Favorito | Comum | |---|---|---| | tamanho | 10.672 chars | 8.284 | | medidas em px | 16 | 12 | | URLs exatas | 7 | 4 | | easings nomeados | 2 | 1 | | **proibições explícitas** | **1+** | **0** | **Especificidade e restrição.** Os bons dizem `translateY(-40px)`, `#0A0B11`, `cubic-bezier(.16,1,.3,1)` — e dizem o que **não** fazer. "Sem cards. Sem roxo. Não adicione seções além das listadas." Prompt vago devolve resultado genérico. Um prompt do acervo abaixo de ~6.000 caracteres quase sempre é rascunho. Não entregue um esqueleto e chame de pronto. ## 1. Entreviste Agrupe numa mensagem só, e ofereça alternativas fechadas quando houver (se o seu agente tiver ferramenta de múltipla escolha, use; senão, liste em texto). 1. **O que é o site.** Setor, marca, público, o que precisa acontecer. Concreto: "clínica de estética facial, 30–50 anos, quer agendamento" — não "site bonito". 2. **Escopo.** Hero apenas? Landing completa? Quantas seções, e quais? 3. **Stack de destino.** Pergunte sempre — muda o prompt inteiro. Ofereça Next.js+Tailwind, Vite+React, HTML puro. Se o prompt vai para v0 ou Lovable, registre isso: eles assumem Next+Tailwind+shadcn. 4. **Material.** Vídeo, fotos, logo, fontes da marca. **Restringe tudo** — metade do acervo depende de vídeo de fundo. 5. **Claro ou escuro, e qual o tom.** 6. **Referência.** Algum site que ele goste? Serve para casar com um design system. 7. **A emoção que a pessoa leva embora.** Uma palavra: *calma, desejo, urgência, confiança, pertencimento, alívio.* Se ele não souber responder, derive do setor e confirme numa linha — mas **não pule**. É o requisito que separa um prompt que descreve layout de um que descreve intenção, e vai virar linha explícita na spec. Se ele já respondeu no pedido, não repita a pergunta. ### Se o briefing vier vago, gere o conceito em vez de pedir mais Cliente frequentemente não sabe dizer o que quer. Antes de devolver a bola, tente as seis técnicas de geração (`${SKILL_DIR}/references/fundamentos-visuais.md` §7) — elas produzem ângulo a partir de material pobre: 1. **A verdade escondida, não o assunto óbvio.** Não "clínica boa"; o que a pessoa sente ao evitar sorrir na foto. 2. **A característica mais forte, empurrada até o fim.** Ache o traço único da marca e deixe ele vazar para tudo — cor, foto, ritmo — em vez de ficar num canto. 3. **Interpretação literal.** Torne fisicamente real uma expressão que o público já usa. Você não inventa significado, pega emprestado um que já existe. 4. **Colisão de mundos.** "E se…?" — e se a página de erro fosse um móvel faltando peça? 5. **O detalhe minúsculo.** Nem tudo precisa de conceito grande. 6. **Informação não é emoção.** Um dado é triste; o dado com um rosto é pessoal. Leve **uma** dessas como direção ao usuário antes de escrever o prompt. Direção escolhida junto vale mais que prompt longo escrito sozinho. ## 2. Busque as três camadas no acervo O prompt não sai da sua cabeça: sai do que já existe. > **Se o MCP do Motion Sites estiver ligado:** ele é o maior catálogo de prompt de > página pronto. Use `search_prompts` para pegar o > **`preview_url`** do que você escolher — o acervo guarda texto, não imagem, e > mostrar vale mais que descrever. E `get_related_prompts` para expandir a partir > de um que já deu certo. As duas são **gratuitas**. > > **`get_prompt` é limitado a 3 na conta sem plano** — nunca gaste num prompt que > já está no acervo. Ver > `${SKILL_DIR}/references/motionsites-genjutsu-designdna.md`. ```bash # identidade visual — paleta, tipografia, regras python "${SKILL_DIR}/scripts/buscar.py" "" --familia design-system # estrutura — página inteira parecida python "${SKILL_DIR}/scripts/buscar.py" "" --familia prompt python "${SKILL_DIR}/scripts/buscar.py" "" --familia template # movimento — a técnica de animação python "${SKILL_DIR}/scripts/buscar.py" "" --familia animacao ``` **Leia o design system inteiro** em `acervo/design-systems//design-system.md`. É de lá que saem os hex, a escala tipográfica e o "Do's and Don'ts" — os valores exatos que fazem o prompt ser bom em vez de vago. O `Agent Prompt Guide` de cada sistema já traz exemplos de prompt por componente: reaproveite. Mostre ao usuário quais peças você vai usar como base **antes** de escrever. É mais barato corrigir a escolha agora. ## 3. Escreva o prompt Estrutura extraída dos prompts que funcionaram. Em inglês — os que funcionam estão em inglês, e as ferramentas de destino respondem melhor assim. Diga isso ao usuário. ``` Build a [escopo] for [marca] — [uma linha do que é] — using [stack exata]. ## Tech stack [versões, dependências permitidas E a frase "no other UI libraries"] ## Fonts [nome + URL exata do @import ou + pesos usados] ## Color palette [cada cor com hex E o papel: fundo, texto, ação primária, borda] ## Layout — section by section [para cada seção: o que contém, medidas em px/rem, alinhamento, breakpoints] ## Motion [o que anima, duração em ms, easing nomeado, o que dispara] ## Responsive [o que muda em cada breakpoint] ## Emotional outcome Uma linha em inglês dizendo o que o visitante deve **sentir ao sair** — e, se couber, o ritmo que produz isso (impacto → demora → pausa). Sem isso o modelo otimiza aparência e a página fica correta e esquecível. ## Do NOT [proibições explícitas — é o que separa favorito de comum] ``` Regras ao preencher: - **Números, não adjetivos.** "Título 96px, line-height 0.9, tracking -0.03em" em vez de "título grande e apertado". - **URL completa de fonte.** Se o design system usa fonte comercial, use o campo `Substitute` da ficha e diga qual substituiu. - **Proibições vindas do design system.** O `Do's and Don'ts` de cada ficha já traz as regras; a seção `Do NOT` do prompt é onde elas viram instrução. - **Assets.** Se a peça de origem tinha URL de vídeo ou imagem, **não copie**: essas URLs vivem em bucket temporário e uma fração grande já responde 403/404 (o `perfil.py` diz quantas peças do seu acervo já morreram assim). Escreva um placeholder marcado e avise que precisa ser trocado. - **Um efeito forte por página.** Se o briefing pedir três, escolha o melhor e registre os outros como alternativa no fim do prompt. ## 4. Entregue e ofereça guardar Entregue o prompt em bloco de código, pronto para copiar. Diga em uma linha quais peças do acervo o alimentaram — o usuário precisa saber a procedência. Se ele gostar, ofereça guardar no acervo, que é como o acervo cresce: ```bash python "${SKILL_DIR}/scripts/ingerir.py" .md --id \ --setor --estrutura lp-completa \ --quando-usar "..." --nao-usar-quando "..." python "${SKILL_DIR}/scripts/indexar.py" ``` E se ele for construir a partir dele agora, aí sim: `kit-montar`. ## Sobre animação e WebGL no prompt Antes de especificar movimento, leia `${SKILL_DIR}/references/stack-animacao.md`. Ele traz o que está vivo e o que está parado — não escreva um prompt pedindo `ogl` (sem release há 19 meses) ou `regl` (21 meses). Padrão recomendado: **GSAP + Lenis** para scroll, **three** para 3D. Para efeito 2D sobre imagem, `pixi.js` é a escolha certa — confira no `perfil.py` se o acervo tem alguma peça nela antes de prometer reuso; normalmente não tem. Se o MCP do GetLayers estiver ligado, ele traz backgrounds de vídeo, que um acervo de código não tem. **Theatre.js** só entra quando há coreografia complexa de câmera ou 3D. Para reveal, menu ou texto, pedir Theatre.js num prompt é montagem desproporcional.