Nossa opinião: O pen.dev (antes pencil.dev) é indicado para desenvolvedores que fazem design e equipes que usam agentes de código com IA e querem um canvas de design em WebGL com importação de Figma e HTML, controle por MCP e CLI e exportação em HTML/Tailwind, hoje gratuito.
Principal limitação: O fornecedor diz que planos pagos podem ser introduzidos no futuro, e os recursos de IA exigem a sua própria assinatura de modelo ou chave de API.
Pela equipe editorial do AI Tool Atlas.
Com base na documentação oficial do fornecedor; não testamos este produto na prática. O que “visão geral documentada” significa
Para quem pen.dev (formerly pencil.dev) serve
O pen.dev (antes pencil.dev) é indicado para desenvolvedores que fazem design e equipes que usam agentes de código com IA e querem um canvas de design em WebGL com importação de Figma e HTML, controle por MCP e CLI e exportação em HTML/Tailwind, hoje gratuito. Com base na documentação do fornecedor, fora de um teste prático.
Ideal para: Desenvolvedores que fazem design
Também indicado para
Equipes que usam agentes de código com IA
Considere outra ferramenta se o preço pode mudar no futuro
Ou se
Versão para Windows ARM64 marcada como em breve
Exige assinatura de modelo ou chave de API próprias para a IA
Preços e limites de uso do pen.dev (formerly pencil.dev)
Preços verificados em Sep 29, 2026 na página oficial de preços dos EUA. Preços oficiais ↗ Preços e limites mudam com frequência.
A página oficial de preços de pen.dev (formerly pencil.dev) como a vimos. pen.dev, capturado Oct 1, 2026
Site says paid features or plans may be introduced later with terms described beforehand
Para: Developers who design and agent-assisted teams
Limites
Bring your own model subscription or API key
Windows ARM64 build coming soon
Inclui
Agent design on canvas
Figma and HTML import
2 mais
MCP, WebMCP and CLI
HTML/Tailwind export
API incluída
Limites de uso, créditos e custos extras
Sua própria assinatura do ChatGPT ou do Claude, ou chaves de API, para a IA; os recursos de geração de imagem passam por provedores terceiros.
Não informado.
O que é pen.dev (formerly pencil.dev) e como funciona?
O pen.dev, antes pencil.dev, é um canvas agêntico para projetar sites, apps mobile e gráficos para redes sociais. Os usuários podem projetar manualmente ou com agentes de IA diretamente no canvas, e importar páginas web, HTML ou conteúdo do Figma.
Ele funciona com modelos por meio de uma assinatura do ChatGPT ou do Claude, chaves de API, ou MCP, WebMCP e uma CLI, e oferece extensões para Cursor, VS Code, Windsurf e Antigravity.
Site oficial do pen.dev (formerly pencil.dev): como o produto se apresenta. pen.dev, capturado Oct 1, 2026
O que você fornece e o que recebe de volta
O que você fornece a pen.dev (formerly pencil.dev) e o que recebe de volta, segundo a documentação
O que você fornece
Prompts para agentes no canvas ou conectados por MCP
Páginas web e HTML pelo navegador integrado ou pela extensão do Chrome
Arquivos .fig do Figma ou conteúdo colado do Figma
Desenho manual com a ferramenta caneta e camadas
O que você recebe de volta
Designs no formato aberto .pen JSON
HTML com CSS/Tailwind
Exportações em PDF, PNG, JPEG e WEBP
Links compartilháveis e apresentações
Onde você pode usar
Plataformas
Desktop
Conta
Obrigatório
Plataformas
macOS, Windows x64, Linux (Windows ARM64 em breve)
Importação
Figma .fig, HTML, páginas web, extensão do Chrome
Exportação
PDF, PNG, JPEG, WEBP, HTML/CSS/Tailwind
Acesso de agentes
MCP, WebMCP, CLI
Formato de arquivo
.pen JSON
Para que as pessoas usam pen.dev (formerly pencil.dev)
Os cenários são elaborados por nossos editores a partir da documentação; o resultado real depende da sua entrada e do seu plano.
Projetar sites e apps
Quem
Desenvolvedores que fazem design
O que você fornece
Prompt ou layout manual no canvas
Resultado esperado
Designs de sites, apps mobile ou gráficos para redes sociais com componentes e variáveis
Visão geral dos recursos no site oficial. pen.dev, capturado Oct 1, 2026
Design por agente no canvas
Permite que agentes de IA desenhem e editem camadas diretamente no canvas, com modelos do Claude, da OpenAI, do Gemini e de outros. Primeiros rascunhos mais rápidos.
pen.dev (formerly pencil.dev): pontos fortes e limites
Onde pen.dev (formerly pencil.dev) é forte
Gratuito no momento, segundo a página de preços Nenhum custo para começar a projetar.documentadofonte (abre em uma nova guia)
Apps desktop para macOS, Windows x64 e Linux Cobre os sistemas mais comuns entre desenvolvedores.documentadofonte (abre em uma nova guia)
Funciona com vários provedores de modelos Sem dependência de um único fornecedor de IA.documentadofonte (abre em uma nova guia)
Formato de arquivo aberto Os designs podem ser lidos por agentes e ferramentas.documentadofonte (abre em uma nova guia)
As chamadas de IA de texto vão direto para o seu provedor As entradas e saídas não passam pelos servidores do fornecedor.documentadofonte (abre em uma nova guia)
Limitações a conferir antes de pagar
O preço pode mudar no futuro O acesso gratuito não é garantido a longo prazo.documentadofonte (abre em uma nova guia)
Versão para Windows ARM64 marcada como em breve Ainda não está disponível nesses dispositivos.documentadofonte (abre em uma nova guia)
Exige assinatura de modelo ou chave de API próprias para a IA O uso da IA tem custo extra.documentadofonte (abre em uma nova guia)
A geração de imagens e SVG passa pelos servidores do fornecedor até os provedores As imagens editadas saem do seu dispositivo.documentadofonte (abre em uma nova guia)
Como usar o pen.dev (formerly pencil.dev) para projetar uma landing page com um agente de IA
Documentação do pen.dev (formerly pencil.dev): de onde vêm os passos abaixo. docs.pen.dev, capturado Oct 1, 2026
Configurar pen.dev (formerly pencil.dev)
Baixe o pen.dev para macOS, Windows x64 ou Linux na página de downloads.
Entre com a sua conta.
Conecte um modelo por meio da sua assinatura do ChatGPT ou do Claude, de uma chave de API ou de MCP.
Crie um novo arquivo .pen e escolha o template Website ou um canvas em branco.
Exemplo: projetar uma landing page com um agente de IA
Peça ao agente no canvas que esboce uma seção hero para o seu produto.
Importe a sua página inicial atual pelo navegador integrado para reaproveitar as camadas.
Ajuste os espaçamentos com layout flex e variáveis.
Exporte o frame como HTML com Tailwind.
Revise e exporte o resultado
Abra o HTML exportado em um navegador e compare com o canvas.
Compartilhe um link e confirme que ele abre a versão mais recente.
Exemplo de prompt sugerido por nossos editores (não é uma saída registrada do produto)
Crie o hero de uma landing page para um app de orçamento, com título, subtítulo, dois botões e um mockup de celular, usando uma paleta de azul-escuro.
pen.dev (formerly pencil.dev) integrações e API
Documentação do pen.dev (formerly pencil.dev) (continuação). docs.pen.dev, capturado Oct 1, 2026
pen.dev (formerly pencil.dev) não tem API pública na documentação oficial. CLI e MCP; nenhuma API REST listada Documentação da API ↗
Privacidade, uso de dados e direitos comerciais
Resumido a partir das políticas atuais do fornecedor; não é aconselhamento jurídico, e o selo de um fornecedor não é uma auditoria independente.
Como suas entradas e saídas são tratadas
Os recursos de IA de texto com as suas próprias chaves de provedor vão direto do seu dispositivo para o provedor; os recursos de imagem/SVG passam pelos servidores do fornecedor até os provedores.
O conteúdo dos modelos do pen.dev Pro não é armazenado nem usado para treinar modelos de IA.
As importações de páginas web são processadas em tempo real e não ficam armazenadas nos servidores.
Perguntas frequentes sobre pen.dev (formerly pencil.dev)
O pen.dev é gratuito?
Sim, o pen.dev é gratuito no momento, mas o fornecedor diz que pode introduzir recursos ou planos pagos no futuro e que descreverá as condições antes de cobrar. fonte (abre em uma nova guia)
Quais modelos de IA o pen.dev suporta?
Você pode usar Claude, OpenAI, Grok, Qwen, Gemini, Kimi, Deepseek, Minimax e outros por meio de uma assinatura do ChatGPT ou do Claude, de chaves de API ou de MCP. fonte (abre em uma nova guia)
O pen.dev importa do Figma?
Sim, ele importa arquivos .fig com layouts, estilos e imagens, ou você pode copiar e colar direto do Figma. fonte (abre em uma nova guia)
Com quais IDEs o pen.dev se integra?
Há extensões para Cursor, VS Code, Windsurf e Antigravity, e agentes como Claude Code e Codex se conectam por MCP. fonte (abre em uma nova guia)
Em que formato o pen.dev salva os designs?
O formato aberto .pen, um arquivo JSON com esquema aberto que os agentes conseguem ler nativamente. fonte (abre em uma nova guia)
Não verificado: Preços futuros; Disponibilidade nos EUA; Retenção dos dados da conta.
Como documentamos e mantemos esta página
Todos os fatos sobre pen.dev (formerly pencil.dev) acima vêm de 6 páginas oficiais listados aqui, comparados pela última vez em Sep 29, 2026; não executamos pen.dev (formerly pencil.dev) por conta própria, por isso ele não tem nota editorial. Como verificamos e reverificamos as páginas.
Artigo atualizado em Oct 10, 2026; preços verificados Sep 29, 2026. Os links para fornecedores são links comuns; não ganhamos comissões. Como avaliamos · Relatar um erro
(abrir em tamanho real em uma nova guia)
(abrir em tamanho real em uma nova guia)
(abrir em tamanho real em uma nova guia)
(abrir em tamanho real em uma nova guia)
(abrir em tamanho real em uma nova guia)
(abrir em tamanho real em uma nova guia)