106.9K+Baixar
Ir para o guia de uso
Pixel2Motionpor nolangz

Pixel2Motion Skill.

Reconstrua um logo rasterizado como SVG suave e inspecione uma revelação coreografada em HTML.

  • Animação de logo
  • SVG
Baixar OpenDesignVer guia de uso
Análise da fonte · pixel2motionSKILL.md
Tarefa Reconstrua um logo rasterizado como SVG suave e inspecione uma revelação coreografada em HTML. Entregáveis Um logo.svg editável com identificadores estáveis para as partes animadas. Antes de começar Forneça o melhor logo rasterizado disponível e especifique tamanho de exibição, fundo e contexto de revelação. A geometria SVG estática é revisada antes da coreografia; preserve a imagem original para comparar sobreposições.
Resumo editorial · fonte revisada em 2026-11-02 · não é um exemplo gerado

01 Funcionalidades

Reconstrua um logo rasterizado como SVG suave e inspecione uma revelação coreografada em HTML

Explore pixel2motion para reconstruir logos rasterizados em SVG, criar revelações interativas e conferir sobreposições de geometria e movimento quadro a quadro.

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

A abordagem de trabalho

pixel2motion parte de um logo rasterizado e o divide em partes que podem se mover independentemente. Reconstrói essas partes como geometria SVG editável antes de coreografar a revelação. Bordas suaves, espaço negativo correto e silhueta fiel têm prioridade sobre reproduzir cada pixel suavizado da captura original.

A entrega inclui o logo estático, um estudo de movimento interativo em HTML e evidências de inspeção. Um contrato para o quadro final conecta as duas etapas: a animação deve terminar exatamente na mesma marca verificada. Replay, câmera lenta e controle de velocidade permitem revisar a coreografia; hooks de timestamp ajudam o agente a inspecionar cruzamentos e transferências difíceis.

Entregas esperadas

  • Um logo.svg editável com identificadores estáveis para as partes animadas.
  • Um logo_motion.html independente com replay, velocidade e câmera lenta.
  • Uma especificação de movimento, sobreposições de geometria e quadros capturados da animação.
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Identifique os elementos em cena

    Inspecione a imagem original, diferencie o símbolo do logotipo tipográfico e escolha o contexto de uso. Registre a personalidade da marca e a ordem de revelação antes de ajustar a geometria.

  2. 02
    Ajuste a forma fiel mais simples

    Experimente primitivas e poucas curvas suaves antes de aumentar a complexidade dos caminhos. Compare sobreposições renderizadas e inspecione bordas ampliadas; a fonte trata IoU como diagnóstico, não como nota universal de aprovação.

  3. 03
    Anime e compare a chegada

    Construa o movimento sobre identificadores estáveis e inspecione antecipação, ação, cruzamentos e acomodação. Compare o quadro final com o estado estático no mesmo navegador e viewport.

02 Quando usar

Quando usar

Forneça o melhor logo rasterizado disponível e especifique tamanho de exibição, fundo e contexto de revelação. A geometria SVG estática é revisada antes da coreografia; preserve a imagem original para comparar sobreposições.

Bom encaixe

  • O logo só existe em pixelsUse PNG, captura de tela ou outra fonte rasterizada quando a marca precisar de reconstrução vetorial e estrutura pronta para animar.
  • O movimento da marca precisa de inspeçãoA especificação, os controles e os quadros capturados permitem revisar a revelação antes de incorporá-la ao produto.

Limites a verificar

  • A geometria pode continuar como préviaA fonte limita o ciclo de ajuste e exige declarar defeitos de forma não resolvidos, em vez de escondê-los atrás de uma animação atraente.
  • Ferramentas locais são necessáriasO fluxo de evidências usa pacotes de imagem Python, Chrome e captura determinística do navegador. Ler a skill não fornece essas dependências.

Traga estas entradas

  • Imagem originalForneça a imagem de logo de maior qualidade, incluindo o fundo e a transparência pretendidos.
  • Intenção da marcaDescreva a personalidade da marca e se o uso é intro, revelação de cabeçalho, loader ou estado de hover.
  • Contexto de entregaEspecifique tamanho, timing, fundo e geometrias que devem permanecer intactas.

03 Decisões importantes

Decisões importantes

  1. Geometria editável

    Partes semânticas de SVG permitem revisar um traço ou logotipo tipográfico sem vetorizar a imagem inteira novamente.

  2. Continuidade do movimento

    Capturas em intervalos de risco procuram pausas e saltos bruscos que uma folha de contato com espaçamento regular pode não revelar.

  3. Chegada fiel

    A comparação pelo mesmo pipeline verifica se a marca em movimento termina onde está o logo estático aprovado.

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 imagem de logo de maior qualidade, incluindo o fundo e a transparência pretendidos.

Arquivo-fonte original
https://github.com/nolangz/pixel2motion/blob/e9faedb28930df0da2acf17da00c80730a78cfe8/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 pixel2motion no logo PNG fornecido para uma intro curta de site. Preserve as proporções do logotipo tipográfico, o espaço negativo e as cores originais. Separe o símbolo circular, o pequeno ponto e o logotipo em partes SVG endereçáveis. Proponha uma revelação contida que se acomode em até dois segundos. Entregue SVG estático, estudo HTML interativo, especificação de movimento e imagens de inspeção. Confira bordas ampliadas antes de animar, amostre de perto a transferência do ponto e compare o quadro final com o estado estático. Se a geometria não passar dentro do orçamento de ajuste, identifique claramente o defeito restante.

Inspecione o resultado

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

  • Inspecione bordas curvas ampliadas e registre incompatibilidades estruturais.
  • Capture quadros ao redor de cada cruzamento ou transferência entre partes, não apenas no meio.
  • Verifique replay, controle de velocidade em tempo real, movimento reduzido e correspondência com o estado estático final.

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
nolangz
Repositório
nolangz/pixel2motion
Arquivo da skill
SKILL.md
Licença
MIT
Versão revisada
2026-11-02 · e9faedb28930
Resumo editorial da fonte
Reconstrua um logo rasterizado como SVG suave e inspecione uma revelação coreografada em HTML.

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 apenas traça a imagem?

Começa pela geometria de menor complexidade capaz de representar a marca. Contornos derivados de traçado auxiliam a medição e precisam ser suavizados ou reajustados antes da aprovação.

Uma pontuação IoU alta é suficiente?

Não. A fonte separa explicitamente o ajuste numérico da suavidade das bordas e da correção estrutural. Um contorno serrilhado com pontuação alta ainda pode falhar no critério visual.

O resultado padrão é um arquivo de vídeo?

A entrega principal documentada é HTML interativo com a mesma geometria de logo.svg. Exportar vídeo exigiria uma etapa de entrega solicitada separadamente.

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/nolangz/pixel2motion/blob/e9faedb28930df0da2acf17da00c80730a78cfe8/SKILL.md