SAAS / STARTUP · Claude Design · HTML

Vortexia Studio — Prompt de diseño web para Claude AI

★★★★★4,7 1.549 descargas

Estudio creativo digital y portfolio para freelancers y agencias Diseñamos marcas que se mueven antes de hablar.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web single-file (un único archivo HTML autocontenido) para el estudio creativo ficticio 'Vortexia Studio' usando HTML + Tailwind CSS por CDN + JavaScript vanilla. Sin frameworks externos, sin build, sin dependencias adicionales más allá de Tailwind CDN y Google Fonts.

MARCA FICTICIA
- Nombre: Vortexia Studio
- Sector: estudio creativo digital especializado en branding, diseño web y motion design para startups y marcas emergentes
- Dominio: vortexiastudio.com
- Claim: 'Diseñamos marcas que se mueven antes de hablar'
- Email: hola@vortexiastudio.com
- Teléfono ficticio: +34 911 884 207
- Dirección ficticia: Calle de la Encarnación 14, 28013 Madrid
- Año: 2025
- Fundador ficticio: Aitor Belmonte, Director Creativo

ALCANCE
Genera SOLO la HOME completa con todas las secciones, header sticky y footer. Idioma español de España. Copy 100% original, no marketinero, verbos en activo, sin precios.

STACK Y REQUISITOS TÉCNICOS
- HTML5 semántico, accesible (aria-labels, alt en imágenes, contraste AA).
- Tailwind CSS vía CDN (script de Tailwind Play CDN).
- Google Fonts: 'Instrument Serif' para displays y 'Inter' para texto.
- JavaScript vanilla embebido para: menú móvil, marquesina infinita, contadores animados (IntersectionObserver), slider de testimonios, hover reveal en servicios y acordeones si los hay.
- Imágenes: usa placeholders de https://picsum.photos/seed/XXX/W/H con seeds distintos por imagen para que sean estables.
- Responsive total: breakpoints sm, md, lg, xl. Mobile-first.
- Microinteracciones sutiles con transiciones CSS (hover, scroll reveal opcional con IntersectionObserver).

PALETA (oscura, alto contraste)
- Fondo principal: #0B0B0C
- Fondo secundario / tarjetas: #131316
- Texto principal: #F4F1EC (blanco hueso)
- Texto secundario: #8A8A92
- Acento cálido: #E4FF3A (lima eléctrico) para botones, números y detalles
- Línea / borde: #26262B

TIPOGRAFÍA
- Display (h1, h2 grandes, números de sección): Instrument Serif, italic en algunas palabras clave, tracking apretado, tamaños muy grandes (clamp 56px a 160px en hero).
- Texto: Inter, pesos 400 y 500, tamaño base 16-18px, line-height generoso.
- Etiquetas y meta: Inter uppercase, tracking amplio, 12px.

HEADER (sticky, fondo translúcido con blur)
- Izquierda: logotipo wordmark 'Vortexia⁕' en serif.
- Centro: navegación con enlaces Inicio, Estudio, Servicios (04), Trabajos (05), Diario, Páginas (dropdown), Contacto.
- Derecha: mini-bloque con avatar circular del fundador, texto 'Habla con Aitor · Director' y botón circular 'Iniciar proyecto →' con borde lima en hover.
- Versión móvil: menú hamburguesa que abre overlay a pantalla completa con enlaces grandes en serif, redes sociales, email y teléfono.

HOME, SECCIÓN A SECCIÓN

1.1 HERO pantalla completa
- Fondo #0B0B0C con un sutil grano CSS (noise) y un degradado radial muy tenue.
- Eyebrow arriba a la izquierda: 'Estudio creativo · Madrid · Remoto'.
- Titular gigante en Instrument Serif, 3 líneas, ejemplo: 'Diseñamos / marcas que / *respiran movimiento*' con 'respiran movimiento' en italic y color lima.
- A la derecha, columna corta con párrafo breve (2 líneas) describiendo el estudio y un botón circular grande (140px) con flecha animada que rota en hover, texto 'Ver trabajos'.
- Abajo izquierda: tarjeta horizontal con foto del fundador, punto verde de disponibilidad y texto 'Disponibles para 2 proyectos en otoño'.
- Abajo derecha: indicador de scroll discreto.

