Web con estilo JSON

Partiendo de un estilo concreto genramos una web con estilo JSON.

Estos son los pasos que he seguido para diseñar la web:

1.- Busco un estilo para mi web Benchmarking con competidores.

2.- Extraigo el estilo con la ayuda de Gemini y consigo un archivo JSON.

3.- Consigo un prompt detallado para el diseño y le añado el JSON

4.- En Antigravity le lanzo el prompt y espero resultado.

Estos son los prompt utilizados:

Análisis de estilo en JSON:

Partiendo de la captura adjunta, genera un JSON con la información necesaria para replicar el estilo (colores, estructura visual, elementos, equilibrio, jerarquía, contraste, proximidad, alineación, repetición y demás principios del diseño que identifiques).

Analiza el estilo visual sin describir las imágenes, ni copiar el contenido.

Prompt

Genera la [HOME] de una página web de una [CLINICA DENTAL] que contenga los elementos esenciales de UX.

Para el estilo quiero que utilices la guía en JSON:

[PEGA EL JSON]

Solo necesito el código en HTML, CSS y JavaScript, sin librerías externas.

Prompt mejorado.

Actúa como diseñador web senior + UX/UI. Tu tarea es generar SOLO la [PÁGINA: HOME] de un sitio web para [NEGOCIO: CLÍNICA DENTAL] orientado a [OBJETIVO: captar citas].

RESTRICCIONES TÉCNICAS

– Devuelve ÚNICAMENTE código: HTML + CSS + JavaScript en un solo bloque (un archivo HTML con <style> y <script> embebidos).

– Sin librerías externas, sin fuentes externas, sin imágenes externas. Usa SVGs inline y/o placeholders (gradientes, formas, initials).

– Responsive mobile-first, accesible (WCAG básico): contraste, focus visible, labels, navegación por teclado, aria donde aplique.

– Performance: CSS limpio, JS mínimo, nada de animaciones pesadas.

INPUT DE ESTILO (OBLIGATORIO)

– Usa estrictamente esta guía visual en JSON para: colores, tipografías (fallbacks del sistema), tamaños, espaciados, radios, sombras, iconografía, botones y estados.

[PEGA EL JSON AQUÍ]

CONTEXTO Y TONO

– Público: [familias / adultos / estética dental]. Ubicación: [CIUDAD]. Idioma: español (España).

– Copy profesional, cercano, sin claims médicos absolutos. Evita “garantizado”, “100%”, etc.

OBJETIVO UX DE LA HOME (PRIORIZACIÓN)

1) Entender en 5 segundos: qué hacen, para quién, dónde, y cómo reservar.

2) Maximizar conversión a “Pedir cita” con CTAs claros, sticky en móvil.

3) Reducir fricción: confianza (equipo, reseñas), procesos, precios orientativos (si procede), preguntas frecuentes.

ESTRUCTURA OBLIGATORIA DE LA HOME (SECCIONES)

1) Header fijo:

   – Logo (texto), menú (anclas), CTA principal “Pedir cita”.

   – En móvil: hamburguesa accesible (aria-expanded, trap focus al abrir).

2) Hero (above the fold):

   – H1 con propuesta de valor + subtítulo.

   – 2 CTAs: Primario “Pedir cita” (abre modal) y secundario “Ver tratamientos”.

   – 3 “benefits bullets” con icono (SVG simple).

   – Bloque “microconfianza” (⭐ rating + nº reseñas placeholder + horario).

3) Social proof:

   – 3 tarjetas de reseñas (nombre, iniciales, texto corto, estrellas).

   – “Antes/Después” NO real: usa cards informativas tipo “Casos reales (bajo consulta)” sin imágenes externas.

4) Servicios/Tratamientos (grid):

   – 6 cards: Limpieza, Ortodoncia, Implantes, Estética, Urgencias, Odontopediatría.

   – Cada card con: título, beneficio, duración orientativa, link “Detalles”.

5) Proceso de cita (3 pasos):

   – Paso 1: Reserva, Paso 2: Diagnóstico, Paso 3: Plan y seguimiento.

6) Equipo:

   – 2–3 perfiles con avatar placeholder (círculo con iniciales), especialidad y “años de experiencia” placeholder.

7) FAQ (acordeón accesible):

   – 6 preguntas típicas (dolor, financiación, urgencias, primera visita, niños, seguros).

8) Ubicación y contacto:

   – Dirección, “Cómo llegar” (texto), horario, teléfono, WhatsApp (simulado), email.

   – Mapa: bloque estilizado (no embed externo).

9) CTA final (band):

   – Mensaje + botón “Pedir cita”.

10) Footer:

   – Links legales (placeholders), aviso cookies (solo UI, sin cumplimiento legal completo), redes (iconos SVG).

INTERACCIONES JS OBLIGATORIAS (sin librerías)

– Modal “Pedir cita” con formulario:

  – Campos: Nombre, Teléfono (validación simple), Email, Motivo (select), Preferencia horario (mañana/tarde), Mensaje.

  – Validación inline + mensajes de error accesibles.

  – Al enviar: simula éxito (sin backend) + resumen de datos.

– Sticky CTA en móvil (barra inferior) con botón “Pedir cita” y “Llamar”.

– Acordeón FAQ accesible.

– Menú móvil accesible.

SISTEMA DE DISEÑO Y CONSISTENCIA

– Usa variables CSS (:root) derivadas del JSON: colores, spacing scale, radius, shadow, font sizes.

– Componentiza con clases reutilizables: .btn, .card, .section, .container, .grid, .badge.

– Mantén coherencia tipográfica (jerarquía clara: H1, H2, body, small).

– Estados: hover, active, focus, disabled en botones y inputs.

CONTENIDO Y MICROCOPY (ENTREGABLE)

– Escribe el copy completo de la HOME (no “lorem ipsum”).

– Incluye microcopy de confianza: “Primera visita informativa”, “Atención a urgencias”, “Financiación disponible” (sin promesas absolutas).

SALIDA

– Devuelve SOLO el código final (sin explicaciones).