106.9K+Baixar
Ir para o guia de uso
Design Tokenspor julianoczkowski

Design Tokens Skill.

Transforme uma direção de design escolhida em valores de tema reutilizáveis.

  • Tokens
  • Tailwind
Baixar OpenDesignVer guia de uso
Análise da fonte · design-tokensSKILL.md
Tarefa Transforme uma direção de design escolhida em valores de tema reutilizáveis. Entregáveis Um arquivo de tokens ou extensão de tema no formato usado pelo projeto. Antes de começar A fonte orienta o agente a ampliar um sistema existente, não sobrescrevê-lo.
Resumo editorial · fonte revisada em 2026-11-02 · não é um exemplo gerado

01 Funcionalidades

Transforme uma direção de design escolhida em valores de tema reutilizáveis

Gere ou amplie tokens CSS, Tailwind ou de tema para cor, espaçamento, tipografia, layout e movimento a partir de um briefing existente.

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

A abordagem de trabalho

Design Tokens estabelece os valores que novos componentes vão referenciar. Começa inspecionando variáveis CSS, provedores de tema, arquivos de tokens e dependências do framework existentes; depois lê o briefing da funcionalidade. Se já houver um sistema, a skill preenche suas lacunas em vez de substituí-lo.

A saída acompanha a stack do projeto: propriedades personalizadas CSS, configuração Tailwind ou módulo de tema. As paletas clara e escura fazem parte do fluxo documentado, assim como valores de espaçamento, tipografia, layout, movimento e responsividade. O agente explica a direção visual escolhida e as decisões que se afastam dela.

Entregas esperadas

  • Um arquivo de tokens ou extensão de tema no formato usado pelo projeto.
  • Paletas clara e escura intencionais com papéis semânticos.
  • Um relato breve da direção de design e das escolhas de implementação.
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Inspecione as bases existentes

    Busque variáveis CSS, configuração Tailwind, provedores de tema e exportações de tokens. Identifique lacunas, como ausência de modo escuro ou valores de movimento, antes de gerar algo.

  2. 02
    Conecte o briefing à stack

    Leia o briefing da funcionalidade ativa e sua direção estética. Escolha o formato de tokens adequado à aplicação, usando propriedades personalizadas CSS como padrão quando a stack não estiver clara.

  3. 03
    Defina escalas relacionadas

    Crie cores semânticas e valores consistentes de espaçamento, tipografia e layout. Inclua categorias de movimento e breakpoints que os componentes possam referenciar.

  4. 04
    Construa os dois modos de tema

    Projete deliberadamente os valores escuros e suporte os padrões da fonte para preferência do sistema e tema manual. Explique como os novos valores ampliam o sistema existente.

02 Quando usar

Quando usar

A fonte orienta o agente a ampliar um sistema existente, não sobrescrevê-lo.

Bom encaixe

  • Antes de construir componentesUma nova funcionalidade precisa de valores consistentes antes de suas partes visuais serem construídas.
  • Bases incompletasUm tema existente carece de categorias ou de valores de modo escuro intencionais.

Limites a verificar

  • Preserve os tokens existentesA fonte orienta o agente a ampliar um sistema existente, não sobrescrevê-lo.
  • Direção de design necessáriaQuando não houver briefing, estabeleça a direção pretendida. Uma filosofia estética nomeada obtém seus parâmetros da skill complementar frontend-design.
  • Valores precisam de testes na aplicaçãoUma paleta gerada ainda exige verificação de contraste e renderização nos componentes reais.

Traga estas entradas

  • Briefing da funcionalidadeForneça a direção visual aceita e as decisões de design relevantes.
  • Fonte do temaForneça variáveis atuais, arquivos de configuração e exportações de tokens.
  • Stack da aplicaçãoIdentifique CSS, Tailwind ou uma implementação com provedor de tema.

03 Decisões importantes

Decisões importantes

  1. Reutilização semântica

    Componentes podem referenciar papéis como texto, superfície e foco em vez de valores arbitrários.

  2. Modos intencionais

    O modo escuro é projetado junto do claro.

  3. Adequação à stack

    Os tokens são entregues onde a aplicação atual consegue consumi-los.

04 Exemplo de briefing

Experimente um briefing específico

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

Confira a fonte e a configuração

Forneça a direção visual aceita e as decisões de design relevantes.

Arquivo-fonte original
https://github.com/julianoczkowski/designer-skills/blob/c259656c76d9758d7ead46b0d2f125cbe84f8665/design-tokens/SKILL.md

A referência abaixo abre as instruções originais. Confira a configuração do repositório antes de usá-las; não é um comando de instalação.

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 design-tokens para ampliar o tema da nossa nova funcionalidade de relatórios. Primeiro leia o briefing aprovado e inspecione as variáveis CSS, configurações Tailwind e provedores de tema existentes. Preserve os nomes atuais dos tokens e preencha apenas lacunas documentadas. Precisamos de superfícies semânticas de gráficos, cores de status, espaçamentos e valores de tipografia que funcionem nos modos claro e escuro. Use o formato existente do projeto e explique como a seleção manual de tema interage com a preferência do sistema. Inclua um mapeamento dos novos valores aos papéis pretendidos e sinalize combinações de paleta que ainda precisam de testes de contraste renderizado.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

  • Definições de tokens existentes permanecem intactas, salvo alteração explicitamente justificada.
  • Ambos os temas cobrem os papéis semânticos pretendidos.
  • Novos componentes conseguem consumir a saída no sistema real de estilos do projeto.

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 OpenDesignLer o guia 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
julianoczkowski
Repositório
julianoczkowski/designer-skills
Arquivo da skill
SKILL.md
Licença
Apache-2.0
Versão revisada
2026-11-02 · c259656c76d9
Resumo editorial da fonte
Transforme uma direção de design escolhida em valores de tema reutilizáveis.

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

06 Perguntas antes de começar

Perguntas antes de começar

Ela sempre cria um novo arquivo tokens.css?

Não. A fonte escolhe variáveis CSS, configuração Tailwind ou módulo de tema conforme a stack.

Como o modo escuro deve ser derivado?

A fonte exige escolhas intencionais de paleta, em vez de uma simples inversão das cores claras.

Pode trabalhar com um sistema existente?

Sim. Começa encontrando tokens existentes e preenchendo suas lacunas.

OpenDesign

Mantenha o briefing e o trabalho de design juntos.

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 OpenDesignExplorar skills de design
Arquivo-fonte original
https://github.com/julianoczkowski/designer-skills/blob/c259656c76d9758d7ead46b0d2f125cbe84f8665/design-tokens/SKILL.md