Descripción
pen.dev es un lienzo de diseño agentico de High Agency Inc., el creador anteriormente conocido como Pencil (pencil.dev). El producto ahora se describe a sí mismo como construido para la construcción de software en lugar de solo pantallas estáticas: diseñadores y desarrolladores trabajan en un lienzo abierto donde los agentes de IA pueden diseñar junto a ellos, refinar el trabajo existente o construir nuevas pantallas a partir de un aviso.
Leer más
El lienzo mantiene los diseños en un formato de archivo abierto llamado .pen, un archivo JSON simple que tanto las personas como los agentes pueden leer y editar, almacenado dentro de la misma base de código que el producto que describe. El trabajo se realiza ya sea a mano, utilizando herramientas familiares de Figma y Sketch como la herramienta de lápiz, gradientes, componentes y diseño flexible, o dirigiendo a un agente para que redacte, refine o amplíe una pantalla. Un navegador integrado y una extensión de Chrome permiten a los usuarios importar cualquier página web, aplicación o diseño directamente al lienzo como capas editables, y los archivos de Figma, incluidos vectores, texto y estilos, se importan directamente.
Los usuarios traen su propio modelo al lienzo: pen.dev funciona con Claude, GPT, Grok, Qwen, Gemini, Kimi, DeepSeek y Minimax, conectados a través de una suscripción existente de ChatGPT o Claude, una clave API, o MCP, WebMCP o la línea de comandos. El mismo enlace MCP permite que herramientas como Claude Code, Codex, Cursor o Antigravity diseñen sin cabeza a través de la CLI de pen.dev, sin abrir el lienzo en absoluto.
Otras características del lienzo incluyen efectos de sombreado en tiempo real llamados Vibe Shaders, dibujo de íconos e ilustraciones asistido por IA llamado AI Pen, bibliotecas de componentes compartidos entre archivos, y un pipeline de renderizado WebGL personalizado diseñado para mantenerse fluido con miles de capas o decenas de gigabytes de contenido. El trabajo terminado se exporta como PNG, JPEG, WEBP o PDF a cualquier escala, como HTML y CSS o Tailwind con un clic, o como un enlace compartible que abre la última versión en cualquier navegador. Un modo de diapositivas y presentación está integrado para convertir el trabajo del lienzo en una presentación.
pen.dev es actualmente gratuito; la empresa dice que describirá cualquier plan de pago claramente antes de cobrar por él. Se envía como una aplicación de escritorio descargable más extensiones de navegador y editor para Chrome, VS Code, Cursor y OpenVSX, y cuenta con el respaldo del programa Speedrun de a16z. Es adecuado para diseñadores de productos y pequeños equipos de software que desean moverse entre diseño visual y código funcional sin cambiar de herramientas, más que para equipos que buscan un producto de diseño gráfico puro.
- CategoríaHerramientas de diseño de UI y UX con IA
- Modelo de preciosFreemium
- ImplementaciónEscritorio, Extensión IDE, CLI
- PlataformasmacOS, Windows, Linux
Características principales de pen.dev
Formato de archivo .pen abierto que los agentes pueden leer y editar de forma nativa
Soporte para traer tu propio modelo para Claude, GPT, Gemini, Grok, Qwen, Kimi, DeepSeek y Minimax
Conexiones MCP, WebMCP y CLI para diseño sin cabeza desde Claude Code, Cursor o Codex
Navegador integrado y extensión de Chrome para importar cualquier página web como capas editables
Importación de Figma que preserva vectores, texto y estilos
Lienzo WebGL personalizado diseñado para mantenerse fluido con miles de capas
Vibe Shaders para efectos visuales y gradientes en tiempo real
AI Pen para generar íconos e ilustraciones con agentes
Exportación con un clic a HTML/CSS/Tailwind o PNG/JPEG/WEBP/PDF
Modo de diapositivas y presentación para convertir el trabajo del lienzo en una presentación
¿Cómo usar pen.dev?
Descargar: Obtén la aplicación de escritorio pen.dev o añade la extensión de Chrome, Cursor o VS Code.
Iniciar un lienzo: Abre un lienzo en blanco o importa un diseño de Figma, una página web o tu propia base de código.
Conectar un modelo: Inicia sesión con una suscripción de Claude o ChatGPT, añade una clave API, o vincula un agente a través de MCP.
Diseñar o solicitar: Dibuja manualmente con la herramienta de lápiz y componentes, o pide a un agente que construya o refine una pantalla.
Agregar efectos: Aplica sombreadores, gradientes e íconos dibujados por IA donde sea necesario.
Exportar o compartir: Exporta a HTML/CSS, formatos de imagen o PDF, o envía un enlace a la última versión.
Casos de uso de pen.dev
- Diseño de UI agentico
- Transferencia de diseño a código
- Clonación de páginas web
- Diseño sin cabeza a través de MCP
