Design for AI

Estilo Formas orgánicas / blobs: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para formas orgánicas / blobs. También llamado diseño de blobs, UI de formas orgánicas, formas fluidas, formas de ameba, blobs que se transforman, web biomórfica. 2018-2022 (Spotify, blobs de Google Material, marcas de bienestar).

Rasgos

  • formas redondeadas irregulares (paths SVG o border-radius con 8 valores) como fondos, máscaras y marcos de imagen
  • paletas suaves y naturales o un único color vivo sobre crema
  • las formas se solapan, se colocan detrás del texto y enmarcan fotos en lugar de rectángulos
  • tipografía sans redondeada, pesos medios, tamaños cómodos
  • los blobs se transforman despacio entre formas (animación de border-radius o morph de path SVG)
  • sin bordes duros en ningún sitio: píldoras, círculos, blobs
  • tono amigable, humano, de bienestar o comida

Paleta

#fffaf3 crema, #2a2a2a texto, #ff8a65 coral, #ffd166 sol, #06d6a0 menta, #118ab2 océano, #ef476f frambuesa

Tipografía

Poppins, Outfit, Quicksand o Nunito; títulos 600-700 a 40-64px, cuerpo 400 a 17px; DM Serif Display para un título de contraste si hace falta

Haz

  • genera los blobs con un border-radius de 8 valores (p. ej. 30% 70% 70% 30% / 30% 30% 70% 70%) y anímalos entre dos o tres valores durante 8-12s
  • usa los blobs como clip-path o mask en las fotos para que las imágenes también sean orgánicas
  • limita los blobs a 2-3 por viewport y ponlos detrás del contenido con un z-index bajo

Evita

  • no uses rectángulos para imágenes ni tarjetas; si tiene una esquina, se sale del estilo
  • no animes los blobs más rápido de 6s; parece que hierven
  • no uses blobs y cristal juntos; elige un material

Conocido por: Campañas de Spotify 2018-2020, blobs de Google Material, Oatly (parcial), Glossier (parcial), Headspace

Semilla CSS
:root {
  --bg: #fffaf3;
   --fg: #2a2a2a;
   --accent: #ff8a65;
   --accent2: #06d6a0;
   --accent3: #ffd166;
   --radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
   --shadow: none;
   --font: 'Outfit',sans-serif
}
Prompt

Construye el sitio con formas orgánicas de blob. Fondo #fffaf3, texto #2a2a2a, acentos coral #ff8a65, menta #06d6a0, sol #ffd166, océano #118ab2. Fuente Outfit: títulos 700 a 60/40/26px, cuerpo 400 a 17px con line-height 1.6. Hero: titular a la izquierda, a la derecha una foto recortada por un blob (border-radius 30% 70% 70% 30% / 30% 30% 70% 70%) animado entre tres valores de border-radius durante 10s ease-in-out infinite; dos blobs planos en #ffd166 y #06d6a0 detrás al 60% del tamaño, desplazados, z-index por debajo del contenido, a la deriva 15px durante 12s. Los fondos de sección son grandes blobs en colores de acento que se salen por el borde en lugar de bandas rectangulares. Tarjetas: blancas, border-radius 40px / 48px, sin borde, sin sombra; los iconos van en pequeñas insignias blob. Botones píldora, relleno #ff8a65, texto blanco, 52px de alto. Las imágenes siempre con máscara blob o circulares; sin esquinas rectangulares en ningún sitio. Movimiento: solo morph y deriva; el hover escala los botones a 1.04 durante 200ms.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio con formas orgánicas de blob. Fondo #fffaf3, texto #2a2a2a, acentos coral #ff8a65, menta #06d6a0, sol #ffd166, océano #118ab2. Fuente Outfit: títulos 700 a 60/40/26px, cuerpo 400 a 17px con line-height 1.6. Hero: titular a la izquierda, a la derecha una foto recortada por un blob (border-radius 30% 70% 70% 30% / 30% 30% 70% 70%) animado entre tres valores de border-radius durante 10s ease-in-out infinite; dos blobs planos en #ffd166 y #06d6a0 detrás al 60% del tamaño, desplazados, z-index por debajo del contenido, a la deriva 15px durante 12s. Los fondos de sección son grandes blobs en colores de acento que se salen por el borde en lugar de bandas rectangulares. Tarjetas: blancas, border-radius 40px / 48px, sin borde, sin sombra; los iconos van en pequeñas insignias blob. Botones píldora, relleno #ff8a65, texto blanco, 52px de alto. Las imágenes siempre con máscara blob o circulares; sin esquinas rectangulares en ningún sitio. Movimiento: solo morph y deriva; el hover escala los botones a 1.04 durante 200ms.

## Tokens
:root { --bg:#fffaf3; --fg:#2a2a2a; --accent:#ff8a65; --accent2:#06d6a0; --accent3:#ffd166; --radius:30% 70% 70% 30% / 30% 30% 70% 70%; --shadow:none; --font:'Outfit',sans-serif }

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