Está claro que la forma en que el diseño de producto y el desarrollo está cambiando y una de las recientes opciones ha sido Pencil.dev. Como no podía ser de otra manera, no he podido detener mi curiosidad inherente y me gustaría dejarte por aquí los pasos que he tenido que seguir así como algunos de los conflictos que he tenido que resolver para que puedas, como yo, satisfacer tus ganas de probar cosas nuevas. Me gustaría aclarar que mi conocimiento en código es básico aunque gracias a la IA hoy día puedo ampliar mis conocimientos y teoría mucho más eficientemente. Así que si ves algún "gap", te pido disculpas de antemano y si te animas a escribirme para corregirlo sería ¡genial!. También que trabajo con Antigravity. Al final dejo mi conclusión intentado ser lo más pragmático posible.

Recuerda que no necesitas ser programador/a. Solo sigue el orden. Es como activar Netflix antes de ver series. Tiempo aproximado: 20-30 minutos.

1. Instala Pencil.dev (empezamos por lo básico)

Descarga: Ve a pencil.dev > Download Mac > instala y arrastra .dmg a Aplicaciones.

1. Abre Pencil desde Aplicaciones
2. ❌ Si macOS bloquea: Clic derecho > "Abrir"
3. CRUCIAL: La primera vez, pide tu email. Revisa tu bandeja (incluyendo spam) 
   y busca un código de activación → copia el código de 6 dígitos → 
   pega en pencil para activar la cuenta.
4. Verde = activado

2. Prepara Terminal de Mac (tu nueva mejor amiga)

No uses terminal de Antigravity/VSCode. Solo la nativa de Mac.

Cmd + Espacio → "Terminal" → Enter

Primero: Verifica Node.js (necesario para Claude):

/*En la terminal escribe*/
node --version

Si no lo tienes instalado te mostrará: ❌ "command not found". Ve a nodejs.org → descarga la última version LTS + nvm + npm → y en laTterminal pega las instrucciones que indica Node (ejemplo):

3. Instala y autentica Claude Code (el cerebro)

En Terminal nativa pega:

/* Método directo (recomendado)*/
curl -fsSL https://claude.ai/install.sh | bash

/* O el clásico (si falla arriba aunque es legacy)*/
npm install -g @anthropic-ai/claude-code

Si "zsh: command not found: claude" ejecuta :

export PATH="$PATH:$(npm config get prefix)/bin"

El comando export PATH="$PATH:$(npm config get prefix)/bin" es 100% seguro para usuarios normales en Mac. Solo le dice a tu Terminal: "Mira también en esta carpeta de npm cuando busque comandos". No ejecuta nada raro ni abre puertas a hackers. El PATH es su lista de sitios favoritos (carpetas) donde mira primero.

Si npm instaló "claude" en una carpeta no listada (común en Mac), dice "command not found". Ese comando añade esa carpeta olvidada a la lista temporalmente, para esa sesión.

Ahora el login en Claude:

cd "~/Documents/MiProyecto"  /* O arrastra carpeta Finder al Terminal */ 
/* Pulsa Enter y depues: */
claude

Debes saber que Pencil entiende mejor a día de hoy a Claude, por lo que es importante que para poder conectar y reconocerlo, inicies sesión en tu cuenta de Claude (si no la tienes, tienes que hacerla). Por lo tanto:

1. Abre navegador → login en Claude

2. En la terminal ahora: "Accessing workspace..." → Te preguntará en la terminal si confías en la carpeta y como es la que has elegido (recomendable dirigir en la terminal a la carpeta del proyecto y no a todo el sistema como vimos en el paso anterior: cd "~/Documents/MiProyecto") → 1. Yes, I trust.

3. Puedes ejecutar claude doctor para verificar que todo está correcto → todo verde ✅. Deberías de ver algo parecido a:

El flujo visual completo sería algo como:

# 1. Entra proyecto
cd "~/Documents/MiProyecto"  

# 2. Primera vez = login
claude
# → Navegador abre → login → "Success"

# 3. Segunda vez = directo chat
claude
> "Hola Claude, ¿qué ves en mi proyecto?"

# 4. Diagnóstico
claude doctor  # TODO VERDE ✅

Ya estamos cerca.

4. Conecta API Key en Pencil (el paso que MUCHOS olvidan)

/DISCLAIMER!/ Si eres nuev@ seguramente tengas unos tokens de prueba, 
no los malgastes. Pero si estás a 0, vas a tener que pasar por caja antes 
para poder tener tokens disponibles y que la API funcione. 
Si no recibirás un mensaje "low balance". 
Simplemente sigue los pasos que Claude te indica

1. Abre app Pencil desktop → busca "Claude Connect" en la esquina superior derecha.

