lusfer-cli/pixel-art-pix-skill

Pixel Art com pix

Use esta habilidade quando o usuário solicitar pixel art, sprites, ícones, logotipos, recursos de jogos, quadros de animação, spritesheets, GIFs ou arquivos .pix.

Princípios inegociáveis

• Prefira legibilidade em vez de detalhes.
• Trabalhe na resolução nativa; nunca crie arte de alta resolução e a reduza mentalmente.
• Use arestas firmes, coordenadas inteiras e sem suavização (antialiasing).
• Use uma paleta limitada com papéis explícitos de contorno, sombra, base, destaque e acento.
• Construa agrupamentos intencionais de cores em vez de pixels espalhados.
• Mantenha uma direção de luz consistente em todo o recurso e em todos os quadros de animação.
• Não declare conclusão apenas com a validação de sintaxe. Renderize e inspecione visualmente o resultado.

Regra antirruído

Não adicione estrelas flutuantes, brilhos, poeira, partículas, acentos de canto ou pixels decorativos isolados, a menos que o usuário os solicite explicitamente.

Para logotipos, ícones, recursos de interface do usuário (UI) e sprites com fundo transparente:

• padrão: zero componentes decorativos desconectados;
• mantenha uma margem de segurança limpa ao redor do assunto;
• prefira uma silhueta primária compacta;
• não use espaço vazio da tela como convite para adicionar decoração;
• não adicione um grupo chamado sparkles, stars, dust, particles ou similar, a menos que seja solicitado ou essencial ao assunto.

Todo agrupamento visível deve servir a pelo menos um propósito claro:

1. silhueta ou estrutura;
2. forma, iluminação ou material;
3. uma característica identificadora;
4. decoração ambiental solicitada.

Se um agrupamento não puder ser justificado em uma frase curta, remova-o. Pixels únicos são aceitáveis apenas quando são funcionais, como uma pupila, um brilho especular, o final de uma diagonal ou uma característica facial necessária.

Fluxo de trabalho obrigatório

1. Esclareça o briefing. Defina tamanho da tela, assunto, tipo de recurso, estilo, restrições de paleta, fundo e exportações. Se nenhuma decoração foi solicitada, assuma nenhuma.
2. Defina critérios de aceitação. Escolha as regras relevantes em Critérios específicos por recurso.
3. Planeje antes de desenhar. Defina a silhueta, as formas principais, os papéis da paleta, a direção da luz, o ponto focal e as poses-chave da animação.
4. Crie ou edite o fonte .pix. Nomeie grupos por função semântica. Mantenha a atmosfera opcional separada do assunto.
5. Valide o fonte. Execute pix check.
6. Renderize na escala nativa. A saída nativa é a verificação visual autoritativa.
7. Renderize uma prévia ampliada. Use escala inteira de vizinho mais próximo, normalmente --scale 8.
8. Inspecione visualmente. Verifique as renderizações nativa e ampliada contra fundos transparentes, claros e escuros quando o recurso puder aparecer em superfícies variadas.
9. Execute a passagem de limpeza. Classifique cada componente desconectado e agrupamento de cores suspeito e pequeno. Exclua qualquer coisa não intencional.
10. Audite quando possível. Execute scripts/audit_png.py no PNG nativo. Trate avisos como lembretes de revisão, não como prova automática de erro.
11. Revise e renderize novamente. Complete pelo menos uma iteração de limpeza deliberada antes de finalizar uma nova arte.
12. Exporte as entregas finais. Gere os PNGs solicitados, quadros de animação, GIFs, spritesheets e metadados.

Comandos principais

Validar e renderizar:

pix check asset.pix
pix render asset.pix -o asset-1x.png
pix render asset.pix -o asset-8x.png --scale 8

Renderizar um quadro nomeado:

pix render asset.pix --frame nome-quadro -o frame-1x.png
pix render asset.pix --frame nome-quadro -o frame-8x.png --scale 8

Auditar um PNG nativo a partir da raiz do repositório da habilidade:

python3 skills/pixel-art-pix/scripts/audit_png.py asset-1x.png

Exportar entregas de animação:

pix anim asset.pix -a nome-animacao --out-dir frames/
pix sheet asset.pix -a nome-animacao -o sheet.png --json sheet.json
pix gif asset.pix -a nome-animacao -o animation.gif

Critérios específicos por recurso

Logotipos e ícones

• Use uma silhueta dominante e espaço negativo forte.
• Padrão: zero componentes flutuantes e zero partículas ambientes.
• Evite acentos de canto de um pixel, a menos que esclareçam a marca em 1x.
• Teste em fundos transparente, claro e escuro.
• Confirme o reconhecimento no tamanho nativo e no tamanho de exibição da UI pretendido.

Sprites de personagens e objetos

• A silhueta preenchida de preto deve permanecer reconhecível.
• Olhos, armas, membros e outros identificadores devem ser legíveis em 1x.
• Evite texturas que concorram com o recurso focal.
• Mantenha sombras de contato anexadas ou claramente alinhadas ao assunto, a menos que uma sombra destacada seja intencional.

Cenários e fundos

• Estabeleça hierarquia de primeiro plano, meio plano e fundo.
• Partículas ambientes são permitidas apenas quando apoiam a ambientação, profundidade ou movimento.
• Use padrões de textura repetidos intencionalmente; evite pontilhado aleatório uniforme.

Animação

• Use poses-chave distintas em vez de pequenas mudanças arbitrárias de pixel.
• Mantenha paleta, iluminação e volumes consistentes entre os quadros.
• Verifique a transição do loop e inspecione cada quadro individualmente.
• Certifique-se de que partículas decorativas não pisquem acidentalmente entre os quadros.

Lista de verificação de limpeza obrigatória

Não marque o trabalho como concluído até que cada resposta seja satisfatória:

• O assunto é reconhecível em 1x?
• A silhueta comunica o assunto sem detalhes internos?
• Cada componente desconectado tem um propósito explícito?
• Todas as marcas de pixel único são funcionais em vez de preenchimento?
• Brilhos, estrelas, poeira e acentos de canto não solicitados foram omitidos?
• Os destaques estão agrupados e alinhados com uma única fonte de luz?
• Sombras e pontos de contato são intencionais?
• A paleta é limitada e baseada em papéis?
• O recurso tem margens limpas sem corte acidental?
• Foi inspecionado na escala 1x e ampliada?
• Foi verificado em cores de fundo apropriadas?
• Pelo menos uma revisão de limpeza foi concluída após a primeira renderização?
• Para animação, as poses-chave são legíveis e os loops estão limpos?
• Para spritesheets, os quadros estão ordenados e nomeados claramente?

Relatório de revisão visual

Ao relatar a conclusão, informe brevemente:

• tamanho nativo da tela;
• exportações geradas;
• verificações visuais realizadas;
• se componentes destacados ou pequenos agrupamentos de cores permanecem e por quê;
• qualquer decoração solicitada intencionalmente.

Não descreva pix check como validação visual. Ele valida o fonte, enquanto a renderização e a inspeção validam a obra de arte.

Referências

Leia quando uma orientação mais profunda for útil:

• Conceitos de pixel art
• QA visual e antirruído
• Referência da DSL pix

Exemplos de recursos

• Slime animado limpo
• Antipadrão de insígnia ruidosa
• Correção de insígnia limpa