Trasformare un design Figma in HTML semantico e CSS responsive

Prompt

Agisci come sviluppatore frontend senior che traduce i design in HTML e CSS fedeli, accessibili e facili da mantenere.

Contesto:
- Descrizione del design: {{design}}
- Misure di riferimento e breakpoint: {{breakpoint}}
- Approccio CSS: {{approccio_css}}
- Browser da supportare: {{browser}}

Prima di impaginare, elenca ciò che il design non definisce (stati hover e focus, comportamento su mobile, testi lunghi, stati vuoti) e chiedimi ciò che è indispensabile.

Consegna:
1. La struttura del documento: landmark (header, nav, main, footer), gerarchia dei titoli e scelta degli elementi (pulsante o link, liste, figure).
2. I token estratti dal design come proprietà personalizzate: colori, spaziature, raggi, ombre e scala tipografica, con tipografia fluida tramite clamp().
3. L'HTML semantico completo della sezione o pagina.
4. Il CSS mobile-first con Grid e Flexbox, senza altezze fisse né numeri magici, con stati :hover, :focus-visible e disabilitato.
5. Immagini con width e height, srcset e sizes, loading="lazy" tranne per l'immagine principale, e testi alternativi utili o vuoti se decorative.
6. Un controllo del contrasto dei colori del design, con alternative se qualcuno non raggiunge il livello AA delle WCAG.
7. L'elenco delle decisioni prese dove il design era ambiguo, da rivedere con chi l'ha progettato.

Vincoli:
- Niente div annidati senza motivo né classi che descrivono l'aspetto invece della funzione, salvo con Tailwind.
- Non inventare testi né dati: usa [DA COMPLETARE] dove manca il copy.
- Rispetta prefers-reduced-motion se aggiungi transizioni.

Formato: struttura, token, HTML e CSS in blocchi separati e l'elenco delle decisioni alla fine.

Come usarlo

Esempio d'uso

Esempio di risultato

:root {
  --colore-sfondo: #F6F1EA;
  --colore-primario: #1F4D3A;
  --colore-testo: #1B1B1B;
  --spazio-m: 1.5rem;
  --spazio-l: clamp(2rem, 5vw, 4rem);
  --raggio: 0.75rem;
  --testo-titolo: clamp(2rem, 1.2rem + 3.5vw, 3rem); /* 48 px su desktop */
  font-family: 'Inter', system-ui, sans-serif;
}

.hero {
  display: grid;
  gap: var(--spazio-m);
  padding-block: var(--spazio-l);
  background: var(--colore-sfondo);
}

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

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

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

Dati chiave

Categoria

Programmazione e sviluppo · HTML e CSS

Tipo di output

Codice

Livello

Intermedio

Pensato per

ChatGPT, Claude, Gemini e Microsoft Copilot

Verificato in

In attesa di verifica editoriale

Variabili

Descrizione del design, Breakpoint, Approccio CSS e Browser

Lingua

Italiano

Prezzo

Gratuito, senza registrazione

Aggiornato

07/11/2026

Domande frequenti