SIN FINES DE LUCRO · Claude Design · HTML

PrestamoRueda — Prompt de diseño web para Claude AI

★★★★★4,9 3.054 descargas

Finanzas de consumo, créditos para la compra de vehículos Financiamos tu próximo coche sin complicaciones.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web estática completa (HTML único) que reproduzca el diseño visual y la estructura del sitio descrito, usando únicamente Tailwind CSS CDN y JavaScript vanilla. La marca es **PrestamoRueda**, un servicio SaaS de préstamos para automóviles.

**Requisitos generales**
- Usa la paleta de colores: primario #0D47A1 (azul oscuro), secundario #1976D2 (azul medio), acento #FFB300 (ámbar), fondo #F5F7FA (gris muy claro), texto #212121 (gris oscuro).
- Tipografía: Inter (peso 400/600) para cuerpo y títulos, cargada desde Google Fonts.
- Implementa scroll suave y animaciones de entrada (fade/slide) usando IntersectionObserver.
- Todas las secciones deben ser anclables mediante IDs: #hero, #about, #features, #faq, #contact.
- El header es sticky, con logo SVG (placeholder), enlaces: Home, About Us, Features, FAQ, Contact Us y botones "Log In" y "Sign Up" con estilos secundarios y primarios.
- El hero ocupa la pantalla completa, con un layout de dos columnas: texto a la izquierda (título grande, span resaltado en color ámbar, párrafo y botón principal) y a la derecha una composición de tres imágenes superpuestas (una grande y dos pequeñas) que simulan un coche y detalle de pantalla.
- Botón principal: fondo #1976D2, texto blanco, ícono de flecha derecha.
- Contadores debajo del hero: una fila de cuatro bloques, cada uno con número grande animado (0→valor), sufijo (K, %, Y, $) y etiqueta descriptiva. Usa CSS personalizado para la animación de conteo.
- Sección "Sobre nosotros": grid de dos columnas, texto a la izquierda, ilustración a la derecha, fondo blanco.
- Sección "Características": tres columnas centradas, cada una con icono circular (placeholder), título en negrita y párrafo breve.
- Sección FAQ: acordeón vertical, cada ítem con pregunta en negrita y respuesta oculta que se despliega al click. Usa transiciones de altura.
- Sección Contacto: formulario de 4 campos (nombre, email, teléfono, mensaje) con validación básica; botón de envío azul. Debajo, un iframe de Google Maps estático (coordenadas ficticias).
- Footer: fondo #212121, texto claro, columnas con logo, breve descripción, enlaces de navegación secundaria y iconos de redes (Facebook, Twitter, LinkedIn) en color ámbar.
- Todos los textos deben estar en español de España, originales, sin copiar del original.
- Añade meta viewport, título "PrestamoRueda – Préstamos para coche" y descripción meta.
- No incluyas ninguna URL externa del sitio original.
- Optimiza para móviles: menú hamburguesa que despliega la navegación en pantalla pequeña.
- Incluye script al final que inicializa los contadores y los acordeones.

Devuelve el código listo para copiar y pegar en un archivo index.html.

---

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

3.034 caracteres · 40 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

PROMPTS RELACIONADOS · SIN FINES DE LUCRO

Otros prompts de la misma categoría

Ficha de marca

Nombre: PrestamoRueda
Sector: Finanzas de consumo, créditos para la compra de vehículos
Claim: Financiamos tu próximo coche sin complicaciones

Bloques de la home

1.1 Barra de navegación fija con logo, enlaces ancla y botones de acceso y registro
2.1 Hero con título destacado, subtítulo descriptivo, botón principal y composición de imágenes superpuestas
3.1 Bloque de contadores animados mostrando métricas clave (clientes, satisfacción, experiencia, financiación)
4.1 Sección "Sobre nosotros" con texto y gráfico ilustrativo
5.1 Sección de características en columnas con iconos y descripciones
6.1 Preguntas frecuentes en formato acordeón
7.1 Formulario de contacto con campos básicos y mapa estático
8.1 Footer con enlaces de navegación, información legal 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

PrestamoRueda — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Otros prompts de la misma categoría

JurisNova

Lexora Advisory

Lexora Consulting

Lexora Consultores