Design for AI

Estilo Skeuomorfismo: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para skeuomorfismo. También llamado diseño skeuomórfico, UI realista, estilo iOS 6, UI de cuero y lino, revival skeuomorfo. 2007-2013 (del iPhone a iOS 6); interés renovado de 2023 en adelante.

Rasgos

  • las interfaces imitan materiales físicos: cuero, lino, metal cepillado, madera, cristal, papel
  • iluminación realista: gradientes que modelan una luz desde arriba, realces y sombras proyectadas
  • bordes cosidos, texto en relieve, botones biselados, mandos e interruptores que parecen mecánicos
  • texturas mediante imágenes repetidas o ruido SVG; nada es plano
  • los objetos se comportan físicamente: las páginas se curvan, los interruptores deslizan, los diales giran
  • orden de profundidad fuerte con varias capas de sombra
  • color cálido y táctil: canela, marrón oscuro, gris acero, verde fieltro

Paleta

#3b2a1e marrón cuero, #d9c8a9 costura, #b8b8b8 metal cepillado, #f4efe4 papel, #1f1f1f texto, #2f6b3a verde fieltro

Tipografía

Tipo Helvetica (Arimo, Work Sans) para la UI, el estilo Marker Felt es comercial; usa Lora o Georgia para el contenido "en papel"; tamaños 15-17px en UI, 20px en papel; el texto suele ir en relieve con un text-shadow blanco de 1px por debajo

Haz

  • modela una sola fuente de luz arriba a la izquierda y mantén cada gradiente, realce y sombra coherente con ella
  • usa texturas de ruido SVG o pequeñas imágenes en mosaico; que cada una pese menos de 20KB
  • haz que los controles se parezcan a su equivalente físico (un interruptor real, un dial real) y anímalos de forma física

Evita

  • no mezcles metáforas de material en un mismo panel; una nav de cuero con botones de metal está bien, botones de cuero sobre metal no
  • no uses iconos planos; los iconos necesitan la misma iluminación que las superficies
  • no lo uses en todo el sitio para contenido de lectura; resérvalo para controles y chrome, y deja el texto sobre papel liso

Conocido por: iOS 6 (Notas, Game Center, Buscar a mis amigos), Apple Podcasts 2012, Things 2, Garageband

Semilla 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

Construye el sitio en estilo skeuomórfico. Nav y pie son cuero oscuro: background #3b2a1e con una textura de ruido SVG (feTurbulence baseFrequency 0.8, opacity 0.15), una línea cosida discontinua de 1px #d9c8a9 a 6px del borde, e inset 0 1px 0 rgba(255,255,255,0.15) como realce superior. Los paneles de contenido son papel #f4efe4 con una textura tenue de líneas horizontales y box-shadow 0 3px 8px rgba(0,0,0,0.45). Los botones son metal cepillado: linear-gradient(#ececec,#a8a8a8), borde 1px #6b6b6b, border-radius 10px, inset 0 1px 0 rgba(255,255,255,0.7), texto #1f1f1f en relieve con text-shadow 0 1px 0 rgba(255,255,255,0.6); el estado active pasa a sombra inset. Los toggles parecen interruptores reales con un mando deslizante (200ms ease-out). Fuente Work Sans a 16px para la UI, Lora a 19px para el contenido en papel. Una sola fuente de luz arriba a la izquierda en cada gradiente. Sin iconos planos; los iconos reciben un relleno en gradiente y un realce inferior de 1px.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo skeuomórfico. Nav y pie son cuero oscuro: background #3b2a1e con una textura de ruido SVG (feTurbulence baseFrequency 0.8, opacity 0.15), una línea cosida discontinua de 1px #d9c8a9 a 6px del borde, e inset 0 1px 0 rgba(255,255,255,0.15) como realce superior. Los paneles de contenido son papel #f4efe4 con una textura tenue de líneas horizontales y box-shadow 0 3px 8px rgba(0,0,0,0.45). Los botones son metal cepillado: linear-gradient(#ececec,#a8a8a8), borde 1px #6b6b6b, border-radius 10px, inset 0 1px 0 rgba(255,255,255,0.7), texto #1f1f1f en relieve con text-shadow 0 1px 0 rgba(255,255,255,0.6); el estado active pasa a sombra inset. Los toggles parecen interruptores reales con un mando deslizante (200ms ease-out). Fuente Work Sans a 16px para la UI, Lora a 19px para el contenido en papel. Una sola fuente de luz arriba a la izquierda en cada gradiente. Sin iconos planos; los iconos reciben un relleno en gradiente y un realce 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 }

Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.