2. Es probable que aún no tengas la API creada así que abre esta página de Claude.

3. Dale un nombre descriptivo como Pencil o similar para que luego sepas donde se está usando. Cópiala y pégala en Pencil.

4. Si todo sale bien deberías de ver algo como:

5. Configura Antigravity (último paso)

Debes de tener Antigravity instalado previamente.

1. Abre Antigravity → Extensions → busca "Pencil" → Install
2. File → Open Folder → "/Users/your-user/Documents/MiProyecto"
3. New Pencil File → "app.pen" (raíz del proyecto) y guarda.
4. Abre app.pen → Pencil activa MCP automáticamente
5. Escribe cualquier prompt para comprobar que el MCP funciona correctamente.
6. Para ver si se ha instalado ve MCP → Manage MCP Servers → Refresh

Igualmente aquí puedes ver los pasos en la documentación oficial de Pencil.

6. ¡Primer diseño con Pencil!

En Antigravity chat → selecciona Claude 4.5 Sonnet (o cualquier de Claude)
(Gemini no es tan robusto para este caso) y escribe algo como:
"En @app.pen Crea un dashboard admin con sidebar, cards y botón primary mobile-first. Usa las reglas CSS de Tailwind y Shadcn/ui para los componentes"

🪄 Pencil genera canvas en app.pen + código React/Tailwind en archivos independientes. Listo

De la misma forma puedes hacer lo mismo en la App de Pencil usando el chat de Claude.

/Según los de Pencil, el autosave todavía no está listo, 
así que recomiendan darle a guardar (cmd + S) frecuentemente

Errores comunes y preguntas frecuentes

1. Tabla de errores que me han aparecido:

2. ¿Necesitas instalar Claude en Antigravity? NO, pero te explico por qué hay confusión

La respuesta corta es no necesitas instalar nada extra de Claude dentro de Antigravity para que Pencil.dev funcione. Pero hay un matiz importante que suele confunde.

Lo que SÍ necesitas

✅ Terminal Mac: claude CLI instalado + logueado
✅ Pencil Desktop: API Key pegada en "Claude Connect" 
✅ Antigravity: Solo extensión Pencil MCP + archivo .pen

Antigravity maneja su propia IA (Gemini por defecto) y llama a Pencil MCP localmente. El CLI de Claude en Terminal es independiente. Solo si quieres o necesitas codificar las apps completas (full stack dev) debes de instalar la extensión de Claude Code. Si solo necesitas el diseño o prototipo, con el MCP de pencil o la App de Pencil es suficiente.

3. ¿Me pueden hackear?

La duda es totalmente legítima. Cuando mezclas terminal, IA, MCP, API keys y un IDE como Antigravity, es normal preguntarse si estás abriendo una puerta trasera sin querer. La buena noticia es que, tal y como está diseñado este flujo (Claude + Pencil.dev + Antigravity), el riesgo de que “alguien te hackee” a través de este setup es muy muy bajo siempre que sigas unas pocas buenas prácticas. Trabaja solo en carpetas de proyectos que controlas, no mezcles archivos sensibles (contraseñas, claves bancarias, etc.) en esos directorios y proteger bien tus API keys.

No estás dejando tu Mac “expuesto a internet”; lo que haces es permitir que tus archivos de proyecto se envíen de forma controlada a los servicios de IA para ayudarte a trabajar, y tú sigues teniendo la última palabra sobre qué se ejecuta y qué se comparte. También es recomendable tener bien configurada la seguridad en Antigravity.

4. ¿Deben estar TODO abierto a la vez? NO exactamente

Para que Pencil MCP funcione en Antigravity, necesitas solo 2 de 3 abiertos simultáneamente. El tercero es opcional pero recomendado. Pero dependerá de tu objetivo.

Requisitos mínimos (lo que SÍ es obligatorio)

✅ #1 ANTIGRIVITY ABIERTO con:
   - Proyecto cargado (.pen en raíz)
   - Extensión Pencil instalada
   - MCP → Refresh → Pencil tools visibles (verde)

✅ #2 PENCIL SERVIDOR ACTIVO vía:
   - **OPCIÓN A (recomendada):** Extensión Pencil en Antigravity (auto-lanza server)
   - **OPCIÓN B:** App Pencil desktop abierta + "Claude Connect ✅"

❌ CLAUDE TERMINAL: OPCIONAL (solo si quieres contexto código extra)

¿Cuándo SÍ necesitas Claude Terminal abierto?

5. Comandos básicos de la Terminal

Iniciar Claude en carpeta específica (el secreto para Pencil)

Claude "mira" solo la carpeta donde lo lanzas.

