KoralPaper - Design studio where AI draws, charts and animates

KoralPaper

Desenhe seu pensamento. 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 time-lapse de stop-motion. Ele roda 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 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 leve tremido, notas adesivas, etiquetas, setas curvas e em cotovelo, títulos serifados 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.

Novidade: a Biblioteca de prompts, 99 prompts prontos para copiar e colar para Claude Desktop + KoralPaper, pesquisáveis e filtráveis por categoria: diagramas, carrosséis, gráficos, canvases de negócios, workshops e uma seção Divertido & Insano 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, o Claude também	Todas as Google Fonts Pesquise, carregue, 9 pesos, cores de letras	Modelos em categorias Integrados mais seus próprios salvamentos
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-o 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 instalar 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? Pegue o ZIP mais recente na página de Releases (ou clone o repositório), descompacte e clique duas vezes em index.html — ele executa 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 então 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 em ? → Configurações). Uma tela em branco mostra dicas iniciais suaves até seu 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/mover (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 de 6 raios do KoralPaper, as três marcas (asterisco sobre papel, papel e traço, bolha de pensamento de papel), espiral, nuvem, estrela, coração, raio, balão de fala, exclamação, ponto de interrogação, visto, tudo desenhado à mão; clique no botão ✳ da barra de ferramentas para escolher.
  Além disso, ícones Google Material: pesquise 3.000 Símbolos Materiais direto no menu de ícones (fixados ★, usados recentemente e os nove populares lideram a grade, clique com o botão direito para fixar) e carimbe-os como vetores escaláveis. Buscados do Google uma vez por ícone, armazenados em cache e incorporados ao seu documento; os esboços salvos permanecem totalmente offline.

• Texto em todo 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 ficam no ponto médio e seguem cada movimento e curvatura

• 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 com quebra suave dentro de formas mantêm o espaçamento de linha), espaçamento de letras (rastreamento de −7 a +15px) e alinhamento vertical dentro das formas (superior / médio / inferior), tudo no painel de estilo e preservado ao copiar/colar estilo e nas 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 (serifada/sem serifa/manuscrita) além de um seletor agrupado de Fontes do Google com 32 famílias, Sans e display (Inter, Montserrat, Roboto Condensed, Bebas Neue, Fjalla One, Oswald, Imbue, DM Sans, Space Grotesk), Serifa (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 e ponto (Bitcount ×3, Tiny5, Doto); precisa de internet uma vez; fallbacks do sistema offline

• Desenhe com Claude (MCP): instale a extensão koralpaper.mcpb com um clique (na pasta mcp/) no aplicativo gratuito Claude Desktop, mantenha o KoralPaper aberto e é só falar: "desenhe um fluxograma de integração de clientes em um quadro 1920×1080" — o 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). O Claude também pode ler a página e ver uma imagem renderizada dela, então "organize este layout" ou "deixe a terceira caixa verde" funcionam com o que está no papel, incluindo o que você desenhou à mão. O ✳ na barra superior acende 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 além da conversa com o 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 só arquivo pequeno: nome, seis cores de destaque, papel, fontes de título e corpo (qualquer fonte do Google). Quando ativo, os gráficos usam suas cores de destaque, os 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 cores e o Claude lê o kit para que tudo o que ele desenhar venha com a sua marca. Exporte o kit como .json e toda a sua equipe 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 horizontais, várias séries, negativos bem-vindos), gráficos de linha, gráficos de radar, pizzas, donuts, mapas de calor ou uma tabela listrada elegante, com título, eixos, legenda, rótulos de valores, legenda móvel e pré-visualização ao vivo, em dois estilos: rabisco à mão (Sketchy) ou profissional limpo (Clean). Tudo entra como elementos normais de esboço em um grupo: recoloque qualquer barra ou fatia com os controles habituais e clique com o botão direito no gráfico para editar seus dados e reconstruí-lo no lugar.

