Pi para diseño.

Qué es realmente Pi

Pi es un agente de programación con IA de código abierto (MIT) para la terminal, parte del kit de herramientas pi de earendil-works. Lee tu repositorio, edita archivos y ejecuta comandos de shell, planificando y verificando el trabajo a partir de tareas en lenguaje natural en lugar de limitarse a completar líneas. Su núcleo es deliberadamente pequeño: cuatro herramientas por defecto —read, write, edit y bash— además de grep, find y ls integrados.

Para el trabajo de diseño, la propiedad que destaca es que Pi es agnóstico al proveedor. Normaliza entre Anthropic, OpenAI, Google y muchos otros proveedores tras una API unificada, así que traes tus propias claves y eliges el modelo por tarea —por ejemplo, un modelo multimodal potente para leer capturas de referencia— y cambias con /model o Ctrl+L a mitad de sesión sin alterar tu flujo de trabajo.

• Cualquier modelo, tus claves: Pi enruta a más de 20 proveedores, incluidos Anthropic y OpenAI. Te autenticas con tus propias claves de API (BYOK), o inicias sesión en una suscripción de Claude Pro/Max, ChatGPT Plus/Pro o GitHub Copilot con /login.
• Skills + Extensions: Pi carga Skills (paquetes de capacidades en Markdown que siguen el estándar Agent Skills) y Extensions en TypeScript: el lugar natural para codificar tus convenciones de diseño y añadir herramientas personalizadas.
• Sesiones ramificadas: Las sesiones se almacenan como árboles JSONL, así que puedes ramificar una exploración y navegar por el historial en un único archivo sin perder las pasadas anteriores.

• Fabricante: earendil-works (proyecto de la comunidad de código abierto)
• Credencial: tu propia clave de API de proveedor (BYOK: Anthropic, OpenAI, Google, etc.) o un inicio de sesión por suscripción mediante /login; almacenada localmente en ~/.pi/agent/auth.json (0600)
• Licencia: MIT, código abierto

Por qué un agente multiproveedor con BYOK encaja con el diseño

La ventaja de Pi para el diseño es la flexibilidad, no un único modelo integrado, pero, como ocurre con todo agente, el criterio estético hay que aportarlo igualmente.

• Elige el modelo adecuado por tarea: Como Pi enruta a cualquier proveedor, puedes recurrir a un modelo multimodal potente para leer capturas de referencia y luego cambiar a otro para la refactorización, sin salir del agente.
• Tus claves, sin ataduras: BYOK significa que no quedas atado a los precios ni a los límites de contexto de un único fabricante; elige el modelo cuyas fortalezas encajen con el trabajo de diseño que tienes delante.
• Convenciones en Skills: Una Skill (más una fuente MCP como un servidor de Figma) apunta al agente hacia tus tokens, componentes y especificaciones reales, para que trabaje contra una marca en lugar de un aspecto por defecto.

La lección es la misma que enseña todo agente: Pi no tiene criterio estético por defecto, y ninguna elección de modelo lo aporta. Produce buen diseño cuando le das restricciones: un sistema de diseño, una skill estética y referencias concretas. Open Design empaqueta exactamente esos insumos, por lo que ambos encajan (más abajo se explica).

Configura Pi para el trabajo de diseño, desde cero

Este es el recorrido completo, desde una máquina limpia hasta un Pi capaz de construir y verificar interfaces.

# 1. Install the Pi coding agent CLI (Node)
npm install -g --ignore-scripts @earendil-works/pi-coding-agent

# 2. Authenticate with your own provider key (BYOK)
export ANTHROPIC_API_KEY=sk-ant-...   # or OPENAI_API_KEY=sk-...
#    (or run /login inside Pi for a Claude / ChatGPT / Copilot subscription)

# 3. Start it in your project
cd your-project
pi

# 4. Switch models any time with /model or Ctrl+L

• Codifica tus reglas de diseño: Coloca tus tokens, primitivos y convenciones en una Skill y apunta Pi hacia ellos, para que el resultado se ajuste a una marca en lugar de caer en un aspecto genérico por defecto.
• Añade verificación en el navegador: Conecta un Playwright o un MCP de navegador para que Pi renderice en un navegador real y compruebe su resultado en los distintos breakpoints, en lugar de limitarse a confirmar que el build pasa.

El flujo de captura de pantalla a interfaz

