AGENCIA DIGITAL · Claude Design · HTML

Ápice Creativo — Prompt de diseño web para Claude AI

★★★★★4,6 4.692 descargas

Agencia de branding y desarrollo digital Diseñamos experiencias digitales con claridad y precisión.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa para la marca ficticia Ápice Creativo (agencia digital) usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. El sitio debe reproducir el diseño analizado:
- Paleta de colores: negro puro #000000, gris oscuro #1A1A1A, blanco puro #FFFFFF, acento azul eléctrico #0D6EFD y gris claro #F5F5F5.
- Tipografía: Inter (google fonts) para todo el texto, peso 400 regular y 700 bold para títulos.
- Header fijo con logo SVG placeholder, menú ancla (Índice, Sobre nosotros, Servicios, Proyectos) y botón primario "Contact Us" con flecha animada.
- Preloader que muestra el nombre "Ápice Creativo" y subtítulo, con transición fade-out al cargar la página.
- Hero section ocupando pantalla completa: video de fondo (loop, muted, autoplay) con poster fallback, overlay de cuadrícula SVG decorativa, título grande "future" (desktop) / "FUTURE brand" (mobile), carrusel horizontal de un proyecto destacado (imagen, categoría "Nuevo proyecto", título), lista horizontal de tres servicios con icono de máscara y texto, botón primario "Book a call" con flecha animada, footer sticky con año dinámico y enlaces a Instagram, Behance, LinkedIn.
- Debajo del hero, bloque de "Trusted customers" con tres imágenes circulares y círculo adicional "+10", texto debajo.
- Texto explicativo grande y botón secundario idéntico al del hero.
- Footer con logo, claim breve, navegación secundaria, formulario de suscripción simple (email + botón) y iconos sociales.
- Implementa scroll suave para los enlaces ancla y animaciones de aparición (fade‑in) al entrar en viewport usando IntersectionObserver.
- Todas las clases deben seguir la convención Tailwind y ser responsive (mobile‑first). No usar frameworks externos ni componentes de Webflow. Incluye los assets de video y SVG como URLs de placeholder (p.ej. https://example.com/video.mp4).

---

## 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>
```

2.205 caracteres · 28 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, menú y botón Contacto
1.2 Preloader animado
1.3 Hero: video de fondo, grid SVG, título "future", carrusel de proyecto destacado, lista de servicios, botón "Book a call"
1.4 Trusted customers: avatars + +10 y texto "Trusted by customer"
1.5 Hero bottom: texto descriptivo y botón "Book a call"

SERVICES (sección interna imaginada)

2.1 Header heredado
2.2 Grid de servicios con iconos y descripciones
2.3 CTA de contacto

PROJECTS (sección interna imaginada)

3.1 Header heredado
3.2 Galería tipo masonry de proyectos
3.3 Filtro por categoría
3.4 CTA "Contacta para más"

ABOUT (sección interna imaginada)

4.1 Header heredado
4.2 Texto institucional con imagen de fondo
4.3 Equipo con fotos circulares
4.4 Valores en tarjetas

FOOTER

5.1 Logo y claim breve
5.2 Enlaces de navegación secundarios
5.3 Información de contacto y formulario breve
5.4 Íconos de redes sociales

PROMPTS RELACIONADOS · AGENCIA DIGITAL

Otros prompts de la misma categoría

Ficha de marca

Nombre: Ápice Creativo
Sector: Agencia de branding y desarrollo digital
Claim: Diseñamos experiencias digitales con claridad y precisión

Bloques de la home

1.1 Header con logo, menú ancla y botón de contacto
1.2 Preloader con animación de marca
1.3 Hero con fondo de video, grid decorativo, título grande, carrusel de proyectos y lista de servicios
1.4 Sección de confianza con avatars y contador
1.5 Texto descriptivo y segunda llamada a acción
1.6 Footer con enlaces rápidos, datos de contacto y 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