Premium SaaS Web
Esta habilidad codifica lo que hace que las plantillas SaaS/AI/agencia más vendidas se sientan caras. Se destiló inspeccionando seis sitios de referencia a nivel CSS (OptimAI, Aigocy, Adon, Davies, Pastily, una demo de generador de imágenes AI) y midiendo los valores reales que usan. Las recetas son las técnicas reales, no suposiciones.
Estructura de archivos. Carga solo lo que la tarea necesite:
directions/<nombre>/style.md: un archivo por dirección visual (tokens, fuentes, piezas distintivas, técnicas que solo usa esa dirección). Lee solo la que elijas.shared/*.md: técnicas que usa cada dirección, divididas por tema. Lee las que correspondan a las secciones que estás construyendo (mapeo en el paso 3).
La idea central: premium = luz controlada + moderación + movimiento
Las páginas baratas y las páginas premium suelen usar los mismos componentes (hero, logos, características, precios, FAQ, CTA). La diferencia está en cuatro capas de acabado:
- Luz — las superficies parecen iluminadas, no rellenas. Los brillos se esculpen a partir de formas borrosas; las tarjetas tienen un destello en la esquina superior izquierda; los botones tienen un resaltado interior y un borde inferior interior; los bordes son líneas finas con opacidad del 6–20%. La luz real se desvanece, así que nada es un bloque de color plano.
- Moderación — un color de acento, usado en ≤5% de la página. La jerarquía del texto proviene de la opacidad de un solo color (100 / 80 / 60 / 50%), no de muchos grises. Máximo dos fuentes (+ una mono opcional para etiquetas). Cero decoración que no tenga significado.
- Tipografía con tensión — el texto de exhibición es grande y muy espaciado (letter-spacing −2% a −7%), line-height ≈ 1.0–1.2. La mitad de un titular suele atenuarse (
opacity .5o un degradado más claro) para que el ojo lea primero la mitad fuerte. - Movimiento con peso — scroll suave (Lenis), titulares que aparecen palabra por palabra, texto que se llena al hacer scroll, contadores que ruedan, marquesinas que nunca se detienen, tarjetas que se apilan. Todo se desacelera (nada lineal), nada rebota, y todo respeta
prefers-reduced-motion.
Si una salida solo tiene los componentes pero no estas cuatro capas, se verá como un tema Bootstrap gratuito sin importar cuántas secciones tenga.
Flujo de trabajo
1. Lee el brief, elige UNA dirección
Elige una dirección de esta tabla, luego lee su directions/<carpeta>/style.md (conjunto completo de tokens + sus técnicas distintivas). No leas las otras direcciones.
| Dirección (carpeta) | Sensación | Mejor para | Fuente |
|---|---|---|---|
Ember Dark (ember-dark) | Azul-negro profundo, brillo esculpido naranja/rojo o azul, borde CTA arcoíris, etiquetas de botón mono | Herramientas AI, herramientas para desarrolladores, aplicaciones SaaS | OptimAI |
Tactile Light (tactile-light) | Blanco roto/plateado, botones esqueuomórficos brillantes, tarjetas con destello, un acento cálido (rojo), héroe enmarcado con render 3D | Agencias AI, SaaS B2B, consultorías | Aigocy |
Editorial Mono (editorial-mono) | #111 puro sobre #F0F0F0, grotesk 140px con tracking −7%, cuadrícula de líneas finas, texto que se llena al hacer scroll, sin sombras | Agencias, estudios, servicios premium | Adon |
Noir Spotlight (noir-spotlight) | Negro, un acento neón, palabra gigante interactuando con una foto, fondo shader/WebGL, tarjetas de proyecto apiladas | Marcas personales, portafolios, tecnología creativa | Davies |
Warm Playful (warm-playful) | Papel blanco roto cálido, tinta casi negra, verde apagado→dorado, tarjetas blancas de 28px, notas escritas a mano, dispositivo sangrando por el borde, precios con foto de fondo | Apps de escritorio/menú, utilidades, herramientas indie y de consumo, software de pago único | Pastily |
Si el usuario no especificó y es SaaS/AI, por defecto usa Ember Dark. Cambia a Warm Playful cuando el producto sea una utilidad nativa/de escritorio/móvil, una herramienta indie o de fundador único, o el brief diga amigable, accesible, acogedor, "no corporativo" (incluso si nunca dice "SaaS"). Ember Dark haría que una app de portapapeles de $9 se sintiera como infraestructura empresarial. Mezclar direcciones es cómo las páginas se vuelven confusas. Tomar prestada una técnica de otra dirección está bien, siempre que la paleta y la tipografía sigan siendo coherentes.
Dile al usuario en una línea qué dirección elegiste y por qué, para que pueda redirigir temprano. Mantén el acento de la dirección a menos que la marca tenga su propio color (el usuario nombra uno, o el producto ya usa uno); palabras de estado de ánimo como "acogedor" o "anochecer" no son un color de marca. Para un color de marca real, consulta "Intercambiando el acento" en directions/README.md.
2. Planifica la página como un ritmo, no como una lista
Las páginas premium alternan densidad y tono. Un inicio SaaS típico que funciona:
- Hero: insignia de ceja (una píldora como "✦ Agencia impulsada por AI" o un dato real como "v1.4 está disponible"; una pila de avatares + calificación solo cuando el usuario te haya dado una calificación real), titular de 2 líneas con una mitad atenuada, subcopía de 1–2 líneas con opacidad al 60%, CTA primaria + secundaria, luego el producto en sí (maqueta enmarcada en navegador o un cuadro de entrada interactivo) sangrando en la siguiente sección mediante un desvanecimiento degradado.
- Franja de logos: logos en escala de grises, marquesina infinita, bordes enmascarados.
- Cuadrícula de características Bento: 5–7 celdas de tamaño desigual, cada una con una ilustración de mini UI construida en HTML/CSS (nodos de flujo de trabajo, burbujas de chat, interruptores, gráficos, fichas de color), no iconos prediseñados.
- Declaración que se llena al hacer scroll: una frase grande que se llena del 30% → 100% mientras se desplaza. El llenado ocurre estrictamente línea por línea (una línea de tiempo depurada por bloque, líneas consecutivas), nunca varias líneas a la vez. Consulta
shared/typography.md. - Números: 3–4 estadísticas con contadores rodantes; un número grande atenuado como decoración.
- Cómo funciona / pestañas o tarjetas apiladas.
- Testimonios: solo citas que el usuario proporcionó, avatar + nombre + rol, quizás una marquesina vertical de tarjetas. Si no hay ninguna, omite la sección (o cámbiala por una banda de confianza/privacidad o una nota breve del creador). Las reseñas, calificaciones y conteos de usuarios inventados son prueba social falsa: engañan a los compradores y el propietario podría enviarlos por accidente.
- Precios: 3 niveles, el del medio elevado con el borde/brillo de acento, alternador mensual/anual.
- FAQ acordeón.
- CTA final con el brillo más fuerte de la página, luego un pie de página tranquilo con una marca de agua grande.
Alterna fondos de sección oscuro/claro (o bg-1/bg-2) para crear ritmo. El padding de las secciones es generoso: 120–176 px vertical en escritorio.
3. Construye con las recetas
Las recetas son CSS/HTML/JS listos para copiar. El style.md de tu dirección ya contiene sus técnicas distintivas (por ejemplo, borde arcoíris para Ember, botones táctiles y tarjetas con destello para Tactile). Para todo lo demás, lee el archivo compartido que coincida con lo que estás construyendo:
| Construyendo… | Lee |
|---|---|
| Luz del héroe, brillos, fondos de puntos/cuadrícula/ruido, cuadrícula de líneas finas y guías de columnas | shared/light.md |
| Titulares (tracking ajustado, mitad atenuada, degradado metálico), declaración que se llena al hacer scroll (GSAP línea por línea, o palabra por palabra con palabras clave coloreadas) | shared/typography.md |
| Maqueta del producto en el héroe (marco de navegador o dispositivo de aplicación de escritorio con cromo del SO), galería de capturas de pantalla, cuadrícula bento con mini UIs | shared/product-proof.md |
| Navegación de vidrio, navegación de píldora consciente de la sección, insignia de ceja y pila de avatares, anotaciones escritas a mano, tarjetas blancas suaves, foco en tarjetas, marquesinas, precios (3 niveles, precio único con foto de fondo o tarjeta de precio único simple), FAQ, marca de agua en el pie de página | shared/components.md |
| Cualquier marca nombrada con un icono (integraciones, franja de logos, órbita, "funciona con") | shared/logos.md |
Plantilla GSAP + Lenis, tabla de tiempos/aceleración, patrón de movimiento reducido gsap.matchMedia(), revelaciones, contadores, tarjetas apiladas, pila de historias de cambio de tono solo CSS, muro de fichas UI fijas, scroll fijo, hover, advertencias, movimiento nativo impulsado por scroll CSS | shared/motion.md |
| Fondo Shader/WebGL, campo de partículas, bloom (Three.js, con fallback CSS y puerta móvil) | shared/webgl.md |
Una página de aterrizaje completa generalmente necesita todos; una sola sección o una edición pequeña solo necesita su fila. Todos los plugins GSAP, incluido SplitText, son gratuitos desde 3.13, cárgalos desde jsDelivr.
4. Valores técnicos por defecto
- HTML de un solo archivo con CDN de Tailwind (o la pila existente del proyecto — síguela si la hay). Pon los tokens de diseño en propiedades personalizadas CSS en
:rootpara que un cambio de paleta sea una sola edición. - Fuentes de Google Fonts. Combinaciones probadas de las referencias: Sora + Inter Tight + IBM Plex Mono (Ember), Urbanist (Tactile), una grotesk como "Inter Tight"/"Schibsted Grotesk"/"Familjen Grotesk" + DM Sans (Editorial), Figtree/"Outfit" (Noir).
- Iconos: SVG en línea (estilo Lucide de 1.5px de trazo). Nunca emojis como iconos.
- Imágenes: si la generación de imágenes está disponible, genera renders 3D/objetos abstractos acordes a la marca; de lo contrario, construye imágenes con CSS/SVG (brillos, mini UIs, globos de puntos). Usa fotos de
https://images.unsplash.com/...solo para personas/retratos. Una página sin un ancla visual en el héroe se ve inacabada. - Logos de marcas reales, nunca marcadores de posición de letras. Cada vez que la página nombre una empresa, producto o SaaS existente (fichas de integración, arcos/franjas de logos, bandas "funciona con", testimonios, tablas de comparación) y muestres un icono junto a él, usa el logo real de esa marca. Un cuadrado de color con la inicial ("F" para Figma, "S" para Slack) se lee como una plantilla barata y rompe la confianza. Detalles y fuentes en
shared/logos.md. Si no se puede obtener un logo real, muestra el nombre como texto sin formato sin ningún icono; un icono falso es peor que ninguno. - Móvil: todo se colapsa a una columna en <768px; el texto de exhibición escala con
clamp(); los brillos se reducen (los desenfoques grandes son costosos en teléfonos); desactiva los efectos de cursor táctil.
5. Autorevisión antes de entregar
Abre la página en un navegador y haz capturas de pantalla a 1440px y 390px, si puedes. Verifica esta lista. Estas son las cosas que separan lo "generado por AI" de lo "más vendido":
- Solo un tono de acento (más neutros). Los degradados se mantienen dentro de esa familia de tonos, excepto un borde arcoíris intencional.
- El titular de exhibición tiene letter-spacing negativo y una mitad atenuada o degradado.
- El texto corporal/secundario usa pasos de opacidad de un solo color, y el contraste sigue siendo suficiente (≥4.5:1 para el cuerpo).
- El héroe muestra el producto (maqueta, cuadro de entrada, UI), no solo texto sobre un degradado.
- Al menos una fuente de luz esculpida por sección oscura; sin rectángulos planos de color puro.
- Los bordes son líneas finas (1px, 6–20% de opacidad), los radios son consistentes (elige una escala: 8/12/20/28/999).
- Los botones tienen estados hover que cambian la luz (el brillo se estrecha, el destello se desplaza, la flecha se mueve 2–4px), no solo el color.
- Movimiento: revelación del texto del héroe, desvanecimientos activados por scroll con escalonamiento, al menos un efecto depurado, marquesina. Todo deshabilitado bajo
prefers-reduced-motion(mediantegsap.matchMedia()), las duraciones se toman de la tabla de tiempos enshared/motion.md, nada anima width/height/top/left. - Si se usa WebGL: brillo CSS debajo como fallback, DPR limitado, renderiza solo mientras es visible, se omite en dispositivos móviles/de baja potencia, el texto permanece en HTML.
- Cada marca real nombrada en la página tiene su logo real (o ningún icono). Sin cuadrados con iniciales.
- Si es Warm Playful: el dispositivo del héroe es un SO de aspecto real (barra de menú, dock, menú de aplicación) construido en HTML, sangra por un borde y tiene como máximo dos notas Caveat; las tarjetas de historia se pegan con un paso
topde 16px y un cambio de tono por tarjeta; los colores de palabras clave aparecen solo en palabras individuales y pasan 4.5:1; el acento sigue siendo verde (a menos que el usuario haya dado un color de marca) y el dorado aparece solo al final del degradado del CTA; el precio único es una tarjeta blanca individual (con foto de fondo si tienes una foto, sin ella de lo contrario), con cualquier prueba gratuita como una línea dentro de ella. - Sin lorem ipsum. El texto es específico del producto: números concretos, características que suenan reales.
- Sin prueba social inventada: sin calificaciones, conteos de usuarios o logos de prensa inventados. Los detalles del producto que tuviste que asumir se enumeran para que el usuario los confirme.
- Nada se desborda horizontalmente a 390px.
Qué evitar (las señales de "plantilla barata")
- Botones que se mueven al pasar el cursor. Regla estricta, sin excepciones. Sin botones magnéticos/que siguen el cursor, sin
translate/scale/rotateen un botón o su etiqueta/icono en:hover, sin flechas que se deslicen, sin elevación al pasar el cursor. El diseño permanece inmóvil bajo el cursor, por lo que el objetivo del clic nunca se esquiva. Muestra el hover solo con cambios de color, brillo, resplandor, borde o sombra. (Las tarjetas aún pueden elevarse; los botones y enlaces con estilo de botón no pueden.) - Degradado púrpura a azul en todo; múltiples colores de acento en competencia.
- Sombras paralelas como
0 4px 6px rgba(0,0,0,.3)en fondos oscuros (las sombras no se leen en oscuro; usa brillos y bordes en su lugar). - Todo centrado con cuadrículas de tarjetas idénticas de 3 iconos + título + texto.
- Efecto de vidrio sin nada detrás del vidrio para desenfocar.
- Iconos de marca falsos: un cuadrado redondeado de color con una letra que representa a Figma, Slack, GitHub, etc.
- Aceleración elástica/rebotante, desvanecimientos que toman >1s, animaciones en todos los elementos a la vez.
- Texto degradado en el cuerpo; más de una frase con texto degradado por viewport.
- Imágenes "cerebro AI" prediseñadas. Muestra el producto o un render abstracto.
- Texto corporal de bajo contraste sobre oscuro: mantén el cuerpo al menos ~70% blanco para que siga siendo legible contra los brillos.