SAAS / STARTUP · Claude Design · HTML

VoltioLab — Prompt de diseño web para Claude AI

★★★★★4,7 1.888 descargas

Desarrollo de plataformas y componentes UI para vehículos eléctricos Herramientas de diseño para la movilidad eléctrica.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web estático completo (HTML único) usando Tailwind CSS CDN y JavaScript vanilla. La marca es "VoltioLab", una startup de UI kits para vehículos eléctricos. Utiliza la paleta de colores: primario #8CC63F (verde limpio), acento 1 #00BCFF (azul cian), acento 2 #00CF7F (verde lima), acento 3 #FF7361 (rojo coral), acento 4 #FF4D12 (naranja fuerte), acento 5 #B659FF (violeta). Tipografía principal: Inter, peso 400‑600, cargada desde Google Fonts.

Estructura del HTML:

<header class="bg-white shadow-md fixed w-full z-10"> con logo SVG placeholder, menú responsivo con enlaces "Figma", "Homepages", "Innerpages", "Utilitypages" y botón secundario "Contactar" (estilo "button-primary"). Incluye icono de búsqueda que despliega un overlay de formulario.

<section id="hero" class="pt-24 bg-gray-50 relative overflow-hidden"> contiene:
- título h1 grande, texto: "VoltioLab - UI Kit de carga eléctrica";
- botón primario con fondo #8CC63F, texto "Descargar ahora" y animación de slide‑in del icono;
- ilustración vectorial decorativa (usar placeholder <img> con alt="Vector del banner").

Debajo, una galería de 5 imágenes (placeholder) alineadas como en el original, con clases de Tailwind para responsividad.

<section id="features" class="py-16 bg-white"> grid de 2 columnas (lg:grid-cols-2) que muestra "30+ Secciones" con dos imágenes y título grande. Usa clases de texto gris oscuro y espaciado.

<section id="demo" class="py-12 bg-gray-100"> tarjeta centrada con número grande "3", subtítulo "demos únicos" y párrafo descriptivo breve.

<section id="icon-info" class="py-12 bg-white"> bloque con icono multicolor (SVG con los colores de la paleta), título "Archivo Figma disponible", texto descriptivo y botón blanco con borde #8CC63F que dice "Descargar".

<footer class="bg-gray-900 text-gray-200 py-8"> incluye logo, enlaces de navegación, email de contacto y botón "Volver arriba" con icono.

Interactividad: 
- Menú hamburger en móviles que muestra/oculta la navegación.
- Botón de búsqueda abre/cierra overlay.
- Smooth scroll para enlaces de ancla.
- Efecto hover en botones (cambio de fondo a #6FA52F).

Requisitos técnicos: usar solo HTML, Tailwind CDN (<link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css\" rel=\"stylesheet\">), script al final para el menú y la búsqueda, sin dependencias externas. Todo el contenido textual debe ser original en español de España, sin copiar del original. No incluir precios ni datos de producto reales.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Encabezado con logo, menú y botón de contacto
1.2 Banner principal con título, botón primario y vector
1.3 Galería de imágenes del banner
1.4 Sección Figma: 30+ secciones, imágenes y título
1.5 Demo destacado: número 3, título y breve descripción
1.6 Icono informativo: detalle del archivo Figma y botón de compra

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: VoltioLab
Sector: Desarrollo de plataformas y componentes UI para vehículos eléctricos
Claim: Herramientas de diseño para la movilidad eléctrica

Bloques de la home

1.1 Encabezado con logo, menú de navegación y botón de contacto
1.2 Banner principal con título, botón primario y vector ilustrativo
1.3 Galería de imágenes del banner
1.4 Sección de recursos Figma: grid de 2 columnas con imágenes y contador de secciones
1.5 Bloque de demos: número, título y descripción
1.6 Bloque de iconos resaltando disponibilidad de archivo Figma y botón de acción

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

VoltioLab — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

Otros prompts de la misma categoría

JurisNova

Kinetix Flow

KitePulse

Lumen Docs