De Diseño a Código en Minutos con Pencil y Claude Code

Hay un flujo de trabajo que ha cambiado por completo cómo construyo interfaces: le digo a Claude Code lo que necesito, él diseña en Pencil, iteramos juntos y cuando el diseño está listo, genera el código.

No abro Figma. No diseño yo. Claude Code hace las dos cosas, diseña y programa. Pencil es el lienzo donde Claude dibuja la parte visual.

Te mostraré exactamente cómo lo hago con un caso real.

Qué necesitas

Herramienta	Para qué
Claude Code	Tu copiloto: diseña y genera código
Pencil	El canvas de diseño que Claude controla
MCP de Pencil	El puente que conecta ambos (ya viene integrado)

La pieza clave es el Model Context Protocol (MCP). Es el protocolo que permite a Claude Code interactuar directamente con Pencil: crear elementos, modificar layouts, leer tokens de diseño y exportar todo a código. Sin MCP, serían dos herramientas separadas. Con MCP, son una sola.

El flujo real

Tú (idea) → Claude Code → Pencil (diseño) → iterar → código

1. Verificas que el MCP de Pencil está disponible en Claude Code
2. Abres un nuevo documento en Pencil
3. Le describes a Claude Code lo que quieres diseñar
4. Iteras sobre el diseño hasta que quede como necesitas
5. Le pides que genere el código a partir del diseño final

La diferencia fundamental con otros flujos es que tú no diseñas. Diriges. Le dices a Claude qué quieres, él lo plasma en Pencil, y tú decides si va por buen camino o hay que ajustar. Es como tener un diseñador y un desarrollador al lado que trabajan en tiempo real.

Caso real: Landing page para un cliente

Un cliente necesitaba una landing page para el lanzamiento de su producto SaaS. Hero, features, pricing y CTA. Entrega rápida. En lugar del circuito habitual de Figma → feedback → export → code, lo resolví todo desde Claude Code en una sola sesión.

Paso 1: Preparar el entorno

Abre Claude Code y verifica que tienes acceso a Pencil:

Comprueba que tienes el MCP de Pencil disponible 
y abre un nuevo documento.

Claude Code verificó la conexión, creó un nuevo archivo .pen y lo abrió en Pencil. Canvas en blanco, listo para trabajar.

Paso 2: Diseñar la landing con Claude Code

Le di el contexto del proyecto:

Diseña en Pencil una landing page para un SaaS de gestión de proyectos.
Secciones: hero con headline + CTA, grid de 3 features con iconos,
tabla de pricing con 3 planes, y footer con CTA final.
Estilo: minimalista, fondo oscuro, tipografía Inter, 
acento en azul eléctrico. Diseña desktop y mobile.

Claude Code empezó a construir directamente sobre Pencil: definió la estructura de secciones, creó el hero con su jerarquía tipográfica, montó el grid de features y la tabla de pricing. En poco más de un minuto tenía un primer borrador completo de la landing.

Paso 3: Iterar hasta que quede bien

Buen punto de partida, pero la sección donde se muestra el producto tenía problemas claros. El tablero Kanban se veía comprimido: columnas demasiado estrechas, texto cortado en las tarjetas y difícil de leer. Eso es justo lo que vende el producto, así que tenía que quedar impecable. Seguí la conversación:

Cambios en el diseño:
- La preview del tablero Kanban está muy comprimida. Amplía las columnas,
  que el texto de las tarjetas se lea completo y dale más respiración
- La sidebar de navegación ocupa demasiado espacio, reduce su ancho
- Las tarjetas del tablero necesitan más padding interno
  y que se vean bien los badges de categoría
- El screenshot del producto debe ser el punto focal del hero,
  dale más protagonismo

Claude Code aplicó los cambios directamente en Pencil. La versión desktop quedó mucho mejor, pero al revisar el mobile vi que el tablero seguía dando problemas: el botón ”+ Tarea” se superponía al título y las tarjetas no cabían bien en pantalla. Así que seguí iterando:

Corrige la versión mobile del diseño:
- El botón "+ Tarea" se superpone al título "Tablero", 
  colócalo debajo o reduce su tamaño para que no se solape
- El tablero Kanban no cabe en mobile, muestra solo una columna 
  con scroll horizontal o reemplázalo por una vista simplificada
- Asegúrate de que las tarjetas del tablero se lean completas
- Revisa que el texto del hero no quede demasiado apretado

Esto es lo natural del flujo: no aciertas todo a la primera. Corriges desktop, revisas mobile, ajustas. Cada iteración es un prompt y unos segundos de espera.

Este es el punto clave: no estás esperando un entregable de diseño. Estás teniendo una conversación visual en tiempo real. Dices lo que no te convence, lo ves cambiar al momento y sigues.

Bonus: El truco para pasar de “correcto” a “profesional”

Después de iterar, la landing funcionaba y estaba bien estructurada. Pero se veía genérica. Ese look de “template” que tiene el 90% de las landings generadas con IA. Para un cliente eso no vale.

Claude Code tiene skills que puedes activar, y hay una que marca la diferencia aquí: ui-ux-pro-max. Es una skill especializada en diseño de interfaces que entiende de estilos visuales, paletas de color, tipografía avanzada y patrones de UX profesionales. Al combinarla con el MCP de Pencil, Claude pasa de generar layouts correctos a diseñar interfaces con criterio.

Le pedí:

Usa la skill ui-ux-pro-max. Revisa el diseño actual abierto en Pencil 
y hazle un lavado de cara profesional. Ahora mismo se ve como un template 
genérico. Necesito que parezca un producto SaaS real y premium.

Mejora:
- Jerarquía visual del hero (que el headline tenga más peso)
- Profundidad con sombras y capas, nada de gradientes
- Estados hover y bordes sutiles que den vida a los componentes
- Que la sección de pricing tenga más contraste entre planes
- Detalles que diferencien: badges, iconografía con más personalidad, 
  separadores visuales entre secciones
