KoralPaper - Design studio where AI draws, charts and animates

KoralPaper

Desenhe o que você pensa. Um estúdio de rascunho gratuito e offline onde o Claude desenha com você: diagramas feitos à mão, quadros de notas adesivas, carrosséis para LinkedIn, gráficos a partir de dados colados e animações em stop-motion. Funciona em qualquer navegador a partir de um único arquivo HTML. Sem conta, sem servidor, sem instalação; seu trabalho nunca sai da sua máquina.

▶ Abrir o aplicativo · funciona offline e instala como um aplicativo após a primeira visita.

Capturas de tela · Começar a desenhar · Executar localmente · Adicionar Claude · Biblioteca de prompts · Todos os recursos · Arquivos · Licença

Um estúdio local e offline de diagramas vetoriais e rascunhos: papel creme quente, grade sutil, formas desenhadas à mão com traço irregular, notas adesivas, etiquetas, setas curvas e em cotovelo, títulos em serifa e o asterisco coral do KoralPaper. Feito para pensar em voz alta: diagramas que parecem esboçados por uma mão confiante, não gerados por uma ferramenta.

Zero dependências. Sem servidor, sem build, sem npm, sem banco de dados, sem conta. Um arquivo HTML, uma folha de estilo, três arquivos JavaScript. Seu trabalho nunca sai da sua máquina. Durante arrastar e navegar, apenas os elementos em movimento são redesenhados (todo o resto é servido a partir de um bitmap fora da tela), então até documentos com centenas de elementos permanecem perfeitamente fluidos.

Novo: a Biblioteca de prompts, 99 prompts prontos para copiar e colar no Claude Desktop + KoralPaper, pesquisáveis e filtrados por categoria: diagramas, carrosséis, gráficos, canvases de negócios, workshops e uma seção Divertido & Selvagem que inclui criticar o seu próprio diagrama.

Como é

Claude desenha no seu papel(MCP) Descreva no Claude Desktop, edite aqui	Réplica: imagem → página editável Anexe um pôster e receba-o de volta como elementos	Gráficos a partir de uma colagem de planilha 8 tipos, Esboçado ou Limpo
Kit de marca Suas cores e fontes, em todo lugar, inclusive no Claude	Todas as fontes do Google Pesquise, carregue, 9 pesos, cores de letras	Modelos em categorias Integrados e seus próprios salvos
Dobragem de mapa mental Recolha e expanda ramos ao vivo	Apresentar e reproduzir Caneta laser, reprodução com desenho, exportação .webm	Fotos viram arte 13 estilos algorítmicos, logos SVG tingíveis
Mesas de trabalho em tamanho social LinkedIn, IG, cores de papel por página	Ferramentas de mesclar e organizar Textos em parágrafos, textos em formas	Instantâneos e compartilhamento Pontos de verificação nomeados, compartilhamento em HTML de arquivo único

Comece a desenhar (nada para instalar)

→ koralpaper na web: abra o link e desenhe. Funciona em Mac, Windows, Linux, ChromeOS e iPad, em qualquer navegador moderno.

Ainda melhor, instale como um aplicativo: a página é uma PWA, então após a primeira visita ela funciona totalmente offline.

• Mac / Windows (Chrome ou Edge): clique no ícone de instalação na barra de endereço (ou menu → "Instalar KoralPaper").
• iPad / iPhone (Safari): botão Compartilhar → Adicionar à Tela de Início.
• Seu trabalho é salvo automaticamente no navegador e permanece no seu dispositivo; o "aplicativo" nunca fala com um servidor.

Ou execute a partir de uma pasta

Prefere uma cópia local? Baixe o ZIP mais recente da página de Releases (ou clone o repositório), descompacte e clique duas vezes em index.html; ele roda direto do arquivo, offline, em qualquer navegador moderno. Para atualizar depois, baixe o novo ZIP e substitua a pasta; seu trabalho fica no armazenamento do navegador, não na pasta.

Adicione o Claude (opcional, um minuto)

Para deixar o Claude desenhar no seu papel: instale o aplicativo gratuito Claude Desktop (Mac ou Windows) e depois clique duas vezes em koralpaper.mcpb da pasta mcp/ (também anexada a cada Release) e confirme a instalação dentro do Claude Desktop. Detalhes completos no aplicativo, em ? → Claude.

