A geração de componentes de IU usando Magic Patterns é dividida principalmente nas seguintes etapas:
- Seleção do sistema de designOpção para expor um sistema de design (por exemplo, Material UI) ou importar um sistema de design personalizado
- prompt de entradaNa caixa de entrada da interface principal, insira uma descrição de texto específica; quanto mais detalhada for a descrição, melhor será o efeito de geração.
- Carregar conteúdo de referência (opcional)Imagem de referência: Você pode carregar uma imagem de referência ou um arquivo Figma clicando em "Upload Image" (Carregar imagem) ou "Import Figma" (Importar Figma).
- Gerar visualizaçãoClique no botão "Generate" (Gerar) e a IA gerará os componentes da interface do usuário em alguns segundos, que podem ser visualizados na janela de visualização à direita.
- Ajustes editoriaisAjuste o layout, as cores ou as fontes e visualize e edite o código React por meio das guias de código
- Exportaçãoexportação como arquivo Figma ou download direto do código React
Importante: as interfaces de usuário complexas podem exigir a geração passo a passo de componentes individuais antes de serem combinados. Cada operação de geração consome um crédito, mas a geração de erros ou a correção com IA não consomem.
Essa resposta foi extraída do artigoMagic Patterns: ferramentas de IA para gerar rapidamente designs de interface de usuárioO
Não pode ser reproduzido sem permissão:Ferramentas de produtividade de IA " Como usar o Magic Patterns para gerar componentes de interface do usuário? Quais são as etapas específicas?
Português do Brasil 
简体中文 
English 
日本語 
Deutsch