1.2 MARQUESINA DE CLIENTES
- Franja a ancho completo con animación infinita en JS (duplicar nodos) a velocidad lenta.
- 10 nombres de clientes ficticios en wordmarks tipográficos: Nordel, Kintsu, Maravia, Otto&Pine, Helika, Quanta·Lab, Brindo, Lorewood, Sablefish, Verdén.
- Separadores con asteriscos lima.

1.3 SOBRE EL ESTUDIO
- Dos columnas. Izquierda: etiqueta '(01) El estudio' y un párrafo grande en serif a unos 40px sobre el enfoque del estudio (sin claims tipo 'líder' o 'mejor').
- Derecha: lista de capacidades en dos columnas pequeñas: Identidad verbal, Sistemas de marca, Dirección de arte, Diseño web, Motion, Packaging, Tipografía custom, Estrategia.

1.4 SERVICIOS NUMERADOS
- Lista vertical, 4 filas (01 Branding, 02 Diseño web, 03 Motion & Video, 04 Estrategia creativa).
- Cada fila ocupa todo el ancho con número grande a la izquierda, título en serif en el centro y flecha a la derecha.
- En hover desktop: aparece una imagen flotante asociada al cursor (efecto cursor-follow) y la fila se ilumina en lima muy tenue.
- Línea divisoria fina entre filas.

1.5 PORTFOLIO DESTACADO
- Etiqueta '(02) Trabajos seleccionados'.
- Grid asimétrico de 5 proyectos (combinación de columnas: 2/1, 1/2, 1/1) con imágenes de picsum, overlay oscuro con título del proyecto y tag de categoría.
- Proyectos ficticios: 'Kintsu — Identidad para una marca de cerámica', 'Helika OS — Diseño de producto', 'Brindo — Packaging de vermut', 'Otto&Pine — Web y motion', 'Verdén — Sistema editorial'.
- Botón al final 'Ver todos los trabajos' circular grande.

1.6 CONTADORES
- Franja oscura con 4 contadores grandes animados al entrar en viewport.
- Cifras ficticias: 142 proyectos entregados / 09 años de estudio / 38 clientes recurrentes / 21 premios y menciones.
- Cada número en Instrument Serif gigante, etiqueta debajo en Inter mayúsculas.

1.7 PROCESO DE TRABAJO
- 4 pasos en horizontal (responsive a vertical en móvil): 01 Inmersión, 02 Concepto, 03 Diseño, 04 Entrega y soporte.
- Cada paso con número serif, título y párrafo breve. Línea fina conectora entre pasos.

1.8 TESTIMONIOS
- Slider horizontal en JS con flechas y dots.
- 3 testimonios ficticios atribuidos a personas inventadas con cargo y empresa: Marta Solís — Cofundadora de Kintsu; Iván Brescia — CEO de Helika; Lucía Andrade — Directora de marca en Brindo.
- Citas en serif a 28-32px, autor y cargo en Inter pequeño.

1.9 EQUIPO
- Grid de 4 tarjetas: Aitor Belmonte (Dirección creativa), Noa Saiz (Diseño de marca), Tomás Quiroga (Motion), Júlia Vendrell (Estrategia).
- Foto en blanco y negro (picsum grayscale), nombre, rol y 2 iconos sociales por miembro.

1.10 DIARIO (BLOG)
- Etiqueta '(03) Diario'.
- 3 tarjetas horizontales con imagen pequeña a la izquierda, categoría arriba (Notas, Procesos, Cultura), título en serif y fecha.
- Títulos ficticios: 'Cuándo el sistema de marca empieza a estorbar', 'Notas sobre el ritmo en motion design', 'Tipografías que envejecen bien'.

1.11 CTA FINAL
- Sección a ancho completo, fondo #131316.
- Titular enorme en serif: '¿Tienes algo / entre manos?' centrado, con la segunda línea en italic.
- Debajo, botón circular gigante (180px) con 'Escríbenos →' en el centro.
- Email visible debajo: hola@vortexiastudio.com.

1.12 FOOTER
- Fondo #0B0B0C, padding generoso.
- Fila superior: logotipo grande 'Vortexia⁕' a la izquierda y a la derecha 4 columnas: Estudio (enlaces), Servicios, Recursos, Legal.
- Fila media: bloque con email, teléfono y dirección de Madrid; al lado, iconos sociales (X, Instagram, Behance, Dribbble, LinkedIn, Vimeo).
- Fila inferior: línea fina y texto pequeño '© 2025 Vortexia Studio. Todos los derechos reservados.' + selector de idioma (ES/EN) decorativo.
- En esquina inferior derecha, asterisco lima animado en rotación lenta.

