CORPORATIVO · Claude Design · HTML

Núcleo Analytics — Prompt de diseño web para Claude AI

★★★★★4,8 1.929 descargas

Consultoría y servicios de ciencia de datos Transformamos datos en decisiones claras.

↓ 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 "Núcleo Analytics" (sector: consultoría de ciencia de datos, dominio: nucleanalytics.com, claim: "Transformamos datos en decisiones claras", email: hola@nucleanalytics.com, año: 2026). Usa exclusivamente HTML estático, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Reproduce fielmente la estructura visual del sitio analizado, pero con contenidos propios y sin copiar texto original.

--- Paleta de colores ---
- #0F172A (azul marino profundo) para fondo principal
- #1E293B (gris azul) para secciones y tarjetas
- #3B82F6 (azul eléctrico) para acentos, botones y hover
- #F1F5F9 (gris muy claro) para texto secundario y fondos de cards
- #FFFFFF (blanco) para texto principal

--- Tipografía ---
- Fuente principal: "Inter", sans-serif (cargar desde Google Fonts). Usar tamaños: 4xl para títulos H1, 2xl para H2, lg para subtítulos, base para párrafos.

--- Header ---
- Barra fija con logo (texto "Núcleo Analytics" en Inter bold, color #FFFFFF) alineado a la izquierda.
- Botón de email a la derecha con icono de sobre (SVG) que cambia a color #3B82F6 al hover.

--- Hero (sección 1) ---
- Contenedor centrado, fondo #0F172A, texto blanco.
- Título H1: "Núcleo Analytics".
- Subtítulo decorativo con ticker horizontal que repite la frase "Ciencia de datos" y un pequeño icono SVG entre repeticiones. El ticker se anima infinitamente con CSS keyframes (translateX).
- Imagen a la derecha (foto abstracta de datos) dentro de un div con sombra ligera y borde redondeado.
- Elementos decorativos: serie de círculos pequeños (divs con bg #3B82F6, border‑radius full) distribuidos en patrón similar al original.

--- Bloque "Sobre nosotros" (sección 2) ---
- Título H2: "Sobre nosotros".
- Párrafo descriptivo original (3‑4 líneas).
- Grid de 4 tarjetas (value‑blocks) con fondo #1E293B, texto #FFFFFF. Cada tarjeta muestra número grande ("120+", "15+", "98%", "25+") y etiqueta ("Proyectos", "Años de experiencia", "Precisión media", "Sectores atendidos").
- Ticker decorativo bajo el grid con la palabra "Trayectoria" y el mismo icono SVG, animado como en el hero.

--- Bloque "Servicios" (sección 3) ---
- Título H2: "Servicios".
- Lista de 4 service‑blocks alineados en columna vertical en móvil y en dos columnas en tablets/desktop.
- Cada bloque muestra número grande (01‑04) en color #3B82F6, título H2 y breve descripción (max 2 líneas). Incluye una pequeña ilustración SVG decorativa al lado.
- Ticker horizontal bajo los bloques con la palabra "Servicios" repetida.

--- Bloque "Contacto" (sección 4) ---
- Título H2: "Hablemos".
- Foto circular pequeña del fundador (placeholder) a la izquierda.
- Formulario con campos: Nombre, Email, Mensaje y botón "Enviar" con fondo #3B82F6, texto blanco, hover a #1E3A8A.
- Fila de botones sociales (GitHub, LinkedIn, X) con iconos SVG. Cada botón tiene efecto hover que cambia el color del icono a #3B82F6 y aplica una ligera escala.

--- Footer ---
- Barra inferior con fondo #0F172A, texto pequeño #F1F5F9 y enlace al email (mailto:hola@nucleanalytics.com) en color #3B82F6.

--- Requisitos técnicos ---
1. Incluir en <head> los enlaces a Tailwind CDN (`https://cdn.tailwindcss.com`) y a la fuente Inter (`https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap`).
2. Todo el CSS adicional debe estar dentro de una etiqueta <style> usando `@layer utilities` para animaciones del ticker.
3. JavaScript debe estar al final del body, manejando la reproducción infinita del ticker (si se necesita clonar nodos) y el efecto hover de los iconos sociales.
4. El HTML debe estar semánticamente estructurado (header, main, section, footer).
5. Garantizar que el sitio sea totalmente responsivo: stacking vertical en <640px, dos columnas en >=768px, tres columnas en >=1024px para grids.
6. No usar imágenes externas reales; sustituir por placeholders de Unsplash (ej. `https://source.unsplash.com/featured/800x600?data`) y SVG inline para iconos.

Entrega el código completo dentro de un único archivo `index.html` listo para abrir en el navegador.

---

## 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.419 caracteres · 70 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo y icono de email
1.2 Hero: título principal, elemento decorativo de círculos, imagen destacada y ticker horizontal
1.3 About Me: subtítulo, párrafo introductorio y rejilla de 4 value‑blocks (proyectos, años, precisión, industrias)
1.4 Services: encabezado y 4 service‑blocks numerados con título y breve descripción
1.5 Contact: avatar, encabezado "Let’s Talk", y fila de iconos sociales (GitHub, LinkedIn, X)

ABOUT

2.1 Header idéntico al home
2.2 Sección ampliada de historia y trayectoria (estructura similar al bloque About Me)
2.3 Detalle de valores y logros (grid de value‑blocks)

SERVICES

3.1 Header común
3.2 Lista de servicios con número, título y descripción extendida
3.3 Cada servicio incluye ilustración decorativa

CONTACT

4.1 Header común
4.2 Formulario simple (nombre, email, mensaje) y botón enviar
4.3 Íconos sociales con hover animado

FOOTER

5.1 Barra inferior mínima con enlace de email y derechos reservados

PROMPTS RELACIONADOS · CORPORATIVO

Otros prompts de la misma categoría

Ficha de marca

Nombre: Núcleo Analytics
Sector: Consultoría y servicios de ciencia de datos
Claim: Transformamos datos en decisiones claras

Bloques de la home

1.1 Header con logo y botón de email
1.2 Hero con título, imagen y ticker continuo de "Data Scientist"
1.3 Bloque "About Me" con título, descripción y tarjetas de métricas
1.4 Bloque "Services" con lista numerada de cuatro servicios y descripciones
1.5 Bloque "Contact" con foto pequeña, título y botones de redes sociales

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

Núcleo Analytics — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

SERVICES

CONTACT

FOOTER

Otros prompts de la misma categoría

JurisNova

Kairon Strategy

Korven Studio

Laboris Tech