MÁS INFORMACIÓN
Lecturas adicionales sobre Pi
Tutoriales, documentación y guías para diseñar con Pi, según 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.
Del brief a la interfaz01 / Pi
USTED APORTA LA IDEA↗
“Comparación de planes con un
skill portátil, cualquier modelo.”
TRES FORMAS DE EMPEZAR ESTA GUÍA DE PI
Elija Por Dónde Empezar Con Pi
ESTA GUÍA · DISEÑO DE UI
Construya Una Interfaz De Producto Con Pi
Esta guía: briefing, referencias, reglas de diseño y un resultado HTML revisado.
Lea esta guía CONFIGURACIÓNConfigure Pi Desde Cero
Aquí tiene el recorrido completo desde una máquina limpia hasta un Pi capaz de construir y verificar UI.
Ir a la configuración COMPARACIÓNCompare Pi Con Otros Agentes
En qué se diferencia Pi de Codex, Claude Code y Cursor para trabajos de diseño, y cuándo conviene elegir otro workflow.
Ver la comparaciónEn esta página Ejemplo
Una Tarea De Diseño Completa Con Pi
Una Tarea De Diseño Con Pi, Del Briefing A La Interfaz
Una sola tarea, mostrada de principio a fin: el briefing y las restricciones que usted entrega, el producto que se obtiene, y las verificaciones que aún debe realizar antes de darla por terminada. La interfaz que aparece abajo es un ejemplo ilustrativo creado para esta página, no una ejecución real 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
- InteraccionesSelector de facturación, CTA de planes, expansión de filas de comparación
- ResultadoUn archivo HTML autónomo con anclajes
data-od-idestables
2División Del Trabajo: Usted, Pi y OpenDesign
- Usted
Escriba el briefing, seleccione el sistema de diseño y defina los criterios de aceptación.
- Pi
Planifica el diseño, escribe el HTML, CSS y JavaScript y lo revisa a petición.
- OpenDesign
Proporciona el sistema de diseño y el skill, genera la vista previa y guarda cada versión como un archivo en el proyecto.
- Revisión
La jerarquía visual, el espaciado en la cuadrícula de 8px, ambos breakpoints y cada interacción se verifican antes de la entrega.
3Artefacto de Pi: la página de comparación de planes en 1440px y 390px
4Revisión antes de la entrega
Diseño
Cuadrícula y espaciado
Los tres planes y la comparación comparten la cuadrícula de 8px; las filas de funciones se alinean entre columnas.
Jerarquía
Jerarquía visual
El precio y el nombre del plan van primero; el acento destaca la insignia del plan más elegido y su botón.
Responsivo
Diseño para móvil
Primero el plan personal, luego el gratuito y después el de equipo; el selector permanece arriba.
Interacción
Comprobaciones de interacción
Accione el selector, recorra los CTA con tabulación y expanda una fila de comparación.
Ajuste
Cuándo Pi Se Ajusta A La Tarea, Y Cuándo No
Pi Se Ajusta Cuando
- Cualquier modelo, sus claves. Enrute a Anthropic, OpenAI, Google y más con sus propias claves; elija un modelo multimodal potente para captura de pantalla a UI y cambie con /model.
- Skills portátiles. Codifique sus convenciones de diseño como Skills estándar de Agent-Skills que se trasladan entre agentes compatibles, no solo Pi.
- MCP + Extensiones. Aporte contexto de diseño real mediante un servidor MCP de Figma, y programe el bucle de verificación con Extensiones en TypeScript.
- Abierto y BYOK. Licenciado bajo MIT y local-first; usted paga solo por el modelo subyacente y sus credenciales permanecen en su máquina.
Elija otro workflow cuando
- Necesita archivos vectoriales editables. El producto es HTML, no un documento de diseño editable. Consulte un workflow vectorial independiente para el formato de recurso que necesita.
- Usted no tiene ninguna referencia ni restricciones. Sin un sistema de diseño o ejemplos, el resultado tiende hacia un aspecto genérico; escriba primero el briefing.
- 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.
- Su equipo trabaja en Aider u OpenCode. Esos agentes tienen sus propias páginas; el espacio de trabajo es el mismo, la configuración difiere. Consulte agentes relacionados.
Compatibilidad
Requisitos de Pi antes de empezar
Esta guía cubre Pi conectado a través de la aplicación de escritorio de OpenDesign. Referencias publicadas verificadas el 6 de septiembre de 2026.
Alcance de la herramientaPi, de la comunidad
Pi es un agente de código 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 pequeño 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 interfaz propia 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 descargas para las compilaciones de escritorio. Los requisitos de Node.js y pnpm en el quickstart de origen se aplican a la ejecución desde el código fuente, no a la instalación de un paquete de escritorio. Versión mínima compatible de Pi: no verificada aquí.
Verificación de conexiónLa señal de éxito
Sigue las instrucciones de conexión que muestre tu versión instalada y luego ejecuta una tarea pequeña. Confirma que Pi la gestionó 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 tu versión instalada y luego verifica un resultado pequeño. No necesitas compilar OpenDesign desde el código fuente para seguir este camino.
- 1
Descargue la app de escritorio de OpenDesign
Elija el paquete para su ordenador, instálelo y abra la app.
Descargar OpenDesignPUNTO DE CONTROLSe abre la aplicación de escritorio. ¿Ya está instalada? Continúe con el siguiente paso; no es necesario volver a descargarla. - 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 de proveedor (BYOK) o 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)De las notas de configuración de Pi en la guía publicada; consulta la documentación del proveedor para conocer el comando actual.
PUNTO DE CONTROLConfirme el agente y la cuenta previstos. Si no está disponible, verifique la compatibilidad antes de intentar una tarea más grande. - 3
Ejecuta una tarea pequeña de Pi
Use un briefing pequeño para poder evaluar todo el ciclo, incluida una revisión.
Briefing inicialConstruya una pantalla de configuración con un formulario de perfil y una confirmación de guardado. Use mis reglas de diseño. Compruébela en anchos de escritorio y móvil.
PUNTO DE CONTROLAbra el resultado, pruebe el estado de guardado y solicite un cambio específico. Un archivo generado es el comienzo de la revisión, no el final.
Para ejecutar OpenDesign desde el código fuente, siga la guía de inicio técnica en su lugar.
El flujo de trabajo de diseño de Pi
El flujo de trabajo de diseño de Pi en cinco pasos
La misma tarea de la página de comparación de planes, seguida desde el briefing hasta el archivo verificado. Cada paso indica qué aporta usted, qué hace Pi, qué aporta OpenDesign y qué debe comprobar.
- 1
Briefing de diseño
Lenguaje sencillo, de tres a seis líneas. Indique el público, la función de la pantalla y las plataformas.
- UstedEscriba el briefing; adjunte una captura de referencia si dispone de una.
- PiLee el briefing y el archivo de instrucciones del proyecto; pregunta cuando algo es ambiguo.
- OpenDesignAporta el proyecto, la superficie de prompt y el skill para el tipo de artefacto.
- ComprobarConfirme que el briefing indica los criterios de aceptación. Añadirlos ahora resulta más económico que hacerlo después de la generación.
- 2
Restricciones de diseño
Un design system y unas pocas reglas estrictas. Esto es lo que distingue un resultado fiel a la marca de un aspecto genérico.
- UstedElija un design system; indique los breakpoints y los componentes de uso obligatorio, si los hay.
- PiCarga los tokens y las reglas de posture de DESIGN.md en el contexto antes de escribir una línea.
- OpenDesignProporciona la biblioteca de design systems y vincula el elegido a la plantilla del skill.
- ComprobarLos tokens coinciden con su marca. Un solo acento, las fuentes correctas, el radio correcto.
- 3
Generar la interfaz
Pi escribe un archivo HTML autocontenido: layout, estilos, interacciones y hooks estables.
- UstedEspere, o responda a una pregunta aclaratoria. No hay nada que configurar.
- PiPlanifica las secciones, escribe el HTML, CSS y JavaScript, ejecuta el archivo y corrige lo que falle.
- OpenDesignGuarda el artefacto en la carpeta del proyecto y lo indexa para la vista previa.
- ComprobarNada todavía. Evalúe el archivo una vez renderizado, no a partir del código fuente.
- 4
Vista previa
El archivo se renderiza dentro de OpenDesign en los anchos que solicitaste. Aquí es donde se juzga el diseño.
- UstedCambie de ancho, recorra las interacciones, deje comentarios en los elementos.
- PiLee sus comentarios sobre la vista previa y prepara la siguiente revisión.
- OpenDesignRenderiza la vista previa, expone objetivos
data-od-idpara comentarios y ediciones. - VerificaciónJerarquía, contraste, desbordamiento a 390px, estados de foco, y si el acento se usa con moderación.
- 5
Revisar y verificar
Solicite cambios señalando elementos en la vista previa. Cada revisión es un archivo nuevo; nada se sobrescribe en silencio.
- UstedConvierte comentarios en solicitudes; decide cuándo la tarea está terminada.
- PiAplica los cambios directamente y vuelve a ejecutar el archivo.
- OpenDesignMantiene las versiones lado a lado; exporta una imagen o el HTML cuando haya terminado.
- VerificaciónVuelva a revisar solo el área que cambió, y luego toda la página una vez en cada punto de quiebre.
Recursos
Recursos de diseño de Pi
Skills Explorar skills Sistemas de diseño Explorar sistemas Plantillas Explorar plantillas
Skills de diseño
Los tipos de artifacts que Pi puede producir en OpenDesign, un skill por tipo.
Sistemas de Diseño
Tokens de marca y componentes que deben vincularse antes de que Pi genere algo.
Plantillas
Puntos de partida para presentaciones, landing pages y pantallas de producto.
Limitaciones
Limitaciones de Pi, verificaciones manuales y alternativas
- AlcanceEs independiente del proveedor: normaliza entre Anthropic, OpenAI, Google y más de 20 proveedores, de modo que usted trae sus propias claves y cambia de modelo a mitad de sesión. Esta página cubre a Pi como agente conectado a OpenDesign, no todas las funciones de Pi.
- Límites de usoLos límites de uso y el costo dependen de la credencial que utilice (su propia clave de API del proveedor o inicio de sesión con suscripción a través de /login). Esta página no hace ninguna afirmación sobre cuotas gratuitas.
- RedQue los archivos del proyecto sean locales no implica inferencia sin conexión. Revise la configuración del proveedor y las políticas de datos de su agente antes de compartir información sensible.
- La salida es HTMLLos productos son archivos HTML, no archivos de diseño vectorial.
- Revisión manualLa accesibilidad, el contenido real, la coherencia con la marca y la corrección de las interacciones deben ser revisados por usted en la vista previa. Trate cualquier autocomprobación del agente como una primera pasada.
- AlternativaSi el agente no está disponible o una tarea falla, revise las instrucciones de conexión y autenticación de la versión instalada. Conserve 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 especialmente bueno 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.
Inicie una primera tarea de diseño con Pi
Comience con una tarea pequeña, evalúe el ciclo de ida y vuelta y luego traiga el briefing real. Elija la opción que corresponda a su configuración; la página no la detecta.