Tira o print e explica. O Explicaí monta o manual.
Construtor de manuais open source e gratuito. Vai do print ao manual pronto em PDF, HTML e Markdown, e uma IA também consegue montar o manual pelo MCP.
Abre o cadastro em branco. Os campos com asterisco são obrigatórios.
Filtra a lista enquanto você digita. Aceita nome, CPF ou CNPJ.
Exemplo fictício de uma página de manual feita no Explicaí: a tela, os marcadores numerados e a legenda de cada um.
Documentar um sistema não pode custar mais que construí-lo.
| Posicionamento | Para devs e software houses que precisam entregar manual sem parar o desenvolvimento, o Explicaí é o construtor de manuais open source e gratuito que vai do print ao manual pronto em PDF, HTML e Markdown. |
|---|---|
| Frase-resumo (uso interno) | O construtor de manuais aberto que deixa a documentação andar no ritmo do código. |
| Categoria | Construtor de manuais |
| Primeira coisa a dizer | É open source e gratuito. |
| Para quem | Quem constrói ou mantém software e precisa entregar manual sem ter um time de documentação: dev solo ou equipe pequena de SaaS, software house e redator técnico ou analista de suporte, com o mesmo peso. |
| Quando procuram | Quando o sistema vai para o ar sem manual, quando o cliente pede o manual na entrega e quando a tela muda e o manual fica velho. |
| Idiomas | Português e inglês desde o primeiro dia. |
O Explicaí sabe muito e explica com calma, na ordem em que você vai usar. De vez em quando solta uma piada. Começa pelo exemplo e deixa a teoria para depois.
| Traço | Como aparece | Onde passa do ponto |
|---|---|---|
| Didático | Uma coisa por vez, na ordem de uso | Vira aula cheia de jargão |
| Paciente | Não supõe que o leitor já sabe | Fica condescendente |
| Preciso | Cada passo funciona e cada marcador aponta para o lugar certo | Aceita "mais ou menos isso aqui" |
| Aberto | Código e processo à vista, no GitHub e no blog | Esconde decisões e promete sem mostrar |
| Bem-humorado | Uma tirada quando cabe, como o slogan | Piada em botão, erro ou passo de manual |
O nome vem da pergunta de quem trava num sistema: "explica aí?". O acento no í virou o símbolo da marca, e a palavra tem "IA" dentro.
| Em texto corrido | Explicaí, com E maiúsculo e acento |
|---|---|
| No logo | explicaí, tudo em minúsculas |
| Código, domínio, pacotes | explicai, sem acento |
| Nunca | ExplicAI, Explicai, EXPLICAÍ, Explica Aí |
O quadro de cantos arredondados é a tela que vai ser documentada.
A haste do i é o conteúdo do manual.
O acento inclinado é o ponteiro que mostra onde olhar. É amarelo de marca-texto porque marca o destaque.
Em volta do logo, deixe um espaço livre igual à altura do acento. Nada de texto, borda ou imagem dentro dele.
O logo completo começa em 96 px de largura. Abaixo disso, use só o símbolo, que funciona até 16 px como favicon.
| Arquivo | Uso |
|---|---|
| explicai-logo-horizontal.svg · .png | Logo principal em fundo claro |
| explicai-logo-horizontal-escuro.svg · .png | Logo principal em fundo escuro |
| explicai-agent-logo-horizontal.svg | Logo do Agent |
| explicai-wordmark.svg · branco | Só o nome, quando o símbolo já aparece por perto |
| explicai-simbolo.svg · 512 px | Símbolo do Studio, avatar e ícone do app |
| explicai-agent-simbolo.svg · 512 px | Símbolo do Agent |
| favicon.svg · 32 px · 180 px | Aba do navegador e atalho no celular |
| social-preview.png | Prévia do repositório no GitHub e em redes, 1280 × 640 |
Não escreva "AI" em maiúsculas.
Não estique nem comprima.
Não use cores fora da paleta.
Não cole nada ao logo.
O app e o agente usam o mesmo símbolo com fundos diferentes: cobalto no Studio, que você usa na tela, e nanquim no Agent, que a IA usa pelo terminal.
O editor de manuais: você cola o print, marca com números, destaques e setas, organiza em páginas e exporta em HTML, PDF e Markdown.
O servidor MCP que deixa uma IA operar o Studio: abrir o sistema, capturar as telas, anotar e montar o manual.
| Assinatura | "um projeto codesampa.io", com link, no rodapé do site e do README |
|---|---|
| Créditos | Gabriel Sampaio como autor no GitHub, na licença e no package.json |
| Sem assinatura | Interface do app e manuais gerados |
A paleta vem da mesa de quem revisa manual. A caneta azul aponta, o marca-texto destaca e o nanquim fica com o texto.
| Tema escuro | Troca |
|---|---|
| Fundo | #0E1120 no lugar do papel e #161A2E nas superfícies |
| Texto | #ECEEF7 no lugar do nanquim e #9CA3BD no lugar do grafite |
| Cobalto | #7088FF, com número do marcador em #0E1120 |
| Acento do logo | Marca-texto #FFD43B, também no wordmark |
| Coral | #FF7F63 |
O Studio usa cor para dizer em que ponto a página está e o que cada aviso pede. Cor nunca vai sozinha: sempre tem o nome escrito ao lado. Valores de web/src/styles/tokens.css.
Quatro etapas, do rascunho ao manual entregue. Rascunho é a padrão e usa anel vazio, para a forma também diferenciar. O amarelo fica fora: é só do conteúdo realçado e da página ativa.
Seis cores para o texto escolhido na barra da seleção e para os avisos do manual. Cada uma tem um valor para o tema claro e outro para o escuro. A razão é o menor contraste contra o papel e a superfície do tema; o mínimo é 4,5:1.
| Cor | Token | Claro | Escuro |
|---|---|---|---|
| Cinza | --cor-gray | #5C6478 · 5,48:1 | #A3AAC4 · 7,45:1 |
| Vermelho | --cor-red | #C3261B · 5,38:1 | #FF8B7E · 7,57:1 |
| Laranja | --cor-orange | #B04A00 · 5,08:1 | #FFA95E · 9,08:1 |
| Verde | --cor-green | #17793A · 5,07:1 | #6FD193 · 9,18:1 |
| Azul | --cor-blue | #1F58D6 · 5,68:1 | #8EB1FF · 8,09:1 |
| Roxo | --cor-purple | #7A3CC8 · 5,88:1 | #C9A2FF · 8,27:1 |
| Aviso do manual | Cor |
|---|---|
| Dica | --aviso-tip = verde |
| Atenção | --aviso-warning = laranja |
| Cuidado | --aviso-caution = vermelho |
| Nota | --aviso-note = cobalto |
O padrão é o do brand book: número em círculo cobalto e destaque em marca-texto. Cada marcador, seta, destaque e área pode ter estilo próprio (cor, tamanho, espessura e borda); o que não é mudado herda do padrão da imagem. Marcação nova nasce com o padrão da imagem.
No Studio escuro a borda do destaque vira a própria cor do preenchimento, que contrasta bem mais com a superfície escura #161A2E do que a borda do claro. O export é sempre claro e fica com a borda escura. Valores de HIGHLIGHT_PALETTE (web/src/lib/annotationStyle.ts), tokens --hl-fundo e --hl-borda.
Contraste medido por script: texto nanquim #151A33 sobre o preenchimento (cheio 55%, suave 25%, sobre branco), mínimo 4,5:1; borda contra branco no claro e contra a superfície escura #161A2E no escuro, mínimo 3:1. As cinco cores passam nos dois temas; contra o fundo #0E1120 o menor valor da borda escura é 7,96:1.
| Cor | Preenchimento | Borda | Texto no cheio | Texto no suave | Borda no claro | Borda no escuro (sobre #161A2E) |
|---|---|---|---|---|---|---|
| Amarelo | #FFD43B | #8A6D00 | 13,97:1 | 15,57:1 | #8A6D00 · 4,92:1 | #FFD43B · 12,06:1 |
| Verde | #5ED38A | #1A7A3C | 12,05:1 | 14,60:1 | #1A7A3C · 5,39:1 | #5ED38A · 9,14:1 |
| Rosa | #FF7EB6 | #B0245F | 10,67:1 | 13,85:1 | #B0245F · 6,43:1 | #FF7EB6 · 7,30:1 |
| Azul | #6CB8FF | #1D5FA8 | 11,46:1 | 14,32:1 | #1D5FA8 · 6,45:1 | #6CB8FF · 8,14:1 |
| Laranja | #FFAB5E | #A84400 | 12,14:1 | 14,66:1 | #A84400 · 6,01:1 | #FFAB5E · 9,20:1 |
Foi desenhada para quem enxerga pouco e separa bem as letras que costumam se confundir, como I, l e 1 ou O e 0. Num manual, cada letra precisa ser lida certo da primeira vez.
Uma ideia por frase, voz ativa e "você" no lugar de "o usuário". O botão diz o que vai acontecer, e o erro diz o que deu errado e como resolver. O humor aparece no site e no blog, nunca numa mensagem de erro ou num passo de manual. O Explicaí não se compara com outras ferramentas.
| App, README e docs | Formal, com "você" e verbo no imperativo |
|---|---|
| Site | Formal, com humor pontual. Cada língua tem o seu slogan; em inglês: “Snap it, explain it. Explicaí builds the manual.” |
| Blog codesampa.io e redes | Coloquial, em primeira pessoa |
| Em inglês | Mesmas regras, com menos humor. Slogan: “Snap it, explain it. Explicaí builds the manual.” |
| Diga | Evite | |
|---|---|---|
| Botão | Exportar manual | Iniciar processo de exportação |
| Erro | O arquivo clientes.md não foi encontrado. Ele foi apagado ou renomeado fora do Studio. | Erro 0x80004005: falha na operação. |
| Lista vazia | Nenhuma página ainda. Comece pela tela que as pessoas mais usam. | Não há registros a exibir. |
| Sucesso | Manual exportado em PDF. | Operação concluída com sucesso! |
| Blog | Hoje a IA errou feio no export para PDF. Mostro o que deu errado e como corrigi. | Revolucionando a documentação com IA de ponta. |
Quem gera o manual, no app ou pelo MCP, escolhe o tom. O mesmo passo nos três:
| Profissional (padrão) | Clique em Novo cliente para abrir o formulário de cadastro. |
|---|---|
| Tranquilo | Clica em Novo cliente e o cadastro abre na hora. |
| Personalizado | A pessoa descreve o tom em texto, por exemplo "como se explicasse para alguém que nunca usou computador", e a IA segue. |
Todo sistema precisa de manual, e quase nenhum tem um bom. Fazer à mão leva dias: tirar print, marcar a tela, escrever cada passo, exportar, e refazer tudo quando a tela muda. O Explicaí faz esse trabalho braçal. É open source e gratuito porque documentar um sistema não pode custar mais que construí-lo.
Quem constrói o sistema é o protagonista e o Explicaí ajuda. A história é sempre a da marca: o blog conta a construção em primeira pessoa, mas não reconta a origem como história pessoal.
Social preview do GitHub, 1280 × 640.
Capa de post no blog, 1200 × 630.
Construtor de manuais open source e gratuito. Do print ao manual pronto em PDF, HTML e Markdown.
um projeto codesampa.io
Cabeçalho e rodapé do README.
Favicon do Studio e do Agent nas abas do navegador.
