Repolode
ZSeven-W

ZSeven-W/openpencil

Ferramenta open source de design vetorial nativa de IA, com geração de prompts para o canvas, equipes de agentes em paralelo, servidor MCP e exportação de código.

Alternativa open source a:FigmaPencil

Estrelas
6,265
Forks
543
Issues abertas
23
Último commit
ontem

O que é?

OpenPencil é uma ferramenta de design vetorial para criar interfaces em um canvas infinito. Os usuários descrevem uma página em linguagem natural, e a IA a gera diretamente no canvas; também é possível selecionar elementos existentes e pedir alterações pelo chat. Os designs são armazenados em arquivos `.op`, que usam JSON e podem ser lidos, comparados com diff e versionados no Git.

O projeto inclui um modo multiagente em que um orquestrador divide uma página em seções e vários agentes as geram em paralelo. Também inclui um servidor MCP integrado, que pode ser instalado no Claude Code, Codex, OpenCode e outras CLIs de agentes, permitindo que leiam e modifiquem arquivos `.op`. As variáveis de design são mapeadas para propriedades CSS customizadas, e os designs podem ser exportados como código React com Tailwind, HTML com CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose ou React Native.

O editor é escrito em Rust e funciona como aplicativo desktop nativo no macOS, Windows e Linux, ou no navegador por meio de uma build WASM. O projeto também oferece uma ferramenta de linha de comando `op` e um SDK web incorporável para visualizar arquivos `.op` em modo somente leitura.

Recursos principais

  • 01Gera interfaces a partir de prompts de texto diretamente em um canvas infinito, com saída em streaming.
  • 02Equipes de agentes projetam diferentes seções da página em paralelo.
  • 03O servidor MCP integrado funciona com Claude Code, Codex, OpenCode, Kiro e Copilot CLI.
  • 04Armazena designs em arquivos `.op` JSON legíveis por pessoas e compatíveis com o Git.
  • 05Exporta código para React, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose e outros.
  • 06Inclui uma CLI `op` e SDKs de visualização web incorporáveis, em modo somente leitura.

Casos de uso

  • Prototipar telas de interface descrevendo-as para um assistente de IA.
  • Permitir que agentes de programação leiam e editem arquivos de design por meio do MCP.
  • Transformar um design em código de framework sem precisar reimplementá-lo manualmente.
  • Incorporar à própria aplicação web um visualizador de arquivos de design em modo somente leitura.

Início rápido

  1. 1

    Clone o repositório com os submódulos

    git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git
  2. 2

    Instale Rust (stable), um pré-requisito para compilar

  3. 3

    Inicie o servidor de desenvolvimento web

    bash scripts/start-web-rust.sh
  4. 4

    Ou execute o aplicativo para desktop

    cargo run -p op-host-desktop

Antes de usar

  • O projeto ainda está em estágio inicial e o README continua mudando, então espere encontrar alguns pontos pouco refinados.
  • Os agentes CLI e ACP funcionam apenas no aplicativo nativo para desktop, não no host web.
  • Para compilar a partir do código-fonte, é necessário instalar Rust e configurar os submódulos; no Windows, é preciso consultar um guia de compilação separado.

Tópicos

Perguntas frequentes

O que é openpencil?
Ferramenta open source de design vetorial nativa de IA, com geração de prompts para o canvas, equipes de agentes em paralelo, servidor MCP e exportação de código. OpenPencil é uma ferramenta de design vetorial para criar interfaces em um canvas infinito. Os usuários descrevem uma página em linguagem natural, e a IA a gera diretamente no canvas; também é possível selecionar elementos existentes e pedir alterações pelo chat. Os designs são armazenados em arquivos `.op`, que usam JSON e podem ser lidos, comparados com diff e versionados no Git.
openpencil é gratuito? Qual é a licença?
openpencil é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
openpencil ainda é mantido?
Manutenção ativa. O último commit de openpencil foi em 19 de out. de 2026.
Para que posso usar openpencil?
Prototipar telas de interface descrevendo-as para um assistente de IA. Permitir que agentes de programação leiam e editem arquivos de design por meio do MCP. Transformar um design em código de framework sem precisar reimplementá-lo manualmente. Incorporar à própria aplicação web um visualizador de arquivos de design em modo somente leitura.
Como instalar openpencil?
Clone o repositório com os submódulos: git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git Instale Rust (stable), um pré-requisito para compilar Inicie o servidor de desenvolvimento web: bash scripts/start-web-rust.sh Ou execute o aplicativo para desktop: cargo run -p op-host-desktop
Onde consigo openpencil?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/ZSeven-W/openpencil

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados