Spacing Systempor Owl-Listener

Spacing System Skill.

Escolha o espaçamento pela relação e pela finalidade, não por ajustes isolados de pixels.

Design de UI
Design Tokens

Revisão da fonte · Spacing SystemSKILL.md

Tarefa Design de UI Produz • Uma escala de espaçamento nomeada, derivada de uma unidade base escolhida. • Regras de uso para inset, stack, inline e gaps de grid. • Mapeamentos de modos de densidade para diferentes contextos de conteúdo. Antes de começar Nenhuma ferramenta de tokens específica é necessária; a aplicação depende do sistema de componentes existente.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Dê um significado consistente ao espaçamento

Uma estrutura compacta de espaçamento que cobre escala base, aplicações semânticas, agrupamento e modos de densidade.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Spacing System estabelece uma unidade base e uma escala reutilizável para margens, paddings e gaps. Ela distingue o espaço inset dentro de um contêiner de stacks verticais, relações inline e gaps de grid, de modo que números idênticos ainda possam ter finalidades claramente documentadas.

A fonte relaciona o espaçamento ao agrupamento: itens relacionados ficam mais próximos, enquanto seções não relacionadas recebem mais separação. Ela também descreve modos de densidade para diferentes contextos. É uma especificação de sistema concisa, não uma afirmação de que a escala de exemplo servirá para todos os produtos sem alterações.

Entregáveis esperados

Uma escala de espaçamento nomeada, derivada de uma unidade base escolhida.
Regras de uso para inset, stack, inline e gaps de grid.
Mapeamentos de modos de densidade para diferentes contextos de conteúdo.

Ver o briefing de exemplo

Do briefing à revisão

01
Escolha a base e a escala
Revise os padrões existentes e escolha um vocabulário limitado de espaçamento, em vez de preservar todos os valores acidentais.
02
Atribua usos semânticos
Defina quais passos pertencem ao interior dos componentes, entre controles relacionados e entre seções.
03
Especifique as mudanças de densidade
Explique como os modos compacto e espaçoso alteram o padrão, mantendo legíveis as relações de agrupamento.

02 Quando usar

Quando usar

Nenhuma ferramenta de tokens específica é necessária; a aplicação depende do sistema de componentes existente.

Bom encaixe

Padding inconsistente em componentesÚtil quando controles semelhantes usam valores de espaçamento sem relação entre si.
Várias necessidades de densidadeAtende produtos que combinam telas de trabalho densas com superfícies de leitura mais relaxadas.

Limites a verificar

Não é uma grade de colunasColunas de página e gutters responsivos pertencem a Layout Grid.
Não é migração automáticaA fonte descreve regras, não um codemod que substitua com segurança todos os valores CSS existentes.

Traga estes insumos

Amostras do espaçamento atualForneça componentes representativos e os valores que eles usam.
Intenção de agrupamentoExplique quais elementos pertencem juntos e quais seções devem ficar separadas.
Requisitos de densidadeIdentifique contextos com muitos dados, comuns e voltados à leitura.

03 Decisões importantes

Decisões que importam

A intenção é documentada
Uma tabela de tokens sozinha não diz a quem desenvolve qual gap pertence entre um rótulo e seu campo.
Densidade sem aleatoriedade
Os modos podem mudar a compactação preservando um sistema compartilhado, em vez de criar outro conjunto de valores arbitrários.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

Use o método de instalação documentado no repositório e mantenha quaisquer arquivos complementares referenciados. Esta entrada descreve um método de design focado, não um aplicativo executável.

Arquivo-fonte original

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

Nenhuma ferramenta de tokens específica é necessária; a aplicação depende do sistema de componentes existente.

Comece com um entregável

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use spacing-system para reconciliar nossos formulários de configurações e a tabela densa de registros. Defina uma unidade base, uma escala nomeada, regras de inset/stack/inline e modos compacto versus confortável. Explique o espaçamento entre rótulo e campo separadamente do espaçamento entre seções; não redesenhe as colunas da página.

Inspecione o resultado

Compare a saída real com estes critérios observáveis.

Todo valor proposto pertence à escala documentada.
Grupos relacionados continuam visualmente distintos de seções não relacionadas.
As mudanças de densidade preservam uma regra de uso clara.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o início rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte: Owl-Listener
Repositório: Owl-Listener/designer-skills
Arquivo da skill: ui-design/skills/spacing-system/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · 9a6930cf84a8

Resumo editorial da fonte

Uma estrutura compacta de espaçamento que cobre escala base, aplicações semânticas, agrupamento e modos de densidade.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal datado de popularidade, não de uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Exige uma base de 8 pixels?

A fonte apresenta bases de 4 e 8 pixels como opções típicas; escolha conforme as necessidades do produto.

A margem da página faz parte do sistema?

Ela pode documentar margens de página consistentes, mas a estrutura mais ampla de colunas e breakpoints pertence à especificação de grid.

Por que nomear diferentes tipos de espaçamento?

Inset, stack, inline e gap descrevem como o espaço é usado, tornando a aplicação mais repetível do que uma simples lista de números.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design