Primeira execução

Um cartão de boas-vindas oferece o tour de 60 segundos ou uma página em branco (o tour continua disponível via ☰ → "Carregar o tour do KoralPaper", e o cartão é reproduzido a partir de ? → Configurações). Uma tela em branco mostra dicas iniciais suaves até o primeiro elemento chegar. Pressione ? dentro do aplicativo para atalhos, configuração do Claude e Configurações.

O que ele faz

• Ferramentas: selecionar (V), mão/panorâmica (H), retângulo adesivo (R), losango (D), elipse (O), etiqueta (C), carimbos de ícones (S), seta (A), linha (L), desenho livre (P), texto (T)
• Biblioteca de ícones (S): o asterisco KoralPaper de 6 raios, as três marcas (asterisco sobre papel, papel e traço, pensamento de papel), espiral, nuvem, estrela, coração, raio, balão de fala, exclamação, ponto de interrogação, marca de verificação, todos desenhados à mão; clique no botão ✳ da barra de ferramentas para escolher. Mais ícones do Google Material: pesquise 3.000 Símbolos de Material direto no menu de ícones (fixados ★, usados recentemente e os nove populares lideram a grade, clique com o botão direito em qualquer ícone para fixá-lo) e carimbe-os como vetores escaláveis. Buscados do Google uma vez por ícone, armazenados em cache e incorporados no seu documento; esboços salvos permanecem totalmente offline
• Texto em qualquer lugar: clique duas vezes em qualquer forma para digitar dentro dela (o texto quebra e a forma cresce); elementos de texto independentes; setas e linhas aceitam rótulos que acompanham seu ponto médio e seguem cada movimento e curva
• Controles de tipografia: espaçamento de linha por elemento (×0,5–2,5), espaçamento de parágrafo (espaço extra a cada Enter, linhas quebradas suavemente dentro de formas mantêm o espaçamento de linha), espaçamento de letras (−7 a +15px de rastreamento) e alinhamento vertical dentro de formas (superior / meio / inferior), tudo no painel de estilo e tudo preservado por copiar/colar estilo e exportações SVG/PNG/PDF
• Interoperabilidade com Excalidraw: ☰ → Exportar página para Excalidraw; abrir um arquivo .excalidraw o importa em uma nova página (rótulos vinculados, grupos, imagens e cores sobrevivem à ida e volta)
• Fontes: 3 pilhas integradas (serif/sans/manuscrita) além de um seletor agrupado de Fontes do Google com 32 famílias, Sans & display (Inter, Montserrat, Roboto Condensed, Bebas Neue, Fjalla One, Oswald, Imbue, DM Sans, Space Grotesk), Serif (Playfair Display, PT Serif, Lora), Mono (JetBrains Mono, IBM Plex Mono, Share Tech Mono), Manuscrita e script (Caveat, Patrick Hand, Kalam, Architects Daughter, Shadows Into Light, Lobster Two, Playwrite NZ Guides, Unkempt, Kaushan Script) e Pixel & ponto (Bitcount ×3, Tiny5, Doto), precisam de internet uma vez; fallbacks do sistema offline
• Desenhe com Claude (MCP): instale a extensão koralpaper.mcpb de um clique (na pasta mcp/) no aplicativo gratuito Claude Desktop, mantenha o KoralPaper aberto e apenas converse: "desenhe um fluxograma de onboarding de cliente em um quadro 1920×1080", Claude desenha ao vivo no seu papel como elementos comuns desenhados à mão que você pode editar, reestilizar e desfazer (um ⌘Z por etapa do Claude). Claude também pode ler a página e olhar uma imagem renderizada dela, então "organize este layout" ou "deixe a terceira caixa verde" funcionam em qualquer coisa no papel, incluindo o que você desenhou à mão. O ✳ na barra superior brilha enquanto o link está ativo; a aba Claude no painel ? tem a configuração de um minuto. Sem chave de API, sem cobrança extra, nada sai da sua máquina exceto sua conversa com Claude. Sem o Claude Desktop há um fallback: a mesma aba copia um prompt de design que você pode colar em qualquer Claude, o .json que ele responde abre direto no aplicativo
• Kit de marca (Configurações): sua identidade em um pequeno arquivo: nome, seis cores de destaque, papel, fontes de título e corpo (qualquer fonte do Google). Quando ativo, gráficos são coloridos pelos seus destaques, títulos de gráficos e modelos usam sua fonte de título, novos documentos começam no seu papel, os destaques entram nas amostras de cor e Claude lê o kit para que tudo o que ele desenhar volte na marca. Exporte o kit como .json e todo o seu time esboça com o mesmo visual.
• Gráficos e tabelas (B): cole números direto de uma planilha e obtenha barras desenhadas à mão (verticais ou laterais, multi-séries, negativos bem-vindos), gráficos de linha, radar, pizza, rosca, mapas de calor ou uma tabela listrada elegante, com título, rótulos de eixo, legenda, rótulos de valor, uma legenda móvel e uma prévia ao vivo, em dois visuais: desenhado à mão Sketchy ou profissional nítido Clean. Tudo chega como elementos comuns de esboço em um grupo: recolorir qualquer barra ou fatia com os controles usuais, e clique com o botão direito no gráfico para editar seus dados e reconstruí-lo no lugar.
• Gravador de time-lapse (☰): pressione F para capturar a página como um quadro, ou ative a gravação automática e cada mudança que você fizer vira um quadro. Cada quadro tem um tempo de espera e um tempo de movimento: durante o movimento, os elementos viajam para o próximo quadro em passos trêmulos de stop-motion, traços redesenhados a cada passo como uma animação filmada à mão (o padrão), ou deslizam suavemente com easing Smooth, Snappy, Overshoot ou Linear. Elementos que aparecem cortam seco, ou desvanecem se você marcar Fade. Keyframes de câmera ampliam e panoramizam entre quadros, pele de cebola fantasma o quadro anterior enquanto você constrói o próximo, e uma prévia ao vivo com um controle deslizante reproduz toda a animação antes de você exportá-la como um GIF em loop ou um vídeo .webm. Gravações são salvas com o documento.
• Exportação de GIF animado (⬇): páginas viram quadros, cada um com sua própria duração na tela, tamanho e controles de loop. Um carrossel vira uma animação em loop com zero ferramentas extras.
• Instantâneos (☰): checkpoints nomeados de todo o documento, mantidos localmente; restaure qualquer um a qualquer momento, um desfazer traz a versão atual de volta.
• Receitas de prompt (aba Claude): cópias de um clique dos movimentos do Claude que funcionam: organize esta página, reconstrua limpa, transforme em mapa mental, faça um carrossel, resuma o documento.
• Dobragem de mapa mental: clique com o botão direito em uma forma → "Marcar como raiz do mapa mental" e ramos se tornam dobráveis, emblemas − dobram, emblemas coral +N desdobram e mostram quantos nós estão ocultos. Links cruzados se comportam corretamente (um filho compartilhado permanece enquanto qualquer caminho aberto o alcança), dobras são desfazíveis, salvam com o documento, respeitam exportações e podem ser alternadas ao vivo durante uma apresentação tocando no emblema, revele sua estrutura ramo por ramo enquanto fala
• Fluxos com Tab: selecione uma forma e pressione Tab, um gêmeo conectado aparece à direita (⇧Tab: abaixo), mesmo estilo, seta colada, editor de texto já aberto. Funciona também durante a digitação, então "digite, Tab, digite, Tab" constrói um fluxograma em segundos. Organizar (o botão Organizar ou clique com o botão direito → "Organizar o fluxo") então organiza tudo conectado por setas coladas em colunas limpas da esquerda para a direita
• Setas coladas: desenhe uma seta de uma forma para outra, ela se liga a ambas as bordas e segue quando as formas se movem, redimensionam ou giram. Mire nos quatro pontos laterais (N/E/S/O) para fixar a seta a um lado específico; solte no meio para mira automática inteligente. Selecione uma seta e arraste sua alça do meio para curvar a linha (arraste de volta para a linha para endireitar). A linha de curva de seta também oferece setas de cotovelo, rotas de ângulo reto com cantos arredondados que saem perpendiculares ao lado colado, contornam outras formas automaticamente e mostram uma alça de arrasto em cada segmento para controle manual total (clique com o botão direito → "Re-rotear cotovelo" para voltar ao automático)
• Grade: três estados, linhas / pontos / desligado, além de um tamanho de grade ajustável (10–60px): clique no botão de grade para o popover; G alterna estados; ajuste segue o tamanho escolhido
• Cor do papel: o swatch redondo no canto superior direito abre um popover com 8 papéis predefinidos (branco, cinza claro, azul claro, verde suave, amarelo suave, malva suave, linho quente + o creme do tema), uma roda de cores e um campo hex; exportações usam o papel escolhido também. O swatch do tema (ou menu ☰ → "Redefinir cor do papel") restaura o padrão
• Tamanhos de tela / artboards: o botão de artboard (canto inferior esquerdo, seu rótulo mostra as dimensões do preset ativo, ou ∞) oferece presets: IG Story/Reel, IG post & retrato, LinkedIn, X, YouTube; papéis de parede desktop & iPhone; proporções 1:1, 16:9, 9:16, 4:3, 3:2, ou tela ilimitada. Com um artboard ativo, exportações PNG/SVG são exatamente esse tamanho de pixel e incluem a grade (linhas ou pontos) a menos que você exporte transparente
• Agrupamento: ⌘G / ⇧⌘G ou os botões Agrupar/Desagrupar no painel; clicar em qualquer membro seleciona o grupo inteiro
• Organizar: alinhar esquerda/centro/direita/superior/meio/inferior, distribuir horizontalmente/verticalmente e igualar largura/altura à primeira forma selecionada (2+ formas; grupos se movem como um; setas re-colam automaticamente e são excluídas)
• Copiar/colar estilo: ⌥⌘C / ⌥⌘V (ou clique com o botão direito) leva traço, preenchimento e estilo de texto de um elemento para muitos
• Menu de clique com o botão direito: editar texto, duplicar, copiar, excluir, agrupar/desagrupar e ordem de camadas em qualquer elemento; colar/selecionar tudo/ajustar zoom em tela vazia
• Modelos: ☰ → Modelos…, conjuntos de páginas integrados (carrossel do LinkedIn com slides de cabeçalho/rodapé/título/foto/CTA em um artboard 1080×1350, carrossel Black, um conjunto de design preto + amarelo elétrico nítido que também recolor o papel, kit de fluxograma, Comparação/Versus, cartão de citação). Salve esta página ou todo o documento de várias páginas como seu próprio modelo , tamanho da tela e cor do papel incluídos, depois renomeie (✎), atualize (↻), ou exclua (✕) qualquer modelo, incluídos os integrados: substitua um integrado pelo seu próprio design, remova-o da lista e "Restaurar integrados" traz os originais de volta a qualquer momento. Modelos aplicados chegam como páginas novas, totalmente editáveis
• Documentos de várias páginas: faixa de páginas na parte inferior, clique para alternar, arraste uma miniatura para reordenar páginas (uma marca coral mostra onde ela vai cair), + para adicionar, clique com o botão direito em uma aba para renomear/duplicar/mover/excluir. Desfazer abrange páginas
• Modo de apresentação + caneta laser: ⇧⌘P (ou ☰ → Apresentar) esconde todos os controles, ajusta a página (ou artboard) à tela e entra em tela cheia. Setas, espaço ou um clique viram as páginas; arrastar desenha um traço de laser coral brilhante cuja cauda evapora em um segundo, aponte para coisas ao vivo sem marcar o documento. Uma barra de página mínima acorda no movimento do mouse; Esc termina a apresentação e coloca tudo de volta exatamente como estava
• Replay de desenho + exportação animada: ☰ → "Reproduzir o desenho" reproduz a página atual como se uma mão estivesse esboçando, traços de mão livre revelam ponto a ponto, setas varrem para fora do início, formas e texto entram um após o outro (limitado a ~20 segundos). "Exportar replay como vídeo (.webm)" grava a mesma animação em um arquivo de vídeo, perfeito para uma postagem no LinkedIn do seu diagrama se desenhando. Qualquer clique ou tecla interrompe a apresentação
• Exportação PDF: ☰ ou ⬇ → Exportar PDF. Documentos de várias páginas abrem um seletor de páginas; com um artboard, cada página exporta no tamanho exato do preset com a grade incluída. Zero dependências, funciona totalmente offline
• Exportação de carrossel: ☰ ou ⬇ → "Exportar todas as páginas como PNGs (.zip)" renderiza cada página como um PNG numerado (pixels exatos do artboard quando um está definido) e os empacota em um único .zip, o carrossel inteiro do LinkedIn/Instagram em um clique. O ZIP é escrito à mão em ~50 linhas; ainda zero dependências
• Compartilhar como página web: ☰ ou ⬇ → "Compartilhar como página web (.html)" escreve um único arquivo HTML autocontido, cada página como um SVG vetorial inline mais um visualizador pequeno com tema escuro com navegação de páginas e setas de teclado. Envie para qualquer um: abre em qualquer navegador sem aplicativo, sem servidor, sem conta, funciona offline e imagens viajam dentro do arquivo
• Copiar como PNG / SVG: ⇧⌘C (ou os menus) coloca a seleção, ou a página inteira quando nada está selecionado, na área de transferência como uma imagem PNG real, pronta para colar no Slack, Notion, Keynote ou um chat. "Copiar como SVG" copia marcação vetorial que cola direto no Figma ou em um editor de código
• Sua galeria: uma biblioteca na barra de ferramentas para logotipos SVG reutilizáveis (vetor puro, nítido em qualquer zoom, vetor em exportações) e marcas PNG transparentes, clique para colocar, clique com o botão direito para remover, persistido no navegador
• Quadros: qualquer imagem pode usar uma borda desenhada à mão (Quadro → Ligado) que segue a cor do Contorno, Espessura e estilo de Linha, e sobrevive a todos os estilos de arte, então fotos pálidas mantêm seu lugar na página
• Imagens: arraste e solte ou cole PNG/JPEG (botão 🖼 da barra de ferramentas, I, ou ☰ → Importar imagem); elas agem como qualquer elemento, redimensione, gire, cole setas para eles. Cortar no painel ou no menu de botão direito: arraste sobre a região que deseja manter; Desfazer corte restaura a imagem completa; os cortes compõem com o Artify em qualquer ordem
• Artify (arte algorítmica): selecione uma imagem e escolha um estilo de arte: Pontos, Linhas, Pontilhado, Hachura, Cubista (facetas coloridas), Cubista mono (facetas na cor do seu traço), Fluxo (traços de tinta que seguem os contornos da foto), Rabisco (uma caneta inquieta constrói tom ao fazer laços densos nos escuros), Uma linha (uma única linha contínua conectando os contornos salientes da foto, baseado em Edge-Drawing), Corda (arte de linha em torno de pinos), Tipo (retrato em glifos de máquina de escrever) ou Duotone (pôster de duas tintas, cores de traço + preenchimento), em três níveis de detalhe. Com semente e não destrutivo (volte para Foto a qualquer momento); exportações SVG de imagens artificadas são vetores puros
• Ajustes de foto: controles deslizantes de Brilho / Contraste / Gama / Nitidez em cada imagem, eles moldam tanto a foto quanto os estilos de arte, então você pode ajustar a fonte até o pontilhado/pontilhado/linhas aparecerem
• Dicas de ferramenta em todo lugar: passe o mouse sobre qualquer botão, ferramenta, alternância de barra de ferramentas, controle de estilo, barra de zoom, e uma dica rápida e legível nomeia e mostra seu atalho de teclado como um chip de tecla; mova ao longo de uma linha e a próxima dica aparece instantaneamente
• Toque e iPad: pinça para zoom, pan com dois dedos (um segundo dedo com segurança cancela o que o primeiro dedo começou), e alças de seleção crescem suas áreas de toque sob um dedo. Funciona também com Apple Pencil, desenha como um mouse
• Snap: snap de grade (G alterna a grade) + guias de alinhamento inteligentes contra bordas e centros de outros elementos (⇧G alterna)
• Seleção: clique, shift-clique, marquee, ⌘A, mover, redimensionar com 8 alças, alça de rotação, nudge com setas, ⌘G agrupar / ⇧⌘G desagrupar
• Edição: desfazer/refazer (⌘Z / ⇧⌘Z) com passos do tamanho da intenção, uma sequência de nudges com setas ou ajustes de controle deslizante desfaz como um só, copiar/colar/recortar, ⌘D duplicar, ⌥-arrastar duplicar, ordem de camadas (frente/trás/avançar/recuar), opacidade
• Estilização: paleta Anthropic (tinta, coral, pervinca, sálvia, terracota, manteiga…) mais uma rampa neutra preto→cinzas→branco abrindo tanto traço quanto preenchimento, uma cor de texto independente (Auto segue o traço e muda para claro em preenchimentos escuros; ou escolha qualquer cor da paleta/personalizada apenas para o texto), um seletor de cor personalizado (amostra de arco-íris) com campo hex, uma opção sem traço (formas apenas com preenchimento), seis estilos de preenchimento (sólido, hachurado, linhas densas, hachura cruzada, pontos, ondas, funcionam também em ícones), 3 larguras de traço, estilos de linha limpo/esboçado/rabiscado mais pontilhado e tracejado, cantos redondos/afiados, curvatura de seta e estilos de ponta de seta por extremidade (seta / triângulo oco / anel de círculo / nenhum)
• Temas: papel claro (creme) e escuro (tinta), as cores da paleta são armazenadas como tokens e re-resolvem por tema; cores hex personalizadas permanecem fixas
• Painel de configurações: o botão ? abre um painel lateral de Ajuda / Configurações: Configurações contém controles deslizantes para os três predefinições de largura de linha, os quatro tamanhos de texto P/M/G/GG, e os padrões de espaçamento de texto (linhas, parágrafo, letras, usados por novos textos e pelo botão Redefinir espaçamento), com redefinições por seção e exportação/importação de configurações (um .json carregando cada predefinição mais ícones fixados, recarregável a qualquer momento ou em outra máquina), aplicado ao vivo e persistido no navegador
• Arquivos: Novo documento (⌥⌘N, com aviso de salvar primeiro, desfazível), Salvar/Abrir .json esboços, Salvar pede um nome de arquivo e o lembra, Abrir substitui o documento inteiro e adota o nome do arquivo, exportar PNG (2×) ou SVG, cada um com fundo ou transparente, salvamento automático no localStorage
• Pressione ? no aplicativo para atalhos, dicas e Configurações. O menu ☰ contém o documento (Novo/Abrir/Salvar/Importar/Modelos) e a apresentação (Apresentar/Repetir/Tour); o botão ⬇ (canto superior direito) é o menu de exportação, agrupado em "Esta página" e "Documento inteiro", com uma alternância Fundo transparente que controla as exportações PNG e SVG.

