Design for AIEstilo Minimalismo: prompt de design de UI
Paleta, regras de tipografia e um prompt pronto para colar de minimalismo. Também chamado de web design minimalista, menos é mais, UI limpa, design de espaço em branco. atemporal; ondas na web em 2008 (Apple), 2013 (flat), 2019 (Linear/Notion), em curso.
Traços
- pouquíssimos elementos; cada um tem uma função
- uma família tipográfica, dois tamanhos, dois pesos, uma cor de acento
- o espaço em branco carrega a hierarquia; sem caixas, sem divisores a menos que essenciais
- quase sempre preto sobre branco ou quase branco, filetes finos
- raio pequeno e preciso (4-8px) ou nenhum; sombras quase invisíveis
- imagens são escassas e grandes quando aparecem
- movimento sutil: opacidade e translate de 4px, 150-250ms
Paleta
#ffffff página, #111111 texto, #6b7280 secundário, #e5e7eb filete, #2563eb acento único
Tipografia
Geist, Helvetica Neue ou system-ui; títulos 600 a 32-56px com -0.02em, corpo 400 a 16-17px, line-height 1.6; no máximo 4 tamanhos no site inteiro
Faça
- apague qualquer coisa que não mude o que o usuário faz em seguida
- alinhe a uma grade de 8px e a uma largura de leitura de 640-720px
- deixe o tamanho do tipo e o espaçamento fazerem a hierarquia em vez de cor e caixas
Evite
- não adicione ícones ao lado de cada título
- não use cards nem bordas para agrupar; use espaço
- não use mais de uma cor de acento nem gradiente
Conhecido por: Apple.com, Notion, Linear (modo claro), Muji
Semente CSS
:root {
--bg: #ffffff;
--fg: #111111;
--muted: #6b7280;
--accent: #2563eb;
--line: #e5e7eb;
--radius: 6px;
--shadow: none;
--font: 'Geist',system-ui,sans-serif
}
Prompt
Construa o site em minimalismo estrito. Fundo #ffffff, texto #111111, secundário #6b7280, filete #e5e7eb, um acento #2563eb usado só em links e no botão primário. Fonte Geist: exatamente quatro tamanhos - 48px 600 (h1, -0.02em), 24px 600 (h2), 16px 400 (corpo, line-height 1.6), 13px 400 (meta). Coluna de conteúdo 680px, padding da página 24px, seções separadas por 96px de espaço e nada mais (sem filetes, sem fundos). Sem cards, sem ícones, sem sombras, sem gradientes. Botões: 40px de altura, raio 6px, #111111 sólido com texto branco; botões secundários são links de texto simples. Imagens, quando usadas, ocupam a largura total da coluna com raio 8px e sem borda. A nav é o logo à esquerda e três links de texto à direita. Movimento: 150ms de opacidade no hover; nada anima no scroll.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em minimalismo estrito. Fundo #ffffff, texto #111111, secundário #6b7280, filete #e5e7eb, um acento #2563eb usado só em links e no botão primário. Fonte Geist: exatamente quatro tamanhos - 48px 600 (h1, -0.02em), 24px 600 (h2), 16px 400 (corpo, line-height 1.6), 13px 400 (meta). Coluna de conteúdo 680px, padding da página 24px, seções separadas por 96px de espaço e nada mais (sem filetes, sem fundos). Sem cards, sem ícones, sem sombras, sem gradientes. Botões: 40px de altura, raio 6px, #111111 sólido com texto branco; botões secundários são links de texto simples. Imagens, quando usadas, ocupam a largura total da coluna com raio 8px e sem borda. A nav é o logo à esquerda e três links de texto à direita. Movimento: 150ms de opacidade no hover; nada anima no scroll.
## Tokens
:root { --bg:#ffffff; --fg:#111111; --muted:#6b7280; --accent:#2563eb; --line:#e5e7eb; --radius:6px; --shadow:none; --font:'Geist',system-ui,sans-serif }
Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.