How do I install the Figure Ground skill?

Run npx skillmds@latest add majiayu000/figure-ground in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Figure Ground safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Figure Ground?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Figure Ground free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Figure Ground?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Figure Ground by majiayu000 — Agent Skill

Name: Figure Ground
Rating: 4.5 (4 reviews)
Author: majiayu000

File contents

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

Rubin, E. (1915). "Synsoplevede Figurer"
Palmer, S.E. (1999). "Vision Science: Photons to Phenomenology"
https://www.nngroup.com/articles/gestalt-figure-ground/

---name: figure-grounddescription: El cerebro separa elementos en primer plano y fondo. Use cuando diseñe modales, overlays, focus states, o jerarquía visual de capas.--- # 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 - Rubin, E. (1915). "Synsoplevede Figurer" - Palmer, S.E. (1999). "Vision Science: Photons to Phenomenology" - https://www.nngroup.com/articles/gestalt-figure-ground/

Frequently asked questions

Figure Ground