DETALLES FINALES
- Cuida los espacios verticales generosos (py-24 a py-40 en secciones grandes).
- Usa max-w-7xl centrado para contenidos, con secciones full-bleed cuando corresponda.
- Que el resultado sienta editorial, oscuro, contemporáneo y con personalidad serif italic + acentos lima eléctrico.
- Asegura que todo funcione abriendo el archivo HTML directamente en el navegador, sin servidor.

---

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

7.949 caracteres · 133 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Hero pantalla completa con titular gigante y avatar fundador
1.2 Marquesina infinita de logotipos de clientes
1.3 Bloque 'Sobre el estudio' con capacidades
1.4 Servicios numerados 01-04 con reveal
1.5 Portfolio destacado en grid asimétrico
1.6 Contadores animados sobre franja oscura
1.7 Proceso de trabajo en 4 pasos
1.8 Testimonios en slider horizontal
1.9 Equipo en grid de tarjetas
1.10 Blog: 3 últimas entradas
1.11 CTA final 'Empecemos un proyecto'
1.12 Footer oscuro con columnas y redes

SOBRE NOSOTROS

2.1 Hero con titular y breadcrumb
2.2 Historia del estudio en dos columnas con foto
2.3 Valores en grid de 4 tarjetas con icono
2.4 Línea de tiempo con hitos por año
2.5 Equipo ampliado con bio corta
2.6 Premios y reconocimientos en lista
2.7 CTA final y footer

SERVICIOS

3.1 Hero de servicios con titular y descripción
3.2 Lista completa de servicios con descripción larga
3.3 Bloque de tecnologías y herramientas en marquesina
3.4 Comparativa de paquetes en 3 columnas (sin precio concreto)
3.5 FAQ en acordeón
3.6 CTA final y footer

PROYECTOS

4.1 Hero con título y filtros por categoría
4.2 Grid masonry de proyectos con hover
4.3 Bloque de cliente destacado tipo case study
4.4 CTA final y footer

DETALLE DE PROYECTO

5.1 Hero del proyecto con imagen grande y meta (cliente, año, rol)
5.2 Resumen del reto en dos columnas
5.3 Galería de imágenes a ancho completo
5.4 Resultados con métricas
5.5 Navegación a siguiente proyecto
5.6 Footer

BLOG

6.1 Hero del blog con buscador y categorías
6.2 Entrada destacada grande
6.3 Grid de entradas en 3 columnas con paginación
6.4 Newsletter y footer

DETALLE DE BLOG

7.1 Hero del artículo con categoría, título y meta
7.2 Cuerpo del artículo con índice lateral
7.3 Bloque de autor
7.4 Artículos relacionados
7.5 Footer

CONTACTO

8.1 Hero de contacto con titular grande
8.2 Formulario en 2 columnas con datos de contacto al lado
8.3 Mapa estilizado y horarios
8.4 Footer

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: Vortexia Studio
Sector: Estudio creativo digital y portfolio para freelancers y agencias
Claim: Diseñamos marcas que se mueven antes de hablar

Bloques de la home

1.1 Hero a pantalla completa con titular gigante, subtítulo a la izquierda, botón circular animado y avatar del fundador con disponibilidad
1.2 Marquesina infinita con logotipos de clientes ficticios en fondo oscuro
1.3 Bloque 'Sobre el estudio' con texto grande a la izquierda y lista de capacidades a la derecha
1.4 Servicios numerados (01-04) en lista vertical con imagen reveal en hover
1.5 Portfolio destacado en grid asimétrico con tags por proyecto y enlaces 'ver caso'
1.6 Contadores animados (proyectos, años, clientes, premios) sobre franja oscura
1.7 Proceso de trabajo en 4 pasos con líneas conectoras y números grandes
1.8 Testimonios en slider horizontal con avatar, cita y empresa ficticia
1.9 Equipo en grid de tarjetas con foto, rol y enlaces sociales
1.10 Blog: últimas 3 entradas en tarjetas con categoría, fecha y título
1.11 CTA final tipo 'Empecemos un proyecto' con titular enorme y botón circular
1.12 Footer oscuro con logo grande, columnas de navegación, redes sociales, email/teléfono y aviso legal

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