Shuffle: editor de arrastar e soltar para criar rapidamente modelos da Web, com suporte para a extensão Cursor

O Shuffle é um editor on-line da Web para desenvolvedores que se concentram na criação rápida de modelos profissionais e responsivos para a Web. Ele oferece uma interface de arrastar e soltar e mais de 13.200 componentes de interface do usuário compatíveis com estruturas como Tailwind CSS, Bootstrap, Bulma e Material-UI. Os desenvolvedores podem arrastar e soltar componentes diretamente na tela, ajustar estilos e conteúdo e exportar código-fonte limpo, sem dependências externas ou dependência de fornecedores. O Shuffle também oferece suporte a design assistido por IA, permitindo que os componentes sejam gerados a partir de descrições de linguagem natural ou que os designs sejam carregados para gerar modelos. É perfeito para desenvolvedores de front-end ocupados, reduzindo o retrabalho e economizando tempo para ajustes de estilo ou desenvolvimento de back-end. A documentação oficial e o suporte da comunidade são excelentes para a colaboração individual e em equipe.

Lista de funções

• Editor de arrastar e soltarCombine rapidamente componentes da interface do usuário e crie layouts de página por meio de uma interface intuitiva de arrastar e soltar.
• Biblioteca de componentes de interface do usuário avançadaComponentes de interface do usuário responsivos: mais de 13.200 componentes de interface do usuário responsivos que abrangem categorias como barras de navegação, cabeçalhos, formulários e muito mais.
• Suporte a várias estruturasCompatível com Tailwind CSS, Bootstrap, Bulma, Material-UI e shadcn/ui.
• Design assistido por IAIA: gera automaticamente componentes de IU responsivos por meio de bate-papo ou upload de designs.
• Exportação de códigoExportação com um clique de código HTML, CSS e JavaScript sem dependência para facilitar a integração.
• Bibliotecas de interface do usuário personalizadasSuporte ao carregamento de bibliotecas de interface do usuário externas, como Tailwind UI, Flowbite, etc., ou à criação de sua própria biblioteca.
• Histórico do projetoSalvamento automático de versões de projetos, suporte para visualização e restauração de versões históricas.
• Ferramentas de CLISincronização de projetos com ambientes de desenvolvimento local por meio da CLI do Shuffle, com suporte a estruturas como Next.js.
• Visualização e colaboração em tempo realSuporte à visualização em tempo real dos resultados de edição e as equipes podem colaborar em projetos de edição.
• Gerador de SVG e gradienteFerramentas integradas para gerar formas de onda SVG, fundos de gradiente e outros elementos visuais.

Usando a Ajuda

Processo de instalação e uso

O Shuffle é uma ferramenta on-line que pode ser usada sem a instalação de software. Os usuários só precisam visitar https://shuffle.dev/Registre uma conta para começar. Aqui estão as etapas detalhadas para usá-lo:

1. Registro e login::
   • show (um ingresso) https://shuffle.dev/Clique em "Sign Up" no canto superior direito para registrar sua conta.
   • Inscreva-se com seu e-mail ou conta do GitHub, verifique-o e faça login.
   • Uma conta de avaliação gratuita permite que você experimente alguns dos recursos, mas a funcionalidade principal (por exemplo, exportação de código) exige uma assinatura de um plano pago.
2. Criar um novo projeto::
   • Depois de fazer login, clique no botão "New Project" (Novo projeto) e selecione uma estrutura (por exemplo, Tailwind CSS ou Bootstrap).
   • O sistema oferece uma variedade de modelos, ou comece com uma tela em branco.
   • Selecione uma biblioteca de interface do usuário (por exemplo, DarkPro, Solstice) ou carregue uma biblioteca personalizada (por exemplo, Tailwind UI).
3. Usando o Editor de arrastar e soltar::
   • Adição de componentesO painel esquerdo exibe as categorias de componentes (por exemplo, cabeçalhos, rodapés). Arraste o componente desejado para a tela.
   • Ajuste do estiloClique no componente, o painel de propriedades à direita pode modificar a cor, a fonte, o espaçamento etc. Tailwind CSS ou classe Bootstrap.
   • Conteúdo editorialClique duas vezes na área de texto para inserir o conteúdo diretamente ou carregue uma imagem para substituir a imagem de espaço reservado.
   • Visualização em tempo realVisualização: O botão "Preview" na parte superior mostra como o design atual ficará em diferentes dispositivos.
4. Design assistido por IA::
   • Modo de bate-papoClique no AI Assistant no canto inferior esquerdo, insira uma descrição (por exemplo, "Criar uma barra de navegação azul") e o AI gera automaticamente o componente.
   • Faça upload de seu designCarregar um design no formato PNG/JPG, o AI o analisa e gera os componentes correspondentes.
   • Ajuste da IA para gerar resultadosOs componentes gerados podem ser arrastados e soltos para ajuste, e os estilos podem ser ajustados no painel Properties (Propriedades).
5. Exportação e sincronização::
   • Código de exportaçãoClique no botão "Export" para fazer download de um arquivo ZIP contendo HTML, CSS e JavaScript.
   • Sincronização com a CLIInstalação do Shuffle CLI: Instale o Shuffle CLI e execute o comando:

     npx @shuffle-dev/cli get <project_id> .shuffle --rules=windsurf
     

     O ID do projeto pode ser encontrado no URL do editor (por exemplo shuffle.dev/editor?project=cd0f7e984aed20beb2406e59502e7d26c44bc15f).

   • Após a sincronização, o código pode ser integrado ao Next.js ou a outros projetos de estrutura.
