Haizhucodex Design Skill

O que Haizhucodex Design Skill faz?

Crie experiências frontend refinadas com uma tese visual clara, modelo de interação utilizável, componentes acessíveis, movimento contido e qualidade de implementação verificada.

Modos de Operação

Escolha um modo com base na solicitação e no estado do projeto:

• Design: estabeleça hierarquia, direção visual, tokens, componentes, estados e movimento antes da implementação.
• Build: implemente um resumo, captura de tela, maquete ou sistema de design existente na stack frontend atual.
• Redesign: preserve o comportamento do produto enquanto melhora hierarquia, identidade visual, responsividade, acessibilidade e qualidade percebida.
• Audit: inspecione uma interface existente, classifique os problemas por impacto e corrija os de maior valor.
• Design system: crie ou refine DESIGN.md, tokens, regras de componentes, regras de movimento e padrões reutilizáveis.

Fluxo de Trabalho Principal

1. Inspecione o repositório antes de editar. Identifique framework, gerenciador de pacotes, rotas, componentes, sistema de estilização, tokens, dependências, comandos de build e convenções do projeto.
2. Extraia um resumo de design conciso contendo tipo de produto, público-alvo, tarefa principal, hierarquia de conteúdo, atributos da marca, plataforma, alvos responsivos, requisitos de acessibilidade e restrições técnicas.
3. Selecione uma tese visual. Defina o caráter tipográfico, comportamento das cores, densidade de espaçamento, linguagem das formas, elevação, imagens e hierarquia de movimento.
4. Direcione o trabalho pelas cinco habilidades especialistas, quando disponíveis:
   • UI UX Pro Max: padrões de UX por categoria de produto, arquitetura de informação, opções de paleta e tipografia, convenções de plataforma e restrições de acessibilidade.
   • Design MD Collection: linguagem de design do projeto, tokens, regras reutilizáveis de componentes e orientações para DESIGN.md.
   • Taste Skill: composição, diferenciação, julgamento visual, restrições antigênicas e direção de arte.
   • shadcn: primitivos React acessíveis, APIs de componentes, formulários, sobreposições, navegação, exibição de dados e estados.
   • Impeccable: auditoria final cobrindo hierarquia, tipografia, espaçamento, polimento, responsividade e acessibilidade.
5. Leia references/prompt-library.md. Selecione apenas os padrões de origem que atendam a um objetivo específico de produto ou interação.
6. Produza um mapa de implementação cobrindo seções da página, componentes reutilizáveis, estados de conteúdo, comportamento responsivo, interações, propriedade das animações, comportamento de movimento reduzido e comandos de verificação.
7. Implemente diretamente na stack existente. Reutilize dependências e convenções atuais, a menos que uma nova dependência ofereça valor claro.
8. Verifique os estados de carregamento, vazio, erro, desabilitado, hover, foco, ativo, selecionado, sucesso e destrutivo, quando aplicável.
9. Teste a navegação por teclado, visibilidade do foco, estrutura semântica, contraste, alvos de toque, layout responsivo, erros de runtime e prefers-reduced-motion.
10. Execute formatador, linter, verificação de tipos, testes e build de produção. Corrija falhas introduzidas pelo trabalho.
11. Realize uma crítica final no estilo Impeccable e corrija os defeitos restantes de maior impacto.

Regras de Seleção de Padrões

• Use Motion Sites para narrativas de rolagem, transições editoriais, lançamentos, portfólios e seções hero imersivas.
• Use React Bits para primitivos de animação React reutilizáveis, textos animados, listas, cards, fundos e transições.
• Use Uiverse para controles focados e microinterações como botões, inputs, toggles, loaders e tooltips.
• Use Anime.js para timelines coordenadas, sequências SVG, animação escalonada e movimento orientado por estado que CSS sozinho não consegue expressar de forma limpa.
• Use Aceternity UI para composições premium de landing pages em React, vitrines de funcionalidades, navegação, cards e fundos atmosféricos.

Não empilhe efeitos característicos apenas por estarem disponíveis. Cada efeito deve apoiar hierarquia, feedback, orientação, storytelling ou compreensão.

Diretrizes de Design

• Estabeleça uma ideia visual dominante e aplique-a consistentemente.
• Priorize a conclusão de tarefas e a arquitetura da informação sobre a decoração.
• Evite estilos genéricos de IA com muitos gradientes, excesso de glassmorfismo, cards flutuantes aleatórios, gráficos ornamentais, retângulos uniformemente arredondados e animação em todos os elementos.
• Limite o número de tipografias proeminentes, cores de destaque, níveis de elevação, raios de borda e famílias de movimento.
• Use HTML semântico e primitivos de componentes acessíveis.
• Trate o mobile como uma composição deliberada, não como um layout de desktop comprimido.
• Prefira transições CSS para mudanças de estado simples e introduza animação JavaScript apenas quando coordenação ou sequenciamento for necessário.
• Anime transformações e opacidade sempre que possível. Evite thrashing de layout e animação contínua desnecessária.
• Preserve conteúdo legível antes da hidratação e quando a animação estiver desabilitada.
• Respeite licenças externas. Use APIs documentadas ou métodos de instalação e não redistribua código-fonte de terceiros sem permissão.

Política de Dependências

Antes de adicionar um pacote:

1. Verifique se o projeto já possui uma dependência equivalente.
2. Confirme a compatibilidade com o framework, modelo de renderização e versão.
3. Explique por que CSS ou utilitários existentes são insuficientes.
4. Instale com o gerenciador de pacotes do repositório.
5. Mantenha as importações restritas e remova experimentos não utilizados.
6. Registre a dependência e seu propósito no resumo final.

Se uma habilidade ou biblioteca nomeada não estiver disponível, execute sua função diretamente e continue. Não bloqueie a implementação rotineira em uma integração opcional.

Entregáveis Obrigatórios

Para trabalho apenas de design, retorne:

1. Resumo de design.
2. Tese visual.
3. Arquitetura de página e componentes.
4. Direção de tokens e tipografia.
5. Plano de movimento.
6. Requisitos de responsividade e acessibilidade.

Para trabalho de implementação, retorne:

1. Direção selecionada e justificativa.
2. Arquivos alterados e principais decisões de componentes.
3. Comportamento de movimento e interação.
4. Verificação de acessibilidade e responsividade.
5. Comandos executados e resultados.
6. Dependências adicionadas.
7. Suposições ou trade-offs restantes.