Explicação dos recursos de IA do Shuffle
O design assistido por IA do Shuffle é o principal recurso que o diferencia dos editores tradicionais e é implementado de duas maneiras principais:
1. geração de linguagem natural
Depois de abrir a caixa de diálogo do assistente de IA no canto inferior esquerdo do editor, os usuários podem inserir requisitos de design específicos. Por exemplo, digite "Criar uma barra de navegação roxa com um botão de login de membro" e a IA gerará automaticamente componentes que atendam aos requisitos com base na descrição. Para melhorar a precisão da geração, é recomendável incluir os seguintes elementos:
- Tipos de componentes (por exemplo, cartões/navegação/formulários etc.)
- preferência de cor
- Requisitos funcionais (por exemplo, efeitos de resposta/hover, etc.)
- Estrutura de conteúdo (por exemplo, título + descrição + botões)
2. transformação do design
Ele suporta o upload de designs no formato PNG/JPG, e o AI analisará a estrutura do layout e os elementos visuais da imagem para gerar automaticamente os componentes HTML correspondentes. Esse processo é particularmente adequado:
- Converta rapidamente mockups fornecidos pelo designer em código editável
- Reproduzir os módulos funcionais do site de referência
- Manuseio de componentes padrão altamente repetitivos (por exemplo, cartões de exibição de merchandising)
O componente gerado manterá a classe CSS completa do Tailwind, e parâmetros como espaçamento, valores de cor etc. podem ser ajustados ainda mais por meio do painel de propriedades à direita.
Essa resposta foi extraída do artigoShuffle: editor de arrastar e soltar para criar rapidamente modelos da Web, com suporte para a extensão CursorO
Português do Brasil 
简体中文 
English 
日本語 
Deutsch