A Bolt.new é uma plataforma de desenvolvimento emergente orientada para a IA que permite aos utilizadores gerar sítios Web completos diretamente a partir de descrições em linguagem natural sem escrever código. Sendo uma ferramenta de "codificação vibrante", compreende e concretiza a intenção criativa do utilizador, incluindo a estrutura, a funcionalidade, o estilo e a atmosfera do site. Neste artigo, vamos explicar em pormenor como utilizar o Bolt.new para criar rapidamente websites profissionais.
Bolt.new e as suas principais caraterísticas
Bolt.new é uma plataforma de "vibe coding" que gera sítios Web a partir de descrições em linguagem natural sem escrever código. A sua principal funcionalidade é transformar as ideias dos utilizadores para sítios Web descritos em linguagem natural em sítios Web reais e utilizáveis.
É como uma combinação de v0 e Cursor, permitindo aos utilizadores editar programas full-stack de forma eficiente e eficaz. O Bolt executa o backend diretamente no browser e suporta a implementação no Netlify, além de poder gerar aplicações com as mais recentes linguagens/frameworks de programação, como React, Next.js, Remix, SvelteKit e Vite.
Uma das grandes vantagens do Bolt.new é a capacidade de instalar pacotes dinamicamente. Por exemplo, se você quiser instalar pacotes como o pacote OpenAI API ou Tailwind, ele pode fazer isso também. Então, basicamente, ele é capaz de criar uma aplicação completa, enquanto a v0 não pode fazer isso.
Outras caraterísticas notáveis incluem:
- Não é necessário configurar o ambiente de desenvolvimento, a página Web será aberta e estará pronta a ser utilizada
- Suporte para várias rondas de diálogo para otimização contínua do código
- Capacidade de carregar esboços desenhados à mão para conversão em sítio Web
- Geração e pré-visualização de código em tempo real
- Fornece capacidades de implementação com um clique
Começa a criar sites com Bolt.new!
O processo de utilização do Bolt.new é muito intuitivo:
- Visite o sítio Web oficial: Abra o seu browser e escrevahttps://bolt.newe inscrever-se numa conta (são aceites contas gratuitas)
- Descreva o que pretende: introduza os requisitos do seu sítio Web na caixa de entrada situada no centro da página inicial, tal como num chat!
- A IA começa a gerar sites: Em segundos ou minutos, o Bolt.new gera automaticamente um rascunho de site, incluindo a estrutura da página e o HTML/CSS/JavaScript correspondente.
- Explorar e otimizar: pode modificar o prompt para o regenerar, utilizar ferramentas de interface para o afinar ainda mais ou modificar o código diretamente!
Para a geração de código, não precisa de instalar qualquer software, pode utilizá-lo abrindo o URL e não há qualquer problema de restrição da região da China. Durante o processo de geração de código, pode otimizar o seu sítio Web através de várias rondas de diálogo com o Bolt. Clique nos botões de código e pré-visualização, respetivamente, para ver o código correspondente e pré-visualizar o efeito.
Quando a conceção do sítio Web estiver concluída, pode descarregar diretamente o código gerado através do canto superior direito da transferência, pode também clicar diretamente na implantação com um clique.
Escrever parafuso eficiente.new Prompt Words
Criar palavras-chave eficazes é a chave para utilizar o Bolt.new. Aqui estão alguns princípios importantes:
- Quanto mais específica for a descrição, melhor: a IA é forte, mas não é um verme no seu estômago. Quanto mais específico for, mais a IA pode restaurar a estrutura, o esquema de cores, a funcionalidade e o estilo que pretende.
- Foco na expressão de "atmosfera e estilo": Bolt pertence à ferramenta "vibe coding", que compreende não só "o que fazer", mas também "como apresentar".
- Iteração e otimização constantes dos prompts: Os prompts iniciais são muitas vezes apenas rascunhos e os prompts realmente bons requerem várias rondas de experimentação, aperfeiçoamento e polimento.
- Comece com o quadro geral e vá descendo: pedir demasiado no início pode ser "confuso" para a IA. É mais eficaz dar primeiro o enquadramento e depois acrescentar pormenores.
- Combinado com a edição do código: por vezes, os resultados gerados pela IA não são suficientemente precisos e o ajuste manual do código pode permitir um controlo de maior precisão.
Fórmula de modelo do Cue Word
As palavras-chave de elevada qualidade podem seguir esta estrutura básica: "Crie um [tipo de sítio Web] para [público-alvo], com páginas que contenham [estrutura específica], um esquema de cores [cores], um estilo [palavras de ambiente] e uma sensação geral [adjectivos descritivos]. Certifique-se de que a adaptação para telemóvel é suportada."
Exemplo:
Pilha de tecnologia: Fazer com HTML puro + TailwindCSS
Função principal: Quero fazer um site de plano de treino de maratona, o utilizador deve preencher a sua idade, altura, peso, a última maratona e os últimos resultados da corrida de meia maratona, o seu objetivo esperado para melhorar o desempenho (PB), clicar no botão, pode gerar o plano de treino. O algoritmo de geração do plano não me interessa, vocês ajudam-me a completar, mas o plano de geração é para que os utilizadores se sintam profissionais, justificados e dispostos a pagar. Os planos gerados devem, pelo menos, incluir o nível atual do atleta, o plano para atingir o desempenho alvo do tempo necessário, bem como o período de tempo do plano de treino e a razão e assim por diante.
Área funcional: deve incluir o cabeçalho completo, os materiais de teste, as perguntas frequentes, as caraterísticas, os preços, o modo de funcionamento e a área de rodapé. O proprietário dos direitos de autor do sítio Web é a AI Nuggets Society, 联系方式jiangzziv@gmail.com. O resto do conteúdo tem de ser escrito de forma profissional e autêntica.
Redação do sítio Web: Para todo o conteúdo de redação do sítio Web, é necessário utilizar a língua chinesa. Sobre este sítio Web do plano de treino para a maratona, é necessário sublinhar que é profissional e que foi projetado com base em grandes volumes de dados.
Estilo do sítio Web: O esquema de cores e o estilo do sítio Web têm de ser modernos e avançados, semelhantes ao estilo do sítio Web oficial da Apple. O sítio Web tem de ser adaptável a vários tamanhos de ecrã.
Casos e exemplos práticos
Eis alguns exemplos de palavras-chave para diferentes tipos de sítios Web:
- Website de portfólio pessoal: Criei um website de portfólio pessoal minimalista para um designer gráfico freelancer. A página contém uma barra de navegação superior, um perfil, uma imagem grande que mostra a área de trabalho e um formulário de contacto. O esquema de cores é preto, branco e cinzento, com tipos de letra grandes sem serifa, disposição simples, muito espaço em branco e um estilo moderno e artístico. É adequado para telemóveis.
- Página de destino do produto: conceber uma página de destino do produto para uma marca de garrafas de água ecológica com um estilo geral natural e fresco. Logótipo e navegação simples no topo, imagem de alta resolução do produto no meio, com esquema de cores verde e castanho claro. Incluir um bloco de caraterísticas do produto, um seletor de comentários de utilizadores e um botão "pré-encomendar agora". A parte inferior da página contém ligações para as redes sociais e um formulário de subscrição. Compatível com telemóveis.
- Página inicial de uma empresa SaaS: Criar uma página inicial de um produto SaaS B2B com descrição do produto, gráfico de comparação de caraterísticas, testemunhos de clientes, tabela de preços e botão CTA. O esquema de cores utiliza azul escuro + cinzento e branco para realçar a tecnologia e o profissionalismo. O tipo de letra do cabeçalho é a negrito, o corpo do texto é claro e a disposição baseia-se numa grelha de resposta para computadores e dispositivos móveis. O estilo é moderno, credível e profissional.
- Página da plataforma de ensino: Desenho da página inicial de uma plataforma de cursos de programação em linha. Contém navegação de pesquisa superior, cartão de categoria de curso, banner de curso quente, perfil de tutor e botão "Registar agora". A cor é azul claro + laranja, o estilo geral é moderno e enérgico. A utilização de botões arredondados, títulos grandes e uma disposição clara dos cartões torna-o compatível com a navegação em telemóveis e tablets.
Dicas avançadas e práticas recomendadas
Iteração e otimização
Uma caraterística particularmente poderosa do Bolt.new é que, se ocorrer um erro durante a sua interação com a aplicação à direita, aparece uma resposta semelhante à esquerda; nessa altura, basta clicar em Corrigir erro à esquerda e o erro é corrigido. Esta funcionalidade não estava disponível em várias outras ferramentas originais de IA automatizada.
Outra funcionalidade útil é que, em várias iterações, quando é levantado um novo requisito, o Bolt modifica o código original do projeto e consegue ver o ficheiro de alterações correspondente ao código que está a saltar, o que ajuda a compreender onde o requisito está a afetar o projeto global.
Combinação prática de funções
Para o processo de desenvolvimento, pode ser utilizada esta combinação de estratégias: no início do desenvolvimento, o Bolt Design é utilizado para gerar o design inicial e o código de front-end. Em seguida, importa-se o Cursor e continua-se a utilizar o Cursor para fazer as modificações necessárias e aceder ao back-end. Isto combina os pontos fortes de ambas as ferramentas para obter uma melhor experiência de desenvolvimento.
Considerações sobre preços e recursos
Se precisar de mais tokens de IA ou quiser um projeto privado, pode comprar uma subscrição nas definições do Bolt.new. O mais barato é $20 por 1 mês e 10M tokens, o que deve ser suficiente para o utilizador médio. Vale a pena notar que a quantidade gratuita pode tornar-se limitada à medida que a plataforma se torna popular. Atualmente, é essencialmente livre para usar várias vezes, mas as coisas podem mudar no futuro, semelhante à trajetória do V0.
Com o Bolt.new, mesmo os utilizadores sem conhecimentos de programação podem criar rapidamente sítios Web profissionais e funcionais. Combina o poder de compreensão da linguagem natural da IA com a tecnologia de geração de código para proporcionar uma nova abordagem ao desenvolvimento de sítios Web. Quer seja um empresário, criador de conteúdos ou um profissional que pretende criar protótipos rapidamente, o Bolt.new pode ajudá-lo a concretizar as suas ideias de sítios Web de forma eficiente.
Vale a pena mencionar que o Bolt.new não é apenas uma ferramenta de geração de código, mas também uma plataforma de "vibe coding" que compreende e realiza o estilo e a atmosfera do sítio Web que pretende expressar. Ao estruturar as suas sugestões de forma inteligente, pode criar sítios Web que são simultaneamente bonitos e funcionais.
Se quiser utilizar a conta exclusiva paga oficial GPT Plus, Claude Pro, Grok Super, pode contactar a nossa equipa de profissionais (wx: abch891) se não souber como carregar a sua conta.
