OpenSkillIndex← back to search
claude-code

Claude-skill-registry figure-ground

Principio de Figura-Fondo

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/figure-ground-vjrivmon-setup-software-ia" ~/.claude/skills/majiayu000-claude-skill-registry-figure-ground-bdaa62 && rm -rf "$T"
manifest: skills/data/figure-ground-vjrivmon-setup-software-ia/SKILL.md
source content

Principio de Figura-Fondo

Resumen

El sistema perceptual organiza elementos visuales en figuras (objetos de atención) y fondo (contexto). Los elementos se perciben como uno u otro, no ambos simultáneamente.

Origen

  • Escuela: Psicología de la Gestalt
  • Año: ~1920s
  • Autor principal: Edgar Rubin (jarrón de Rubin)

Fundamento Psicológico

El cerebro necesita separar objetos de su contexto para procesarlos. La relación figura-fondo es inestable cuando ambos son igualmente prominentes (como en ilusiones ópticas), causando confusión visual. En diseño, debemos hacer clara esta distinción.

Aplicación en Diseño

Modales y Overlays

  • Background oscurecido (scrim) detrás de modal
  • Modal con shadow prominente
  • Elevación visual clara
  • Focus trap en el elemento frontal

Jerarquía de Capas

  • Z-index consistente para tipos de elementos
  • Shadows que indican elevación
  • Blur en elementos de fondo
  • Contraste entre capas

Focus y Selección

  • Elementos seleccionados destacados del fondo
  • Estados hover con elevación sutil
  • Active states con mayor prominencia
  • Disabled states fundidos con fondo

Texto y Contenido

  • Contraste suficiente texto/fondo (4.5:1 mínimo)
  • Backgrounds que no compiten con contenido
  • Imágenes con overlays para texto
  • Cards elevadas sobre el fondo de página

Ejemplos

  • iOS Modals: Fondo desenfocado, modal nítido
  • Google Material: Elevation system con shadows
  • Lightboxes: Imagen destacada, fondo oscurecido
  • Dropdown menus: Elevados sobre contenido
  • Toast notifications: Flotando sobre la UI

Anti-patterns

  • ❌ Modales sin scrim que se pierden en el fondo
  • ❌ Texto sobre imágenes sin overlay
  • ❌ Elementos superpuestos sin jerarquía clara
  • ❌ Backgrounds con patrones que compiten
  • ❌ Niveles de elevación inconsistentes

Métricas

  • Contrast Ratio: Cumplimiento de WCAG (4.5:1, 3:1)
  • Layer Hierarchy Test: Usuarios identifican qué está "encima"
  • Modal Visibility: Reconocimiento inmediato de overlays
  • Visual Noise Score: Competencia figura/fondo medida

Principios Relacionados

  • [[closure]] - Completar figuras reconocibles
  • [[nielsen-minimalist-design]] - Reducir ruido de fondo
  • [[common-region]] - Delimitar figuras claramente

Referencias