Para utilizar totalmente o valor da ferramenta, recomenda-se que as três preparações básicas a seguir sejam concluídas:
- Configuração do ambiente:Certifique-se de que seu ambiente de desenvolvimento local tenha o Node.js (≥v16) e o npm/yarn instalados, o que é um pré-requisito para a execução de projetos React
- Instalação da biblioteca de componentes:Executar no terminal
npm install @heroui/reactBiblioteca HeroUI instalada, versão ≥ 2.0.0 para ser compatível com todo o código gerado - Organização de recursos de design:Se estiver convertendo capturas de tela, exporte o design como PNG/JPG nítido com antecedência; se estiver descrevendo em texto, é recomendável separar os elementos principais primeiro (por exemplo, estrutura de layout, cores principais, pontos de interação centrais)
Sugestões avançadas: familiarizado com o sistema de nomes de classes CSS do Tailwind, ele pode ser melhor ajustado para gerar código; para uso em equipe, você pode pré-estabelecer a especificação do sistema de design (por exemplo, tamanho do arredondamento do botão, esquema de cores), para que o código gerado pela IA esteja mais alinhado com os requisitos de uniformidade do projeto.
Essa resposta foi extraída do artigoHeroUI Chat: a ferramenta de IA que transforma web design em código ReactO































