106.9K+Baixar
Ir para o guia de uso
Color Motionpor iart-ai

Color Motion Skill.

Crie paletas em movimento, transições perceptuais de cor e exportações consistentes.

  • Sistemas de cores
  • Direção de movimento
Baixar OpenDesignVer guia de uso
Análise da fonte · color-motionSKILL.md
Tarefa Crie paletas em movimento, transições perceptuais de cor e exportações consistentes. Entregáveis Uma paleta com valores de cor explícitos e funções atribuídas. Antes de começar As orientações da fonte sobre player e exportação ainda precisam ser verificadas no software instalado e no navegador real de destino.
Resumo editorial · fonte revisada em 2026-11-02 · não é um exemplo gerado

01 Funcionalidades

Crie paletas em movimento, transições perceptuais de cor e exportações consistentes

Explore interpolação em OKLCH e Lab, gradientes animados, ordem de tratamento de cor e verificações práticas de diferenças entre prévia e exportação.

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

A abordagem de trabalho

color-motion trata das decisões de cor em uma peça em movimento: construção de paleta, transições de gradiente, tratamento de cor para definir o clima e consistência de renderização. Propõe uma paleta contida com valores explícitos e usa espaços perceptuais como OKLCH ou Lab para projetar a interpolação.

Para web, a fonte descreve um HTML independente com um único mecanismo de animação e inspeção de quadros congelados. Para vídeo, direciona ao diagnóstico de gerenciamento de cor. Uma exportação desbotada deve ser investigada pelo espaço de cor de trabalho, pelas tags incorporadas e pela interpretação na reprodução antes de recolorir a arte.

Entregas esperadas

  • Uma paleta com valores de cor explícitos e funções atribuídas.
  • Código de gradiente ou transição em um exemplo visível no navegador.
  • Um checklist de tratamento ou gerenciamento de cor para o fluxo de vídeo escolhido.
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Atribua funções às cores

    Escolha uma cor principal, um destaque e neutros adequados ao briefing. Separe necessidades de hierarquia e contraste de variações decorativas.

  2. 02
    Construa o caminho da transição

    Projete a interpolação em um espaço perceptual e selecione um mecanismo de animação. Inspecione o ponto médio, além das duas cores das extremidades.

  3. 03
    Confira a aparência entregue

    Congele quadros representativos da web ou compare tags e aparência do vídeo renderizado no contexto de reprodução pretendido. Investigue faixas no gradiente e mudanças de brilho antes de entregar.

02 Quando usar

Quando usar

As orientações da fonte sobre player e exportação ainda precisam ser verificadas no software instalado e no navegador real de destino.

Bom encaixe

  • O gradiente fica turvo no meioA skill foca o caminho entre as cores, não apenas as amostras das extremidades.
  • A exportação difere da préviaUse o caminho de diagnóstico para inspecionar o processamento de cor e as suposições do player.

Limites a verificar

  • O comportamento da cor varia com o ambienteAs orientações da fonte sobre player e exportação ainda precisam ser verificadas no software instalado e no navegador real de destino.
  • Uma paleta não comprova acessibilidadeTextos e controles precisam ser conferidos em seus estados renderizados, inclusive sobre fundos animados.

Traga estas entradas

  • Cores da marcaForneça valores aprovados e restrições da paleta.
  • Objetivo de movimentoDescreva o gradiente, a mudança de estado ou o tratamento de cor do vídeo e sua duração.
  • Ambiente de entregaIdentifique navegador ou player, configurações de exportação e, se estiver investigando um problema, a diferença observada.

03 Decisões importantes

Decisões importantes

  1. Interpolação explícita

    Definir o espaço de cor torna o ponto médio uma escolha deliberada.

  2. Movimento inspecionável

    Capturas do início, meio e fim revelam faixas ou combinações ilegíveis.

  3. Diagnóstico separado

    Verificar tags e reprodução ajuda a distinguir problemas no processamento de renderização de decisões de design.

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 valores aprovados e restrições da paleta.

Arquivo-fonte original
https://github.com/iart-ai/motion-design-skills/blob/3c129f769d90a1328c209c386492333c9ac62312/skills/color-motion/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 color-motion para criar um fundo animado contido com as cores azul-marinho e âmbar da marca fornecidas. Entregue um exemplo HTML independente com texto legível em cor neutra e um ciclo lento de gradiente. Especifique a paleta em hex e OKLCH, inspecione o ponto médio da transição em busca de cores apagadas ou turvas e inclua um estado estático para movimento reduzido. Capture os mesmos momentos de início, meio e fim após cada ajuste. Não acrescente um segundo mecanismo de animação. Se o navegador se comportar de forma diferente da interpolação prevista, descreva a limitação e mantenha o texto legível em todos os estados conferidos.

Inspecione o resultado

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

  • Inspecione as cores das extremidades e do meio, as faixas e o contraste do texto.
  • Verifique que um único relógio controla a animação e que os quadros congelados se repetem.
  • Teste a apresentação estática de movimento reduzido e o ambiente real de entrega.

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
iart-ai
Repositório
iart-ai/motion-design-skills
Arquivo da skill
SKILL.md
Licença
MIT
Versão revisada
2026-11-02 · 3c129f769d90
Resumo editorial da fonte
Crie paletas em movimento, transições perceptuais de cor e exportações consistentes.

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

Por que o ponto médio importa?

Duas cores atraentes nas extremidades podem passar por uma região apagada indesejada. A skill inclui o espaço de interpolação e os quadros intermediários no design.

Aplica-se apenas a gradientes na web?

Não. A fonte também cobre ordem de tratamento de cor e diagnóstico de gerenciamento de cor em vídeo, com referências separadas para essas tarefas.

Devo recolorir imediatamente uma exportação desbotada?

A fonte recomenda conferir primeiro o espaço de cor de trabalho, as tags de cor incorporadas e o caminho de reprodução. Uma incompatibilidade no processamento pode mudar a aparência sem erro na arte.

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/iart-ai/motion-design-skills/blob/3c129f769d90a1328c209c386492333c9ac62312/skills/color-motion/SKILL.md