AGENCIA DIGITAL · Claude Design · HTML
Vertice Cinco — Prompt de diseño web para Claude AI

★★★★★4,6 2.925 descargas
Consultoria estrategica para pequenas y medianas empresas Cinco palancas, una sola direccion..
↓ Descargar PROMPT.md
GRATIS 0€
NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md
BRIEFING DE MARCA

Marca: Vertice Cinco
Sector: Consultoria estrategica para pequenas y medianas empresas
Dominio: verticecinco.com
Claim: Cinco palancas, una sola direccion.
Email: hola@verticecinco.com
Telefono: +34 951 000 555
Direccion: Avenida del Comercio 18, planta 3, Malaga
Copyright: 2026

CATEGORIA

Principal: Corporativo
Secundarias: Agencia digital, Portafolio

ALCANCE

Maqueta una SPA en un unico archivo HTML con cuatro vistas: Home, Sobre nosotros, Servicios y Contacto. La navegacion entre vistas debe ser instantanea (mostrar/ocultar secciones con JS, sin recarga) y debe actualizar el hash de la URL.

STACK TECNICO

- HTML5 semantico.
- Tailwind via CDN (cdn.tailwindcss.com).
- JavaScript vanilla, sin frameworks ni bundlers.
- Iconos: usa Lucide via script CDN (https://unpkg.com/lucide@latest) y la API `lucide.createIcons()`.
- Imagenes: usa siempre placeholders externos del tipo https://picsum.photos/seed/{slug}/{w}/{h} con seeds descriptivos en ingles (team-1, portfolio-1, hero-1, etc.).
- Todo el codigo en un solo archivo, listo para abrir directo en un navegador.

PALETA

- Color de marca primario: #1E5EFF (azul corporativo profundo)
- Acento secundario: #00C2A8 (verde-azulado)
- Oscuro principal: #0F1B2D (fondo de footer y bandas oscuras)
- Oscuro suave: #1A2436 (texto principal)
- Gris medio: #6B7785 (texto secundario)
- Gris claro: #F2F5F9 (fondos alternos)
- Blanco: #FFFFFF

Usa el primario para CTAs, enlaces activos, iconos destacados y elementos interactivos. El secundario solo para subrayados, badges puntuales y barras de progreso. El oscuro principal solo en footer y banda de contadores. Mantente fiel a estos hex, no inventes variantes.

TIPOGRAFIA

- Titulares: Poppins (700 y 800) via Google Fonts.
- Cuerpo: Inter (400 y 500) via Google Fonts.
- Tracking ligero (-0.01em) en titulares grandes.
- H1: 56-72px desktop, 36-44px mobile.
- H2: 36-44px desktop, 28-32px mobile.
- Body: 16-17px, line-height 1.65.

HEADER COMUN (visible en todas las vistas)

Estructura en dos niveles:

Nivel 1 (topbar fina, fondo color de marca primario, texto blanco, 38px alto):
- Izquierda: icono de ubicacion + direccion fisica + separador + icono de telefono + numero.
- Derecha: cinco iconos sociales en linea (Facebook, X, Instagram, LinkedIn, YouTube) en circulos blancos con icono primario, 28px.

Nivel 2 (barra principal, fondo blanco, 90px alto, sticky con sombra suave al hacer scroll):
- Izquierda: logo texto "Vertice Cinco" con el numero 5 estilizado dentro de un cuadrado de color primario.
- Centro: menu horizontal con 4 items principales (Inicio, Sobre nosotros, Servicios, Contacto). Subrayado del item activo en color primario, 3px, debajo del texto.
- Derecha: boton CTA "Pedir analisis gratis" con fondo color primario, texto blanco, esquinas pill, 14px padding vertical y 28px horizontal, sombra suave que se intensifica en hover.

En mobile (<1024px): topbar oculta, menu se colapsa en hamburguesa de tres lineas a la derecha. Al pulsar, panel deslizante desde la derecha con fondo oscuro principal y enlaces en blanco.

FOOTER COMUN (visible en todas las vistas)

Fondo oscuro principal #0F1B2D, texto blanco/grises. Cuatro columnas en desktop, una en mobile. Padding vertical 80px.

- Columna 1: logo blanco + parrafo de 3 lineas sobre la marca + tres iconos sociales en circulos transparentes con borde.
- Columna 2: titulo "Enlaces" + lista vertical de 5 items (Sobre nosotros, Servicios, Casos, FAQ, Contacto).
- Columna 3: titulo "Contacto" + tres lineas con icono + texto: direccion, telefono, email.
- Columna 4: titulo "Boletin" + parrafo breve + input email + boton "Suscribirme" en color primario.

Linea inferior con separador sutil: "© 2026 Vertice Cinco. Todos los derechos reservados." a la izquierda y enlaces "Aviso legal · Privacidad · Cookies" a la derecha.

PAGINA 1 — HOME

1.1 HERO CON SLIDER
- Altura: 100vh en desktop, 80vh en mobile.
- Slider de 3 diapositivas con autoplay cada 6s y bullets de navegacion en la parte inferior central.
- Cada diapositiva: imagen de fondo (placeholders distintos), overlay degradado oscuro de izquierda a derecha (rgba(15,27,45,0.85) a rgba(15,27,45,0.2)).
- Contenido alineado a la izquierda, ancho maximo 600px:
  * Eyebrow pequeno color secundario uppercase tracking amplio: "CONSULTORIA · ESTRATEGIA · CRECIMIENTO"
  * H1 grande y rotundo (cada diapositiva con su propio H1):
    - Diapositiva 1: "Decisiones claras para empresas que no quieren ir a ciegas."
    - Diapositiva 2: "Auditamos lo que ya tienes antes de proponer nada nuevo."
    - Diapositiva 3: "Ordenamos tu negocio en cinco palancas. No mas, no menos."
  * Parrafo de 2 lineas (mismo para las tres): "Trabajamos con direcciones generales y socios fundadores que necesitan una vision externa, honesta y aplicable al dia siguiente."
  * Dos botones en linea: primario "Pedir analisis gratis" + secundario fantasma con borde blanco "Ver metodologia".

1.2 BANDA DE SERVICIOS DESTACADOS
- Tres tarjetas en linea, fondo blanco, sombra suave, esquinas redondeadas 12px, padding 32px.
- Posicion: se superpone -80px sobre el hero (margin-top negativo).
- Cada tarjeta: icono Lucide en cuadrado de color primario (radio 12px, 56px), titulo H4 y parrafo de 2 lineas + enlace "Leer mas" con flecha.
- Tarjetas:
  1. "Diagnostico inicial" — "Revisamos cuentas, procesos y equipo en una sesion de tres horas. Sales con un mapa, no con humo."
  2. "Plan a 90 dias" — "Diez acciones medibles, asignadas a responsable y fecha. Si una no se ejecuta, la quitamos."
  3. "Acompanamiento continuo" — "Una reunion al mes con la direccion. Cero powerpoints, una sola hoja de ruta viva."

1.3 ABOUT CON TABS Y BARRAS DE PROGRESO
- Dos columnas. Padding vertical 100px. Fondo blanco.
- Columna izquierda: dos imagenes superpuestas en composicion diagonal (la grande arriba a la izquierda, la pequena abajo a la derecha solapada 30%). La pequena con borde blanco de 8px.
- Columna derecha:
  * Eyebrow color primario uppercase: "QUIENES SOMOS"
  * H2: "Trabajamos por resultados, no por horas facturadas."
  * Parrafo introductorio de 3 lineas.
  * Tabs horizontales (3 tabs): "Historia" · "Mision" · "Plan a 5 anos". Tab activo subrayado color primario.
  * Contenido de cada tab: parrafo de 4 lineas con texto coherente al titulo.
  * Bajo los tabs, tres barras de progreso con etiqueta y porcentaje:
    - "Procesos optimizados — 92%"
    - "Equipos alineados — 87%"
    - "Decisiones documentadas — 95%"
- Las barras se rellenan con animacion al entrar en viewport.

1.4 GRID DE SERVICIOS 3x2
- Fondo gris claro #F2F5F9. Padding vertical 100px.
- Cabecera centrada: eyebrow + H2 "Lo que hacemos" + parrafo de 2 lineas.
- Seis tarjetas en grid 3x2, fondo blanco, padding 36px, esquinas 8px.
- En hover: la tarjeta se eleva 6px y el icono cambia de fondo gris claro a color primario con icono blanco.
- Tarjetas:
  1. "Diagnostico financiero" — Icono: linea de tendencia.
  2. "Optimizacion de procesos" — Icono: engranaje.
  3. "Estructura comercial" — Icono: target.
  4. "Cultura interna" — Icono: usuarios.
  5. "Sistemas y datos" — Icono: base de datos.
  6. "Direccion por objetivos" — Icono: brujula.

Cada tarjeta: icono + titulo H4 + parrafo de 3 lineas + enlace "Saber mas →" en color primario.

1.5 PORTFOLIO CON FILTROS
- Fondo blanco. Padding vertical 100px.
- Cabecera centrada: eyebrow "CASOS" + H2 "Algunos proyectos recientes" + parrafo de 2 lineas.
- Barra de filtros horizontal centrada con 5 items: "Todos · Financiero · Operaciones · Comercial · Cultura". Activo en color primario con subrayado.
- Grid de 8 piezas (2 filas de 4). Cada pieza: imagen cuadrada con overlay color primario al hacer hover (opacidad 85%) + titulo blanco y categoria en pequeno aparecen al hacer hover.
- Titulos: "Industria conservera (Galicia)", "Cadena de restaurantes (Andalucia)", "Laboratorio clinico (Madrid)", "Bodega familiar (La Rioja)", "Distribuidora textil (Valencia)", "Estudio juridico (Bilbao)", "Cooperativa agricola (Murcia)", "Tienda multimarca (Sevilla)".
- Al hacer clic sobre una pieza, abrir lightbox modal centrado con imagen ampliada + titulo + parrafo de 4 lineas describiendo el reto, lo hecho y el resultado en metricas.

1.6 EQUIPO
- Fondo gris claro. Padding vertical 100px.
- Cabecera centrada: eyebrow "EQUIPO" + H2 "Las personas detras del metodo" + parrafo de 2 lineas.
- Grid de 4 personas. Cada tarjeta:
  * Foto cuadrada de la persona (placeholder).
  * Overlay degradado color primario que aparece desde abajo en hover, con tres iconos sociales blancos.
  * Bajo la foto: nombre H4 + cargo en color primario uppercase pequeno tracking.
- Personas:
  1. Carmen Soler — Socia fundadora
  2. Javier Ruiz — Director de estrategia
  3. Pablo Mendez — Responsable de operaciones
  4. Maria Garcia — Coordinadora de clientes

1.7 BANDA DE CONTADORES (full width)
- Fondo oscuro principal #0F1B2D con un patron sutil de lineas diagonales al 5% de opacidad.
- Padding vertical 80px.
- Cuatro columnas en linea, separadas por una linea vertical sutil:
  * Numero grande (60px, Poppins 800) seguido del signo "+" mas pequeno.
  * Bajo el numero, etiqueta en blanco uppercase tracking amplio.
- Contadores con count-up animado al entrar en viewport (2s):
  1. 142 — "Empresas asesoradas"
  2. 96  — "Procesos rediseñados"
  3. 38  — "Equipos formados"
  4. 12  — "Anos en activo"

1.8 PLANES (sin precios)
- Fondo blanco. Padding vertical 100px.
- Cabecera centrada: eyebrow "FORMAS DE TRABAJAR" + H2 "Tres ritmos, una misma metodologia" + parrafo de 2 lineas.
- Tres tarjetas en linea. La central destacada (escala 1.05, sombra mas fuerte, borde superior 4px color primario, badge "Recomendado" en la esquina superior derecha).
- Cada tarjeta:
  * Nombre del plan (H4 uppercase).
  * Subtitulo en gris medio.
  * Espacio reservado para precio con el placeholder {{PRECIO}} (sin mostrar nada por ahora, no escribas ninguna cifra).
  * Lista de 5 caracteristicas con icono check en color primario delante.
  * Boton CTA al pie: "Solicitar propuesta".
- Planes:
  1. "Diagnostico puntual" — "Una sesion + informe ejecutivo en una semana." — 5 items.
  2. "Plan a 90 dias" — "Implementacion guiada con revisiones quincenales." — 5 items.
  3. "Acompanamiento anual" — "Reunion mensual con la direccion y revision trimestral." — 5 items.

1.9 BLOQUE VIDEO + FAQ
- Dos columnas. Padding vertical 100px. Fondo blanco.
- Columna izquierda (40%): bloque de video con thumbnail de placeholder + boton play circular grande (80px) en el centro, color primario con icono blanco. Al hacer clic, abre un modal con un iframe de YouTube de ejemplo (https://www.youtube.com/embed/dQw4w9WgXcQ). Sobre el video, un pequeno texto: "Como trabajamos · 3 min".
- Columna derecha (60%):
  * Eyebrow "DUDAS FRECUENTES"
  * H2 "Lo que nos preguntan antes de contratar"
  * Acordeon de 5 preguntas. Pregunta activa con fondo gris claro, las demas con borde inferior. Icono +/- a la derecha que rota al abrir.
  * Preguntas:
    1. "¿Que pasa en la primera sesion gratuita?"
    2. "¿Hace falta facilitar acceso a nuestras cuentas?"
    3. "¿En que sectores teneis mas experiencia?"
    4. "¿Trabajais con empresas fuera de España?"
    5. "¿Que pasa si tras el diagnostico decidimos no continuar?"
  * Cada respuesta en parrafo de 3-4 lineas.

1.10 MARQUEE DE LOGOS
- Fondo blanco. Padding vertical 60px. Borde superior e inferior sutil.
- Banda horizontal con 8 logos placeholder en escala de grises, opacidad 0.6, que se desplazan continuamente de derecha a izquierda con animacion CSS infinita (30s por ciclo). Al pasar el raton por encima, la banda pausa y los logos vuelven a su color (opacidad 1).
- Antes del marquee, etiqueta centrada en pequeno uppercase tracking: "EMPRESAS QUE HAN CONFIADO".

1.11 TESTIMONIOS
- Fondo con imagen de placeholder con overlay degradado color primario (opacidad 0.92). Padding vertical 120px.
- Texto en blanco. Slider centrado con tres testimonios, bullets de navegacion debajo.
- Cada testimonio:
  * Icono de comillas grande color secundario arriba.
  * Texto del testimonio en 18px, line-height 1.7, max 600px de ancho centrado.
  * Foto circular 80px de la persona.
  * Nombre H5 + cargo en pequeno bajo el nombre.
- Testimonios:
  1. "Esperaba un powerpoint y me llevaron a una reunion en la nave a las siete de la manana. Eso cambio todo." — Andres Lopez, gerente de Conservas Marina.
  2. "Nos dijeron que el problema no era comercial sino de almacen. Tenian razon y nos ahorraron una contratacion." — Lucia Fernandez, directora de Bodega Cinco Vientos.
  3. "Trabajan rapido y con datos. Sin rodeos. Es lo que necesitabamos despues de tres consultoras anteriores." — Marcos Ribera, fundador de Distribuciones Levante.

1.12 BLOG
- Fondo gris claro. Padding vertical 100px.
- Cabecera centrada: eyebrow "RECURSOS" + H2 "Lecturas para directivos con prisa" + parrafo de 2 lineas.
- Grid de 4 tarjetas en linea (1 fila). Cada tarjeta:
  * Imagen superior con esquinas superiores redondeadas.
  * Badge de categoria sobre la imagen, esquina superior izquierda, fondo color primario.
  * Fecha en pequeno bajo la imagen.
  * Titulo H4 (2 lineas max).
  * Parrafo de 2 lineas.
  * Enlace "Leer articulo →" en color primario.
- Posts:
  1. "Como leer una cuenta de resultados en diez minutos" — Categoria: Finanzas.
  2. "El error de delegar lo que aun no se ha definido" — Categoria: Operaciones.
  3. "Reuniones que valen lo que cuestan: una guia honesta" — Categoria: Cultura.
  4. "Indicadores que importan en una pyme de servicios" — Categoria: Estrategia.

1.13 CTA FINAL FULL WIDTH
- Fondo color primario. Padding vertical 90px. Texto blanco centrado.
- H2: "Si has llegado hasta aqui, probablemente tenemos algo que hablar."
- Parrafo de 1 linea: "Pide una sesion gratuita de diagnostico. Sin compromiso y sin venta encubierta."
- Boton blanco con texto color primario: "Pedir sesion gratuita".

CABECERA INTERNA REUTILIZABLE (para las tres internas)

- Altura: 40vh en desktop, 30vh en mobile.
- Fondo con imagen placeholder + overlay degradado oscuro (rgba(15,27,45,0.78)).
- Contenido centrado verticalmente:
  * H1 blanco grande (titulo de la pagina actual).
  * Breadcrumb pequeno bajo el titulo en formato: "Inicio / [pagina actual]" con separadores ">".

PAGINA 2 — SOBRE NOSOTROS

2.1 Cabecera interna con titulo "Sobre nosotros".
2.2 Bloque About con tabs y barras de progreso (reutiliza 1.3 con un parrafo de introduccion ampliado a 5 lineas).
2.3 Banda de contadores oscura (reutiliza 1.7).
2.4 Bloque "Como trabajamos": linea de tiempo horizontal con 4 pasos, cada paso con icono circular grande, numero, titulo y parrafo corto. Pasos: 1. Llamada inicial, 2. Diagnostico, 3. Plan, 4. Acompanamiento.
2.5 Equipo (reutiliza 1.6).
2.6 CTA final (reutiliza 1.13) y footer comun.

PAGINA 3 — SERVICIOS

3.1 Cabecera interna con titulo "Servicios".
3.2 Grid de servicios 3x2 (reutiliza 1.4 con los 6 servicios).
3.3 Bloque alternado: tres filas con imagen+texto alternando lado (izquierda/derecha/izquierda). Cada fila: imagen 50% + texto 50% con eyebrow, H3, parrafo de 4 lineas y lista de 3 bullets. Titulos: "Diagnostico financiero a fondo", "Procesos sin atajos", "Estructura comercial que escala".
3.4 FAQ acordeon (reutiliza 1.9 columna derecha sola, full width centrada con max 800px de ancho).
3.5 CTA final + footer comun.

PAGINA 4 — CONTACTO

4.1 Cabecera interna con titulo "Contacto".
4.2 Dos columnas, padding vertical 100px.
  * Columna izquierda (60%): formulario con campos: Nombre, Empresa, Email, Telefono, Asunto (selector con 4 opciones: Diagnostico, Plan, Acompanamiento, Otro), Mensaje (textarea 5 filas). Boton submit color primario "Enviar mensaje" ancho completo. Validacion basica en JS con mensaje de exito que aparece en verde abajo del form al enviar.
  * Columna derecha (40%): tres tarjetas verticales apiladas, cada una con icono circular color primario, titulo y dos lineas de contenido:
    1. "Direccion" — Avenida del Comercio 18, planta 3, Malaga.
    2. "Telefono" — +34 951 000 555 (lunes a viernes, 9-18h).
    3. "Email" — hola@verticecinco.com (respondemos en menos de 24h).
4.3 Bloque mapa: rectangulo gris #E5E9EE de 400px de alto con un SVG de marcador centrado color primario y una etiqueta flotante "Vertice Cinco — Malaga". No es un mapa real, es un placeholder estilizado.
4.4 Footer comun.

REQUISITOS TECNICOS

- SPA: navegacion entre las 4 vistas via JS, mostrar/ocultar secciones por id, actualizar hash de la URL.
- Responsive impecable: breakpoints 1280, 1024, 768, 480. Mobile-first.
- Accesibilidad: roles ARIA en menu, tabs, acordeon y modal. Foco visible en todos los interactivos. Contraste AA minimo.
- Animaciones: usa IntersectionObserver para activar entradas suaves (fade-up 30px, 600ms easeOut) en titulos, tarjetas y bandas. Count-up con requestAnimationFrame para los contadores. Barras de progreso con transition de width al entrar en viewport.
- Sticky header con sombra que aparece al hacer scroll > 80px.
- Boton "volver arriba" circular en la esquina inferior derecha que aparece al hacer scroll > 400px.
- Sin librerias de slider/carrusel: implementa el slider del hero, el de testimonios y el marquee de logos con CSS + JS minimo propio.

TONO Y COPY

Espanol neutro de Espana. Frases cortas. Verbos en activo. Cero jerga marketinera. Evita absolutamente:
- "Soluciones a medida"
- "Pasion por lo que hacemos"
- "Excelencia"
- "Sinergia"
- "Innovacion disruptiva"
- "Llevamos tu negocio al siguiente nivel"
- "Equipo de profesionales altamente cualificados"
- "Apostamos por"
- "Comprometidos con la calidad"
- Cualquier frase con "transformar", "potenciar", "impulsar" en abstracto.

Si necesitas inventar copy adicional para huecos no especificados, escribe como hablaria un consultor con 15 anos de experiencia que ya no tiene paciencia para vender humo.

ENTREGABLE

HTML completo en un solo archivo. Listo para abrir directamente en navegador. Sin dependencias locales. Todas las imagenes via picsum.photos. Todos los iconos via Lucide CDN.

No incluyas comentarios HTML que mencionen ninguna fuente de inspiracion, ningun theme, ninguna agencia o web original.


---

## 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>
```
18.507 caracteres · 320 líneas Licencia libre · uso comercial permitido
CAPTURA COMPLETA · HOME
PROMPTS RELACIONADOS · AGENCIA DIGITAL
Otros prompts de la misma categoría

Ficha de marca
Nombre: Vertice Cinco
Categoria principal: Corporativo
Categorias secundarias: Agencia digital, Portafolio
Sector: Consultoria estrategica para pequenas y medianas empresas
Claim: Cinco palancas, una sola direccion.
Telefono: +34 951 000 555
Direccion: Avenida del Comercio 18, planta 3, Malaga
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
Vertice Cinco — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Otros prompts de la misma categoría

Lectora Nova

Lectora Nova

Lectoria

Línea Áurea
