Guía de diseño de interfaces con DeepSeek Harness: plugin nativo dsh-oil-ui y ejemplos
Si creas interfaces con DeepSeek Harness, puedes instalar el plugin nativo dsh-oil-ui con un único comando. Incorpora de serie el flujo de trabajo de Oil UI de código abierto y detecta automáticamente una instalación local de Oil UI Pro cuando existe. La galería también incluye ejemplos comparables creados con DeepSeek 4.1 Flash a partir de exactamente los mismos briefs utilizados con modelos GPT.
Ideas clave
- Ejecuta dsh plugin --profile web add github:oil-oil/dsh-oil-ui para habilitar Oil UI de forma nativa dentro de DeepSeek Harness.
- dsh-oil-ui incluye la Skill gratuita y cambia automáticamente al flujo de trabajo de Oil UI Pro cuando detecta una instalación local en tu equipo.
- Compara directamente obras de DeepSeek 4.1 Flash con obras de GPT 6.1 Sol creadas a partir de briefs idénticos (Vesper, Atelier Volders, Fonderie Mercier y Sonar).
- Proporcionar a los modelos rápidos reglas concretas del sector, cifras reales y listas explícitas de estados mejora notablemente la estabilidad del diseño en la primera pasada.
dsh plugin --profile web add github:oil-oil/dsh-oil-uiRepositorio del plugin: https://github.com/oil-oil/dsh-oil-ui (incorpora la Skill gratuita y detecta automáticamente Oil UI Pro local).
Instalación de dsh-oil-ui y conexión con Oil UI Pro
DeepSeek Harness utiliza plugins basados en perfiles. El paquete nativo dsh-oil-ui se vincula directamente a tu perfil web para que no tengas que copiar manualmente archivos de Skills entre proyectos.
Añade dsh-oil-ui a tu perfil web de DeepSeek Harness
Ejecuta el comando del plugin en tu terminal. DeepSeek Harness descarga el repositorio y activa inmediatamente el flujo de trabajo de Oil UI de código abierto.
dsh plugin --profile web add github:oil-oil/dsh-oil-ui(Opcional) Instala Oil UI Pro localmente para detectarlo automáticamente
Cuando instalas Oil UI Pro mediante oil-cli en el mismo equipo, dsh-oil-ui detecta automáticamente la instalación local de Pro y habilita el método completo de Pro sin indicadores adicionales del plugin.
npx github:oil-oil/oil-cli install oil-ui-proEmpieza con un brief concreto y un viewport de destino
Proporciona el contexto del producto, el viewport de destino (1440×900 o 390×844) y tres estados verificables para que el agente pueda comparar direcciones e inspeccionar capturas en directo.
Comparaciones con el mismo brief: DeepSeek 4.1 Flash en la galería
Una pregunta habitual de los equipos de ingeniería es cómo rinde un modelo rápido y rentable como DeepSeek 4.1 Flash con una Skill de interfaz estructurada en comparación con modelos frontera de mayor tamaño.
Para que la comparación sea concreta, la galería incluye varias parejas en las que DeepSeek 4.1 Flash y GPT 6.1 Sol recibieron exactamente el mismo brief de tarea (TASK.md). Puedes abrir ambas demos en directo y examinar cómo resolvió cada modelo la tipografía, los controles y el diseño:
| Brief del producto | Obra de DeepSeek 4.1 Flash | Obra equivalente de GPT | Qué comparar en las páginas en directo |
|---|---|---|---|
| Atelier Volders (taller de taburetes de roble en Gante) | Atelier Volders · The Wedged Oak (volders-wedge) | Grain & Tenon (volders-grain) / River Timber (volders-hearth) | Cambio en tiempo real entre 3 alturas de taburete (€240–€310) y 3 acabados de roble sin fotografías de archivo |
| Fonderie Mercier (fundición de campanas de bronce) | Fonderie Mercier · The Tuning Sheet (mercier-bell) | Bronze, with a Voice (mercier-voice) / Eighteen Bells (mercier-pour) | Prueba interactiva del sonido de campanas con curvas de decaimiento de fundamentales y armónicos, además de reserva por lotes |
| Vesper (consola de facturación por uso de API) | Vesper · Settlement Ledger (vesper-ledger) | Vesper (vesper, GPT 6.1 Sol) | Consola de facturación a 1440×900 con filtrado por umbral, cronologías de recuperación de facturas fallidas y paleta de comandos |
| Sonar (mensajería para equipos de 30–300 personas) | Sonar · Signal Room (sonar-desk) | Sonar (chat2, GPT 6.1 Sol) | Espacio de mensajería de escritorio con tres estados: canal ocupado, hilo abierto y redacción tras soltar un archivo |
Consejos de prompts para modelos rápidos como DeepSeek 4.1 Flash
Una Skill de diseño ayuda al modelo a organizar la jerarquía y evitar patrones genéricos, mientras que las capacidades del propio modelo siguen determinando su límite. Tres hábitos ayudan a los modelos rápidos a producir resultados más limpios en la primera ejecución:
- Proporciona cifras reales y limitaciones del sector
- Las cifras exactas, como «24 taburetes por lote mensual, tres alturas de 32 cm / 45 cm / 62 cm», ofrecen al modelo puntos de referencia concretos para tablas, selectores y etiquetas.
- Nombra un control principal por pantalla
- Destaca el único elemento de interacción que más importa en la página, como la hoja de afinación acústica de Fonderie Mercier o la línea de tiempo de matriz de puntos de Tempo · A Year in Dots.
- Realiza siempre la comprobación con capturas de navegador
- Los modelos rápidos a veces pasan por alto los saltos de línea o el desbordamiento de contenedores en anchuras menores. Capturar la página renderizada a 1440 y 390 píxeles permite detectar esos problemas de una vez.
Usa Oil UI para diseñar e implementar el sitio web de [nombre de la marca, por ejemplo, un taller artesanal de dos personas] (desde 1440×900 en escritorio hasta 390 píxeles en móvil).
- Producto y opciones: Céntrate en un único objeto principal con [3 opciones de tamaño y precios exactos] y [3 opciones de acabado]. Los visitantes pueden cambiar el tamaño y el acabado en tiempo real y ver cómo se actualizan las especificaciones y el precio.
- Secciones obligatorias: Configurador interactivo, cronología del proceso de fabricación, detalles del sello del lote y formulario de reserva del lote actual.
- Entrega: Utiliza tipografía, composición e ilustraciones SVG/canvas propias en lugar de fotografías de archivo. Verifica en el navegador tanto los cambios de estado del configurador como el diseño móvil.Ejecuta este prompt en DeepSeek Harness después de añadir el plugin dsh-oil-ui.
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.
Atelier Volders · El roble en cuña
Sitio web de taller de muebles artesanos
El sitio web de Atelier Volders, un taller de ebanistería de dos personas en Korenlei 14, Gante, Bélgica (desde 1440×900, adaptable hasta 390 px de ancho), con interfaz en inglés. Solo fabrican un objeto: De Drievoet, un taburete de tres patas de roble macizo, torneado y ensamblado con cuñas a mano a partir de madera secada al aire durante tres años, producido en un único lote mensual de 24 taburetes. Se ofrece en tres alturas (taburete bajo para chimenea de 32 cm por €240, taburete de comedor y escritorio de 45 cm por €270, taburete de barra de 62 cm con reposapiés de fresno por €310) y tres acabados (roble natural frotado con jabón, roble oscuro fumigado, aceite de linaza hervido y cera de abejas). Los visitantes pueden cambiar la altura y el acabado en tiempo real, explorar el proceso de fabricación de seis semanas, el sello de lote estampado en caliente en la base y el horario de apertura de los sábados, y reservar un taburete del lote actual. No se proporcionan fotos del producto.
Ver obra y prompt →
Fonderie Mercier · La hoja de afinación
Sitio web de fundición familiar de campanas de bronce
El sitio web de Fonderie Mercier, una fundición familiar de campanas de tercera generación en Quai Saint-Vincent 28, junto al río Saône en Lyon (desde 1440×900, adaptable hasta 390 px de ancho), con interfaz en inglés. Funden un único objeto emblemático en bronce para campanas de 78 % cobre / 22 % estaño, usando moldes de arena de río apisonada: Le Bourdon de Table, afinado en el torno a un tono musical preciso y fundido una vez al mes en un lote fijo de 18 campanas. Se ofrece en tres tamaños y tonos (campana de escritorio Ø 72 mm A4 440Hz €180, campana de patio Ø 96 mm F#4 370Hz €240, campana de pared Ø 124 mm con soporte de hierro forjado D4 293.7Hz €340) y tres pátinas (bronce torneado en bruto, bronce ahumado y cardenillo). Los visitantes pueden escuchar cada tono, cambiar tamaño y pátina, explorar el proceso de fundición en cinco etapas, el registro estampado en frío en la corona y el horario de apertura de los viernes, y preparar una hoja de reserva para la próxima fundición mensual. No se proporcionan fotos del producto.
Ver obra y prompt →
Vesper · Libro de liquidación
Consola de facturación por uso de API
Diseña una consola de facturación por uso de API y de facturas de clientes para equipos de IA y herramientas de desarrollo, con interfaz en inglés y una ventana de escritorio de 1440×900. Los usuarios pueden gestionar planes de suscripción y uso de API en vivo, revisar importes pendientes y excepciones de facturación del ciclo actual, filtrar clientes o facturas por estado y umbral de uso, y abrir un registro para inspeccionar partidas, cronologías de pagos y Webhook y cargas de eventos. Incluye reintentos de pago, ajustes de cuota y exportación de facturas. Implementa tres estados clave: el espacio de trabajo cotidiano con tendencias de ingresos y uso, listas de clientes o facturas y filtrado en vivo; una vista de detalle de factura con excepción que muestre el desglose de uso, la cronología de estado y acciones de recuperación; y una paleta rápida de comandos. Entrega un `index.html` que funcione sin conexión y captura `shots/desktop.png`, `shots/state-1.png` y `shots/state-2.png` a 1440×900, DPR=2.
Ver obra y prompt →
Sonar · Sala de señales
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 →Detección automática de Oil UI Pro en dsh-oil-ui
Si ya utilizas dsh-oil-ui en DeepSeek Harness, para cambiar a Oil UI Pro solo tienes que ejecutar el siguiente comando de oil-cli. El plugin detecta automáticamente tu instalación local de Pro y habilita la renovación de proyectos existentes, los 10 arquetipos de espacios de trabajo y la revisión a ciegas en varias rondas.
npx github:oil-oil/oil-cli install oil-ui-proPreguntas frecuentes
¿Qué diferencia hay entre dsh-oil-ui y npx skills add oil-oil/oil-ui?
dsh-oil-ui es el paquete de plugin nativo creado específicamente para DeepSeek Harness (se instala mediante dsh plugin --profile web add). Para Claude Code, Codex, Cursor, Windsurf y otros agentes, utiliza npx skills add oil-oil/oil-ui.
¿Qué tipos de interfaces maneja bien DeepSeek 4.1 Flash con Oil UI?
En las pruebas de la galería, rinde bien en sitios web de productos artesanales y técnicos (The Wedged Oak, The Tuning Sheet, Archon · The Open Kernel), consolas estructuradas (Vesper · Settlement Ledger, Sonar · Signal Room) y resúmenes editoriales para móvil (Tempo · A Year in Dots).
¿Necesito desinstalar dsh-oil-ui después de comprar Oil UI Pro?
No. Mantén dsh-oil-ui habilitado en DeepSeek Harness: detecta automáticamente tu instalación local de Oil UI Pro y dirige las solicitudes a través de Pro.
¿Dónde puedo leer los prompts exactos utilizados en las obras de DeepSeek de la galería?
Abre una de las obras de DeepSeek mencionadas arriba y haz clic en el control del prompt de la barra del visor para leer el brief completo y ver qué modelo la generó.