Arquivos

Arquivo	Função
index.html	Interface de UI (barra de ferramentas, painel de estilos, menus, diálogos)
css/style.css	Tema de UI "ilha" cream, claro e escuro
js/core.js	Motor: modelo de elementos, geometria, renderizador à mão com semente, roteamento de setas, exportações
js/app.js	Interações: seleção, snapping, histórico, edição de texto, templates, salvamento automático
js/material-icons.js	Catálogo gerado de nomes de ícones do Google Material + tags de busca
mcp/	Extensão do Claude Desktop: koralpaper.mcpb (instalação com um clique) + a ponte sem dependências
examples/	Documentos prontos para abrir (o tour do KoralPaper)
docs/	Recursos do README

Privacidade

O KoralPaper não coleta nada. Sem conta, sem analytics, sem servidor: seu trabalho vive no armazenamento do seu navegador e nos arquivos que você salva. A ponte MCP roda apenas em 127.0.0.1 e não guarda dados. Política completa: privacy.html.

Licença e créditos

MIT: livre para usar, modificar e compartilhar.

KoralPaper é uma criação de Stefanos Karagos, CAIO Group. wearecaio.com. © 2026 Stefanos Karagos. O histórico de versões está em CHANGELOG.md; a versão em execução aparece na parte inferior do menu ☰ e é gravada em cada .json salvo.

Construído com Claude em 2026. Seguro para editar livremente: sem módulos nativos, sem arquivos de dados.