Guía de instalación de Oil UI Skill y diseño de interfaces con IA
Oil UI es una Skill de diseño de interfaces para agentes de IA. Proporciona al modelo un método de diseño: partir de la tarea y el contenido real, explorar direcciones diferenciadas y después perfeccionar la interfaz funcional. Los ejemplos de la galería indican el modelo de IA. Cuando hay una tarea documentada, también muestran el brief original, para que puedas examinar el resultado antes de probar el flujo de trabajo en tu propio proyecto.
1. Instala la Skill gratuita de código abierto
Ejecuta este comando en tu terminal y sigue las indicaciones del instalador para elegir el agente y el alcance de la instalación. También puedes enviar el comando a tu agente para que te ayude. Si utilizas DeepSeek Harness, ejecuta dsh plugin --profile web add github:oil-oil/dsh-oil-ui para instalar el plugin nativo dsh-oil-ui (incluye la Skill gratuita y detecta automáticamente una instalación local de Oil UI Pro).
npx skills add oil-oil/oil-ui2. Plantea una tarea real al agente
Explica qué es el producto, a quién se dirige y qué tarea deben completar las personas. Proporciona contenido real, el alcance de las páginas y las limitaciones técnicas. Si el proyecto ya existe, indica qué comportamiento de negocio debe mantenerse intacto. Un brief claro resulta más útil que una larga lista de adjetivos de estilo.
Usa Oil UI para diseñar la página de inicio de mi herramienta de reservas. Los clientes de pequeños estudios necesitan elegir un servicio, encontrar un horario disponible y reservar. Muéstrame primero distintas direcciones de diseño. Mantén la tecnología y el flujo de reservas actuales.3. Compara direcciones antes de perfeccionar
Pide a tu agente que muestre las direcciones una junto a otra. Compara la jerarquía, la tipografía, el diseño y la acción principal con contenido real; después elige una dirección para desarrollarla. Los prompts de la galería pueden servir de referencia, pero debes adaptarlos a tu producto y a tus limitaciones.
Todos los ejemplos →4. Abre la página y completa la tarea
Comprueba la primera pantalla, el contenido extenso, el diseño móvil y las acciones clave en la página funcional. Cubre los estados de carga, vacío y error que realmente necesite la tarea. Las capturas ayudan a comparar detalles visuales; hacer clic y escribir permite confirmar que la interacción funciona. Informa a tu agente de la página, la acción y el resultado concretos.
5. Explora Pro cuando necesites el método completo
Oil UI Pro cubre interacciones y estados, diseños adaptables, renovación de proyectos existentes, revisiones desde varias perspectivas y recorridos de tareas. Cómpralo en la página de Pro o pide a tu agente que ejecute el instalador y te ayude a iniciar sesión, pagar e instalarlo. Los resultados siguen dependiendo del modelo, así que prueba primero la Skill gratuita con una tarea real.
npx github:oil-oil/oil-cli install oil-ui-proInspiración de diseño de interfaces por formato y tarea
Explora ejemplos funcionales de la galería de Oil UI por formato de interfaz o tarea de diseño concreta. Abre las demos originales, compara enfoques y consulta los prompts que los generaron.
Ejemplos de diseño →Guías detalladas y manuales prácticos
Explora flujos de trabajo según el agente de programación, el tipo de interfaz o el problema de diseño. Cada guía incluye ejemplos funcionales de la galería, plantillas de prompts y listas de revisión.
Guías de agentes y herramientas
Flujos de trabajo, comandos de configuración y estructuras de prompts para usar Oil UI en Claude Code, OpenAI Codex, DeepSeek Harness, Cursor y Windsurf.
Guía de diseño de interfaces con Claude Code
Instala Oil UI Skill en Claude Code para diseñar sitios web, aplicaciones móviles y módulos de interfaz con paneles de direcciones, briefs claros y revisiones a ciegas mediante capturas.
Guía de agentes · OpenAI CodexGuía de diseño de interfaces con Codex
Instala Oil UI Skill en OpenAI Codex para diseñar fundiciones tipográficas, consolas de incidencias, paneles de facturación y aplicaciones móviles con interacciones funcionales y revisiones en viewports reales.
Guía de agentes · DeepSeek HarnessGuía de interfaces con DeepSeek Harness
Instala el plugin nativo dsh-oil-ui en DeepSeek Harness con un comando. Incluye la Skill Oil UI gratuita, detecta automáticamente Oil UI Pro local y muestra obras de la galería creadas con DeepSeek 4.1 Flash.
Guía de agentes · Cursor / Windsurf / IDEGuía de interfaces con Cursor y Windsurf
Instala Oil UI Skill en Cursor, Windsurf, Antigravity y Gemini CLI para diseñar módulos nuevos o renovar pantallas de proyectos existentes dentro de tu tecnología actual.
Manuales de interfaz por escenario
Métodos prácticos para páginas de destino, paneles y espacios de trabajo de escritorio, aplicaciones móviles multipantalla y renovación de interfaces en proyectos existentes.
Manual de sitios web y páginas de destino
Supera las páginas de destino genéricas de IA con tres tarjetas. Aprende a estructurar interacciones de portada, comparar varias direcciones a partir de un brief y verificar viewports de 1440 y 390 píxeles.
Manual por escenario · Paneles y espacios de trabajoManual de paneles y espacios de trabajo
Rompe con el tópico de los paneles de IA formados por «cuatro tarjetas KPI y tres gráficos». Crea consolas y espacios de trabajo de escritorio centrados en objetos, con jerarquía clara y estados vinculados.
Manual por escenario · Interfaces de aplicaciones móvilesManual de interfaces de aplicaciones móviles
Evita que los agentes de IA creen páginas de escritorio comprimidas para móvil. Diseña aplicaciones multipantalla a 390×844 con paneles screens.html y estados táctiles.
Manual por escenario · Renovación de proyectos existentesRenovación de interfaces de proyectos existentes
Utiliza Oil UI para diagnosticar pantallas en ejecución, renovar códigos existentes en tres niveles controlados (ordenar, mejorar el diseño y rehacer los flujos) y extraer un DESIGN.md compartido.
Métodos de diseño y control de calidad visual
Cómo eliminar los patrones genéricos de la IA, comparar direcciones una junto a otra, realizar revisiones visuales a ciegas con tamaños de viewport reales y elegir las herramientas de interfaz adecuadas.
Corrección de interfaces genéricas de IA
¿Por qué los sitios web y paneles generados con IA parecen iguales? Aprende a eliminar etiquetas superiores, bordes de acento izquierdos, tarjetas anidadas y métricas falsas con Oil UI.
Método de diseño · Comparación en paraleloComparación de direcciones en paralelo
Por qué comparar 3 direcciones de diseño diferenciadas en un panel HTML supera a reescribir el prompt de un único borrador. Examina las series de Orvo, Atelier Volders y Fonderie Mercier.
Método de diseño · Revisión a ciegas en pantallas realesRevisión a ciegas en pantallas reales
Por qué inspeccionar JSX y CSS en el editor no revela errores de diseño. Aprende cómo Oil UI utiliza capturas de navegador a 1440/390 píxeles, recortes al 200 %, bloques desenfocados y subagentes de revisión a ciegas.
Método de diseño · Comparación de herramientasSkills de diseño de interfaces frente a generadores
Una comparación honesta de las Skills de diseño de interfaces para agentes (como Oil UI), los generadores alojados de un solo prompt y las bibliotecas de componentes (shadcn/ui, Radix), y cómo combinarlos.
Prueba comparativa real · Un modelo y revisiones visuales anónimasSkills de diseño de interfaces a prueba
Una prueba controlada de CommonShelf con Oil UI, frontend-design, UI UX Pro Max, Impeccable y un control sin Skill, usando Kimi AgentSwarm con kimi-1021-preview, con las 15 puntuaciones, dos fallos y demos funcionales.
Preguntas frecuentes
¿Oil UI es una biblioteca de componentes o una plantilla?
Es una Skill de diseño que el agente lee para obtener métodos y flujos de trabajo. No exige una biblioteca de componentes ni una plantilla determinadas. El agente implementa la interfaz respetando las limitaciones de tu proyecto.
¿Por qué varían los resultados con la misma Skill?
Los ejemplos utilizan briefs, modelos y rondas de perfeccionamiento diferentes. Cada uno indica el modelo de producción y, si hay una tarea documentada, también muestra el prompt original. La Skill ayuda al modelo a aprovechar su capacidad; no puede garantizar la misma calidad de diseño en todos los modelos.
¿Puedo mejorar un producto existente?
Empieza por una página o tarea concreta. Indica los flujos de negocio que deben conservarse, los datos reales y las limitaciones técnicas, y después pide direcciones de diseño. Cuando elijas una, verifica la tarea completa, especialmente los formularios, la navegación y la respuesta a los cambios de estado existentes.
¿Qué agentes de programación funcionan con Oil UI?
La Skill gratuita funciona con Claude Code, OpenAI Codex, Cursor, Windsurf, Antigravity y Gemini CLI y se instala mediante npx skills add oil-oil/oil-ui. Oil UI Pro es compatible con los mismos agentes y se instala con npx github:oil-oil/oil-cli install oil-ui-pro. Para DeepSeek Harness, instala el plugin nativo con dsh plugin --profile web add github:oil-oil/dsh-oil-ui.
¿Cómo evito que los agentes de IA generen interfaces genéricas?
Proporciona textos y precios reales del sector en lugar de dejar que el modelo invente porcentajes; compara primero 3 direcciones diferenciadas en un panel HTML; elimina las etiquetas superiores y las tarjetas anidadas predeterminadas; y realiza una revisión a ciegas con un subagente usando capturas reales de navegador de 1440 y 390 píxeles.
¿Necesito la Skill gratuita si ya tengo Pro?
No. Pro incluye el método de diseño de código abierto. Instalar ambas versiones puede hacer que compitan por las mismas solicitudes, así que utiliza Pro por sí solo si ya lo tienes.
¿Cómo compro, instalo y actualizo Pro?
Actualmente, Oil UI Pro cuesta $9.99 en un pago único, con actualizaciones de por vida. Después de comprarlo, instálalo o descárgalo desde tu cuenta, o pide a tu agente que utilice el comando de CLI anterior. Consulta la página de Pro para conocer el precio y los métodos de pago actuales.