Convertir un diseño de Figma en HTML semántico y CSS responsive

Prompt

Actúa como maquetador frontend sénior que traduce diseños a HTML y CSS fieles, accesibles y fáciles de mantener.

Contexto:
- Descripción del diseño: {{diseno}}
- Medidas de referencia y puntos de ruptura: {{breakpoints}}
- Enfoque de CSS: {{enfoque_css}}
- Navegadores que hay que soportar: {{navegadores}}

Antes de maquetar, enumera lo que el diseño no define (estados hover y foco, comportamiento en móvil, textos largos, estados vacíos) y pregúntame lo que sea imprescindible.

Entregables:
1. El esquema del documento: landmarks (header, nav, main, footer), jerarquía de encabezados y elección de elementos (button frente a enlace, listas, figure).
2. Los tokens extraídos del diseño como propiedades personalizadas: colores, espaciados, radios, sombras y escala tipográfica, con tipografía fluida mediante clamp().
3. El HTML semántico completo de la sección o página.
4. El CSS mobile-first con Grid y Flexbox, sin alturas fijas ni números mágicos, y con estados :hover, :focus-visible y de desactivado.
5. Imágenes con width y height, srcset y sizes, loading="lazy" excepto en la imagen principal, y textos alternativos útiles o vacíos si son decorativas.
6. Comprobación del contraste de los colores del diseño, con alternativas si alguno no llega al nivel AA de WCAG.
7. Una lista de decisiones que tomaste donde el diseño era ambiguo, para revisarla con quien diseñó.

Restricciones:
- Nada de divs anidados sin motivo ni clases que describan el aspecto en lugar de la función, salvo con Tailwind.
- No inventes textos ni datos: usa [COMPLETAR] donde falte copy.
- Respeta prefers-reduced-motion si añades transiciones.

Formato: esquema, tokens, HTML y CSS en bloques separados, y la lista de decisiones al final.

Cómo usarlo

Ejemplo de uso

Resultado de ejemplo

:root {
  --color-fondo: #F6F1EA;
  --color-primario: #1F4D3A;
  --color-texto: #1B1B1B;
  --espacio-m: 1.5rem;
  --espacio-l: clamp(2rem, 5vw, 4rem);
  --radio: 0.75rem;
  --texto-titular: clamp(2rem, 1.2rem + 3.5vw, 3rem); /* 48 px en escritorio */
  font-family: 'Inter', system-ui, sans-serif;
}

.hero {
  display: grid;
  gap: var(--espacio-m);
  padding-block: var(--espacio-l);
  background: var(--color-fondo);
}

.hero h1 { font-size: var(--texto-titular); line-height: 1.1; }

@media (min-width: 48rem) {
  .hero { grid-template-columns: 1fr 1fr; align-items: center; }
}

.boton {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radio);
  background: var(--color-primario);
  color: #fff;
}
.boton:hover { background: color-mix(in srgb, var(--color-primario) 85%, black); }
.boton:focus-visible { outline: 3px solid var(--color-primario); outline-offset: 3px; }

Datos clave

Categoría

Programación y desarrollo · HTML y CSS

Tipo de resultado

Código

Nivel

Intermedio

Pensado para

ChatGPT, Claude, Gemini y Microsoft Copilot

Verificado en

Pendiente de verificación editorial

Variables

Descripción del diseño, Puntos de ruptura, Enfoque de CSS y Navegadores

Idioma

Español

Precio

Gratis, sin registro

Actualizado

07/11/2026

Preguntas frecuentes