cd "/Users/your-user/Documents/Pencil-project"  # Espacios = comillas

Truco drag&drop: Escribe cd (espacio), arrastra carpeta del Finder > Enter. Después escribe en la Terminal

claude

Ultra truco definitivo:

Directo sin cd, escribe: claude /ruta/a/tu/proyecto #Después Enter

Veredicto tras uso y resultados

Aunque aún es pronto para tener formada una opinión sólida, creo que aún le queda bastante recorrido para cumplir lo prometido. Los resultados no son tan espectaculares como muestran las demos y el coste real termina siendo elevado: pagas por tokens incluso cuando Claude malinterpreta prompts o directamente ignora instrucciones claras.

Además, no he conseguido que en Antigravity funcione correctamente. A pesar de que se abre el archivo .pen y uso Claude como motor, no logra diseñar del todo lo que se pide. Crea las carpetas y componentes en código, supongamos que bien, pero a nivel diseño no se aplica en condiciones.

En la aplicación de Pencil funciona algo mejor, crea las variables, los componentes pero a nivel resultado tampoco hace lo que se espera, aunque sean cambios simples.

Y por último y creo que grave (aunque puede ser error mío), es que teniendo el mismo .pen abierto en Antigravity y Pencil app, no se sincronizan en tiempo real tras guardar cambios.

Bajo mi punto de vista, Gemini gana en fiabilidad y en velocidad es muy superior. Claude parece que se queda "pillado" a veces.

Le pedí que "siendo un Product Designer Specialist creara un Dashboard futurista dark theme para controlar los vuelos de drones usando las reglas css de Tailwind y la librería de componentes Shadcn/ui, aplicando buenas prácticas UX/UI así como de accesibilidad. Crea y aplica las variables necesarias". Y este fue el resultado:

Como se puede ver, no acaba de convencer. Spacings que no se respetan, alignments rotos, texto que no se ve… En definitiva, un layout, para mi gusto, un poco decepcionante. Sí creó algunas variables y componentes aplicando instancias, aunque no todos:

Y este ha sido el resultado HTML creado con Gemini (primer y único intento).

Te dejo los juicios a ti.

Uso y costo

Este es un resumen de las peticiones que he hecho. Empecé intentando usarlo para mi caso real y aprovechar tokens, pero no ocurría lo esperado así que decidí probar con un concepto nuevo:

1. Crear versión light del frame "Connectivity"

   • Crear una nueva versión con tema claro del frame existente

2. Corregir problemas de visibilidad y contraste

   • Arreglar iconos y texto invisibles en el tema claro

   • Mejorar el contraste para accesibilidad

   • Rediseñar elementos que rompían la UI

3. Convertir elementos a componentes reutilizables

   • Crear frame con componentes necesarios

   • Usar instancias en lugar de formas simples

4. Rediseñar "Connectivity - Light" con imagen de referencia

   • Rediseño completo basado en la imagen proporcionada

   • Mostrar integraciones existentes

   • Permitir crear nuevas integraciones

   • Acceso a parsers de integraciones

5. Revisar y aplicar sistema de spacing Tailwind

   • Crear variables para spacing de Tailwind

   • Aplicar spacing coherente a componentes y frames

   • Seguir mejores prácticas de UX/UI

6. Revisión profunda del spacing como Product Designer Specialist

   • Re-revisar spacing en "Connectivity - Light"

   • Asegurar aplicación de variables en layout general

   • Crear una app de UI de calidad profesional

7. Crear dashboard futurista de control de vuelo de drones (ya que no conseguía resultados)

   • Dark theme

   • Usar reglas Tailwind

   • Seguir convenciones de librería shadcn/ui

   • Incluir visualizaciones de datos

   • Panel de control con acciones

   • Lista de drones activos

   • Efectos futuristas (glows, gradientes)

Y este ha sido el uso y coste de todo ello (solo he metido 20€ + tax):

Como se puede observar, en mi opinión, es muy caro con peticiones de tokens demasiado elevadas. Solo por hacer un par de pruebas con resultados nada óptimos he quemado más de la mitad del presupuesto.

Lo que SÍ funciona

1. ✅ Copia frames Figma → Pencil (Cmd+C/V) directamente.

2. ✅ Crea React/Tailwind limpio. Por tanto Diseño y código no están separados.

3. ✅ Crea las variables y componentes de forma relativamente fluida

4. ✅ MCP detecta auto componentes existentes

Aunque es posible que no esté haciendo algo bien ya que hay que tener demasiadas cosas en cuenta, diría que, de momento, Figma + MCP sigue siendo más fiable. Pero Pencil tiene potencial brutal – habrá que esperar unos meses para ver cómo evoluciona y bajen precios.