HomeCasa Prompts

Design tokens e especificações de componentes

Defina tokens de um sistema de design (primitivos, semânticos e de componente) e especifique componentes com estados, variantes e acessibilidade. Pensado para ChatGPT, Claude e Gemini. Inclui 5 variáveis personalizáveis e pode copiá-lo gratuitamente com um clique.

Avançado · Texto · Pendente de revisão editorial

Pensado para:

Prompt

Age como um designer de sistemas de design com experiência em levar tokens do Figma para o código.

Produto: {{product}}.
Plataformas: {{platforms}}.
Identidade de marca disponível: {{brand}}.
Componentes prioritários: {{components}}.
Nível de acessibilidade pretendido: {{a11y_level}}.

Entrega, por esta ordem:
1. Uma arquitetura de tokens em três camadas (primitivo → semântico → componente) e uma convenção de nomenclatura, com exemplos.
2. Tokens primitivos: uma escala de cor (9-10 passos por matiz, derivada da marca), tipografia (escala modular com tamanhos, alturas de linha e pesos), espaçamento (base 4 ou 8), raios, sombras, opacidades e durações de movimento.
3. Tokens semânticos para os temas claro e escuro (fundo, superfície, texto, borda, ação e estados de sucesso, aviso, erro e informação), verificando o contraste de cada par texto/fundo.
4. Uma exportação no formato W3C Design Tokens (JSON) e o seu equivalente em propriedades personalizadas de CSS.
5. Para cada componente prioritário, uma ficha de especificação com: anatomia, variantes, tamanhos, estados (repouso, hover, foco, ativo, desativado, a carregar, erro), tokens consumidos, comportamento com o teclado, atributos ARIA e o que não fazer.
6. Regras de governação: quando criar um novo token, como descontinuar e como versionar.

Restrições:
- Não inventes cores de marca: se eu não tiver nenhuma, propõe uma paleta provisória marcada como [PROVISÓRIO].
- Indica os rácios de contraste calculados; se algum falhar, propõe uma alternativa.
- Pede-me o que faltar antes de definires os tokens semânticos.

Como utilizar

  1. Liste as cores e os tipos de letra da marca que já tem (com valores hexadecimais, se possível).
  2. Escolha alguns componentes prioritários para começar: botão, campo de texto, cartão e modal.
  3. Importe o JSON no Tokens Studio para Figma ou no Style Dictionary para gerar código.
  4. Confirme os rácios de contraste com uma ferramenta externa antes de aprovar a paleta.

Exemplo de utilização

Produto: aplicação bancária para trabalhadores independentes · Plataformas: web e móvel · Marca: azul #1E40AF e o tipo de letra Inter · Componentes: botão, campo de texto, cartão, modal.

Exemplo de resultado

1. Arquitetura de tokens

NívelExemploUso
Primitivocolor.blue.800 = #1E40AFValor bruto, nunca usado em componentes
Semânticocolor.action.primary = {color.blue.800}Intenção, muda por tema
Componentebutton.primary.bg = {color.action.primary}Consumido por um só componente

Convenção: categoria.propriedade.variante.estado, por ex. color.text.on-action.disabled.

3. Contraste (tema claro)

Par texto/fundoRácioWCAG 2.2 AA
Branco sobre azul #1E40AF8,72:1✅
Branco sobre coral #F973622,74:1❌
#111827 sobre coral #F973626,47:1✅

Proposta: usar o coral apenas como fundo com texto escuro, ou um coral escurecido para texto sobre branco (5,62:1 com #B4412F, [TEMPORÁRIO]).

4. Exportação

{
  "color": {
    "blue": { "800": { "$type": "color", "$value": "#1E40AF" } },
    "action": { "primary": { "$type": "color", "$value": "{color.blue.800}" } }
  }
}
:root { --color-blue-800: #1E40AF; --color-action-primary: var(--color-blue-800); }

5. Botão — estados

Repouso, hover, foco (anel visível de 2 px), ativo, desativado, a carregar (aria-busy="true"), erro…

Dados-chave

Categoria
Design UI/UX · Design systems
Tipo de resultado
Texto
Nível
Avançado
Pensado para
ChatGPT, Claude e Gemini
Verificado em
Pendente de verificação editorial
Variáveis
Produto, Plataformas, Identidade de marca, Componentes prioritários e Nível de acessibilidade
Idioma
Português
Preço
Gratuito, sem registo
Atualizado
07/11/2026

Perguntas frequentes

Para que preciso de tokens semânticos se já tenho primitivos?

Os primitivos descrevem valores («azul 600»), enquanto os tokens semânticos descrevem a intenção («cor da ação principal»). Essa camada permite mudar de tema ou de marca sem mexer em cada componente.

Que formato de tokens devo usar?

O formato do W3C Design Tokens Community Group é o padrão emergente, e ferramentas como o Tokens Studio e o Style Dictionary conseguem convertê-lo em código CSS, iOS ou Android.

Para que serve este prompt?

Defina tokens de um sistema de design (primitivos, semânticos e de componente) e especifique componentes com estados, variantes e acessibilidade.

Com que ferramentas de IA funciona?

Foi pensado para ChatGPT, Claude e Gemini. Ainda não o verificámos nestas ferramentas, pelo que os resultados podem variar entre elas.

Como personalizo o prompt?

Clique em “Personalizar” e preencha as variáveis (Produto, Plataformas, Identidade de marca, Componentes prioritários e Nível de acessibilidade). O texto atualiza-se instantaneamente e pode depois copiá-lo com um clique. Os valores ficam guardados apenas no seu navegador.

Preciso de experiência para o utilizar?

É de nível avançado: destina-se a pessoas com experiência no tema, capazes de avaliar e ajustar o resultado.

Este prompt é gratuito?

Sim. Todos os prompts do HomeCasa Prompts são gratuitos, sem registo nem subscrição. Pode também utilizá-los em projetos profissionais.

Posso confiar no resultado da IA?

Trate-o como um rascunho de qualidade: verifique sempre os dados, os números e as afirmações importantes antes de publicar ou tomar decisões.

Prompts relacionados