Design for AI

Estilo Brilho gradiente de startup de IA: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de brilho gradiente de startup de ia. Também chamado de estilo de landing page de IA, SaaS de gradiente roxo, estética genérica de IA, brilho gradiente em dark mode, visual padrão do v0, design AI slop. 2022-2025 (onda do ChatGPT; toda landing page de wrapper de IA).

Traços

  • página azul-marinho escura ou preta com um brilho gradiente de roxo para azul ou roxo para rosa atrás do hero
  • texto em gradiente na manchete ("Turbine seu fluxo de trabalho"), emoji de brilho ou ícones de estrela
  • cards de vidro com bordas gradiente de 1px, uma grade ou padrão de pontos sumindo no fundo
  • cards de recursos em três colunas com selos de ícone em gradiente, uma parede de logos, uma tabela de preços com brilho no "popular"
  • Inter em tudo, manchete de 48-64px, botão em pílula "Comece grátis" com gradiente
  • orbes flutuantes, manchas desfocadas, grade animada sutil, um screenshot de produto falso com brilho
  • é o que toda ferramenta de IA gera quando nenhum estilo é especificado

Paleta

#0a0a1a página, #ffffff texto, #a1a1aa atenuado, #7c3aed violeta, #3b82f6 azul, #ec4899 rosa, rgba(255,255,255,0.05) vidro

Tipografia

Geist (sempre), títulos 700 a 56-64px com -0.02em, preenchidos com gradiente; corpo 400 a 18px; botões 600 a 16px em pílulas

Faça

  • reconheça: se a página tem brilho roxo, texto de manchete em gradiente, três cards de vidro e um ícone de brilho, é este estilo
  • para evitá-lo, mude pelo menos três destes: a fonte (use uma serifa ou uma grotesca com personalidade), o fundo (claro, quente ou cor de verdade), o gradiente (apague), a grade de cards (use uma lista, uma tabela ou prosa), o acento (uma cor chapada)
  • se um cliente insistir, pelo menos ancore: screenshots reais, números reais, um brilho, um gradiente, sem brilhinhos

Evite

  • não publique por padrão; sinaliza "sem designer, sem decisões" para qualquer um que já viu dez landing pages de IA
  • não use texto em gradiente em mais de uma palavra; prejudica a legibilidade e envelhece na hora
  • não adicione ícones de brilho ou estrela ao lado de "IA"; a palavra já diz

Conhecido por: Milhares de landing pages de wrappers de IA 2023-2025, saídas padrão do v0 e do Lovable, a maioria dos templates "Lance seu SaaS"

Semente CSS
:root {
  --bg: #0a0a1a;
   --fg: #ffffff;
   --muted: #a1a1aa;
   --accent: #7c3aed;
   --accent2: #3b82f6;
   --glass: rgba(255,255,255,0.05);
   --radius: 16px;
   --glow: 0 0 80px rgba(124,58,237,0.4);
   --font: 'Geist',sans-serif
}
Prompt

Construa o site no estilo brilho gradiente de startup de IA, mas de propósito e com contenção (este é o visual padrão que a maioria das ferramentas de IA produz; use só se o briefing exigir). Fundo #0a0a1a com um único brilho radial atrás do hero (rgba(124,58,237,0.35), 70vw, blur(120px)) e uma grade de pontos de 32px a 4% de branco sumindo abaixo da dobra. Texto #ffffff, atenuado #a1a1aa. Fonte Geist: h1 700 a 60px com -0.02em, texto em gradiente (linear-gradient(90deg, #7c3aed, #3b82f6)) numa única palavra; corpo 400 a 18px. Botão primário: pílula, gradiente de #7c3aed para #3b82f6, texto branco, 48px de altura; secundário: contorno 1px rgba(255,255,255,0.15). Cards: preenchimento rgba(255,255,255,0.05), borda 1px rgba(255,255,255,0.1), raio 16px, sem bordas gradiente, sem brilhinhos. Um screenshot real do produto com borda de 1px e o mesmo brilho violeta a 20%. Preços: três colunas, a do meio com borda violeta, sem brilho. Movimento: fade-up de 400ms no scroll. Limite: um brilho, um gradiente, zero emoji.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site no estilo brilho gradiente de startup de IA, mas de propósito e com contenção (este é o visual padrão que a maioria das ferramentas de IA produz; use só se o briefing exigir). Fundo #0a0a1a com um único brilho radial atrás do hero (rgba(124,58,237,0.35), 70vw, blur(120px)) e uma grade de pontos de 32px a 4% de branco sumindo abaixo da dobra. Texto #ffffff, atenuado #a1a1aa. Fonte Geist: h1 700 a 60px com -0.02em, texto em gradiente (linear-gradient(90deg, #7c3aed, #3b82f6)) numa única palavra; corpo 400 a 18px. Botão primário: pílula, gradiente de #7c3aed para #3b82f6, texto branco, 48px de altura; secundário: contorno 1px rgba(255,255,255,0.15). Cards: preenchimento rgba(255,255,255,0.05), borda 1px rgba(255,255,255,0.1), raio 16px, sem bordas gradiente, sem brilhinhos. Um screenshot real do produto com borda de 1px e o mesmo brilho violeta a 20%. Preços: três colunas, a do meio com borda violeta, sem brilho. Movimento: fade-up de 400ms no scroll. Limite: um brilho, um gradiente, zero emoji.

## Tokens
:root { --bg:#0a0a1a; --fg:#ffffff; --muted:#a1a1aa; --accent:#7c3aed; --accent2:#3b82f6; --glass:rgba(255,255,255,0.05); --radius:16px; --glow:0 0 80px rgba(124,58,237,0.4); --font:'Geist',sans-serif }

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.