Design for AI

Estilo Esqueumorfismo: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de esqueumorfismo. Também chamado de design esqueumórfico, UI realista, estilo iOS 6, UI de couro e linho, revival esqueumórfico. 2007-2013 (do iPhone ao iOS 6); interesse em revival de 2023 em diante.

Traços

  • interfaces imitam materiais físicos: couro, linho, metal escovado, madeira, vidro, papel
  • iluminação realista: gradientes que modelam uma luz vinda de cima, reflexos e sombras projetadas
  • bordas costuradas, texto em relevo, botões biselados, botões giratórios e toggles com cara mecânica
  • texturas via imagens repetidas ou ruído SVG; nada é chapado
  • objetos se comportam fisicamente: páginas se curvam, chaves deslizam, dials giram
  • ordem de profundidade forte com várias camadas de sombra
  • cor quente e tátil: bege, marrom escuro, cinza aço, verde feltro

Paleta

#3b2a1e marrom couro, #d9c8a9 costura, #b8b8b8 metal escovado, #f4efe4 papel, #1f1f1f texto, #2f6b3a verde feltro

Tipografia

À la Helvetica (Arimo, Work Sans) para UI, o estilo Marker Felt é comercial; use Lora ou Georgia para o conteúdo em "papel"; tamanhos 15-17px na UI, 20px no papel; texto muitas vezes em relevo com um text-shadow branco de 1px abaixo

Faça

  • modele uma única fonte de luz no canto superior esquerdo e mantenha cada gradiente, reflexo e sombra consistente com ela
  • use texturas de ruído SVG ou pequenas imagens repetidas; mantenha cada uma abaixo de 20KB
  • faça os controles parecerem sua contraparte física (um toggle de verdade, um dial de verdade) e anime-os fisicamente

Evite

  • não misture metáforas de material num painel; nav de couro com botões de metal é ok, botões de couro sobre metal não
  • não use ícones flat; os ícones precisam da mesma iluminação das superfícies
  • não use em todo o site para conteúdo de leitura; reserve para controles e chrome, mantenha o texto em papel simples

Conhecido por: iOS 6 (Notas, Game Center, Buscar Amigos), Apple Podcasts 2012, Things 2, Garageband

Semente CSS
:root {
  --bg: #3b2a1e;
   --paper: #f4efe4;
   --fg: #1f1f1f;
   --metal: linear-gradient(#e6e6e6,#a8a8a8);
   --stitch: #d9c8a9;
   --radius: 10px;
   --shadow: 0 2px 4px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.4);
   --font: 'Work Sans',sans-serif
}
Prompt

Construa o site em estilo esqueumórfico. Nav e rodapé são couro escuro: background #3b2a1e com uma textura de ruído SVG (feTurbulence baseFrequency 0.8, opacity 0.15), uma linha costurada tracejada de 1px #d9c8a9 recuada 6px da borda, e inset 0 1px 0 rgba(255,255,255,0.15) como reflexo superior. Os painéis de conteúdo são papel #f4efe4 com uma leve textura de linhas horizontais e box-shadow 0 3px 8px rgba(0,0,0,0.45). Os botões são metal escovado: linear-gradient(#ececec,#a8a8a8), borda 1px #6b6b6b, border-radius 10px, inset 0 1px 0 rgba(255,255,255,0.7), texto #1f1f1f em relevo com text-shadow 0 1px 0 rgba(255,255,255,0.6); o estado active vira sombra inset. Os toggles parecem chaves de verdade com um botão deslizante (200ms ease-out). Fonte Work Sans a 16px para a UI, Lora a 19px para o conteúdo em papel. Uma fonte de luz no canto superior esquerdo em cada gradiente. Sem ícones flat; os ícones recebem preenchimento em gradiente e um reflexo inferior de 1px.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo esqueumórfico. Nav e rodapé são couro escuro: background #3b2a1e com uma textura de ruído SVG (feTurbulence baseFrequency 0.8, opacity 0.15), uma linha costurada tracejada de 1px #d9c8a9 recuada 6px da borda, e inset 0 1px 0 rgba(255,255,255,0.15) como reflexo superior. Os painéis de conteúdo são papel #f4efe4 com uma leve textura de linhas horizontais e box-shadow 0 3px 8px rgba(0,0,0,0.45). Os botões são metal escovado: linear-gradient(#ececec,#a8a8a8), borda 1px #6b6b6b, border-radius 10px, inset 0 1px 0 rgba(255,255,255,0.7), texto #1f1f1f em relevo com text-shadow 0 1px 0 rgba(255,255,255,0.6); o estado active vira sombra inset. Os toggles parecem chaves de verdade com um botão deslizante (200ms ease-out). Fonte Work Sans a 16px para a UI, Lora a 19px para o conteúdo em papel. Uma fonte de luz no canto superior esquerdo em cada gradiente. Sem ícones flat; os ícones recebem preenchimento em gradiente e um reflexo inferior de 1px.

## Tokens
:root { --bg:#3b2a1e; --paper:#f4efe4; --fg:#1f1f1f; --metal:linear-gradient(#e6e6e6,#a8a8a8); --stitch:#d9c8a9; --radius:10px; --shadow:0 2px 4px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.4); --font:'Work Sans',sans-serif }

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