Diseño de sitios web de producto y páginas de destino SaaS con agentes de IA
Si pides una página de destino a un agente de IA sin un método de diseño, casi siempre obtendrás la misma plantilla: una etiqueta luminosa sobre el título, un eslogan con degradado y tres tarjetas de características del mismo ancho. Los buenos sitios web de producto convierten su verdadero diferenciador en un elemento funcional de la primera pantalla y comparan direcciones visuales diferenciadas antes de escribir el código definitivo.
Ideas clave
- Haz que la primera pantalla responda de inmediato a tres preguntas: qué es el producto, en qué se diferencia de las alternativas y qué puede probar o pulsar ahora mismo el visitante.
- Un mismo brief puede admitir estilos muy distintos: examina las nueve páginas de destino de Orvo en la galería para ver cómo unos precios y funciones idénticos adoptan voces editoriales diferentes.
- Si no tienes fotografías del producto, evita las imágenes de archivo y genera credibilidad con configuradores interactivos, muestras de sonido o tipografía y cronologías del proceso, como Atelier Volders y Fonderie Mercier.
- Diseña a 1440×900 para el ritmo de escritorio y verifica después el viewport móvil de 390 píxeles: saltos del titular, legibilidad de la tabla de precios y áreas táctiles.
npx skills add oil-oil/oil-uiExplora más de 40 sitios web funcionales y sus prompts en la colección /es/inspiration/web-design/.
Por qué las páginas de destino predeterminadas de IA parecen intercambiables
Cuando un prompt solo dice «crea una página de destino moderna para mi startup de IA», el modelo no tiene material del sector que sirva de base al diseño. Recurre a opciones seguras: degradados morados oscuros, etiquetas flotantes, tres tarjetas con los textos «Rápido / Inteligente / Seguro» y porcentajes inventados.
Compara eso con los sitios web de la galería de Oil UI. Fieldwork Type coloca un probador de tipografías editable y un calculador de licencias directamente en la portada. Fonderie Mercier permite a los visitantes hacer sonar campanas de bronce de distintos diámetros y observar las curvas de decaimiento de los armónicos antes de reservar un turno de fundición. Orvo centra su página en dos hechos concretos: la orientación de fundadores que han lanzado productos y una suscripción mensual fija en lugar de facturación por tokens.
| Sección | Patrón predeterminado de la plantilla de IA | Enfoque de Oil UI (con ejemplos de la galería) |
|---|---|---|
| Portada | Etiqueta superior + eslogan impreciso + dos botones + forma abstracta | Posicionamiento claro + superficie funcional del producto o muestra interactiva en directo |
| Capacidades | Tres tarjetas redondeadas idénticas con iconos lineales genéricos | Recorridos basados en tareas (por ejemplo, cronología de ebanistería de 6 semanas, hoja de afinación acústica) |
| Precios y reservas | Una lista interminable de marcas de verificación con diferencias poco claras entre planes | Planes concretos ($0 / $24.99 / $34.99 con selector de facturación en directo) o disponibilidad por lotes |
| Falta de fotografías | Imágenes de archivo sin relación o ilustraciones de IA que no combinan | Tipografía sólida, diagramas técnicos, selectores de acabado y paletas de colores táctiles |
Exploración de varias direcciones a partir de un único brief
La galería conserva varias direcciones terminadas creadas a partir de exactamente el mismo brief. Todas las páginas de destino de Orvo comparten los mismos datos: generación de aplicaciones mediante conversación, orientación de expertos humanos, más de 100 plantillas y precios Starter $0 / Pro $24.99 / Unlimited $34.99 con un 20 % de descuento anual.
Sin embargo, Orvo · Launch Garden presenta el producto como un espacio de cultivo modular y luminoso; Orvo · Tandem destaca la colaboración directa con personas; y Orvo · Coastal Workshop y Open Creative Studio exploran ritmos tipográficos y espaciales completamente distintos. Con Oil UI, tu agente genera primero un panel de comparación para que elijas la dirección que encaja con tu marca antes de pulir los detalles.
Una plantilla de prompt para páginas de destino con trabajo de diseño real
Dedica el prompt a explicar cómo funciona el producto, cómo se estructura el precio y con qué puede interactuar el visitante en la página:
Usa Oil UI para diseñar e implementar la página de destino oficial de [nombre del producto] (viewport de escritorio de 1440×900, adaptable hasta 390 píxeles de ancho).
- Producto y público: [1 o 2 frases sobre quién lo utiliza y qué tarea completa]
- Dos diferenciadores reales: [por ejemplo, 1) suscripción mensual fija en lugar de facturación por créditos; 2) vista previa interactiva en directo o revisión por expertos]
- Secciones obligatorias y cifras reales:
1. Portada: Posicionamiento claro y un [probador / calculadora / vista previa del flujo en directo] interactivo;
2. Capacidades: Muestra [3 casos de uso o categorías de plantillas concretos];
3. Precios: [Nombres y precios exactos de los planes, con un selector mensual/anual funcional];
4. Llamada a la acción final.
- Limitaciones de recursos: [Indica si existen fotografías del producto; si no, utiliza tipografía, composición y gráficos vectoriales/canvas propios].
Propón 3 direcciones visuales realmente diferenciadas una junto a otra antes de crear la página final.Adecuada para productos SaaS, herramientas para desarrolladores, lanzamientos de hardware y estudios independientes.
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 →
Atelier Volders · Veta y espiga
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 · Bronce con voz
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 →
Routewise
Sitio web de plataforma de API de IA
El sitio web de una plataforma de agregación de API de modelos de IA similar a OpenRouter (desde 1440×900, adaptable hasta 390 píxeles de ancho), con interfaz en chino, para desarrolladores en China: una clave de API da acceso a cientos de modelos de decenas de proveedores, con facturación unificada, conmutación automática por error y enrutamiento por precio o latencia. Los nombres de proveedores y modelos deben ser ficticios pero creíbles. La creatividad es la primera prioridad. No hagas otro sitio web de IA con degradado oscuro y bloque de código. El núcleo es hacer visible el enrutamiento: una solicitud sale de tu código y se dirige a un proveedor; si falla, cambia automáticamente a uno de respaldo, con precio y latencia visibles de inmediato. El mercado de modelos permite filtrar y comparar por proveedor, longitud de contexto y precio. Diseña tres estados: la primera pantalla; filtrado y comparación en el mercado de modelos; y el proceso de enrutamiento y conmutación por error de una solicitud.
Ver obra y prompt →Cambia a Oil UI Pro para superficies expresivas y control de calidad con gran aumento
Cambia a Oil UI Pro cuando tu sitio web necesite trazos de luz SVG personalizados, matrices de puntos o degradados fluidos, 19 prototipos especializados de tarjetas y expansión espacial, y revisiones a ciegas en varias rondas con aumentos del 100 % y del 200 %.
npx github:oil-oil/oil-cli install oil-ui-proPreguntas frecuentes
¿Cómo consigo que una página de destino resulte creíble sin fotografías del producto?
Convierte una parte real de la lógica del sector en una muestra interactiva dentro de la página. En Atelier Volders, los visitantes alternan entre taburetes de roble de 32, 45 y 62 cm y tres acabados de madera; en Fonderie Mercier, prueban las frecuencias de las campanas. Ninguno utiliza fotografía de archivo.
¿Mi página de destino debe usar modo oscuro o modo claro?
Adapta el medio al tema. Los entornos de ejecución de bajo nivel (Archon) o la relojería astronómica (Chronos) encajan con superficies oscuras, mientras que la mayoría de productos SaaS, fundiciones tipográficas y tiendas artesanales se leen mejor sobre fondos de papel cálido o luz diurna.
¿Cómo debo verificar la versión móvil de una página de destino?
Abre la página a 390×844 en un navegador real. Comprueba que los titulares no dejen palabras sueltas en una línea, que los controles interactivos de la portada sigan siendo utilizables al tacto y que los planes de precios se apilen con claridad, sin cortes por desplazamiento horizontal.
¿Puedo alternar entre viewports de escritorio y teléfono dentro de la galería de Oil UI?
Sí. Todas las obras web de la galería incluyen un selector de viewport en la barra inferior para que puedas inspeccionar en directo tanto el diseño de escritorio a 1440 píxeles como el móvil a 390 píxeles.