El bucle de diseño de mayor rendimiento con Pi consiste en convertir una imagen de referencia en una interfaz funcional y adaptable e iterar hasta que coincida, apoyándose en un modelo multimodal para comparar el resultado con la referencia. Como Pi es agnóstico al proveedor, apúntalo al modelo que mejor lea imágenes para esta pasada.

1. Parte de las referencias visuales más claras que tengas, e incluye varios estados (escritorio y móvil, hover, vacío, cargando), no solo una imagen principal.
2. Elige un modelo multimodal potente para la pasada con /model, ya que la comprensión de imágenes es lo que determina la calidad de la captura a interfaz.
3. Sé específico en el prompt; los prompts vagos producen interfaces genéricas incluso con un modelo potente.
4. Mantén tu sistema de diseño y tus convenciones en una Skill, e indícale a Pi dónde viven los tokens y los primitivos canónicos.
5. Levanta un servidor de desarrollo y haz que Pi renderice en un navegador real, redimensionando a los distintos breakpoints, y luego itera comparando su implementación con las capturas de pantalla, no solo confirmando que compila.

Da al agente las referencias y restricciones concretas desde el principio:

pi
# in the prompt:
> Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens (see the Skill).
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

Mantén los prompts breves y enfocados, confirma las buenas iteraciones y revierte las malas (avisando a Pi cuando reviertas), para que cada pasada parta de una base limpia. Las sesiones JSONL ramificadas de Pi también te permiten explorar una alternativa sin perder el hilo original.

Skills, Extensions y temas

Pi se autoextiende en tiempo de ejecución mediante unas pocas capas, y estas encajan limpiamente en un flujo de diseño abierto.

• Skills: Paquetes de capacidades en Markdown que siguen el estándar Agent Skills: el hogar duradero y portátil de tus convenciones de diseño, tokens y listas de revisión. La misma Skill funciona en distintos agentes compatibles, no solo en Pi.
• Extensions y plantillas de prompt: Las Extensions en TypeScript añaden herramientas, comandos e interfaz personalizados; las plantillas de prompt reutilizables se ejecutan mediante /nombre. Ambas te permiten programar el bucle de verificación sin salir de la terminal.
• MCP y temas: Pi se conecta a servidores MCP para incorporar contexto de diseño externo (lo más relevante, un servidor MCP de Figma), y los temas se recargan en caliente para que la interfaz de la terminal se mantenga legible mientras trabajas.

Son capacidades portátiles —Skills y MCP en especial— exactamente el tipo de cosa que Open Design está diseñado para orquestar, en lugar de recrearla en cada proyecto.

Pi frente a Codex, Claude Code, Cursor y Gemini CLI para diseño

No hay un único ganador para el trabajo de diseño: cada agente tiene una fortaleza distinta, y los equipos con experiencia los combinan. Un resumen honesto:

El enfoque de Pi es ortogonal al de los demás: es el agente que te permite usar cualquiera de esos modelos subyacentes con tus propias claves. El veredicto recurrente de la comunidad sigue vigente: el criterio estético proviene de las personas; todos ellos tienden por defecto a una estética genérica sin skills, referencias ni restricciones. Ese es el verdadero problema a resolver, y tiene forma de herramienta de diseño, no de modelo.

Errores comunes y cómo evitar el aspecto de «basura de IA»

La queja más común sobre el diseño generado por IA es que luce genérico: degradados suaves, paneles flotantes, esquinas redondeadas exageradas, sombras dramáticas, un aire de Inter y morado que «grita que esto lo hizo una IA». Otros problemas reportados incluyen maquetaciones móviles rotas e instrucciones que se filtran en el texto de la interfaz. Ninguno de estos es exclusivo de Pi ni de un único modelo; son lo que ocurre cuando cualquier agente se ejecuta sin un contexto de diseño curado.

• Añade una skill estética: Una skill de diseño curada obliga al agente a comprometerse con una dirección real en lugar del aspecto por defecto, y como es una Skill portátil, te acompaña entre distintos modelos.
• Verifica en un navegador real: Elige un modelo multimodal y haz que Pi renderice y se autoverifique en los distintos breakpoints para que las maquetaciones no se rompan en silencio en el móvil.
• Aporta tokens y referencias: Los tokens de diseño reales y las capturas de referencia son la mayor palanca sobre la calidad del resultado.
• Codifica reglas donde Pi las lea: Coloca reglas del estilo «sin tarjetas hero, máximo dos tipografías, jerarquía con la marca primero» en una Skill que el agente cargue en cada ejecución.

