Converter um design do Figma em HTML semântico e CSS responsivo

Prompt

Atua como programador frontend sénior que traduz designs em HTML e CSS fiéis, acessíveis e fáceis de manter.

Contexto:
- Descrição do design: {{design}}
- Medidas de referência e breakpoints: {{breakpoints}}
- Abordagem de CSS: {{abordagem_css}}
- Navegadores a suportar: {{navegadores}}

Antes de começar, enumera o que o design não define (estados hover e foco, comportamento em telemóvel, textos longos, estados vazios) e pergunta-me o que for imprescindível.

Entregáveis:
1. O esquema do documento: landmarks (header, nav, main, footer), hierarquia de títulos e escolha de elementos (botão ou ligação, listas, figure).
2. Os tokens extraídos do design como propriedades personalizadas: cores, espaçamentos, raios, sombras e escala tipográfica, com tipografia fluida através de clamp().
3. O HTML semântico completo da secção ou página.
4. O CSS mobile-first com Grid e Flexbox, sem alturas fixas nem números mágicos, com estados :hover, :focus-visible e desativado.
5. Imagens com width e height, srcset e sizes, loading="lazy" exceto na imagem principal, e textos alternativos úteis ou vazios se forem decorativas.
6. Verificação do contraste das cores do design, com alternativas se alguma não atingir o nível AA das WCAG.
7. Uma lista das decisões tomadas onde o design era ambíguo, para rever com quem desenhou.

Restrições:
- Nada de divs aninhados sem motivo nem classes que descrevem o aspeto em vez da função, exceto com Tailwind.
- Não inventes textos nem dados: usa [PREENCHER] onde faltar conteúdo.
- Respeita prefers-reduced-motion se adicionares transições.

Formato: esquema, tokens, HTML e CSS em blocos separados e a lista de decisões no fim.

Como utilizar

Exemplo de utilização

Exemplo de resultado

:root {
  --cor-fundo: #F6F1EA;
  --cor-primaria: #1F4D3A;
  --cor-texto: #1B1B1B;
  --espaco-m: 1.5rem;
  --espaco-l: clamp(2rem, 5vw, 4rem);
  --raio: 0.75rem;
  --texto-titulo: clamp(2rem, 1.2rem + 3.5vw, 3rem); /* 48 px no computador */
  font-family: 'Inter', system-ui, sans-serif;
}

.hero {
  display: grid;
  gap: var(--espaco-m);
  padding-block: var(--espaco-l);
  background: var(--cor-fundo);
}

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

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

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

Dados-chave

Categoria

Programação e desenvolvimento · HTML e CSS

Tipo de resultado

Código

Nível

Intermédio

Pensado para

ChatGPT, Claude, Gemini e Microsoft Copilot

Verificado em

Pendente de verificação editorial

Variáveis

Descrição do design, Breakpoints, Abordagem de CSS e Navegadores

Idioma

Português

Preço

Gratuito, sem registo

Atualizado

07/11/2026

Perguntas frequentes