PencilArquivo .pen no repositórioriviera.penarquivo de canvas vetorial, versionado no GitUI kitcomponentes integradosEdição: título mais calmoedite no canvas ou no bloco de prompt
Pencil 
OpenDesign Alternativa Totalmente de Código Aberto ao Pencil.dev: OpenDesign
O OpenDesign e o Pencil são incomumente próximos: ambos são orientados por agentes e mantêm o design como arquivos no seu repositório sob o Git. O OpenDesign é a alternativa gratuita, totalmente de código aberto e neutra em relação a provedores — Apache-2.0 para todo o aplicativo, BYOK com qualquer grande agente de codificação e saídas que abrangem UI, apresentações, protótipos e um design system. Esta página mostra onde eles se sobrepõem, onde o canvas do Pencil genuinamente vence e como fazer a transição.
Veredito, por tarefa12 / Pencil
OpenDesign vs Pencil, três necessidades diferentes
Comece no lugar certo
Esta página · escolhendo
OpenDesign ou Pencil?
Um veredito por situação, uma breve execução em ambas as ferramentas, uma comparação de recursos datada e as condições que mudam a resposta.
Ler o veredito Já usa o PencilMover um design .pen para o OpenDesign
Ambos mantêm arquivos no repositório, então nada é perdido para uma exportação na nuvem. O que muda, o que fica no canvas e os quatro passos.
Ver o que muda Uma pergunta diferenteDeixando o Figma, não o Pencil?
Se o canvas que você está deixando é o do Figma, essa comparação também cobre colaboração e o Dev Mode.
Ler OpenDesign vs FigmaNesta página Visão geral
O que cada um é
Pencil vs OpenDesign: o que cada ferramenta é
O Pencil e o OpenDesign compartilham a grande ideia — design orientado por agentes mantido como arquivos no seu repositório — e diferem no que é aberto, quais agentes são de primeira classe e quão ampla é a saída. O OpenDesign escreve esta comparação sobre seu próprio produto e não é afiliado ao Pencil.
Resposta curta. O OpenDesign é uma alternativa ao Pencil gratuita, totalmente de código aberto (Apache-2.0) e local-first: a mesma ideia de arquivos no repositório orientados por agentes, com todo o aplicativo aberto em vez de apenas o formato de arquivo, BYOK neutro em relação a provedores em Claude, Codex, Cursor, Gemini, OpenCode e Qwen, e saídas que abrangem UI, landing pages, apresentações, protótipos e um design system DESIGN.md. Ele não tem canvas vetorial; se editar manualmente um canvas semelhante ao Figma dentro da sua IDE com colagem nativa do Figma é o que você valoriza, mantenha o Pencil.
Pencil
O Pencil (pencil.dev) é "design no canvas, aterrissa no código": um canvas de design vetorial infinito que vive dentro da sua IDE e base de código, apoiado pela a16z Speedrun. Os arquivos de design usam um formato JSON .pen aberto e documentado que fica no seu repositório sob o Git, e um servidor MCP local permite que agentes de IA os leiam e escrevam. Ele vem com kits de UI integrados e copiar e colar nativo do Figma, e é gratuito enquanto estiver em acesso antecipado.
- Roda emAplicativo desktop local, extensão de IDE e servidor MCP local
- ModeloMCP com vários agentes, otimizado para Claude Code
- SaídaArquivos JSON .pen no seu repositório; telas de UI e componentes para código
- CustoGratuito em acesso antecipado; planos pagos sinalizadossem limites publicados
OpenDesign
O OpenDesign é um agente de design local-first e de código aberto para o qual você aponta seu próprio agente de codificação. Habilidades e uma marca portátil vivem como arquivos no seu repositório; o aplicativo desktop renderiza e revisa o resultado.
- Roda emAplicativo desktop e daemon local na sua máquina
- AgenteO seu: Claude Code, Codex, Cursor, Gemini, OpenCode, Qwen e mais
- SaídaArquivos no diretório do seu projeto
- CustoApache-2.0; você paga seu próprio provedor pelo uso da API
Onde eles se sobrepõem
Arquivos de design orientados por agentes no repositório sob o Git, e UI que se torna código. Isso é a maior parte do que ambas as ferramentas fazem, e a totalidade do que o resto da página compara.
O que esta página não afirma
Que o OpenDesign tem um canvas vetorial, um painel de camadas, kits de UI integrados ou colagem nativa do Figma, ou que arquivos .pen são convertidos automaticamente. Se o canvas é o trabalho, o veredito abaixo diz para manter o Pencil.
Veredito
Pencil ou OpenDesign? O veredito por situação
Escolha o Pencil se…
- Você quer editar um canvas vetorial maduro e semelhante ao Figma manualmente, dentro do Cursor ou VS Code.
- Você cola do Figma com frequência e precisa de camadas e auto-layout intactos.
- Kits de UI integrados e uma experiência de agente focada no Claude são o que você mais valoriza.
Escolha o OpenDesign se…
- Você quer a ferramenta inteira open source — fazer fork, auditar, hospedar você mesmo — não apenas um formato documentado.
- Você quer que o "gratuito" continue gratuito, sem limite do fornecedor após o acesso antecipado; você paga apenas o seu próprio gasto com o modelo.
- Você quer um BYOK neutro em relação ao provedor: Claude, Codex, Cursor, Gemini, OpenCode e Qwen, todos de primeira classe.
- Você quer UI, apresentações, protótipos e um design system renderizados a partir de um único DESIGN.md.
Use ambos se…
- Os designers desenham no canvas do Pencil; o resto dos artefatos é renderizado a partir da mesma marca no OpenDesign.
- Você quer uma alternativa aberta caso os preços de acesso antecipado ou a otimização focada no Claude deixem de ser adequados para você.
- Ambos mantêm os arquivos no repositório, então usá-los lado a lado custa pouco.
Mesmo briefing, dois resultados
O mesmo briefing no Pencil e no OpenDesign
Uma comparação é tão honesta quanto as suas entradas. O mesmo briefing e a mesma marca entram no Pencil e no OpenDesign; o que retorna, como é editado e o que mais você pode renderizar a partir disso é o que você compara. Os painéis abaixo são ilustrações, não capturas de tela; o teste de 20 minutos permite que você mesmo execute o briefing.
Briefing · idêntico em ambas as ferramentas
Crie uma landing page para um pequeno estúdio que reserva estadias de slow-travel. Um hero com um título forte, três lugares em destaque, uma nota curta sobre como a reserva funciona e uma chamada para ação final. Desktop e celular.
- Marca
- Fundo de papel, Albert Sans, um destaque verde, raio de 8px
- Breakpoints
- 1440 desktop, 390 mobile; sem rolagem horizontal
- Teste de edição
- Após o primeiro resultado: "deixe o título mais calmo, troque o segundo lugar"
- Registro
- Modelo, data, tempo até o primeiro resultado, edições necessárias, formato de exportação
PencilArquivo .pen no repositórioOpenDesign + seu agentearquivos no repositórioriviera-landing.htmlnovo · v2DESIGN.mdvinculadoEdição: título mais calmoaponte para o elemento, o agente revisa
IlustrativoAmbos os painéis são ilustrações desenhadas para esta página, não capturas de tela de nenhuma das ferramentas, e o veredito não se baseia neles. Execute o briefing você mesmo com o teste de 20 minutos abaixo e observe os pontos listados aqui para que os dois resultados possam ser comparados de forma justa.
O que observar · ambas as ferramentas
Modelo e versão, data de execução, tempo até o primeiro resultado utilizável, número de edições para chegar a "concluído", o que a exportação continha.
O que observar · Pencil
Qual agente rodou sobre o MCP e como ele se comportou fora do Claude, se o arquivo .pen fez a ida e volta para o código de forma limpa, o que a colagem do Figma preservou.
O que observar · OpenDesign
Agente e chave usados, se o DESIGN.md foi respeitado sem precisar de novo prompt, ambos os breakpoints verificados, versões mantidas como arquivos.
Recurso por recurso
OpenDesign vs Pencil, recurso por recurso
Nove dimensões onde o OpenDesign e o Pencil diferem na prática: licença, tempo de execução, arquivos de design, conta, custo, modelo, superfície principal, alcance de saída e maturidade. Os fatos sobre o Pencil foram verificados em fontes públicas em 2026-09-06; os termos de acesso antecipado podem mudar.
| Dimensão | OpenDesign | Pencil |
|---|---|---|
| Licença | Apache-2.0; o aplicativo inteiro é open source | Aplicativo de código fechado; apenas o formato .pen é documentado |
| Tempo de execução | Daemon local e aplicativo desktop | Aplicativo desktop local, extensão de IDE e servidor MCP local |
| Arquivos de design | Arquivos no seu repositório: DESIGN.md e artefatos | Arquivos JSON .pen no seu repositório |
| Conta | Nenhuma necessária | Login, acesso antecipado |
| Custo | Gratuito e open source; o seu próprio gasto com modelo | Gratuito no acesso antecipado; planos pagos sinalizadosos termos podem mudar |
| Modelo | BYOK neutro em relação ao provedor: Claude, Codex, Cursor, Gemini, OpenCode, Qwen | MCP com vários agentes, otimizado para o Claude Code |
| Superfície principal | Orientado por agente: do briefing aos artefatos, mais uma UI de revisão | Canvas vetorial semelhante ao Figma que você edita diretamente; agente via MCP |
| Alcance de saída | UI, landing pages, apresentações, protótipos, design systems | Telas de UI e componentes para código |
| Auto-hospedagem / fork | Sim | Não; o aplicativo é de código fechado |
Onde o Pencil vence
O canvas prático: uma superfície madura, semelhante ao Figma, que você edita diretamente, com colagem nativa do Figma que mantém as camadas e o auto-layout, kits de UI integrados, e tudo isso dentro do seu IDE. Um desenvolvedor que faz design nunca sai do editor.
Onde o OpenDesign vence
Propriedade e alcance: o aplicativo inteiro é open source, o BYOK é neutro em relação ao provedor em vez de focado no Claude, o gratuito continua gratuito porque não há fornecedor para monetizar você, e a saída abrange muito mais do que UI para código.
Decisão
Quando o OpenDesign é a alternativa certa ao Pencil
Desenvolvedor que faz design no IDE
Desenhe a tela à mão, ao lado do código, com o Claude Code
PencilO canvas dentro do Cursor ou VS Code, a colagem nativa do Figma e o ajuste focado no Claude são exatamente o fluxo de trabalho dessa pessoa. O OpenDesign não tem um canvas para oferecer a eles.
Não é adequado quando a equipe executa o Codex, Gemini ou Qwen em vez do Claude.
Equipe com uma política de código aberto
A ferramenta inteira deve ser auditável e bifurcável
OpenDesignApache-2.0 para o agente, a biblioteca de habilidades e o renderizador; o formato .pen ser documentado não é a mesma coisa.
Não é adequado quando a política é satisfeita apenas por um formato de arquivo aberto.
Marca em muitos tipos de artefatos
Apresentações, landing pages, protótipos e UI de uma única marca
OpenDesignUm DESIGN.md renderiza todos eles sem precisar de novos prompts; o escopo do Pencil é de UI para código. Veja a solução de design system.
Não é adequado quando telas de UI são o único entregável.
Usuário do Pencil se protegendo de acesso antecipado
Gratuito hoje, planos pagos sinalizados
Execute ambosContinue desenhando no Pencil; extraia a marca para o DESIGN.md e renderize o resto no OpenDesign para que nada dependa do preço de um único fornecedor. Ambos mantêm os arquivos no repositório.
Não é adequado quando você espera que os arquivos .pen e o DESIGN.md permaneçam sincronizados automaticamente; eles não permanecem.
Mova um design ou execute ambos
Como mover um design do Pencil para o OpenDesign
Ambas as ferramentas mantêm o design como arquivos no seu repositório, então não há exportação em nuvem com perdas para combater. O que se move é a marca e o briefing, através de uma extração única de uma exportação do Pencil; os arquivos de canvas .pen permanecem editáveis no Pencil.
| Move-se | |
|---|---|
| A marca | Aponte seu agente para uma exportação do Pencil, uma colagem do Figma ou uma captura de tela; ele extrai cores, tipografia, espaçamento e voz para o DESIGN.md. |
| Prompts | Texto simples. Blocos de prompt do canvas são colados em um briefing do OpenDesign como estão. |
| Código gerado | O código que o Pencil produziu a partir de um arquivo .pen pode servir como referência estrutural; o agente renderiza novamente sob o DESIGN.md em vez de corrigi-lo. |
| Permanece no Pencil | |
| Arquivos de canvas .pen | Camadas vetoriais não são convertidas; renderize novamente a partir do briefing e do DESIGN.md. |
| Kits de UI integrados | Kits no estilo Shadcn são reexpressos através do DESIGN.md e de seus próprios componentes. |
| Colagem nativa do Figma | Se um colega de equipe continuar colando do Figma, essa etapa permanece no Pencil. |
-
Instale o OpenDesign e abra o mesmo repositório
Baixe o aplicativo para desktop e abra o repositório que já contém seus arquivos .pen como um projeto. O início rápido cobre o caminho de compilação a partir do código-fonte separadamente.
-
Exporte uma tela do Pencil como referência
Exporte um PNG (ou o código gerado) da tela cuja aparência você deseja manter e adicione-o ao projeto.
-
Peça ao agente para extrair a marca para o DESIGN.md
Revise o arquivo manualmente: um destaque, as fontes certas, o raio certo. Esta é a única etapa de migração que precisa de julgamento.
-
Renderize o briefing original com a nova marca
Escolha uma habilidade e renderize; a partir daqui, cada habilidade — UI, apresentações, protótipos — é renderizada na sua marca sem precisar de novos prompts, e cada versão é um arquivo.
Executando ambos
Mantenha o Pencil para editar a UI manualmente no canvas; use o OpenDesign para tudo que for renderizado a partir da marca. Ambos vivem no mesmo repositório; atualize o DESIGN.md quando o canvas mudar. Nada sincroniza automaticamente.
Alternativa e perda
Pouco se perde ao tentar: os arquivos .pen permanecem no repositório de qualquer maneira. Se uma renderização do OpenDesign falhar, a última versão permanece no disco e o briefing não é alterado; tente novamente com o mesmo agente ou com um diferente.
Um teste de 20 minutos
Experimente o OpenDesign em uma tela que você já desenhou no Pencil
Pegue uma tela que você desenhou no Pencil e reconstrua-a no OpenDesign com qualquer agente que você quiser. Se o resultado não for utilizável em vinte minutos, esta comparação lhe disse algo que vale a pena saber.
1A tarefa
Aqui está uma exportação em PNG de uma tela que eu projetei no Pencil. Extraia sua marca para o DESIGN.md, depois reconstrua a mesma tela a partir deste briefing usando minhas regras de design e adicione uma capa de apresentação de um slide na mesma marca. Verifique a tela nas larguras de desktop e mobile.
- 01Tela do Pencil de entradaUma exportação em PNG da tela .pen cuja aparência você deseja manter.
- 02DESIGN.md de saídaSua marca extraída para um arquivo junto aos arquivos .pen — revise-o manualmente.
- 03Tela e capa de apresentação, renderizadasA tela no desktop e no telefone, mais uma capa de apresentação na mesma marca, depois uma edição apontando para um elemento.
2Funcionou se…
- O DESIGN.md é commitado junto aos arquivos .pen e você aprovaria seus tokens.
- A tela é renderizada em 1440 e 390 sem rolagem horizontal, e a capa da apresentação compartilha a marca.
- Uma edição ("título mais calmo") aplicada apontando para o elemento, com um agente diferente do Claude, se você quiser.
- Duas versões ficam lado a lado como arquivos; nada foi sobrescrito silenciosamente.
Se não funcionou: verifique se o seu agente está conectado e autenticado para o modo escolhido, depois tente novamente com um briefing menor antes de julgar a ferramenta.
Outras opções
Outras alternativas ao Pencil.dev
FAQ
Alternativa ao Pencil.dev: FAQ
O Pencil (pencil.dev) é open source?
O aplicativo não. O Pencil é um produto de código fechado apoiado pela a16z; o que é aberto é o formato de arquivo .pen, que é documentado, mas pode mudar. O OpenDesign é totalmente open source sob a Apache-2.0 — o aplicativo inteiro, não apenas um formato.
O Pencil.dev é gratuito?
É gratuito hoje, explicitamente em acesso antecipado, e os fundadores sinalizaram planos pagos e limites. O OpenDesign é gratuito porque é open source; você traz sua própria chave de agente, então os gastos com o modelo são cobrados de você sem limite do fornecedor.
Qual é a diferença entre o OpenDesign e o Pencil?
Eles são parecidos: ambos são orientados por agentes e mantêm o design como arquivos no seu repositório sob o Git. O OpenDesign é totalmente open source, BYOK neutro em relação a provedores em vez de focado primeiro no Claude, e renderiza UI, apresentações, protótipos e um design system; o Pencil é um canvas vetorial no seu IDE focado em UI para código. O veredito lista as condições para cada um.
O Pencil funciona com outros agentes além do Claude?
Sim, ele conecta vários agentes via MCP, mas é otimizado para o Claude Code e os avaliadores relatam uma experiência mais fraca em outros lugares. O OpenDesign trata Claude, Codex, Cursor, Gemini, OpenCode e Qwen como primeira classe.
Posso continuar usando o Pencil junto com o OpenDesign?
Sim. Ambos mantêm arquivos no mesmo repositório, então executá-los lado a lado custa pouco: desenhe no Pencil, renderize todo o resto a partir do DESIGN.md no OpenDesign. Veja o que muda e o que fica.
O OpenDesign é realmente open source?
Sim. Ele está em github.com/nexu-io/open-design sob a Apache-2.0 e pode ser auto-hospedado.
O OpenDesign é afiliado ao Pencil?
Não. O OpenDesign é um projeto open source independente. O Pencil é um produto separado, apoiado pela a16z, em pencil.dev; esta é uma comparação não afiliada escrita pela equipe do OpenDesign.
Experimente o OpenDesign em uma tela real
Reconstrua uma tela que você desenhou no Pencil com qualquer agente de codificação, avalie o ciclo completo e depois decida. Escolha a situação que corresponde a você; a página não detecta sua configuração.