Plantilla de landing page para SaaS.
Un sitio web completo para un producto SaaS: ocho páginas responsive para una herramienta de planificación de equipos de ejemplo llamada Fjordly, desde la portada y los precios hasta un caso de cliente, el registro de cambios, un artículo del blog, el registro y el contacto con ventas. Los textos parecen de un producto real, los precios y las cifras coinciden entre páginas, y cada página es HTML con Tailwind, así que Codex o Claude Code pueden clonarla y convertirla en tu sitio.
Actualizado el 7 de noviembre de 2026
Sitio web · 8 páginas · Gratis y de código abierto
01Inicio 
02Funciones 
03Precios 
04Clientes 
05Novedades 
06Artículo del blog 
07Registro 
08Contactar con ventas
Clónala
npx degit ummydev/ui-templates/sites/saas my-app
Copia solo esta plantilla en una carpeta nueva, sin el resto del repositorio.
Hazla tuya
Esta es la plantilla Landing page SaaS de codexdesign.io. Cámbiale el nombre a [tu producto], sustituye los datos de ejemplo por [tus funciones] y mantén todas las pantallas fieles al sistema de diseño de DESIGN.md.
Pega esto en Codex o Claude Code dentro de la carpeta nueva.
Sistema de diseño
NordicWebAzules apagados, grises suaves y una seguridad tranquila para herramientas de productividad.Headings in Manrope- Hecha con
- HTML · Tailwind CSS v4 · Lucide icons
Qué incluye la plantilla
| Página | Qué contiene |
|---|---|
| Inicio | Una promesa en una línea, una pantalla del producto hecha en HTML, funciones clave, clientes y precios |
| Funciones | Cinco secciones (planificar, hacer, agendar, informar, comunicar), cada una con una pantalla |
| Precios | Free, Team y Enterprise, cambio entre mensual y anual, tabla comparativa y preguntas |
| Clientes | Un caso de cliente completo con cifras de antes y después, y más casos |
| Novedades | Versiones con fecha, etiquetadas como nuevo, mejorado y corregido |
| Artículo del blog | Un artículo con autor, índice, listas, una cita, código y artículos relacionados |
| Registro | Alta con Google o con correo, junto a lo que obtienes y una opinión de cliente |
| Contactar con ventas | Un formulario para pedir una demo con tamaño del equipo y necesidades, y preguntas previas |
El contenido coincide entre páginas. El precio es gratis hasta 10 personas, 8 USD por persona al mes en el plan Team con pago anual o 10 USD con pago mensual, y a medida para Enterprise. El cliente de la portada y del caso de éxito es la misma empresa de transporte: su reunión de los lunes pasó de 90 a 25 minutos y su informe semanal de 3 horas a 20 minutos. La última entrada de novedades es la función que la portada marca como nueva. Los nombres de los clientes son inventados, y no hay personas de relleno ni lorem ipsum.
Cada página es un archivo HTML con Tailwind CSS v4 y un tokens.css compartido. Todas funcionan desde un móvil de 390 píxeles hasta una pantalla de escritorio ancha, y el menú en el móvil no necesita JavaScript. Las pantallas del producto están hechas en HTML en lugar de pegadas como imágenes, así que tu agente puede cambiarles el estilo junto con el resto del sitio. Abre cualquier archivo en el navegador; no hay nada que instalar ni compilar.
Úsala con Codex o Claude Code
Copia solo esta plantilla del repositorio ui-templates:
npx degit ummydev/ui-templates/sites/saas my-saas-site
Después pídele a tu agente que la haga tuya:
Esta carpeta es una plantilla de sitio web SaaS. Conviértela en el sitio de [tu producto], que [qué hace] para [a quién va dirigido]. Mantén DESIGN.md y tokens.css como sistema de diseño, sustituye las pantallas del producto, las funciones, los precios, el caso de cliente y las novedades por [tu contenido], y haz que precios y cifras coincidan entre páginas. Después constrúyelo en [Next.js / Astro / tu stack].
Como el sistema de diseño está escrito en DESIGN.md, las páginas nuevas que añada tu agente, como documentación, una página sobre la empresa o una comparativa, encajarán con las ocho que ya existen.
Basada en el sistema de diseño Nordic
La plantilla usa Nordic, un sistema de diseño sereno para herramientas de productividad: Manrope, un azul fiordo apagado, esquinas de 12px y sombras suaves. Su página tiene una vista previa en vivo, el DESIGN.md completo y un tema de shadcn.
Preguntas frecuentes
¿Esta plantilla de landing page SaaS es gratis?
Sí. Es de código abierto con licencia MIT, para proyectos personales y comerciales.
¿Puedo usarla con Next.js, Astro o React?
Sí. Las páginas son HTML con clases de Tailwind, así que tu agente puede pasarlas a componentes en cualquier framework. Pídele que deje tokens.css y DESIGN.md tal como están, para que el diseño se mantenga después del cambio.
¿Tiene tema oscuro?
Sí. Añade class="dark" a la etiqueta <html> de cualquier página para cambiarla al tema oscuro de Nordic.