Fíjate en que toda mitigación consiste en dar al agente un contexto de diseño curado, independientemente del proveedor al que enrutes. Mantener ese contexto a mano, proyecto a proyecto, es el trabajo tedioso que Open Design elimina.

Diseñar con Pi dentro de Open Design

Open Design es la capa de diseño de código abierto que el flujo de trabajo anterior reclama una y otra vez. Trata a Pi como un adaptador de primera clase y lo envuelve en una biblioteca curada de skills y sistemas de diseño, una canalización de renderizado estructurada y una interfaz de escritorio local, para que el contexto de diseño que hace bueno a Pi esté presente desde la primera ejecución, no ensamblado a mano cada vez. Ambos son de código abierto y local-first, lo que hace de esta combinación un encaje natural.

1. Instala Open Design y selecciona Pi como tu agente.
2. Autentícate con tu propia clave de API de proveedor (BYOK) o un inicio de sesión por suscripción: las credenciales permanecen en tu máquina en ~/.pi/agent/auth.json y nunca se enrutan a través de nosotros.
3. Elige un sistema de diseño y una skill, y luego genera presentaciones, prototipos y páginas de aterrizaje con un criterio estético consistente.
4. Cada artefacto y archivo DESIGN.md vive en tu propio repositorio, no en una nube alojada.

El mismo agente Pi, las mismas claves, la misma libertad para cambiar de modelo, más un flujo de diseño real, portátil y de código abierto a su alrededor. Es local-first y MIT, así que nada de tu trabajo ni de tus credenciales sale de tu máquina.

Preguntas frecuentes

1. 01 ¿De verdad puede Pi hacer trabajo de diseño? +

   Sí: con una skill estética, un sistema de diseño e imágenes de referencia reales en contexto, Pi produce interfaces adaptables de calidad de producción, y puedes enrutarlo a un modelo multimodal potente para verificar el resultado contra las referencias. Sin ese contexto tiende a caer en un aspecto genérico, que es la brecha que Open Design llena.

2. 02 ¿Necesito pagar para diseñar con Pi? +

   Pi en sí es gratuito y de código abierto (MIT). Solo pagas por el modelo subyacente: trae tu propia clave de API de proveedor (BYOK) o usa una suscripción de Claude Pro/Max, ChatGPT Plus/Pro o GitHub Copilot mediante /login. En cualquier caso, Open Design nunca enruta tus credenciales.

3. 03 ¿Qué hace que Pi sea bueno para el diseño en concreto? +

   Es agnóstico al proveedor: traes tus propias claves y enrutas a cualquiera de los más de 20 proveedores, eligiendo el modelo cuyas fortalezas encajen con la tarea y cambiando a mitad de sesión. Pero el criterio estético sigue viniendo del sistema de diseño, la skill y las referencias que tú aportes, no del modelo.

4. 04 ¿Qué modelo debería usar con Pi para diseño de frontend? +

   Pi enruta a muchos proveedores, así que elige por tarea: un modelo multimodal potente lee bien las capturas de referencia, mientras que otros pueden encajar para la refactorización. La ventaja de Pi es que puedes cambiar sin alterar tu flujo de trabajo. Open Design te permite conservar el mismo contexto de diseño con cualquier modelo que elijas.

5. 05 ¿Cómo conecto Pi a Figma? +

   Pi admite servidores MCP, así que puedes añadir un servidor MCP de Figma y extraer contexto de diseño real —componentes, variables, datos de maquetación— para que el código generado coincida con la fuente en lugar de aproximarla.

6. 06 ¿Está Open Design afiliado a Pi? +

   No. Pi es un proyecto de código abierto independiente de earendil-works; Open Design es un proyecto de código abierto independiente y aparte que admite a Pi como adaptador de primera clase.

7. 07 ¿Están seguros mis archivos y credenciales? +

   Sí: Open Design es local-first y de código abierto. Tus archivos, artefactos y DESIGN.md permanecen en tu propio repositorio, y tus claves de proveedor las usa directamente Pi (almacenadas localmente en ~/.pi/agent/auth.json), sin pasar nunca por los servidores de Open Design.