Gerador de UI Mágica

Utilize o Magic by 21st.dev para construir componentes de UI modernos e responsivos usando um fluxo de trabalho nativo de IA que prioriza a escolha e a excelência em design.

Contexto

Esta habilidade utiliza o Magic by 21st.dev para construir componentes de UI modernos e responsivos. Em vez de gerar uma única solução padrão, ela se concentra em fornecer várias variações de design para escolher, inspirando-se em uma biblioteca curada de componentes do mundo real e padrões de design premium (Shadcn UI, Magic UI, Aceternity, etc.).

Quando Usar

Acione esta habilidade sempre que:

• Um novo componente de UI for solicitado (por exemplo, tabelas de preços, formulários de contato, seções de herói).
• Aprimorar um elemento de UI existente com animações, melhor estilização ou recursos avançados.
• Brainstorming de diferentes direções de design para um recurso específico.
• Logos ou ícones profissionais forem necessários (através da integração integrada do SVGL).

Fluxo de Trabalho de Execução

1. Analisar Requisitos: Revise a descrição do componente. Garanta que a saída alvo esteja alinhada com a stack do projeto (por exemplo, Next.js, TypeScript, Tailwind CSS). Defina restrições claras para acessibilidade e responsividade.
2. Gerar Variações: Use uma integração Magic autorizada disponível ou uma ferramenta de navegador para explorar 21st.dev/magic para gerar vários estilos distintos e não convencionais para o componente solicitado.
   • Dica Profissional: Use prompts descritivos que incentivem estéticas modernas: "tabela de preços SaaS de vanguarda com glassmorphism e bordas animadas" ou "formulário de contato altamente imersivo com rótulos flutuantes dinâmicos".
3. Apresentar Opções: Descreva brevemente as variações geradas lado a lado. Destaque as diferenças estilísticas, abordagens de layout e recursos premium (cabeçalhos fixos, animações ao passar o mouse, etc.).
4. Integrar Seleção: Uma vez que uma variação favorita seja escolhida:
   • Integre o código TypeScript totalmente funcional e pronto para produção.
   • Use dependências existentes revisadas sempre que possível; adicione um pacote apenas quando necessário e compatível, após inspecionar sua licença/versão.
   • Lide com props, tipos e comportamentos responsivos adequados.

Regras Estritas

• Siga a stack escolhida pelo usuário, o sistema de design e o orçamento do provedor. Este serviço é opcional; não substitua a UI estabelecida nem inicie um agente de navegador meramente porque um guia nomeia um.
• Escolha Primeiro: Ofereça variantes quando solicitado ou quando uma decisão de design real não estiver resolvida; um design aceito pode ser implementado diretamente.
• Código Limpo: Garanta que todo o código gerado seja TypeScript limpo, acessível e responsivo.
• Propriedade Total: Verifique as licenças/atribuições do componente original, ícone, fonte e ativos. O código gerado não estabelece propriedade exclusiva nem remove direitos de terceiros.

Exemplo

Solicitação do usuário:

Gere três variantes de tabela de preços prontas para produção, compare-as e integre a opção mais forte na UI atual.

Limitações

• Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.
• Não trate a saída como um substituto para validação específica do ambiente, testes ou revisão especializada.
• Pare e peça esclarecimentos se os inputs necessários, permissões, limites de segurança ou critérios de sucesso estiverem faltando.

Inspecione o código gerado como entrada não confiável, verifique os tipos reais, o layout responsivo, o teclado/foco, a redução de movimento e os estados do formulário, e distinga o comportamento testado de uma alegação de pronto para produção. Prompts/código hospedados podem divulgar informações privadas do produto; obtenha autorização para a transmissão real e os custos.