Spacing Systempor Owl-Listener

Spacing System Skill.

Elige el espaciado según la relación y el propósito, no mediante ajustes de píxeles aislados.

Diseño de UI
Design tokens

Revisión de la fuente · Spacing SystemSKILL.md

Tarea Diseño de UI Produce • Una escala de espaciado con nombres derivada de una unidad base elegida. • Reglas de uso para inset, stack, inline y gaps de cuadrícula. • Asignaciones de modos de densidad para distintos contextos de contenido. Antes de empezar No se requiere ninguna herramienta de tokens específica; la aplicación depende del sistema de componentes existente.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Da al espaciado un significado coherente

Un marco de espaciado compacto que abarca una escala base, aplicaciones semánticas, agrupación y modos de densidad.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El enfoque de trabajo

Spacing System establece una unidad base y una escala reutilizable para márgenes, padding y gaps. Distingue el espacio inset dentro de un contenedor de las pilas verticales, las relaciones inline y los gaps de cuadrícula, de modo que números idénticos puedan tener propósitos claramente documentados.

La fuente vincula el espaciado con la agrupación: los elementos relacionados se sitúan más cerca y las secciones no relacionadas reciben más separación. También describe modos de densidad para distintos contextos. Es una especificación de sistema concisa, no una afirmación de que la escala de ejemplo sirva sin cambios para todo producto.

Entregables esperados

Una escala de espaciado con nombres derivada de una unidad base elegida.
Reglas de uso para inset, stack, inline y gaps de cuadrícula.
Asignaciones de modos de densidad para distintos contextos de contenido.

Ver el brief de ejemplo

Del brief a la revisión

01
Elige la base y la escala
Revisa los patrones existentes y elige un vocabulario de espaciado limitado en lugar de conservar cada valor accidental.
02
Asigna usos semánticos
Define qué pasos corresponden al interior de los componentes, entre controles relacionados y entre secciones.
03
Especifica los cambios de densidad
Explica cómo los modos compacto y amplio modifican el valor por defecto sin perder la legibilidad de las relaciones de agrupación.

02 Cuándo usarlo

Cuándo usarlo

No se requiere ninguna herramienta de tokens específica; la aplicación depende del sistema de componentes existente.

Buena opción

Padding de componentes inconsistenteÚtil cuando controles similares usan valores de espaciado sin relación entre sí.
Varias necesidades de densidadSirve para productos que combinan vistas de trabajo densas con superficies de lectura más relajadas.

Límites que conviene comprobar

No es una cuadrícula de columnasLas columnas de la página y los gutters responsivos corresponden a Layout Grid.
No es una migración automáticaLa fuente describe reglas, no un codemod que sustituya de forma segura todos los valores existentes de CSS.

Aporta estos datos

Muestras del espaciado actualProporciona componentes representativos y los valores que usan.
Intención de agrupaciónExplica qué elementos van juntos y qué secciones deben separarse.
Requisitos de densidadIdentifica los contextos con muchos datos, los habituales y los centrados en la lectura.

03 Decisiones importantes

Decisiones que importan

La intención queda documentada
Una tabla de tokens por sí sola no indica a un desarrollador qué gap corresponde entre una etiqueta y su campo.
Densidad sin aleatoriedad
Los modos pueden cambiar la compacidad conservando un sistema compartido, en lugar de crear otro conjunto de valores arbitrarios.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la configuración

Usa la vía de instalación documentada en el repositorio y conserva los archivos complementarios a los que se haga referencia. Esta entrada describe un método de diseño concreto, no una aplicación ejecutable.

Archivo fuente original

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/spacing-system/SKILL.md

No se requiere ninguna herramienta de tokens específica; la aplicación depende del sistema de componentes existente.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo

Usa spacing-system para conciliar nuestros formularios de ajustes y la tabla densa de registros. Define una unidad base, una escala con nombres, reglas de inset/stack/inline y modos compacto y cómodo. Explica por separado el espaciado entre etiqueta y campo y el espaciado entre secciones; no rediseñes las columnas de la página.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

Cada valor propuesto pertenece a la escala documentada.
Los grupos relacionados siguen diferenciándose visualmente de las secciones no relacionadas.
Los cambios de densidad conservan una regla de uso clara.

OpenDesign ofrece un espacio de trabajo local de diseño para agentes de programación. Que aparezca en este listado no significa que el skill esté incluido ni que sus herramientas externas, credenciales y dependencias de software vengan incluidas.

Descargar OpenDesign Leer la guía rápida

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: Owl-Listener
Repositorio: Owl-Listener/designer-skills
Archivo del skill: ui-design/skills/spacing-system/SKILL.md
Licencia: MIT
Instantánea revisada: 2026-10-07 · 9a6930cf84a8

Resumen editorial de la fuente

Un marco de espaciado compacto que abarca una escala base, aplicaciones semánticas, agrupación y modos de densidad.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Requiere una base de 8 píxeles?

La fuente ofrece bases de 4 y 8 píxeles como opciones habituales; elige según las necesidades del producto.

¿El margen de página forma parte del sistema?

Puede documentar márgenes de página coherentes, pero la estructura más amplia de columnas y breakpoints corresponde a la especificación de cuadrícula.

¿Por qué dar nombre a distintos tipos de espaciado?

Inset, stack, inline y gap describen cómo se usa el espacio, lo que hace la aplicación más repetible que una simple lista de números.

OpenDesign

Deja espacio para la siguiente iteración de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño