Uso de Oil UI en Cursor, Windsurf y agentes de programación de IDE
Muchos desarrolladores crean y perfeccionan interfaces directamente en Cursor, Windsurf, Antigravity o Gemini CLI junto con el código de la aplicación. Como Oil UI utiliza el formato abierto de Skills, un único comando npx skills add oil-oil/oil-ui dota a estos agentes de IDE del mismo flujo centrado en la tarea: explorar direcciones, implementar estados funcionales dentro de tu tecnología y verificar capturas renderizadas.
Ideas clave
- Un instalador cubre los principales agentes de programación: ejecuta npx skills add oil-oil/oil-ui y selecciona Cursor, Windsurf, Claude Code o Codex.
- Al renovar pantallas dentro de un código existente, limita cada prompt a una página o flujo de usuario y enumera las props, hooks y rutas que deben permanecer intactos.
- Para módulos de interfaz independientes (cargadores, procesos de pago, configuradores), pide al agente que implemente desde el principio los estados inactivo, activo, completado y de error.
- Pide a tu agente de IDE que abra el servidor de desarrollo local e inspeccione capturas reales del navegador a 1440 y 390 píxeles, en lugar de confiar únicamente en las diferencias del código.
npx skills add oil-oil/oil-uiAdmite instalación con alcance de proyecto (compartida con tu equipo) y a nivel de usuario.
Instalación de Oil UI en agentes de IDE y CLI
Tanto si trabajas en la barra lateral del agente de Cursor, Windsurf Cascade o Antigravity como en un agente de terminal, Oil UI proporciona el mismo flujo de diseño y las mismas listas de revisión visual.
Ejecuta el instalador interactivo de la Skill
Ejecuta el comando en la raíz de tu proyecto o en la terminal y selecciona los agentes de programación que utilizas a diario.
npx skills add oil-oil/oil-uiUtiliza la instalación con alcance de proyecto para mantener la coherencia del equipo
Al elegir el alcance de proyecto, la Skill se instala dentro de tu repositorio para que el agente de IDE de cada integrante del equipo siga los mismos criterios de composición y revisión.
Invoca Oil UI explícitamente en tu prompt
Empieza los prompts de interfaz con «Usa Oil UI para diseñar...» o «Usa Oil UI para renovar esta pantalla...», de modo que el agente ejecute el flujo de diseño en lugar de retocar estilos de forma improvisada.
Cuatro hábitos para diseñar dentro de un código existente
El fallo más común de un agente de IDE es mezclar la conexión con el backend y un rediseño visual completo en un mismo prompt desmesurado. Separar estas tareas mantiene limpios tanto el código como el diseño:
- Limita el trabajo a un módulo o flujo de tarea autocontenido cada vez
- Perfecciona un único módulo de principio a fin, como el módulo de carga de archivos Chute o el configurador de teclado mecánico KEEB de la galería, antes de pasar a las pantallas adyacentes.
- Indica qué hooks de datos y controladores no se pueden tocar
- Al actualizar una vista de React o Vue en producción, dile al agente: «Mantén intactos el estado del formulario, las mutaciones de API y los parámetros de ruta existentes; solo modifica el diseño, la jerarquía y la respuesta a los estados».
- Compara nuevas direcciones en una ruta temporal antes de integrarlas
- Si una página necesita una nueva dirección visual, deja que el agente renderice primero 3 opciones diferenciadas una junto a otra y después traslada la elegida a tus componentes principales.
- Verifica siempre en localhost con anchuras de escritorio y móvil
- Antes de aceptar una diferencia de código, pide al agente que abra el servidor de desarrollo en ejecución y capture pantallas a 1440 y 390 píxeles para detectar desbordamientos, espacios estrechos o contraste deficiente.
Prompt reutilizable para perfeccionar módulos en Cursor y Windsurf
Etiqueta el archivo del componente de destino en el chat de tu IDE y utiliza esta estructura para obtener una implementación completa con varios estados:
Usa Oil UI para diseñar e implementar [nombre del módulo, por ejemplo, nuestro módulo de carga para compartir archivos / configurador de producto] en este repositorio.
- Limitaciones del código: Mantén sin cambios los [hooks, props y tipos de API] existentes.
- Estados obligatorios: Implementa 1) estado inactivo predeterminado, 2) respuesta activa al arrastrar o introducir datos, 3) progreso y estado completado (con confirmación de copiado o uso compartido) y 4) estado de error de validación o de límite.
- Disciplina visual: Evita envoltorios de tarjetas dentro de tarjetas y etiquetas decorativas sobre los títulos. Establece la jerarquía mediante escala tipográfica, espaciado y estados de foco claros; después verifica el resultado en el navegador local.Funciona bien al hacer referencia al archivo de componente existente en Cursor o Windsurf.
Ejemplos funcionales y prompts de la galería
Abre las demos en directo a 1440 o 390 píxeles para examinar cómo el modelo y el prompt dieron forma a la interfaz final.
Fieldwork Type
Fundición de tipos independiente
El sitio web de una fundición de tipos independiente (desde 1440×900, adaptable hasta 390 px de ancho). La primera pantalla presenta una tipografía insignia: los visitantes pueden escribir su propio texto y ajustar el tamaño, el peso y la anchura. Más abajo aparecen la tabla de pesos de la familia, el juego de caracteres, ejemplos de uso y licencias según la finalidad (escritorio, web y app), que pueden añadirse al carrito. El probador de tipos y el selector de licencias son el corazón de esta pieza: la composición cambia mientras escribes y el precio de la licencia se actualiza con cada opción. Diseña la primera pantalla, el panel del probador desplegado y la selección de licencias.
Ver obra y prompt →
Sonar
Mensajería de equipo
Una app de mensajería de escritorio para empresas de 30–300 personas (1440×900): canales, grupos y mensajes directos a la izquierda, y la conversación en curso en el centro. Los mensajes incluyen texto, imágenes, archivos, fragmentos de código, encuestas y reacciones con emoji. Usa una interfaz en chino. La sensación de inmediatez es el corazón de esta pieza: enviar un mensaje, ver a varios colegas escribiendo a la vez, abrir un hilo desde un mensaje y recibir respuestas y reacciones de otras personas en tiempo real debe resultar fluido y dar sensación de solidez. No la conviertas en un cliente de correo ni en un tablero de tareas. Diseña tres estados: conversación cotidiana en un canal activo; un hilo abierto desde un mensaje; y mencionar a un colega en el campo de entrada y soltar un archivo, listo para enviar.
Ver obra y prompt →
KEEB · Key Order
Configurador de teclados mecánicos
El sitio web de una marca de teclados mecánicos donde los usuarios pueden elegir carcasa, interruptores y capuchones de tecla para personalizar su propio teclado en línea. Construye la página del configurador.
Ver obra y prompt →
Chute
Módulo de carga de archivos
El módulo de carga de una herramienta para compartir archivos (escritorio a 1440×900, con el módulo centrado): arrastra archivos, muestra el progreso de carga y genera después un enlace para compartir con fecha de caducidad y contraseña. Ofrece una respuesta satisfactoria al soltar archivos, progreso simultáneo para varios archivos y el momento de copiar un enlace. Captura tres estados: arrastrando archivos, cargando y completado con opción de compartir.
Ver obra y prompt →Habilita la renovación de proyectos existentes y el trabajo minucioso de componentes con Oil UI Pro
Oil UI Pro añade flujos específicos para códigos existentes, incluidos el diagnóstico anotado de una página, un sistema de renovación en 3 niveles (ordenar / mejorar / rehacer el flujo + DESIGN.md) y el perfeccionamiento exhaustivo de componentes individuales.
npx github:oil-oil/oil-cli install oil-ui-proPreguntas frecuentes
¿Qué modelo debo elegir en Cursor o Windsurf al usar Oil UI?
Utiliza Claude Opus o modelos GPT/Codex avanzados al explorar nuevas direcciones visuales o reestructurar páginas complejas. Cuando una dirección o un DESIGN.md ya estén definidos, Claude Sonnet y los modelos más rápidos funcionan bien para aplicar los estados a pantallas relacionadas.
¿Oil UI funciona junto con shadcn/ui, Radix o Tailwind?
Sí. Las bibliotecas de primitivas proporcionan controles accesibles, mientras que Oil UI gobierna la composición de la página, la jerarquía visual, la exploración de direcciones y la eliminación de patrones genéricos. Se complementan con claridad.
¿Cómo me aseguro de que el agente no rompa los controladores de clics o la validación de formularios existentes?
Enumera en tu prompt los controladores que deben conservarse y sigue el paso de recorrido de Oil UI: haz clic de verdad en todo el flujo principal y provoca un envío de formulario no válido en el navegador antes de terminar.
¿Puede mi equipo usar Cursor y Claude Code / Codex en el mismo repositorio?
Sí. Selecciona todos los agentes pertinentes durante npx skills add oil-oil/oil-ui o confirma un DESIGN.md compartido para que todas las herramientas lean las mismas reglas de diseño.