SAAS / STARTUP · Claude Design · HTML

TalentoFlux — Prompt de diseño web para Claude AI

★★★★★4,9 3.282 descargas

Plataforma SaaS de automatización de reclutamiento y gestión de candidatos Simplifica la selección de personal con inteligencia artificial.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo para la marca ficticia TalentoFlux, una plataforma SaaS de automatización de reclutamiento, usando únicamente HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo.

**Alcance**: replicar el diseño visual y la estructura de la plantilla analizada, sin copiar texto original. Genera todas las páginas indicadas en la tabla (HOME, PRODUCT, PRICING, ABOUT, CONTACT, BLOG, LOGIN, SIGNUP) con sus bloques correspondientes.

**Stack**: 
- `<script src="https://cdn.tailwindcss.com"></script>` para Tailwind v3 (usar configuración `theme: {extend: {colors:{primary:'#FF6B35', secondary:'#1A202C', accent:'#F5F7FA', light:'#FFFFFF', dark:'#111111'}}, fontFamily:{sans:['Inter', 'sans-serif']}}`)
- JavaScript vanilla para interactividad: toggle de menú móvil, dropdown en la barra de navegación, carrusel de testimonios, modal del carrito, scroll suave.

**Paleta de colores**: Primary #FF6B35 (naranja vibrante), Secondary #1A202C (gris casi negro), Accent #F5F7FA (gris muy claro), Light #FFFFFF, Dark #111111.
**Tipografía**: Inter, peso 400 para texto normal, 600 para encabezados.

**Header**: barra de navegación sticky, fondo transparente que cambia a `bg-white shadow` al hacer scroll. Logo a la izquierda (texto "TalentoFlux" en Primary). Menú principal con enlaces Home, Producto, Precios, Sobre nosotros, Contacto y un dropdown "Más" con enlaces Blog, Integraciones, Carrera. Botones a la derecha: "Iniciar sesión" (texto) y "Comenzar" (filled primary).

**Footer**: fondo Secondary, texto Light. Cuatro columnas: (1) Logo + claim, (2) Navegación principal, (3) Recursos (Blog, Integraciones, FAQ), (4) Newsletter con input email y botón primary. Íconos de redes sociales en fila bajo la newsletter.

**Home sections**:
1. Hero: contenedor centrado, título grande en Inter 600, color Primary, subtítulo en Dark, dos botones CTA (primary "Comenzar" y outline secondary "Ver demo"). Imagen decorativa a la derecha.
2. Características: grid 3 cols, cada una con icono SVG dentro de círculo `bg-accent`, título pequeño Primary, texto gris Dark.
3. Integraciones: fila horizontal de logotipos de partners (placeholder SVGs) con filtro grayscale que al hover vuelve a color.
4. Testimonios: carrusel horizontal auto‑play, tarjetas con foto circular, nombre, posición y cita en cursiva.
5. CTA final: sección con fondo Primary, texto blanco centrado y formulario inline de captura de email + botón "Solicitar demo".
6. Footer (ver arriba).

**Otras páginas**:
- Product: hero interno con breadcrumb, layout de dos columnas (imagen placeholder a la izquierda, descripción a la derecha). Lista de características en icono + texto. CTA "Prueba gratuita".
- Pricing: tabla comparativa de tres planes (Starter, Professional, Enterprise) con bordes rounded, highlight del plan recomendado con `border-primary`. Cada plan incluye lista de beneficios y botón primary.
- About: historia en bloques de texto con imágenes alternas, sección de equipo con cards de foto redonda, nombre y rol.
- Contact: formulario con campos nombre, email, asunto, mensaje, botón primary; mapa embed (iframe placeholder), datos de contacto.
- Blog: grid de tarjetas de artículo (imagen, título, extracto, botón "Leer más"). Sidebar con categorías y formulario de suscripción.
- Login/Signup: formularios centrados en pantalla, fondo Light, tarjetas con sombra, campos con borde `border-gray-300`, botón primary, enlaces a registro/recuperación.

**Requisitos técnicos**:
- Todas las referencias a imágenes deben usar URLs de placeholders (https://via.placeholder.com/). 
- El carrito modal debe estar presente pero sin funcionalidad real; solo debe abrirse/cerrarse con JavaScript y mostrar texto estático "Carrito vacío".
- El dropdown y el menú móvil deben ser accesibles (aria‑attributes). 
- Añadir animaciones suaves con `transition` de Tailwind para hover y foco.
- El sitio debe ser totalmente responsivo: usar breakpoints `md:` y `lg:` para adaptar columnas y mostrar menú hamburguesa en móvil.

Entrega el código completo listo para copiar‑pegar en un archivo `index.html` que incluya todas las páginas enlazadas mediante `<a href="...">`.

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

4.494 caracteres · 56 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación fija, transparente, logo + menú + botones.
1.2 Hero con título, subtítulo y dos CTA.
1.3 Sección de funcionalidades en tres columnas.
1.4 Bloque de integraciones mostrando logotipos de partners.
1.5 Testimonios estilo carrusel.
1.6 CTA final con formulario de suscripción.
1.7 Footer con enlaces, redes y newsletter.

PRODUCT

2.1 Encabezado interno con breadcrumb.
2.2 Detalle de producto en dos columnas (imagen + descripción).
2.3 Lista de características específicas.
2.4 Tabla de precios resumida.
2.5 CTA de prueba gratuita.

PRICING

3.1 Tabla comparativa de planes.
3.2 Listado de beneficios por plan.
3.3 Botón de selección para cada plan.

ABOUT

4.1 Historia de la empresa y misión.
4.2 Equipo con fotos y breves bios.
4.3 Valores y cultura.

CONTACT

5.1 Formulario de contacto con campos nombre, email, mensaje.
5.2 Mapa integrado y datos de ubicación.

BLOG

6.1 Lista de artículos con imagen, título y extracto.
6.2 Sidebar con categorías y suscripción.

LOGIN

7.1 Formulario de acceso (email y contraseña).
7.2 Enlace a recuperación de contraseña.

SIGNUP

8.1 Registro de nuevo usuario con campos básicos.
8.2 Checkbox de términos y condiciones.

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: TalentoFlux
Sector: Plataforma SaaS de automatización de reclutamiento y gestión de candidatos
Claim: Simplifica la selección de personal con inteligencia artificial

Bloques de la home

1.1 Barra de navegación fija, transparente, logo a la izquierda, menú principal con dropdown y botones de acceso y registro.
1.2 Hero principal con título, subtítulo y dos botones CTA (Comenzar y Ver demo).
1.3 Área de características con iconos y texto descriptivo en tres columnas.
1.4 Bloque de integración que muestra logos de herramientas compatibles.
1.5 Testimonios con carrusel de citas y fotos de usuarios.
1.6 Llamada a la acción final con formulario de captura de email.
1.7 Footer con enlaces de navegación, redes sociales y formulario de newsletter.

Crea tu propia Skill

Genera una Skill personalizada para Claude AI en minutos. Sin código.

Empezar ahora ↗

← Volver al catálogo ↗ Crea tu Skill personalizada