- Mantén el dark mode y la paleta actual pero dale más carácter

El resultado fue otro nivel: mejores contrastes, tipografía con más personalidad, microdetalles en los espaciados y sombras que le dieron profundidad. La diferencia entre “correcto” y “profesional” muchas veces está en esos detalles que no sabes pedir uno a uno pero que una skill especializada aplica de golpe.

También puedes ir un paso más allá y pedirle que diseñe una alternativa completamente nueva pensando en el público objetivo y en SEO:

Usa la skill ui-ux-pro-max. Diseña en Pencil una versión alternativa 
de la landing desde cero. No partas del diseño actual.
Céntrate en:
- El público objetivo: equipos de producto de 5-20 personas
- Estructura optimizada para SEO: headings con keywords, 
  secciones que respondan a intención de búsqueda
- Jerarquía de contenido pensada para convertir, 
  no solo para que quede bonito

El resultado fue radicalmente distinto al diseño original. No solo cambió la estética (de dark a light mode), sino toda la estrategia: posicionamiento competitivo contra Jira, tabla comparativa con competidores, headline con keywords de búsqueda y social proof con datos concretos. Es otra landing, con otro enfoque, generada en minutos.

Ahora tienes dos propuestas para comparar: la versión dark mode iterada y una alternativa con posicionamiento competitivo y SEO. Decides cuál funciona mejor o combinas lo que más te guste de cada una.

Y si quieres explorar otro estilo completamente distinto, hay más skills disponibles. Por ejemplo, tasteskill genera diseños con un enfoque minimalista y centrado en producto que nada tiene que ver con los anteriores:

Mismo producto, misma descripción, resultado totalmente diferente. La gracia de las skills es que cada una aporta su propia visión de diseño. Puedes generar varias alternativas con distintas skills, compararlas y quedarte con la que mejor encaje.

Tip: Las skills de Claude Code son como tener especialistas a los que puedes llamar en cualquier momento. ui-ux-pro-max para diseño profesional, tasteskill para un enfoque minimalista y producto — combínalas con el MCP de Pencil y tendrás varias propuestas en minutos.

Paso 4: Generar el código

Con el diseño aprobado, el siguiente paso fue natural:

Usando el último diseño, genera el código de la landing completa. 
Astro + Tailwind CSS. Cada sección en su propio componente. 
Los componentes deben de ser reutilizables y atómicos. 
No crees archivos de más de 200 líneas de código. 
Utiliza el patrón de composición de componentes para que 
la arquitectura sea limpia. Usa los colores y espaciados 
exactos del diseño. Responsive.

Claude Code leyó el diseño final de Pencil — estructura completa, tokens de color, tipografía, espaciados de cada sección — y generó el proyecto completo con una arquitectura limpia:

src/
├─ layouts/          → Layout base (HTML, fonts, metadata)
├─ pages/            → index.astro (composición de secciones)
├─ styles/           → global.css (design tokens vía @theme)
└─ components/
   ├─ ui/            → Button, Badge, Card, Icon, Section...
   └─ sections/      → Navbar, Hero, Features, Pricing, CTA, Footer

Componentes atómicos y reutilizables, archivos de menos de 200 líneas, tokens de diseño extraídos directamente de Pencil. Astro 6 + Tailwind CSS v4 + tipografía Geist.

El código completo está en GitHub y la landing desplegada en Vercel para que la veas funcionando.

Resultado

De briefing del cliente a landing page desplegada en producción en menos de 30 minutos. La mayor parte del tiempo fue iterar sobre el diseño, no escribir código.

Prompts que me funcionan

Después de usar este flujo a diario, estos son los patrones de prompt que mejor resultado me dan:

Para empezar un diseño desde cero:

Abre un nuevo documento en Pencil y diseña [descripción detallada].
Estilo: [dark/light], tipografía [fuente], colores [paleta].

Para iterar sobre el diseño:

Modifica el diseño en Pencil: [lista de cambios específicos].

Para pasar de diseño a código:

Genera una aplicación [framework] + [CSS] a partir del diseño 
actual en Pencil. Respeta los tokens de diseño del archivo.
Componentes atómicos y reutilizables, archivos de menos de 
200 líneas y patrón de composición para una arquitectura limpia.

Para comparar diseño vs código:

Compara el componente en [ruta/archivo] con el diseño en Pencil. 
¿Hay diferencias? Ajusta el código para que coincida.

Qué funciona bien y qué no (todavía)

Funciona muy bien:

• Diseños de componentes UI (cards, headers, formularios, grids, navbars)
• Iteraciones rápidas: describir cambios y verlos al instante
• Extraer tokens de diseño y pasarlos a código
• Generar código para Astro, React, Vue, Svelte o HTML puro

Tiene limitaciones:

• Diseños muy complejos (dashboards con 20+ componentes) conviene hacerlos por partes
• Las animaciones hay que describirlas con detalle extra en el prompt
• La lógica de negocio (API calls, validaciones, estado) se define aparte del diseño

Por qué merece la pena

No se trata de que Claude Code diseñe mejor que un diseñador senior. Se trata de que para el 80% de los componentes que construyo a diario — cards, listings, formularios, layouts — este flujo es absurdamente más rápido que el camino tradicional.

Mi valor como desarrollador no está en traducir un padding de 16px a p-4. Está en la arquitectura, el rendimiento, los edge cases. Pencil + Claude Code se encargan del trabajo mecánico y me devuelven tiempo para lo que importa.

Si ya tienes Claude Code, solo necesitas abrir Pencil y empezar a pedirle cosas. El primer componente que diseñe y genere por ti te va a convencer.