• Gravador de lapso de tempo (☰): pressione F para capturar a página como quadro, ou ative a gravação automática e cada alteração vira um quadro. Cada quadro tem um tempo de espera e um tempo de movimento: durante o movimento, os elementos viajam até o próximo quadro em passos instáveis 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 fazem corte seco, ou desvanecem se você marcar Fade. Keyframes de câmera fazem zoom e panorâmica entre quadros, pele de cebola fantasma o quadro anterior enquanto você constrói o próximo, e uma pré-visualização ao vivo com scrubber toca a animação inteira antes de exportar como GIF em loop ou vídeo .webm. As 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 sem ferramentas extras.

• Instantâneos (☰): checkpoints nomeados do documento inteiro, mantidos localmente; restaure qualquer um a qualquer momento, um desfazer traz a versão atual de volta.

• Receitas de prompt (aba Claude): cópias com um clique dos movimentos do Claude que funcionam: organizar esta página, reconstruir limpo, transformar em mapa mental, fazer um carrossel, resumir o documento.

• Dobramento de mapa mental: clique com o botão direito em uma forma → "Marcar como raiz do mapa mental" e as ramificações ficam dobráveis, crachás − dobram, crachás 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), as dobras são desfazíveis, salvam com o documento, respeitam exportações e podem ser alternadas ao vivo durante uma apresentação tocando no crachá, 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 enquanto digita, 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 vincula às duas 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 a alça do meio para curvar (arraste de volta para a linha para endireitar). A linha de curvatura de seta também oferece setas em cotovelo, rotas em ângulo reto com cantos arredondados que saem perpendiculares ao lado colado, contornam outras formas automaticamente e mostram uma alça de arraste 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 abrir o popover; G alterna os estados; o ajuste segue o tamanho escolhido

• Cor do papel: o círculo de cor 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; as exportações também usam o papel escolhido. O círculo 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 e retrato, LinkedIn, X, YouTube; papéis de parede para desktop e iPhone; proporções 1:1, 16:9, 9:16, 4:3, 3:2, ou tela ilimitada. Com um artboard ativo, as exportações PNG/SVG têm 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/médio/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 vários

• 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 na 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 recolore o papel, kit de fluxograma, Comparação/Versus, cartão de citação). Salve esta página ou o documento inteiro de várias páginas como seu próprio modelo, com tamanho de tela e cor de papel incluídos, depois renomeie (✎), atualize (↻) ou exclua (✕) qualquer modelo, inclusive os integrados: substitua um integrado pelo seu design, remova-o da lista e "Restaurar integrados" traz os originais de volta a qualquer momento. Modelos aplicados chegam como páginas novas e 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 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 clique viram as páginas; arrastar desenha um traço 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 ao mover o mouse; Esc termina a apresentação e coloca tudo de volta exatamente como estava

• Replay de desenho + exportação animada: ☰ → "Reproduzir o desenho" toca a página atual de volta como se uma mão estivesse esboçando, traços de mão livre revelam ponto a ponto, setas saem do início, formas e texto são tinta 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 um post 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 PNG numerado (pixels exatos do artboard quando configurado) 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 arquivo HTML autocontido, cada página como SVG vetorial inline além de um pequeno visualizador de tema escuro com navegação de página e setas de teclado. Envie para qualquer um: abre em qualquer navegador sem aplicativo, sem servidor, sem conta, funciona offline e as 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 nas 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 → Ativado) que segue a cor do Contorno, Espessura e Estilo de linha, e sobrevive a qualquer estilo de arte, então fotos pálidas mantêm seu lugar na página

• Imagens: arraste e solte ou cole PNG/JPEG (botão 🖼 na barra de ferramentas, I, ou ☰ → Importar imagem); elas agem como qualquer elemento, redimensionam, giram, colam

• Crop a partir do painel ou do menu de clique direito: arraste sobre a região que deseja manter; Uncrop restaura a imagem completa; cortes compõem com Artify em qualquer ordem

