MÁS INFORMACIÓN
Lecturas adicionales sobre Pi
Tutoriales, documentación y guías paso a paso para el trabajo de diseño con Pi, como se enumeran en la guía publicada.
Pi 
OpenDesign Diseñar con
Pi en
OpenDesign.
Cómo diseñar interfaces con Pi en OpenDesign: skills portátiles, el modelo y la clave que usted elija, una tarea de comparación de planes de principio a fin, desde el briefing hasta el archivo revisado, y los límites que debe conocer antes de empezar.
TRES CAMINOS A TRAVÉS DE ESTA GUÍA DE PI
Elige tu punto de partida para Pi
ESTA GUÍA · DISEÑO DE UI
Crea una interfaz de producto con Pi
En esta guía: un brief, referencias, reglas de diseño y un resultado HTML que se revisa.
Lea esta guía CONFIGURACIÓNConfigure Pi Desde Cero
Sigue la ruta completa desde una máquina nueva hasta una configuración de Pi capaz de construir y verificar interfaces de usuario.
Ir a la configuración COMPARACIÓNCompare Pi Con Otros Agentes
Descubre cómo se compara Pi con Codex, Claude Code y Cursor en el trabajo de diseño, y cuándo otro flujo de trabajo es la mejor opción.
Ver la comparaciónEn esta página Ejemplo
Una Tarea De Diseño Completa Con Pi
Un trabajo de diseño con Pi: del brief a la interfaz
Una tarea seguida a lo largo de todo el ciclo: lo que entregas como brief y restricciones, el artefacto que devuelve Pi y las comprobaciones que quedan antes de darla por terminada. La interfaz de abajo es un ejemplo ilustrativo creado para esta página, no una ejecución de Pi registrada.
1Briefing de diseño y restricciones
BriefingDiseñe una página de comparación de planes para una app de notas: planes gratuito, personal y de equipo, una comparación de funciones y un breve FAQ. Escritorio y móvil.
- Sistema de diseñoLienzo de papel OpenDesign: Albert Sans, un acento verde
- Breakpoints1440px de escritorio y 390px de móvil, sin desplazamiento horizontal
- InteraccionesConmutador de facturación, CTA de planes, filas de comparación expandibles
- ResultadoUn archivo HTML autónomo con anclajes
data-od-idestables
2Quién hace qué: tú, Pi y OpenDesign
- Usted
Tú escribes el brief, eliges el sistema de diseño y estableces los criterios de aceptación.
- Pi
Pi planifica la maquetación, escribe el HTML, CSS y JavaScript, y revisa cuando se le solicita.
- OpenDesign
OpenDesign proporciona el sistema de diseño y la skill, renderiza la vista previa y guarda cada versión como un archivo de proyecto.
- Revisión
Antes de la entrega, comprueba la jerarquía visual, el espaciado en la cuadrícula de 8px, ambos breakpoints y cada interacción.
3Artefacto de Pi: página de comparación de planes a 1440px y 390px
4Revisión antes de la entrega
Diseño
Cuadrícula y espaciado
Los tres planes y la comparación usan la misma cuadrícula de 8px; las filas de características se alinean entre columnas.
Jerarquía
Jerarquía visual
El precio y el nombre del plan lideran; el acento marca la insignia de la opción más elegida y su botón.
Responsivo
Diseño para móvil
Orden: plan personal, luego gratuito, luego equipo; el conmutador permanece arriba.
Interacción
Comprobaciones de interacción
Activa el interruptor, recorre los CTA con el tabulador, abre una fila de comparación.
Ajuste
Cuándo Pi es la opción adecuada—y cuándo no
Pi Se Ajusta Cuando
- Cualquier modelo, tus claves. Envía solicitudes a Anthropic, OpenAI, Google y más con tus propias claves; elige un modelo multimodal potente para convertir capturas de pantalla en UI y cambia con /model.
- Skills portables. Coloca tus convenciones de diseño en Skills estándar de Agent-Skills que te acompañan entre agentes compatibles, no solo en Pi.
- MCP + Extensiones. Extrae contexto de diseño real a través de un servidor MCP de Figma y automatiza el ciclo de verificación usando Extensiones de TypeScript.
- Abierto y BYOK. Con licencia MIT y local-first; solo pagas por el modelo subyacente y las credenciales permanecen en tu máquina.
Elija otro workflow cuando
- Necesitas archivos vectoriales editables. El artefacto es HTML, no un documento de diseño editable. Busca un flujo de trabajo vectorial aparte para el formato de recurso que necesites.
- No tienes referencias ni restricciones. Sin un sistema de diseño ni ejemplos, el resultado tiende a verse genérico; escribe primero el brief.
- No dispone de la credencial que necesita este agente. Requerido: su propia clave de API de proveedor (bring your own key) o inicio de sesión con suscripción mediante /login. OpenDesign no proporciona ni actúa como proxy de credenciales.
- Tu equipo trabaja en Aider u OpenCode. Esos agentes tienen sus propias páginas; el espacio de trabajo común permanece, pero la configuración cambia. Consulta agentes relacionados.
Compatibilidad
Requisitos de Pi antes de empezar
Esta página cubre Pi cuando se conecta a través de la aplicación de escritorio de OpenDesign. Las referencias publicadas se verificaron el 6 de septiembre de 2026.
Alcance de la herramientaPi, de la comunidad
Pi es un agente de programación con IA de terminal, de código abierto (MIT), de earendil-works. Lee tu base de código, edita archivos y ejecuta comandos desde un núcleo compacto de cuatro herramientas: read, write, edit, bash. Esta página trata sobre diseñar interfaces con Pi a través de OpenDesign, no sobre la propia interfaz de Pi. Las notas de configuración de OpenDesign enumeran los agentes disponibles.
Cuentas y autenticaciónTu propia clave de API de proveedor (BYOK) o
Tu propia clave de API de proveedor (BYOK) o inicio de sesión por suscripción mediante /login. 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. Esta página no promete una cuota ni un precio.
Sistema y versionesApp de escritorio o código fuente
Consulta la página de descarga para las compilaciones de escritorio. Los requisitos de Node.js y pnpm del inicio rápido del código fuente se aplican al ejecutar desde el código fuente, no al instalar un paquete de escritorio. Versión mínima compatible de Pi: no verificada aquí.
Verificación de conexiónLa señal de éxito
Usa las instrucciones de conexión que muestra tu versión instalada y luego ejecuta una tarea pequeña. Confirma que Pi la manejó y que el artefacto se abre. Una descarga por sí sola no establece una conexión funcional.
Empiece con la app de escritorio
Configuración de Pi en tres pasos
Descarga primero, completa la configuración de Pi para la versión que instalaste y luego comprueba un resultado pequeño. Compilar OpenDesign desde el código fuente no es necesario para esta ruta.
- 1
Descargue la app de escritorio de OpenDesign
Elige el paquete para tu computadora, instálalo e inicia la aplicación.
Descargar OpenDesignPUNTO DE CONTROLLa aplicación de escritorio se abre. ¿Ya está instalada? Pasa al siguiente paso; no necesitas descargarla de nuevo. - 2
Prepara tu conexión de Pi
Sigue las instrucciones de Pi en tu versión instalada. Autentícate con tu propia clave de API del proveedor (BYOK) o con un inicio de sesión por suscripción — las credenciales permanecen en tu máquina.
Documentación de proveedores y autenticación de Pi# 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)Tomado de las notas de configuración de Pi en la guía publicada; consulta la documentación del proveedor para obtener el comando actual.
PUNTO DE CONTROLConfirma el agente y la cuenta previstos. Si no están disponibles, verifica la compatibilidad antes de intentar una tarea más grande. - 3
Ejecuta una tarea pequeña de Pi
Comienza con un brief acotado que te permita juzgar el ciclo completo, incluida una revisión.
Briefing inicialCrea una pantalla de configuración con un formulario de perfil y una confirmación de guardado. Aplica mis reglas de diseño. Verifícala en anchos de escritorio y móvil.
PUNTO DE CONTROLAbre el resultado, prueba el estado de guardado y solicita un cambio específico. La revisión comienza cuando se genera un archivo; no termina ahí.
Para ejecutar OpenDesign desde el código fuente, usa el inicio rápido técnico en su lugar.
El flujo de trabajo de diseño de Pi
Flujo de trabajo de diseño en cinco pasos de Pi
Sigue una página de comparación de planes desde el brief hasta el artefacto verificado. Cada paso muestra tu entrada, el movimiento de Pi, la contribución de OpenDesign y tu punto de revisión.
- 1
Briefing de diseño
Mantenlo simple y breve: de tres a seis líneas. Nombra la audiencia, el propósito de la pantalla y las plataformas.
- UstedRedacta el brief; adjunta una captura de pantalla de referencia si está disponible.
- PiLee el brief y el archivo Skill del proyecto; pregunta si algo es ambiguo.
- OpenDesignProporciona el proyecto, la interfaz de prompts y la Skill para el tipo de artefacto.
- ComprobarVerifica que el brief incluya criterios de aceptación. Añadirlos ahora cuesta menos que las correcciones posteriores a la generación.
- 2
Restricciones de diseño
Un sistema de diseño más reglas estrictas. Esto es lo que mantiene la salida de Pi alineada con la marca en lugar de genérica.
- UstedSelecciona un sistema de diseño; especifica breakpoints y los componentes requeridos.
- PiCarga los tokens de DESIGN.md y las reglas de postura en el contexto antes de escribir cualquier código.
- OpenDesignProporciona la biblioteca del sistema de diseño y vincula tu elección en la plantilla de Skill.
- ComprobarVerifica que los tokens coincidan con tu marca: un solo color de acento, fuentes correctas, radio adecuado.
- 3
Generar la interfaz
Pi produce un único archivo HTML autocontenido: diseño, estilos, interacciones y hooks estables.
- UstedEspera o responde a una pregunta de aclaración. No se necesita configuración.
- PiPlanifica secciones, escribe HTML, CSS y JavaScript, ejecuta el archivo y corrige los fallos.
- OpenDesignGuarda el artefacto en la carpeta del proyecto y lo indexa para la vista previa.
- ComprobarNada todavía. Juzga el archivo renderizado, no el código fuente.
- 4
Vista previa
El archivo se renderiza en OpenDesign con los anchos que solicitaste. Aquí es donde se juzga el diseño.
- UstedAlterna los anchos, prueba las interacciones y deja comentarios en los elementos.
- PiLee tus comentarios de la vista previa y prepara la siguiente revisión.
- OpenDesignRenderiza la vista previa y expone los objetivos
data-od-idpara comentarios y ediciones. - VerificaciónVerifica la jerarquía, el contraste, el desbordamiento a 390px, los estados de enfoque y si el acento se mantiene moderado.
- 5
Revisar y verificar
Solicita cambios señalando elementos en la vista previa. Cada revisión es un archivo nuevo; nada se sobrescribe en silencio.
- UstedTraduce los comentarios en solicitudes; decide cuándo la tarea está completa.
- PiAplica los cambios en el mismo lugar y vuelve a ejecutar el archivo.
- OpenDesignMantiene las versiones en paralelo; exporta una imagen o el HTML cuando termina.
- VerificaciónRevisa de nuevo solo el área modificada y, luego, la página completa una vez en cada breakpoint.
Recursos
Recursos de diseño de Pi
Skills Explorar skills Sistemas de diseño Explorar sistemas Plantillas Explorar plantillas
Skills de diseño
Tipos de artefactos que Pi puede crear en OpenDesign, un Skill por tipo.
Sistemas de Diseño
Tokens de marca y componentes que se deben vincular antes de que Pi genere cualquier salida.
Plantillas
Puntos de partida para presentaciones, landing pages y pantallas de producto.
Limitaciones
Limitaciones de Pi, verificaciones manuales y alternativas
- AlcancePi es agnóstico respecto al proveedor: normaliza entre Anthropic, OpenAI, Google y más de 20 proveedores, así que tú aportas tus propias claves y puedes cambiar de modelo a mitad de sesión. Esta página cubre Pi como un agente conectado a OpenDesign, no todas las funciones de Pi.
- Límites de usoLos límites de uso y el costo dependen de tu credencial (tu propia clave de API del proveedor o el inicio de sesión de suscripción mediante /login). Esta página no afirma nada sobre cuotas gratuitas.
- RedLos archivos de proyecto locales no implican inferencia sin conexión. Revisa la configuración del proveedor y las políticas de datos de Pi antes de compartir entradas sensibles.
- La salida es HTMLLos productos son archivos HTML, no archivos de diseño vectorial.
- Revisión manualLa accesibilidad, el contenido real, la adecuación a la marca y la corrección de la interacción son revisados por ti en la vista previa. Trata cualquier autocomprobación del agente como una primera pasada.
- AlternativaSi Pi no está disponible o una tarea falla, consulta las instrucciones de conexión y autenticación de la versión instalada. Conserva el error y el último artefacto funcional antes de cambiar la configuración.
Preguntas frecuentes
Preguntas frecuentes sobre Pi y OpenDesign
¿Puede Pi realmente hacer trabajo de diseño?
Sí — con un skill estético, un sistema de diseño e imágenes de referencia reales en contexto, Pi produce UI responsivas de calidad de producción, y usted puede dirigirlo a un modelo multimodal potente para verificar la salida contra las referencias. Sin ese contexto, tiende a caer en un aspecto genérico, que es la brecha que OpenDesign cubre.
¿Necesito pagar para diseñar con Pi?
Pi en sí es gratuito y de código abierto (MIT). Usted paga únicamente por el modelo subyacente — traiga su propia clave de API del proveedor (BYOK), o use una suscripción de Claude Pro/Max, ChatGPT Plus/Pro o GitHub Copilot a través de /login. OpenDesign nunca actúa como proxy de sus credenciales en ningún caso.
¿Qué hace que Pi sea adecuado para el diseño?
Es independiente del proveedor: usted trae sus propias claves y se conecta a cualquiera de más de 20 proveedores, eligiendo el modelo cuyas fortalezas se ajusten a la tarea y cambiando a mitad de sesión. Pero el gusto sigue proviniendo del sistema de diseño, el skill y las referencias que usted proporciona, no del modelo.
¿Qué modelo debo usar con Pi para diseño frontend?
Pi se conecta a muchos proveedores, así que elija según la tarea — un modelo multimodal potente lee bien las capturas de referencia, mientras que otros pueden ser más adecuados para refactorización. La ventaja de Pi es que puede cambiar sin modificar su workflow. OpenDesign le permite mantener el mismo contexto de diseño sin importar qué modelo elija.
¿Cómo conecto Pi a Figma?
Pi admite servidores MCP, por lo que puede añadir un servidor MCP de Figma y extraer contexto de diseño real —componentes, variables, datos de layout— de modo que el código generado coincida con la fuente en lugar de aproximarla.
Qué es realmente Pi
Pi es un agente de programación con IA de código abierto (MIT) para la terminal, parte del conjunto de herramientas pi de earendil-works. Lee tu repositorio, edita archivos y ejecuta comandos de shell: planifica y verifica 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 predeterminadas —read, write, edit y bash— más grep, find y ls integrados.
Para el trabajo de diseño, la propiedad más destacada es que Pi es agnóstico respecto al proveedor. Normaliza entre Anthropic, OpenAI, Google y muchos otros proveedores tras una única API unificada, así que aportas 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 en mitad de la 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 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 de 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.
Credencial: tu propia clave de API del proveedor (BYOK — Anthropic, OpenAI, Google, etc.) o un inicio de sesión por suscripción mediante /login; se guarda localmente en ~/.pi/agent/auth.json (0600)
Proveedor: earendil-works (proyecto de código abierto de la comunidad)
Licencia: MIT, código abierto
Para el trabajo de diseño, la propiedad más destacada es que Pi es agnóstico respecto al proveedor. Normaliza entre Anthropic, OpenAI, Google y muchos otros proveedores tras una única API unificada, así que aportas 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 en mitad de la 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 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 de 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.
Credencial: tu propia clave de API del proveedor (BYOK — Anthropic, OpenAI, Google, etc.) o un inicio de sesión por suscripción mediante /login; se guarda localmente en ~/.pi/agent/auth.json (0600)
Proveedor: earendil-works (proyecto de código abierto de la comunidad)
Licencia: MIT, código abierto
Por qué un agente multiproveedor y BYOK encaja con el diseño
La ventaja de Pi en diseño es la flexibilidad, no un único modelo integrado; pero, como con cualquier agente, el buen gusto sigue teniendo que aportarlo alguien.
Elige el modelo adecuado para cada 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 refactorizar, sin salir del agente.
Tus claves, sin dependencia: BYOK significa que no estás atado al precio ni a los límites de contexto de un solo proveedor; 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) orienta al agente hacia tus tokens, componentes y especificaciones reales, de modo que trabaje para una marca en lugar de aplicar un aspecto predeterminado.
El buen gusto proviene de tres aportaciones que tú proporcionas: un sistema de diseño, una skill e imágenes de referencia reales.
La lección es la misma que enseña todo agente: Pi no tiene buen gusto por defecto, y ninguna elección de modelo se lo da. Produce buen diseño cuando le das restricciones —un sistema de diseño, una skill estética y referencias concretas—. OpenDesign empaqueta exactamente esas aportaciones, y por eso los dos encajan (más abajo).
Elige el modelo adecuado para cada 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 refactorizar, sin salir del agente.
Tus claves, sin dependencia: BYOK significa que no estás atado al precio ni a los límites de contexto de un solo proveedor; 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) orienta al agente hacia tus tokens, componentes y especificaciones reales, de modo que trabaje para una marca en lugar de aplicar un aspecto predeterminado.
El buen gusto proviene de tres aportaciones que tú proporcionas: un sistema de diseño, una skill e imágenes de referencia reales.
La lección es la misma que enseña todo agente: Pi no tiene buen gusto por defecto, y ninguna elección de modelo se lo da. Produce buen diseño cuando le das restricciones —un sistema de diseño, una skill estética y referencias concretas—. OpenDesign empaqueta exactamente esas aportaciones, y por eso los dos encajan (más abajo).
Configura Pi para trabajar en diseño desde cero
La secuencia de configuración: instalar → autenticar (BYOK) → codificar las reglas de diseño en una Skill → elegir un modelo → habilitar la verificación en el navegador.
Codifica tus reglas de diseño: pon tus tokens, primitivas y convenciones en una Skill y apunta a ellos con Pi, para que la salida coincida con una marca en lugar de caer en un aspecto genérico.
Añade verificación en el navegador: conecta un MCP de Playwright o de navegador para que Pi renderice en un navegador real y compruebe su salida en distintos puntos de ruptura, en lugar de limitarse a confirmar que la compilación pasa.
Usa la sección de configuración actual para los comandos y los detalles específicos de versión, que pueden cambiar.
Ejemplo de comando histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
Codifica tus reglas de diseño: pon tus tokens, primitivas y convenciones en una Skill y apunta a ellos con Pi, para que la salida coincida con una marca en lugar de caer en un aspecto genérico.
Añade verificación en el navegador: conecta un MCP de Playwright o de navegador para que Pi renderice en un navegador real y compruebe su salida en distintos puntos de ruptura, en lugar de limitarse a confirmar que la compilación pasa.
Usa la sección de configuración actual para los comandos y los detalles específicos de versión, que pueden cambiar.
# 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+LEjemplo de comando histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
El flujo de trabajo de captura a interfaz
El bucle de diseño de mayor impacto con Pi es convertir una imagen de referencia en una interfaz funcional y adaptable e iterar hasta que coincida, apoyándote en un modelo multimodal para comparar la salida con la referencia. Como Pi es agnóstico respecto al proveedor, apúntalo al modelo que mejor lea imágenes para esta pasada.
Parte de las referencias visuales más claras que tengas, e incluye varios estados (escritorio y móvil, hover, vacío, carga), no solo una imagen principal.
Elige un modelo multimodal potente para la pasada con /model, ya que la comprensión de imágenes es lo que impulsa la calidad de captura a interfaz.
Sé específico en el prompt; los prompts vagos producen interfaces genéricas incluso con un modelo potente.
Mantén tu sistema de diseño y tus convenciones en una Skill, y dile a Pi dónde viven los tokens y las primitivas canónicas.
Ejecuta un servidor de desarrollo y haz que Pi renderice en un navegador real, redimensionando a los puntos de ruptura, y luego itera comparando su implementación con las capturas, en lugar de limitarte a confirmar que compila.
Da al agente las referencias y las restricciones concretas desde el principio:
Mantén los prompts pequeños y enfocados, confirma las iteraciones buenas y revierte las malas (diciéndole a Pi cuándo reviertes), 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.
Ejemplo de comando histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
Parte de las referencias visuales más claras que tengas, e incluye varios estados (escritorio y móvil, hover, vacío, carga), no solo una imagen principal.
Elige un modelo multimodal potente para la pasada con /model, ya que la comprensión de imágenes es lo que impulsa la calidad de captura a interfaz.
Sé específico en el prompt; los prompts vagos producen interfaces genéricas incluso con un modelo potente.
Mantén tu sistema de diseño y tus convenciones en una Skill, y dile a Pi dónde viven los tokens y las primitivas canónicas.
Ejecuta un servidor de desarrollo y haz que Pi renderice en un navegador real, redimensionando a los puntos de ruptura, y luego itera comparando su implementación con las capturas, en lugar de limitarte a confirmar que compila.
Da al agente las referencias y las restricciones concretas desde el principio:
Mantén los prompts pequeños y enfocados, confirma las iteraciones buenas y revierte las malas (diciéndole a Pi cuándo reviertes), 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.
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.Ejemplo de comando histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
Skills, Extensions y temas
Pi se autoextiende en tiempo de ejecución mediante unas cuantas capas, y 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 comprobación de revisión. La misma Skill funciona en agentes compatibles, no solo en Pi.
Extensions y plantillas de prompt: las Extensions de TypeScript añaden herramientas, comandos e interfaz personalizados; las plantillas de prompt reutilizables se ejecutan con /name. 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 siga siendo legible mientras trabajas.
Son capacidades portátiles —Skills y MCP sobre todo—, exactamente el tipo de cosas que OpenDesign está hecho para orquestar, en lugar de recrearlas en cada proyecto.
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 comprobación de revisión. La misma Skill funciona en agentes compatibles, no solo en Pi.
Extensions y plantillas de prompt: las Extensions de TypeScript añaden herramientas, comandos e interfaz personalizados; las plantillas de prompt reutilizables se ejecutan con /name. 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 siga siendo legible mientras trabajas.
Son capacidades portátiles —Skills y MCP sobre todo—, exactamente el tipo de cosas que OpenDesign está hecho para orquestar, en lugar de recrearlas en cada proyecto.
Pi vs Codex vs Claude Code vs Cursor vs 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 justo:
Pi — Agnóstico respecto al proveedor y BYOK: enruta a cualquier modelo (Anthropic, OpenAI, Google…) y cambia en mitad de la sesión; MIT, autoextensible — Elegir el mejor modelo por tarea sin dependencia de proveedor
Codex — Fuerte acabado visual con una skill de frontend; compilaciones asíncronas en sandbox — Compilaciones asíncronas delegadas y reglas portátiles de AGENTS.md
Claude Code — Decisiones de diseño concretas (hex, espaciado, tipografía) y UX consciente del código base — Razonamiento de frontend y refactorizaciones de gran contexto
Cursor — Bucle visual de construir y ver con vista previa en vivo y ediciones en línea — Trabajo de interfaz de iterar y observar dentro de un IDE
Gemini CLI — Fuerte comprensión multimodal de imágenes y un contexto de 1M de tokens; nivel gratuito — Trabajo con muchas capturas y mantener todo un sistema de diseño en contexto
El ángulo de Pi es ortogonal a los demás: es el agente que te permite usar cualquiera de esos modelos subyacentes con tus propias claves. Sigue vigente el veredicto recurrente de la comunidad: el buen gusto viene de los humanos; todos ellos caen por defecto en una estética genérica sin skills, referencias y restricciones. Ese es el problema real que hay que resolver, y tiene forma de herramienta de diseño, no de modelo.
Agente — Fortaleza en diseño — Ideal para
Pi — Agnóstico respecto al proveedor y BYOK: enruta a cualquier modelo (Anthropic, OpenAI, Google…) y cambia en mitad de la sesión; MIT, autoextensible — Elegir el mejor modelo por tarea sin dependencia de proveedor
Codex — Fuerte acabado visual con una skill de frontend; compilaciones asíncronas en sandbox — Compilaciones asíncronas delegadas y reglas portátiles de AGENTS.md
Claude Code — Decisiones de diseño concretas (hex, espaciado, tipografía) y UX consciente del código base — Razonamiento de frontend y refactorizaciones de gran contexto
Cursor — Bucle visual de construir y ver con vista previa en vivo y ediciones en línea — Trabajo de interfaz de iterar y observar dentro de un IDE
Gemini CLI — Fuerte comprensión multimodal de imágenes y un contexto de 1M de tokens; nivel gratuito — Trabajo con muchas capturas y mantener todo un sistema de diseño en contexto
El ángulo de Pi es ortogonal a los demás: es el agente que te permite usar cualquiera de esos modelos subyacentes con tus propias claves. Sigue vigente el veredicto recurrente de la comunidad: el buen gusto viene de los humanos; todos ellos caen por defecto en una estética genérica sin skills, referencias y restricciones. Ese es el problema real que hay que resolver, y tiene forma de herramienta de diseño, no de modelo.
Agente — Fortaleza en diseño — Ideal para
Escollos, y cómo evitar el aspecto de “AI slop”
La queja más común sobre el diseño generado por IA es que parece genérico: degradados suaves, paneles flotantes, esquinas redondeadas desmesuradas, sombras dramáticas, un aire de Inter y morado que “grita que lo hizo una IA”. Otros problemas señalados incluyen diseños móviles rotos e instrucciones que se filtran en los textos de la interfaz. Nada de esto es exclusivo de Pi ni de un modelo concreto; es lo que ocurre cuando cualquier agente funciona 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 predeterminado, y como es una Skill portátil, viaja contigo entre modelos.
Verifica en un navegador real: elige un modelo multimodal y haz que Pi renderice y se autocompruebe en distintos puntos de ruptura para que los diseños no se rompan en silencio en móvil.
Aporta tokens y referencias: los tokens de diseño reales y las capturas de referencia son la palanca más potente sobre la calidad de la salida.
Codifica las reglas donde Pi las lee: pon reglas del estilo “sin tarjetas hero, máximo dos tipografías, jerarquía centrada en la marca” 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 la carga que OpenDesign elimina.
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 predeterminado, y como es una Skill portátil, viaja contigo entre modelos.
Verifica en un navegador real: elige un modelo multimodal y haz que Pi renderice y se autocompruebe en distintos puntos de ruptura para que los diseños no se rompan en silencio en móvil.
Aporta tokens y referencias: los tokens de diseño reales y las capturas de referencia son la palanca más potente sobre la calidad de la salida.
Codifica las reglas donde Pi las lee: pon reglas del estilo “sin tarjetas hero, máximo dos tipografías, jerarquía centrada en la marca” 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 la carga que OpenDesign elimina.
Diseñar con Pi dentro de OpenDesign
OpenDesign es la capa de diseño de código abierto que el flujo anterior no deja de reclamar. Trata a Pi como un adaptador de primera clase y lo envuelve en una skill curada y una biblioteca de sistemas de diseño, una canalización de renderizado estructurada y una interfaz de escritorio local, de modo que el contexto de diseño que hace bueno a Pi está ahí desde la primera ejecución, en lugar de montarse a mano cada vez. Ambos son de código abierto y local-first, lo que hace que la pareja encaje de forma natural.
Autentícate con tu propia clave de API del proveedor (BYOK) o con un inicio de sesión por suscripción: las credenciales se quedan en tu máquina, en ~/.pi/agent/auth.json, y nunca pasan por nuestro servidor.
Elige un sistema de diseño y una skill, y luego genera presentaciones, prototipos y páginas de destino con un gusto coherente.
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.
Instala OpenDesign y selecciona Pi como tu agente.
Autentícate con tu propia clave de API del proveedor (BYOK) o con un inicio de sesión por suscripción: las credenciales se quedan en tu máquina, en ~/.pi/agent/auth.json, y nunca pasan por nuestro servidor.
Elige un sistema de diseño y una skill, y luego genera presentaciones, prototipos y páginas de destino con un gusto coherente.
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.
Instala OpenDesign y selecciona Pi como tu agente.
¿OpenDesign está afiliado a Pi?
No. OpenDesign es independiente e integra Pi como un adaptador con soporte de la comunidad.