Design for AI

Estilo Papel / cuaderno: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para papel / cuaderno. También llamado UI de cuaderno, diseño de papel pautado, web de cuaderno de bocetos, UI de notas adhesivas, estilo papelería. 2010-2013 (Evernote, Paper by 53), revival en toma de notas y edtech de 2020 en adelante.

Rasgos

  • fondos de papel pautado o punteado (líneas con repeating-linear-gradient a 28-32px)
  • línea de margen roja a la izquierda, agujeros de perforación, bordes rasgados o curvados
  • notas adhesivas en amarillo, rosa y azul con una ligera rotación y una sombra suave
  • fuentes manuscritas o de rotulador para títulos, una sans limpia o una mono para el cuerpo
  • clips, tiras de cinta adhesiva, marcas de subrayador como decoración
  • papel blanco roto cálido, texto gris lápiz, un azul tinta
  • profundidad plana: papel sobre papel, sombras pequeñas, sin brillo

Paleta

#fdfbf3 papel, #cfe3f5 línea pautada, #e88a8a línea de margen, #3a3a3a texto lápiz, #1f4bd8 azul tinta, #fff59d amarillo de nota adhesiva

Tipografía

Caveat, Patrick Hand, Kalam o Gloria Hallelujah para títulos y notas (24-40px); Nunito, Karla o Courier Prime para el cuerpo a 16-17px

Haz

  • dibuja las líneas pautadas con CSS para que el line-height del cuerpo coincida exactamente con el pautado
  • rota las notas adhesivas entre -3deg y 3deg y dale a cada una una franja superior de 2px más oscura como borde de pegamento
  • usa un efecto subrayador (subrayado con linear-gradient en #fff59d al 40% de altura) en vez de negrita para el énfasis

Evita

  • no compongas texto largo en una fuente manuscrita; úsala solo para títulos y anotaciones
  • no añadas curvas 3D realistas ni sombras pesadas; mantenlo plano y fino como el papel
  • no uses blanco puro; el papel es cálido

Conocido por: Evernote (primeras versiones), Paper by 53, Notability, marketing de Bear notes, Goodnotes

Semilla CSS
:root {
  --bg: #fdfbf3;
   --rule: #cfe3f5;
   --margin: #e88a8a;
   --fg: #3a3a3a;
   --accent: #1f4bd8;
   --sticky: #fff59d;
   --radius: 2px;
   --shadow: 0 2px 6px rgba(58,58,58,0.18);
   --font: 'Nunito',sans-serif;
   --font-hand: 'Caveat',cursive
}
Prompt

Construye el sitio como un cuaderno de papel. Fondo de página #fdfbf3 con líneas pautadas: repeating-linear-gradient(transparent 0 31px, #cfe3f5 31px 32px) y una línea de margen vertical de 2px #e88a8a a 64px del borde izquierdo; el texto del cuerpo usa line-height 32px para que las líneas se asienten sobre el pautado. Texto #3a3a3a, enlaces y acentos de tinta #1f4bd8. Fuentes: Caveat 700 para títulos a 40/30px y para notas al margen, Nunito 400 a 17px para el cuerpo. Las tarjetas son notas adhesivas: #fff59d (también variantes #f8bbd0 y #bbdefb), cuadradas de 200px, border-radius 2px, rotadas -2deg o 3deg, una franja de 12px más oscura en la parte superior, box-shadow 0 2px 6px rgba(58,58,58,0.18). Añade pequeños clips en SVG y un trozo de cinta adhesiva (rectángulo semitransparente #e0e0e0 al 45%) sobre la imagen del hero. El énfasis usa subrayador: background linear-gradient(transparent 60%, #fff59d 60%). Los botones parecen rectángulos estampados con tinta: borde 2px #1f4bd8, relleno transparente, texto en Caveat 22px. Movimiento: las notas adhesivas se elevan 2px en hover, 150ms; nada más.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio como un cuaderno de papel. Fondo de página #fdfbf3 con líneas pautadas: repeating-linear-gradient(transparent 0 31px, #cfe3f5 31px 32px) y una línea de margen vertical de 2px #e88a8a a 64px del borde izquierdo; el texto del cuerpo usa line-height 32px para que las líneas se asienten sobre el pautado. Texto #3a3a3a, enlaces y acentos de tinta #1f4bd8. Fuentes: Caveat 700 para títulos a 40/30px y para notas al margen, Nunito 400 a 17px para el cuerpo. Las tarjetas son notas adhesivas: #fff59d (también variantes #f8bbd0 y #bbdefb), cuadradas de 200px, border-radius 2px, rotadas -2deg o 3deg, una franja de 12px más oscura en la parte superior, box-shadow 0 2px 6px rgba(58,58,58,0.18). Añade pequeños clips en SVG y un trozo de cinta adhesiva (rectángulo semitransparente #e0e0e0 al 45%) sobre la imagen del hero. El énfasis usa subrayador: background linear-gradient(transparent 60%, #fff59d 60%). Los botones parecen rectángulos estampados con tinta: borde 2px #1f4bd8, relleno transparente, texto en Caveat 22px. Movimiento: las notas adhesivas se elevan 2px en hover, 150ms; nada más.

## Tokens
:root { --bg:#fdfbf3; --rule:#cfe3f5; --margin:#e88a8a; --fg:#3a3a3a; --accent:#1f4bd8; --sticky:#fff59d; --radius:2px; --shadow:0 2px 6px rgba(58,58,58,0.18); --font:'Nunito',sans-serif; --font-hand:'Caveat',cursive }

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