6. Gerenciamento do histórico do projeto::
   • O sistema salva automaticamente um instantâneo do projeto a cada poucos minutos.
   • Salvamento manual usando teclas de atalho Shift + Ctrl + S.
   • Visualize o histórico no painel "Project History" (Histórico do projeto) e clique em "Restore" (Restaurar) para reverter para uma versão específica.
7. Uso de ferramentas adicionais::
   • Gerador de forma de onda SVGSelecione "Wave Generator" (Gerador de ondas) no menu "Tools" (Ferramentas), ajuste a cor e a complexidade e faça o download do arquivo SVG.
   • Gerador de gradienteSelecione a cor e a direção, visualize e exporte o código de gradiente CSS.
   • Fazer upload de bibliotecas personalizadasCarregar bibliotecas da interface do usuário em formato ZIP no painel "Library", que deve estar em conformidade com o formato Shuffle (consulte https://shuffle.dev/docs).

Operação da função em destaque

• Geração de componentes orientada por IAFuncionalidade de IA: a funcionalidade de IA é o destaque do Shuffle. Os usuários podem descrever suas necessidades em linguagem natural (por exemplo, "criar um cartão de produto para um site de comércio eletrônico") e a IA gera componentes responsivos. Uma vez gerados, os usuários podem arrastar o componente para a tela e ajustar o conteúdo ou as classes CSS do Tailwind. Quando você carrega seu design, a IA analisa o layout e gera componentes que se aproximam do original, facilitando a rápida transformação do design em código.
• Suporte a várias estruturasPor exemplo, se você selecionar a estrutura Bootstrap, o componente usará as classes Bootstrap; mude para o Tailwind CSS e o componente se adaptará automaticamente às classes Tailwind. Por exemplo, se você selecionar a estrutura Bootstrap, o componente usará as classes Bootstrap; mude para o Tailwind CSS e o componente se adaptará automaticamente às classes Tailwind. Essa flexibilidade permite que os desenvolvedores troquem de estrutura sem precisar reescrever o código.
• Integração da CLICLI do Shuffle: A CLI do Shuffle é para usuários avançados. Em execução npx @shuffle-dev/cli --help Exibir comandos. Depois de sincronizar o projeto localmente, ele pode ser desenvolvido com IDEs como o VS Code, que é adequado para projetos que exigem lógica de back-end complexa.

advertência

• As contas gratuitas têm funcionalidade limitada; recomenda-se assinar um plano pago após a avaliação com base em suas necessidades (veja detalhes). https://shuffle.dev/pricing).
• As bibliotecas de interface do usuário personalizadas carregadas precisam estar em conformidade com o formato do Shuffle; recomenda-se consultar a documentação oficial. https://shuffle.dev/docs.
• O projeto exporta código sem dependências externas, mas precisa ser verificado quanto à compatibilidade com o navegador (por exemplo, o Tailwind CSS exige a configuração do PostCSS).

cenário do aplicativo

1. Prototipagem rápida
   Os desenvolvedores precisam criar rapidamente protótipos de páginas da Web para seus clientes. Usando o editor de arrastar e soltar do Shuffle, combinado com uma biblioteca de componentes de interface do usuário prontos para uso, você pode criar páginas responsivas em minutos, exportar o código e demonstrá-lo.
2. Desenvolvimento web de comércio eletrônico
   Os desenvolvedores de comércio eletrônico podem usar bibliotecas de interface do usuário, como a Vendia, para criar rapidamente páginas de demonstração de produtos, carrinhos de compras e páginas de checkout.
3. Painéis de controle e painéis de gerenciamento
   Os analistas ou administradores de dados podem criar rapidamente painéis de apresentação de dados usando as bibliotecas Trizzle ou Artemis, e a ferramenta CLI suporta a sincronização de designs com projetos Next.js, facilitando a adição de APIs de back-end.
4. Site de portfólio pessoal
   Os freelancers podem criar homepages exclusivas com as ferramentas de gradiente e SVG do Shuffle. Exporte o código e implemente no GitHub Pages ou no Vercel para entrar no ar rapidamente.
5. Projetos de trabalho em equipe
   As equipes podem colaborar na edição de modelos da Web com visualização ao vivo e recursos de histórico do projeto. Os designers fazem upload de modelos, os desenvolvedores ajustam o código e a CLI é sincronizada com o ambiente de desenvolvimento local.

QA

1. Quais estruturas são compatíveis com o Shuffle?
   Suporta Tailwind CSS, Bootstrap, Bulma, Material-UI e shadcn/ui. O usuário pode alternar entre estruturas, e o código do componente é adaptado automaticamente.
2. Como faço para carregar uma biblioteca de IU personalizada?
   Carregue as bibliotecas da interface do usuário no formato ZIP no painel "Library", que deve estar em conformidade com o formato Shuffle. Consulte https://shuffle.dev/docs Configure o Tailwind UI ou o Flowbite.
3. Quais são as limitações de uma conta gratuita?
   As contas gratuitas estão disponíveis para experimentar alguns dos componentes e recursos de IA, mas as contas pagas são necessárias para exportar o código e a sincronização da CLI. Para obter mais informações, consulte https://shuffle.dev/pricing.
4. Como funciona o recurso de IA?
   Abra o AI Assistant no canto inferior esquerdo do editor, insira uma descrição ou faça upload de um design. O AI gera componentes que podem ser arrastados e soltos para ajuste. Recomenda-se usar uma descrição específica para melhorar a precisão da geração.
5. Como posso usar os projetos do Shuffle em meu ambiente de desenvolvimento local?
   Execução com a CLI do Shuffle npx @shuffle-dev/cli get <project_id> .shufflesincronizar projetos localmente, integrar-se ao Next.js ou a outras estruturas.