Descrição
pen.dev é uma tela de design agentiva da High Agency Inc., o criador anteriormente conhecido como Pencil (pencil.dev). O produto agora se descreve como construído para a construção de software, em vez de apenas telas estáticas: designers e desenvolvedores trabalham em uma tela aberta onde agentes de IA podem projetar ao lado deles, refinar trabalhos existentes ou construir novas telas a partir de um prompt.
Ler mais
A tela mantém os designs em um formato de arquivo aberto chamado .pen, um arquivo JSON simples que tanto pessoas quanto agentes podem ler e editar, armazenado dentro da mesma base de código que o produto que descreve. O trabalho acontece manualmente, usando ferramentas familiares do Figma e Sketch, como a ferramenta de caneta, gradientes, componentes e layout flexível, ou direcionando um agente para elaborar, refinar ou estender uma tela. Um navegador embutido e uma extensão do Chrome permitem que os usuários importem qualquer página da web, aplicativo ou design diretamente para a tela como camadas editáveis, e arquivos do Figma, incluindo vetores, texto e estilos, são importados diretamente.
Os usuários trazem seu próprio modelo para a tela: pen.dev funciona com Claude, GPT, Grok, Qwen, Gemini, Kimi, DeepSeek e Minimax, conectados através de uma assinatura existente do ChatGPT ou Claude, uma chave de API, ou MCP, WebMCP ou a linha de comando. O mesmo link MCP permite que ferramentas como Claude Code, Codex, Cursor ou Antigravity projetem de forma headless através da CLI do pen.dev, sem abrir a tela.
Outros recursos da tela incluem efeitos de shader em tempo real chamados Vibe Shaders, desenho de ícones e ilustrações assistido por IA chamado AI Pen, bibliotecas de componentes compartilhadas entre arquivos e um pipeline de renderização WebGL personalizado projetado para permanecer suave com milhares de camadas ou dezenas de gigabytes de conteúdo. O trabalho finalizado é exportado como PNG, JPEG, WEBP ou PDF em qualquer escala, como HTML e CSS ou Tailwind em um clique, ou como um link compartilhável que abre a versão mais recente em qualquer navegador. Um modo de slides e apresentação está embutido para transformar o trabalho da tela em um deck.
pen.dev é atualmente gratuito; a empresa afirma que descreverá qualquer plano pago claramente antes de cobrar por ele. É disponibilizado como um aplicativo de desktop para download, além de extensões de navegador e editor para Chrome, VS Code, Cursor e OpenVSX, e é apoiado pelo programa Speedrun da a16z. É adequado para designers de produtos e pequenas equipes de software que desejam transitar entre design visual e código funcional sem trocar de ferramentas, mais do que para equipes que buscam um produto de design gráfico puro.
- CategoriaFerramentas de design de UI e UX com IA
- Modelo de preçosFreemium
- ImplantaçãoDesktop, Extensão IDE, CLI
- PlataformasmacOS, Windows, Linux
Recursos principais de pen.dev
Formato de arquivo .pen aberto que agentes podem ler e editar nativamente
Suporte para trazer seu próprio modelo para Claude, GPT, Gemini, Grok, Qwen, Kimi, DeepSeek e Minimax
Conexões MCP, WebMCP e CLI para design headless a partir de Claude Code, Cursor ou Codex
Navegador embutido e extensão do Chrome para importar qualquer página da web como camadas editáveis
Importação do Figma que preserva vetores, texto e estilos
Tela WebGL personalizada projetada para permanecer suave com milhares de camadas
Vibe Shaders para efeitos visuais e gradientes em tempo real
AI Pen para gerar ícones e ilustrações com agentes
Exportação com um clique para HTML/CSS/Tailwind ou PNG/JPEG/WEBP/PDF
Modo de slides e apresentação para transformar o trabalho da tela em um deck
Como usar pen.dev?
Baixar: Obtenha o aplicativo de desktop pen.dev ou adicione a extensão do Chrome, Cursor ou VS Code.
Iniciar uma tela: Abra uma tela em branco ou importe um design do Figma, uma página da web ou sua própria base de código.
Conectar um modelo: Faça login com uma assinatura do Claude ou ChatGPT, adicione uma chave de API ou vincule um agente através do MCP.
Projetar ou solicitar: Desenhe manualmente com a ferramenta de caneta e componentes, ou peça a um agente para construir ou refinar uma tela.
Adicionar efeitos: Aplique shaders, gradientes e ícones desenhados por IA onde necessário.
Exportar ou compartilhar: Exporte para HTML/CSS, formatos de imagem ou PDF, ou envie um link para a versão mais recente.
Casos de uso de pen.dev
- Design de UI agentivo
- Transferência de design para código
- Clonagem de página da web
- Design headless via MCP
