NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una web single-file (HTML + Tailwind por CDN + JS vanilla) para una marca ficticia llamada **Helixmar Bioworks**, un laboratorio de investigación biomédica y biotecnología aplicada con sede ficticia en Valencia. Dominio: helixmar.com. Email: hola@helixmar.com. Año: 2025. Claim: "Ciencia rigurosa al servicio de respuestas útiles". Todo el copy en español de España, original, con tono técnico-editorial sereno, verbos en activo y sin lenguaje marketinero. No incluyas precios concretos.
## Stack y requisitos técnicos
- Un único archivo HTML autocontenido.
- Tailwind CSS vía CDN (`https://cdn.tailwindcss.com`).
- Fuentes Google: **Fraunces** (serif, para titulares y números grandes) e **Inter** (sans, para cuerpo y UI).
- JS vanilla para: menú móvil, dropdown del menú, tabs, acordeón FAQ,
10.518 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
10.518 caracteres · licencia libre
Solo descarga completa disponible
CAPTURA COMPLETA · HOME
Para que Claude replique el diseño con máxima fidelidad, descarga la imagen y adjúntala en tu chat.
Descargar captura
ESTRUCTURA DEL SITIO
Tabla de secciones
HOME
- 1.1 Header con navegación y carrito
- 1.2 Hero editorial con mosaico de imágenes
- 1.3 Tira de instituciones colaboradoras
- 1.4 Propósito con micro-stats
- 1.5 Áreas de investigación en grid
- 1.6 Servicios científicos en lista numerada
- 1.7 Caso de estudio destacado
- 1.8 Contadores animados
- 1.9 Publicaciones recientes
- 1.10 Equipo científico
- 1.11 Testimonios de socios
- 1.12 Proceso de colaboración
- 1.13 CTA final
- 1.14 Footer
SERVICIOS
- 2.1 Header
- 2.2 Hero de servicios con titular y descripción
- 2.3 Listado completo de servicios con tabs por categoría
- 2.4 Bloque de metodología en pasos
- 2.5 Comparativa de planes/paquetes
- 2.6 CTA intermedio
- 2.7 FAQ acordeón
- 2.8 Footer
INVESTIGACIÓN
- 3.1 Header
- 3.2 Hero con filtros por área
- 3.3 Grid de proyectos de investigación con imagen y resumen
- 3.4 Bloque destacado de proyecto en curso
- 3.5 Línea temporal de hitos
- 3.6 CTA para colaborar
- 3.7 Footer
CASO DE ESTUDIO
- 4.1 Header
- 4.2 Hero del caso con imagen amplia y metadatos
- 4.3 Resumen ejecutivo a dos columnas
- 4.4 Galería de imágenes del proyecto
- 4.5 Resultados clave en cifras
- 4.6 Citas del equipo investigador
- 4.7 Casos relacionados
- 4.8 Footer
SOBRE NOSOTROS
- 5.1 Header
- 5.2 Hero de marca con manifiesto
- 5.3 Historia del laboratorio en timeline
- 5.4 Valores en grid de iconos
- 5.5 Equipo completo en grid
- 5.6 Instalaciones con galería
- 5.7 CTA de contacto
- 5.8 Footer
CONTACTO
- 6.1 Header
- 6.2 Hero breve con datos de contacto
- 6.3 Formulario amplio + información lateral (dirección, email, horario)
- 6.4 Mapa de ubicación
- 6.5 Footer
PRECIOS
- 7.1 Header
- 7.2 Hero de planes
- 7.3 Tabla de planes con tres columnas y toggle mensual/anual
- 7.4 Comparativa detallada de características
- 7.5 FAQ
- 7.6 CTA final
- 7.7 Footer
PLAN DETALLE
- 8.1 Header
- 8.2 Hero del plan con resumen y precio
- 8.3 Lista de prestaciones incluidas
- 8.4 Bloque de proceso de contratación
- 8.5 Testimonios
- 8.6 CTA de contratación
- 8.7 Footer
PUBLICACIONES
- 9.1 Header
- 9.2 Hero con buscador y filtros por categoría
- 9.3 Grid de publicaciones con paginación
- 9.4 Newsletter inline
- 9.5 Footer
PUBLICACIÓN POST
- 10.1 Header
- 10.2 Cabecera del artículo con metadatos
- 10.3 Cuerpo del artículo a una columna con tipografía editorial
- 10.4 Bloque de autor
- 10.5 Posts relacionados
- 10.6 Footer
GUÍA DE ESTILo
- 11.1 Header
- 11.2 Tipografía, colores, botones, formularios y componentes
- 11.3 Footer
404
- 12.1 Header
- 12.2 Mensaje 404 centrado con CTA al inicio
- 12.3 Footer
PROMPTS RELACIONADOS · SALUD Y MEDICINA