Design for AI

Estilo Dibujado a mano / boceto: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para dibujado a mano / boceto. También llamado UI de boceto, diseño doodle, web dibujada a mano, UI temblorosa, estilo Excalidraw. 2010 (wireframes de Balsamiq), 2020 en adelante (Excalidraw, tldraw, doodles de Notion).

Rasgos

  • líneas que tiemblan: paths SVG con una ligera rugosidad, bordes de trazo doble
  • fuentes manuscritas para títulos y etiquetas; una sans limpia para el texto largo
  • texturas de rotulador o lápiz, rellenos de rayado en lugar de color sólido
  • flechas, círculos, subrayados y asteriscos dibujados a mano alrededor del contenido
  • fondo blanco papel o gris claro, líneas negro tinta o azul oscuro
  • unos pocos colores de rotulador: rojo, azul, subrayador amarillo
  • movimiento: las líneas se dibujan solas (stroke-dashoffset), los elementos tiemblan un poco en hover

Paleta

#fffdf7 papel, #1e1e1e tinta, #1971c2 azul de rotulador, #e03131 rojo de rotulador, #ffec99 subrayador, #868e96 gris lápiz

Tipografía

Virgil (la fuente de Excalidraw, libre), Caveat, Patrick Hand, Architects Daughter o Gochi Hand para títulos y etiquetas a 24-48px; Nunito o Karla a 16-17px para el cuerpo

Haz

  • dibuja los bordes como rects SVG inline con un filtro rugoso (feTurbulence + feDisplacementMap, scale 2-3) o usa paths al estilo rough.js
  • usa rayado (repeating-linear-gradient diagonal a 45deg, líneas de 2px) como relleno de las zonas destacadas
  • anima stroke-dashoffset para que las líneas clave se dibujen en 600-900ms

Evita

  • no compongas párrafos en una fuente manuscrita
  • no uses bordes CSS perfectamente rectos junto a elementos de boceto; rompe la ilusión
  • no añadas sombras proyectadas; usa un segundo trazo desplazado en su lugar

Conocido por: Excalidraw, tldraw, Balsamiq, doodles de marketing de Notion, XKCD

Semilla CSS
:root {
  --bg: #fffdf7;
   --fg: #1e1e1e;
   --accent: #1971c2;
   --accent2: #e03131;
   --highlight: #ffec99;
   --radius: 8px;
   --stroke: 2px;
   --font: 'Nunito',sans-serif;
   --font-hand: 'Caveat',cursive
}
Prompt

Construye el sitio en estilo de boceto dibujado a mano. Fondo #fffdf7, tinta #1e1e1e, azul de rotulador #1971c2, rojo de rotulador #e03131, subrayador #ffec99, gris lápiz #868e96. Fuentes: Caveat 700 para títulos a 48/34/24px y para todas las etiquetas y botones, Nunito 400 a 17px con line-height 1.6 para el cuerpo. Los bordes de tarjetas y botones son rectángulos SVG inline con un trazo de tinta de 2px, ligeramente redondeados (rx 8), pasados por un filtro SVG (feTurbulence baseFrequency 0.02 más feDisplacementMap scale 3) para que los cantos tiemblen; dibuja un segundo trazo desplazado 2px al 50% de opacidad para la doble línea a lápiz. Destaca las frases clave con un subrayado #ffec99 dibujado a mano (path SVG, 8px de grosor, ligeramente irregular). Añade flechas dibujadas a mano y anotaciones rodeadas con círculo en #e03131 apuntando a la llamada a la acción. Los rellenos usan rayado a 45deg (repeating-linear-gradient, líneas de 2px #1e1e1e al 20% de opacidad). Sin box-shadow, sin gradientes. Movimiento: las líneas se dibujan mediante stroke-dashoffset durante 800ms al hacer scroll; los botones tiemblan 1deg en hover.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo de boceto dibujado a mano. Fondo #fffdf7, tinta #1e1e1e, azul de rotulador #1971c2, rojo de rotulador #e03131, subrayador #ffec99, gris lápiz #868e96. Fuentes: Caveat 700 para títulos a 48/34/24px y para todas las etiquetas y botones, Nunito 400 a 17px con line-height 1.6 para el cuerpo. Los bordes de tarjetas y botones son rectángulos SVG inline con un trazo de tinta de 2px, ligeramente redondeados (rx 8), pasados por un filtro SVG (feTurbulence baseFrequency 0.02 más feDisplacementMap scale 3) para que los cantos tiemblen; dibuja un segundo trazo desplazado 2px al 50% de opacidad para la doble línea a lápiz. Destaca las frases clave con un subrayado #ffec99 dibujado a mano (path SVG, 8px de grosor, ligeramente irregular). Añade flechas dibujadas a mano y anotaciones rodeadas con círculo en #e03131 apuntando a la llamada a la acción. Los rellenos usan rayado a 45deg (repeating-linear-gradient, líneas de 2px #1e1e1e al 20% de opacidad). Sin box-shadow, sin gradientes. Movimiento: las líneas se dibujan mediante stroke-dashoffset durante 800ms al hacer scroll; los botones tiemblan 1deg en hover.

## Tokens
:root { --bg:#fffdf7; --fg:#1e1e1e; --accent:#1971c2; --accent2:#e03131; --highlight:#ffec99; --radius:8px; --stroke:2px; --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.