Guía de diseño de interfaces con Claude Code: instalación de Oil UI Skill, prompts y revisión visual
Claude Code destaca al interpretar la estructura de un repositorio, dividir el trabajo en varios pasos y crear subagentes. Sin orientación de diseño, sin embargo, prompts como «crea una página de destino moderna» suelen producir degradados morados, tarjetas anidadas e indicadores inventados. Al instalar Oil UI, Claude Code dispone de un flujo de diseño estructurado: investiga la categoría, compara direcciones diferenciadas una junto a otra y verifica la página renderizada en viewports reales.
Ideas clave
- Ejecuta npx skills add oil-oil/oil-ui para instalar la Skill gratuita de código abierto en Claude Code sin vincular tu proyecto a una biblioteca de componentes concreta.
- Empieza el prompt con el producto, el público, la tarea principal, el contenido real y el viewport de destino (como 1440×900 o 390×844), en lugar de usar adjetivos de estilo imprecisos.
- Para páginas nuevas o rediseños, pide a Claude Code que genere un panel HTML con 3 o 4 direcciones diferenciadas antes de escribir los estados de producción.
- Utiliza subagentes de Claude Code para realizar una revisión visual a ciegas y sin contexto al 100 % y al 200 %, de modo que los problemas de espaciado, contraste y jerarquía se corrijan antes de la entrega.
npx skills add oil-oil/oil-uiO envía esto directamente a Claude Code: «Instala esta Skill por mí: ejecuta npx skills add oil-oil/oil-ui».
Por qué Claude Code se beneficia de una Skill de diseño especializada
Cuando pides a Claude Code una «interfaz SaaS limpia y moderna» sin indicar ningún método, el modelo recurre a los promedios estadísticos de sus datos de entrenamiento: un titular centrado con una etiqueta superior, tres tarjetas del mismo ancho debajo y pequeños gráficos decorativos o contadores de «+24 %» en una esquina. El código compila, pero la interfaz podría intercambiarse con cualquier otra demo de IA.
Oil UI cambia la secuencia de trabajo. En lugar de pasar directamente del prompt al marcado final, Claude Code estudia qué hace comprensible la categoría del producto, reúne direcciones visuales diferenciadas en un único panel de comparación e inspecciona el renderizado real del navegador antes de dar el trabajo por terminado.
| Etapa | Prompt único en Claude Code | Flujo de Claude Code + Oil UI |
|---|---|---|
| Punto de partida | Recurre a cuadrículas genéricas de tarjetas SaaS y paletas poco arriesgadas | Parte de la categoría del producto, la tarea del usuario y el contenido real |
| Elección de dirección | Un único resultado; si no encaja, hay que volver a empezar con otro prompt | Página de comparación integrada a 1440 o 390 píxeles |
| Datos y textos | A menudo inventa porcentajes y etiquetas de relleno | Organiza la jerarquía en torno a campos reales del sector y elimina elementos superfluos |
| Control de calidad | Se detiene en cuanto el código compila | Crea un subagente de revisión a ciegas que evalúa la página completa y recortes al 200 % |
Configuración en tres pasos
Puedes instalar Oil UI de forma global para tu cuenta de usuario o localmente dentro de un repositorio, de modo que todo el equipo comparta el mismo flujo de trabajo.
Ejecuta el instalador de la Skill y selecciona Claude Code
Ejecuta el siguiente comando en tu terminal y sigue las indicaciones del instalador interactivo para elegir Claude Code y el alcance de instalación que prefieras.
npx skills add oil-oil/oil-uiComprueba que un navegador local pueda renderizar y capturar páginas
La revisión visual requiere capturas reales, no suposiciones basadas en el código fuente. Asegúrate de que Playwright o tu automatización de navegador local pueda abrir el servidor de desarrollo a 1440×900 (escritorio) y 390×844 (móvil).
Cambia a Oil UI Pro cuando necesites cubrir el flujo de trabajo completo
Si has comprado Oil UI Pro, instálalo mediante la CLI. Cuando Pro está instalado, no necesitas conservar también la Skill de código abierto.
npx github:oil-oil/oil-cli install oil-ui-pro
Cómo escribir prompts de interfaz precisos para Claude Code
Observa las obras creadas con Claude en la galería: Margins (lector electrónico para tableta creado con Claude Opus 5.5), Echo (asistente de voz con Claude Opus 5.5), Pickup (aplicación de transporte con Claude Sonnet 5.5) y Pinch Checkout (módulo de pago con Claude Sonnet 5.5). Cada prompt indica quién es el usuario, qué interacción concentra el peso de la obra y qué estados deben funcionar.
- Explica el usuario y la tarea con lenguaje claro
- En lugar de pedir una «aplicación de movilidad elegante», especifica «un flujo de transporte a 390×844 que cubra la confirmación del punto de recogida, la llegada del conductor en directo y los cambios de destino durante el trayecto».
- Nombra la interacción principal
- Indica a Claude Code qué control o transición es más importante: el cálculo del precio en directo al aplicar un código promocional, el panel de anotaciones de un lector de textos largos o la respuesta de la onda de audio en un asistente de voz.
- Define viewports y estados concretos
- Enumera las dimensiones exactas del viewport y los tres o cuatro estados que quieres renderizar, para que el agente pueda verificar cada uno en un navegador real.
Usa Oil UI para diseñar la interfaz de [tipo de producto, por ejemplo, un módulo de pago para una librería independiente].
- Público y tarea principal: [por ejemplo, lectores que revisan los artículos del carrito, alternan entre recogida local y envío, aplican un código de descuento y completan el pago]
- Interacción principal y estados: Céntrate en [interacción principal]. Incluye [estado 1: formulario predeterminado], [estado 2: recálculo en directo del envío y el descuento] y [estado 3: error de validación de la tarjeta junto al campo y recuperación].
- Limitaciones: Mantén nuestra tecnología actual. Objetivo de 1440×900 en escritorio y diseño adaptable hasta 390 píxeles de ancho.
Propón primero distintas direcciones de diseño para poder compararlas antes de perfeccionar la elegida.Sustituye los campos entre corchetes por los datos reales de tu sector y pega el resultado en Claude Code.
Revisiones a ciegas con subagentes sobre capturas reales
Un agente que acaba de escribir 600 líneas de CSS rara vez advierte que dos etiquetas se solapan o que el texto secundario no tiene contraste suficiente. Oil UI lo resuelve haciendo que el agente principal capture la página en ejecución y entregue las imágenes a un nuevo subagente de Claude Code que no conoce nada de la implementación.
El revisor examina capturas de página completa al 100 %, recortes al 200 % de controles densos e imágenes desenfocadas de la estructura por bloques que revelan composiciones cargadas en la parte superior o monótonas. El agente principal corrige los defectos detectados antes de presentarte el resultado.
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.
Margins
Lector electrónico para tableta
La interfaz de lectura en tableta de una app de lectura de textos largos, diseñada en vertical a 1024×1366 y colocada sobre un lienzo de presentación: cuerpo de texto, resaltado, anotaciones, índice y progreso de lectura. Céntrate en la tipografía china de textos largos: cuida el tamaño de letra, el interlineado, el espacio entre párrafos y el espaciado de la puntuación para que diez minutos de lectura resulten cómodos. Los usuarios pueden escribir una anotación breve después de resaltar texto. Captura tres estados: lectura, resaltado y escritura de una anotación, e índice abierto.
Ver obra y prompt →
Pickup
App de solicitud de viajes
La pantalla posterior a reservar un viaje en una app de transporte (390×844): un coche que se acerca en el mapa, datos del conductor y del vehículo, hora estimada de llegada y progreso del trayecto después de recoger al pasajero. Dibuja la red viaria y la ruta con código en lugar de usar capturas de mapas reales. Esperar el coche es el momento de mayor ansiedad, así que haz que su distancia resulte evidente de inmediato. Captura tres estados: esperando, coche llegado y viaje en curso. Entrega `index.html` y `screens.html` con las tres pantallas una al lado de otra.
Ver obra y prompt →
Pago de Pinch
Módulo de pago para comercio electrónico
Un módulo de pago para la tienda en línea de una marca de diseño independiente (escritorio a 1440×900, panel de pago centrado): lista de compra, dirección de envío, método de pago y confirmación del pedido. Cada paso debe fluir con naturalidad, con estados claros para cada campo: rellenándose, no válido y completado. La finalización del pedido debe resultar alegre, más allá de mostrar simplemente una marca de verificación. Captura tres estados: cumplimentando el formulario, un error de validación y un pedido realizado correctamente.
Ver obra y prompt →
Echo
Asistente de voz con IA
Una interfaz móvil a pantalla completa para un asistente de voz con IA (390×844), centrada en visualizar el sonido. Esperar la voz, escuchar, pensar y responder deben tener cada uno una forma distinta. Al responder, muestra una tarjeta de resultado abajo, como una reunión que ha reservado para ti, en lugar de limitarte a un orbe luminoso. Un orbe luminoso azul violáceo es la opción predeterminada más común; evita ese enfoque. Captura los cuatro estados. Entrega `index.html` y `screens.html` mostrando los estados uno al lado de otro.
Ver obra y prompt →Cuándo pasar de la Skill gratuita a Oil UI Pro
La Skill gratuita de código abierto cubre la investigación de categorías, los paneles de direcciones, las comprobaciones contra patrones genéricos de IA y la reproducción a partir de capturas. Cambia a Oil UI Pro cuando uses Claude Code para renovar aplicaciones en producción, diseñar espacios de trabajo densos de escritorio o realizar hasta tres rondas de revisión a ciegas con subagentes y recorridos de tareas contando los clics.
npx github:oil-oil/oil-cli install oil-ui-proPreguntas frecuentes
¿Oil UI obliga a Claude Code a usar React, Tailwind o una biblioteca de interfaz concreta?
No. Oil UI proporciona métodos de diseño, criterios de composición y pasos de verificación visual. Claude Code escribe el marcado y los estilos dentro de tu tecnología actual, ya sea Next.js, Vue, Svelte, HTML/CSS sin framework o un sistema de diseño interno.
¿Qué diferencia hay entre Claude Opus y Claude Sonnet al usar Oil UI?
Opus suele tomar mejores decisiones sobre escala tipográfica, ritmo y jerarquía editorial en páginas completas. Sonnet es más rápido y funciona bien en módulos acotados, al completar estados y al ampliar una dirección ya establecida.
¿Puedo dar a Claude Code una captura de referencia para reproducirla o adaptarla?
Sí. Indica la ruta de la imagen y especifica si quieres una reproducción fiel mediante comparación de píxeles o si prefieres tomar su carácter tipográfico y su espaciado para el contenido de tu propio producto. Oil UI incluye flujos específicos para ambos casos.
¿Cómo sé que Claude Code está aplicando Oil UI de forma activa?
Incluye «Usa Oil UI» en tu prompt. En lugar de generar inmediatamente código repetitivo sin estilo, Claude Code definirá la tarea del usuario, propondrá distintas direcciones visuales o abrirá un panel de comparación, e inspeccionará capturas renderizadas antes de terminar.