• Artify (arte algorítmica): selecione uma imagem e escolha um estilo de arte: Dots, Lines, Stipple, Hatch, Cubist (facetas coloridas), Cubist mono (facetas na cor do seu traço), Flow (traços de tinta que seguem os contornos da foto), Scribble (uma caneta inquieta constrói o tom circulando densamente nas áreas escuras), One line (uma única linha contínua conectando os contornos salientes da foto, baseado em Edge-Drawing), String (arte com linha em torno de pinos), Type (retrato com glifos de máquina de escrever) ou Duotone (pôster com duas tintas, cores de traço + preenchimento), em três níveis de detalhe. Com semente e não destrutivo (volte para Photo a qualquer momento); exportações SVG de imagens artistificadas são vetor puro

• Ajustes de foto: controles deslizantes de Brightness / Contrast / Gamma / Sharpen em todas as imagens; eles moldam tanto a foto quanto os estilos de arte, permitindo ajustar a origem até o halftone/stipple/lines aparecerem

• Tooltips em todo lugar: passe o cursor sobre qualquer botão, ferramenta, alternância de barra de ferramentas, controle de estilo, barra de zoom, e uma tooltip rápida e legível nomeia o item e mostra seu atalho de teclado como um chip de tecla; mova ao longo de uma linha e a próxima dica aparece instantaneamente

• Touch e iPad: pinça para zoom, pan com dois dedos (um segundo dedo cancela com segurança o que o primeiro dedo começou) e as alças de seleção aumentam suas áreas de toque sob o dedo. Funciona também com Apple Pencil, desenha como um mouse

• Snapping: snap na grade (G alterna a grade) + guias de alinhamento inteligentes contra bordas e centros de outros elementos (⇧G alterna)

• Seleção: clique, shift-clique, seleção por marquee, ⌘A, mover, redimensionar com 8 alças, alça de rotação, mover com setas, grupo com ⌘G / desagrupar com ⇧⌘G

• Edição: desfazer/refazer (⌘Z / ⇧⌘Z) com etapas do tamanho da intenção, uma sequência de movimentos com setas ou ajustes de controle deslizante desfaz como um único passo, copiar/colar/recortar, duplicar com ⌘D, duplicar com ⌥-arrastar, ordem de camadas (frente/trás/avançar/recuar), opacidade

• Estilização: paleta Anthropic (ink, coral, periwinkle, sage, terracotta, butter…) mais uma rampa neutra preto→cinzas→branco abrindo tanto traço quanto preenchimento, uma cor de texto independente (Auto segue o traço e inverte 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, eles também funcionam em ícones), 3 larguras de traço, estilos de linha neat/sketchy/scribbly além de pontilhado e tracejado, cantos arredondados/afiados, curvatura de seta e estilos de ponta de seta por extremidade (seta / triângulo vazado / anel circular / nenhum)

• Temas: papel claro (cream) e escuro (ink), as cores da paleta são armazenadas como tokens e são re-resolvidas 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 as três predefinições de largura de linha, os quatro tamanhos de texto S/M/L/XL e os padrões de espaçamento de texto (linhas, parágrafo, letras, usados por novos textos e pelo botão Reset-spacing), com redefinições por seção e exportação/importação de configurações (um .json contendo todas as predefinições além de ícones fixados, recarregável a qualquer momento ou em outra máquina), aplicadas ao vivo e persistidas 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 (New/Open/Save/Import/Templates) e a apresentação (Present/Replay/Tour); o botão ⬇ (canto superior direito) é o menu de exportação, agrupado em "This page" e "Whole document", com uma alternância Transparent background que controla as exportações PNG e SVG.

Arquivos

Arquivo	Função
index.html	Interface (barra de ferramentas, painel de estilos, menus, diálogos)
css/style.css	Tema de interface "ilha" creme, claro+escuro
js/core.js	Mecanismo: modelo de elementos, geometria, renderizador de desenho à mão com seed, roteamento de setas, exportações
js/app.js	Interações: seleção, snapping, histórico, edição de texto, modelos, salvamento automático
js/material-icons.js	Catálogo gerado de nomes de ícones do Google Material + tags de busca
mcp/	Extensão para 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 mantém 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, Grupo CAIO. 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. Pode editar livremente: sem módulos nativos, sem arquivos de dados.