Open source · MIT · macOS, Windows, Linux

Um editor de pixel art em que a IA desenha ao vivo

O Ladrilho é um editor de pixel art para desktop com servidor MCP embutido. O Claude desenha no mesmo documento que você tem aberto: você vê cada passo, desfaz com Ctrl/Cmd+Z e pausa a IA quando quiser. Sem conta, sem telemetria.

Baixar (abre em nova aba)Star no GitHub (abre em nova aba)Ler a documentação (abre em nova aba)

Versão para macOS disponível agora; Windows e Linux saem pelo CI.

Cada pixel desta página foi desenhado pelo Claude dentro do Ladrilho, pelo servidor MCP do app.

// 02 — IA ao vivo

Veja a IA desenhar, passo a passo

O Ladrilho vem com o ladrilho-mcp, um servidor MCP com 31 ferramentas. O Claude cria sprites, define paletas, desenha, cria camadas e quadros e olha o canvas — ao vivo, no app que você tem aberto.

Uma sessão real

Uma coruja arcana desenhada pelo Claude no Ladrilho, gravada chamada por chamada.

Uma coruja arcana surgindo passo a passo enquanto a IA a desenha

Passo 12 de 12 — IA: revisão: reflexo do olho direito e AA do contorno

Chamadas MCP

  1. status({})
  2. criar_sprite({nome:coruja arcana,largura:48,altura:48})
  3. definir_paleta({cores:[#1a1430,#2b2150,#40337a,#5a4ba0,#7a6cc0,#a294dc,#4a3c5e,#6f5f86],nome:coruja arcana,rotulo:paleta da coruja arcana})
  4. alterar_camada({camada:c1,nome:coruja})
  5. alterar_frame({frame:0,duracao_ms:500})
  6. executar_lote({operacoes:6,rotulo:esboço: cabeça, corpo, asas e penachos})IA: esboço: cabeça, corpo, asas e penachos
  7. ler_pixels({frame:0,formato:hex,regiao:{4}})
  8. ver_canvas({frame:0,escala:6,grade:true})
  9. criar_frame({duplicar_de:0,posicao:1,duracao_ms:500})
  10. executar_lote({operacoes:13,rotulo:blocos de cor})IA: blocos de cor
  11. ler_pixels({frame:1,formato:hex,regiao:{4}})
  12. ver_canvas({frame:1,escala:6,grade:true})
  13. criar_frame({duplicar_de:1,posicao:2,duracao_ms:500})
  14. criar_camada({nome:galho,posicao:0,rotulo:camada galho})
  15. executar_lote({operacoes:6,rotulo:galho e folhas})IA: galho e folhas
  16. ler_pixels({frame:2,formato:hex,regiao:{4}})
  17. ver_canvas({frame:2,escala:6,grade:true})
  18. criar_frame({duplicar_de:2,posicao:3,duracao_ms:500})
  19. executar_lote({operacoes:1,rotulo:sombras da plumagem})IA: sombras da plumagem
  20. ler_pixels({frame:3,formato:hex,regiao:{4}})
  21. ver_canvas({frame:3,escala:6,grade:true})
  22. criar_frame({duplicar_de:3,posicao:4,duracao_ms:500})
  23. executar_lote({operacoes:1,rotulo:luz do alto à esquerda})IA: luz do alto à esquerda
  24. ler_pixels({frame:4,formato:hex,regiao:{4}})
  25. ver_canvas({frame:4,escala:6,grade:true})
  26. criar_frame({duplicar_de:4,posicao:5,duracao_ms:500})
  27. executar_lote({operacoes:1,rotulo:textura das penas})IA: textura das penas
  28. ler_pixels({frame:5,formato:hex,regiao:{4}})
  29. ver_canvas({frame:5,escala:6,grade:true})
  30. criar_frame({duplicar_de:5,posicao:6,duracao_ms:500})
  31. executar_lote({operacoes:2,rotulo:casca do galho e garras})IA: casca do galho e garras
  32. ler_pixels({frame:6,formato:hex,regiao:{4}})
  33. ver_canvas({frame:6,escala:6,grade:true})
  34. criar_frame({duplicar_de:6,posicao:7,duracao_ms:500})
  35. executar_lote({operacoes:2,rotulo:contorno seletivo})IA: contorno seletivo
  36. ler_pixels({frame:7,formato:hex,regiao:{4}})
  37. ver_canvas({frame:7,escala:6,grade:true})
  38. criar_frame({duplicar_de:7,posicao:8,duracao_ms:500})
  39. executar_lote({operacoes:1,rotulo:olhos âmbar e bico})IA: olhos âmbar e bico
  40. ler_pixels({frame:8,formato:hex,regiao:{4}})
  41. ver_canvas({frame:8,escala:6,grade:true})
  42. criar_frame({duplicar_de:8,posicao:9,duracao_ms:500})
  43. definir_pixels({camada:coruja,pixels:24,frame:9,rotulo:runas no peito})IA: runas no peito
  44. ler_pixels({frame:9,formato:hex,regiao:{4}})
  45. ver_canvas({frame:9,escala:6,grade:true})
  46. criar_frame({duplicar_de:9,posicao:10,duracao_ms:500})
  47. criar_camada({nome:magia,posicao:2,rotulo:camada magia})
  48. executar_lote({operacoes:1,rotulo:brilho mágico})IA: brilho mágico
  49. ler_pixels({frame:10,formato:hex,regiao:{4}})
  50. ver_canvas({frame:10,escala:6,grade:true})
  51. criar_frame({duplicar_de:10,posicao:11,duracao_ms:2000})
  52. ver_canvas({frame:11,regiao:{4},escala:12,grade:true})
  53. executar_lote({operacoes:2,rotulo:revisão: reflexo do olho direito e AA do contorno})IA: revisão: reflexo do olho direito e AA do contorno
  54. ler_pixels({frame:11,formato:hex,regiao:{4}})
  55. ver_canvas({frame:11,escala:6,grade:true})
  56. ver_canvas({frame:0})
  57. ver_canvas({frame:11,onion:true})
  58. exportar({escala:1,sobrescrever:true,formato:folha,disposicao:horizontal,caminho:/Users/gabrielalmeidasantosmelo/projetos/ladrilho-site/public/arte/ia/ia-sessao.png})
  59. exportar({escala:3,sobrescrever:true,formato:gif,caminho:/Users/gabrielalmeidasantosmelo/projetos/ladrilho-site/public/arte/ia/ia-sessao.gif})
  60. salvar({caminho:/Users/gabrielalmeidasantosmelo/projetos/ladrilho-site/public/arte/fontes/ia-sessao.ladrilho,sobrescrever:true})
  61. listar_historico({limite:100})
O canvas do Ladrilho com régua e grade depois de cada passo da IA
O que a IA vê (ver_canvas) — Passo 12 de 12
  1. O canvas do Ladrilho com régua e grade depois de cada passo da IA
    Passo 1 de 12executar_lote({ operacoes: 6 (desenhar_forma ×6), rotulo: "esboço: cabeça, corpo, asas e penachos" })IA: esboço: cabeça, corpo, asas e penachos
  2. O canvas do Ladrilho com régua e grade depois de cada passo da IA
    Passo 2 de 12executar_lote({ operacoes: 13 (desenhar_forma ×13), rotulo: "blocos de cor" })IA: blocos de cor
  3. O canvas do Ladrilho com régua e grade depois de cada passo da IA
    Passo 3 de 12executar_lote({ operacoes: 6 (desenhar_forma ×5, preencher ×1), rotulo: "galho e folhas" })IA: galho e folhas
  4. O canvas do Ladrilho com régua e grade depois de cada passo da IA
    Passo 4 de 12executar_lote({ operacoes: 1 (desenhar_mapa ×1), rotulo: "sombras da plumagem" })IA: sombras da plumagem
  5. O canvas do Ladrilho com régua e grade depois de cada passo da IA
    Passo 5 de 12executar_lote({ operacoes: 1 (desenhar_mapa ×1), rotulo: "luz do alto à esquerda" })IA: luz do alto à esquerda
  6. O canvas do Ladrilho com régua e grade depois de cada passo da IA
    Passo 6 de 12executar_lote({ operacoes: 1 (desenhar_mapa ×1), rotulo: "textura das penas" })IA: textura das penas
  7. O canvas do Ladrilho com régua e grade depois de cada passo da IA
    Passo 7 de 12executar_lote({ operacoes: 2 (desenhar_mapa ×2), rotulo: "casca do galho e garras" })IA: casca do galho e garras
  8. O canvas do Ladrilho com régua e grade depois de cada passo da IA
    Passo 8 de 12executar_lote({ operacoes: 2 (desenhar_mapa ×2), rotulo: "contorno seletivo" })IA: contorno seletivo
  9. O canvas do Ladrilho com régua e grade depois de cada passo da IA
    Passo 9 de 12executar_lote({ operacoes: 1 (desenhar_mapa ×1), rotulo: "olhos âmbar e bico" })IA: olhos âmbar e bico
  10. O canvas do Ladrilho com régua e grade depois de cada passo da IA
    Passo 10 de 12definir_pixels({ camada: "coruja", pixels: 24, rotulo: "runas no peito" })IA: runas no peito
  11. O canvas do Ladrilho com régua e grade depois de cada passo da IA
    Passo 11 de 12executar_lote({ operacoes: 1 (desenhar_mapa ×1), rotulo: "brilho mágico" })IA: brilho mágico
  12. O canvas do Ladrilho com régua e grade depois de cada passo da IA
    Passo 12 de 12executar_lote({ operacoes: 2 (definir_pixels ×2), rotulo: "revisão: reflexo do olho direito e AA do contorno" })IA: revisão: reflexo do olho direito e AA do contorno
Uma coruja arcana surgindo passo a passo enquanto a IA a desenha

  • Um passo de desfazer por chamada

    Cada chamada da IA vira um único passo de desfazer rotulado "IA: …". Ctrl/Cmd+Z volta.

  • Espera o seu traço

    As escritas da IA entram numa fila e esperam o traço que você está desenhando terminar.

  • Pausar IA sempre à vista

    O botão Pausar IA fica na barra de status. Pausada, toda escrita é recusada.

  • Abre o app para você

    Se o Ladrilho estiver fechado, o servidor MCP o abre e espera ficar pronto (até 30 s).

  • Só local

    O servidor do app escuta só em 127.0.0.1, em porta aleatória, com um token Bearer novo a cada execução.

  • Sem scripts arbitrários

    Não existe ferramenta para rodar scripts. A IA só usa as 31 ferramentas de desenho e arquivo.

Todas as ferramentas que a IA pode usar

31 ferramentas

Estado1

  • statusLeitura

    Versão do app, estado da pausa e documentos abertos

Documento5

  • criar_spriteEscrita

    Cria um sprite (até 1024×1024) numa aba nova

  • abrir_arquivoEscrita

    Abre um arquivo .ladrilho, PNG ou GIF

  • salvarEscrita

    Salva o documento como .ladrilho

  • listar_documentosLeitura

    Lista os documentos abertos

  • ativar_documentoEscrita

    Troca para outro documento aberto

Paleta2

  • definir_paletaEscrita

    Define a paleta por cores ou slug da Lospec

  • ler_paletaLeitura

    Lê a paleta atual

Desenho8

  • definir_pixelsEscrita

    Pinta pixels soltos ou trechos horizontais

  • desenhar_mapaEscrita

    Desenha um mapa de caracteres: uma letra por cor

  • desenhar_formaEscrita

    Desenha linha, retângulo, elipse ou polígono

  • preencherEscrita

    Balde contíguo ou global, com tolerância

  • substituir_corEscrita

    Troca uma cor por outra na camada, quadro ou sprite

  • limparDestrutiva

    Apaga uma região ou a cel inteira

  • transformarEscrita

    Espelha, gira ou desloca pixels

  • colar_imagemEscrita

    Cola um PNG numa posição, se quiser numa camada nova

Lote1

  • executar_loteEscrita

    Roda até 500 operações num só passo rotulado

Camadas4

  • criar_camadaEscrita

    Cria uma camada

  • alterar_camadaEscrita

    Renomeia ou muda visibilidade, opacidade e bloqueio

  • remover_camadaDestrutiva

    Remove uma camada

  • mover_camadaEscrita

    Muda a ordem de uma camada

Quadros3

  • criar_frameEscrita

    Cria um quadro, se quiser duplicando outro

  • alterar_frameEscrita

    Muda a duração de um quadro

  • remover_frameDestrutiva

    Remove um quadro

Visão3

  • ver_canvasLeitura

    Devolve um PNG do canvas com régua, grade e onion skin

  • ler_pixelsLeitura

    Lê as cores de uma região (até 64×64)

  • ver_animacaoLeitura

    Devolve os quadros lado a lado com as durações

Histórico3

  • desfazerEscrita

    Desfaz os passos da própria IA (nunca os seus)

  • refazerEscrita

    Refaz passos da IA que foram desfeitos

  • listar_historicoLeitura

    Lista o histórico com rótulos e autores

Exportação1

  • exportarEscrita

    Exporta PNG, GIF ou sprite sheet em escala inteira

Ligue o Claude

Claude Code

bash
claude mcp add ladrilho -- "/Applications/Ladrilho.app/Contents/MacOS/ladrilho-mcp"

Claude Desktop

~/Library/Application Support/Claude/claude_desktop_config.json
{
  "mcpServers": {
    "ladrilho": {
      "command": "/Applications/Ladrilho.app/Contents/MacOS/ladrilho-mcp"
    }
  }
}

O caminho exato aparece em Preferências › IA › Usar com IA, com os comandos prontos para copiar.

Depois é só pedir, por exemplo:

“desenhe um cogumelo 16×16 com a paleta PICO-8 no Ladrilho”

Segurança do servidor local

  • Escuta só em 127.0.0.1, em porta aleatória.
  • Exige token Bearer: 32 bytes aleatórios, novo a cada execução, comparado em tempo constante.
  • Recusa outro Host e qualquer cabeçalho Origin; sem CORS.
  • A única conexão de rede é baixar uma paleta da Lospec quando você (ou a IA) pede pelo nome.
O Ladrilho enquanto a IA desenha um cogumelo, com o indicador da IA e o botão Pausar IA
Captura do appO Ladrilho com a IA desenhando, revelação progressiva ligada.

// 03 — Ferramentas

Um editor completo, não só um truque de IA

As ferramentas que você espera, com os atalhos do Aseprite pela posição da tecla — funcionam igual no ABNT2.

  • Demonstração do lápis: um traço à mão livre com e sem pixel-perfect, os cantos dobrados sumindo

    Lápis

    Atalho: B

    Traço livre com pixel-perfect: some com os cantos em L do traço.

  • Demonstração da borracha: parte de uma forma sendo apagada para transparente

    Borracha

    Atalho: E

    Apaga para transparente, com os mesmos tamanhos de pincel do lápis.

  • Demonstração do balde: uma forma fechada se enchendo de cor

    Balde

    Atalho: G

    Preenchimento contíguo ou global, com tolerância.

  • Demonstração da linha: uma linha de pixels entre dois pontos

    Linha

    Atalho: L

    Linhas de pixel limpas entre dois pontos.

  • Demonstração do retângulo: um retângulo de contorno e outro cheio

    Retângulo

    Atalho: U

    Contorno ou cheio.

  • Demonstração da elipse: uma elipse desenhada de canto a canto

    Elipse

    Atalho: ShiftU

    Contorno ou cheia, simétrica em qualquer tamanho.

  • Demonstração do conta-gotas: uma cor pega do canvas e o seletor mudando

    Conta-gotas

    Atalho: I

    Pega uma cor do canvas. Segure Alt para pegar rápido.

  • Demonstração da seleção: um cogumelo selecionado com formigas andando e movido como seleção flutuante

    Seleção retangular

    Atalho: M

    Seleciona, move e cola como seleção flutuante.

  • Demonstração do espelhar: um peixinho dourado espelhado na horizontal com Shift+H

    Espelhar

    Atalho: ShiftH

    Espelha, gira ou desloca a seleção ou a camada.

E mais

  • Pincel quadrado ou redondo de 1 a 64 px
  • Botão esquerdo = cor primária, direito = secundária
  • Tolerância e modo global do balde
  • Traço pixel-perfect
  • Colar flutuante, que você posiciona antes de aplicar
  • Tamanho do canvas e do sprite

// 04 — Animação

Quadros, tempo e onion skin

Anime numa timeline em que cada quadro tem a própria duração, confira o movimento com onion skin e veja a prévia em loop.

Pequeno aventureiro de capa correndo num ciclo de 8 quadros em loop
Um ciclo de corrida em 8 quadros, desenhado no Ladrilho.
  • Timeline com duração por quadro
  • Onion skin (F3) com o quadro anterior e o próximo
  • Prévia em loop
  • Exporta GIF animado ou sprite sheet
  • Camadas com opacidade, visibilidade e bloqueio
Canvas do Ladrilho com um quadro do ciclo de corrida e os quadros vizinhos em onion skin
Captura do appOnion skin no quadro 4 do ciclo de corrida (ver_canvas).
Os 8 quadros do ciclo de corrida lado a lado, cada um com o índice e a duração
Captura do appOs quadros do ciclo de corrida com as durações (ver_animacao).

// 05 — Cor

Paletas e pontilhado

Paletas embutidas, paletas da Lospec pelo nome, substituir cor e pontilhado ordenado alinhado à grade do sprite.

A mesma cena, seis paletas

Um chalé na floresta, recolorido com as paletas embutidas usando substituir_cor.

  • Baixe qualquer paleta da Lospec pelo slug.
  • Importe e exporte paletas .gpl, .pal e .hex.
  • Seletor de cor HSV, RGB e hex com alfa.

Um chalé na floresta em seis paletas: original, PICO-8, DB32, Endesga 32, Sweetie 16 e Game Boy

  • Original
  • PICO-8
  • DB32
  • Endesga 32
  • Sweetie 16
  • Game Boy

Liso ou pontilhado

Pontilhado ordenado entre a cor primária e a secundária: xadrez, Bayer 2×2, 4×4 ou 8×8, nível de 0 a 100%.

O mesmo céu de pôr do sol com lua, liso e com pontilhado xadrez, Bayer 4×4 e Bayer 8×8

  • Liso
  • Xadrez
  • Bayer 4×4
  • Bayer 8×8

// 06 — Formatos

Arquivo aberto, exportação padrão

Seu trabalho fica num formato aberto e sai nos formatos que jogos e engines esperam.

Moeda de ouro girando
A sprite sheet real da moeda, como o Ladrilho exporta: 8 quadros lado a lado.

  • PNG

    Quadro atual ou sequência numerada, em escala inteira até 20×.

  • GIF animado

    Cada quadro mantém a própria duração.

  • Sprite sheet

    Horizontal ou em grade, com JSON de atlas no formato do Aseprite.

  • Importar PNG e GIF

    Traga imagens prontas para continuar o trabalho.

  • Autosave

    Autosave silencioso com recuperação depois de uma queda, mais abas e recentes.

O editor do Ladrilho no tema escuro com um sprite 32×32 de carinha sorridente, ferramentas, paleta, camadas e timeline
Captura do appO editor do Ladrilho com um sprite 32×32, tema escuro.
Atalhos principais
Lápis / borracha / baldeB/E/G
Linha / retângulo / elipseL/U/Shift+U
Conta-gotasI/Alt(segurar)
Seleção / moverM/V
MãoH/Espaço(segurar)
Zoom 100–3200% / ajustar1–6/Mod+0
Novo quadro / nova camadaAlt+N/Shift+N
Onion skinF3
Próxima região (teclado)F6
Desfazer / refazerMod+Z/Mod+Shift+Z
Salvar / salvar comoMod+S/Mod+Shift+S
ExportarMod+Shift+Alt+S
Trocar primária e secundáriaX
Cor anterior / próxima[/]
Tocar animaçãoEnter
Quadro anterior / próximo←/→
Mostrar/ocultar a timelineTab
PreferênciasMod+,
Lista completa de atalhosMod+Shift+Alt+K

Mod = Cmd no macOS, Ctrl nos outros. Perfil do Aseprite, pela posição da tecla.

// 07 — Comparação

Como ele se compara, com honestidade

O Ladrilho é novo. Veja onde ele está ao lado dos editores que as pessoas já usam.

Ladrilho comparado com Aseprite, Pixelorama, LibreSprite e Piskel
RecursoLadrilhoAsepritePixeloramaLibreSpritePiskel
Open source e grátisSimNãoCódigo disponível sob EULA proprietária; pagoSimSimSim
macOS, Windows e LinuxSimmacOS agora; Windows e Linux pelo CISimSimSimSimWeb, mais uma versão desktop (NW.js)
MCP ao vivo embutidoSimParcialCom extensão de terceiros conectada à mãoNãoNãoNão
O MCP abre o app sozinhoSimNãoNãoNãoNão
Passo de desfazer rotulado por chamada da IASimParcialCom extensão de terceiros conectada à mãoNãoNãoNão
Botão Pausar IASimNãoNãoNãoNão
Traço pixel-perfectSimSimSimSimNão confirmado
Pontilhado (dithering)SimPontilhado ordenado (xadrez, Bayer)SimSimNão confirmadoSim
Onion skinSimSimSimSimSim
Exportar sprite sheetSimSimSimSimSim
TilemapsNo roadmapSimSimNãoNão
Modo de cor indexadaNo roadmapSimSimSimNão
ScriptingNo roadmapSimSimSimNão
Arquivos .asepriteNo roadmapSimSimParcialImporta parcialmente; exportaNão

Precisa de tilemaps, cor indexada ou scripting hoje? Aseprite ou Pixelorama são a melhor escolha por enquanto.

Fonte: pesquisa de mercado do Ladrilho de , com link para cada afirmação. (abre em nova aba)

// 08 — Open source

MIT, às claras

O código, as specs e o plano são públicos. Leia, abra uma issue, mande um pull request.

No roadmap

  • Seleção elíptica, laço e varinha mágica
  • Simetria
  • Modo tile
  • Modo de cor indexada
  • Tags de animação (frente, trás, ping-pong)
  • Importar e exportar .aseprite
  • Tilemaps
  • Scripting
Pequena vila montada só com o tileset: uma cabana de toras com janelas acesas, um rio com ponte de madeira, estrada de terra, cerca, poço e muros de pedra

Créditos

  • Pixelify Sans — SIL Open Font License.
  • Geist e Geist Mono — SIL Open Font License.
  • Atalhos e comportamento inspirados no Aseprite; nenhum código do Aseprite foi usado.
  • Toda a pixel art desta página foi desenhada pelo Claude no Ladrilho, via MCP.

// 09 — Download

Baixe o Ladrilho

Grátis e open source. Escolha a sua plataforma ou compile a partir do código.

  • Disponível

    macOS (Apple Silicon)

    .dmg de desenvolvimento com assinatura ad-hoc. Na primeira vez, botão direito no app › Abrir.

Baixar no GitHub Releases (abre em nova aba)

A versão para macOS não é notarizada. Se o macOS bloquear, remova a quarentena:

bash
xattr -dr com.apple.quarantine /Applications/Ladrilho.app

A partir do código

Requer Node 22, Rust estável e, no Linux, WebKitGTK 4.1.

bash
npm ci
npm run tauri dev