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:

1. Visite o sítio Web oficial: abra o seu navegador e escrevahttps://bolt.newe inscrever-se numa conta (são aceites contas gratuitas)
2. 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!
3. 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.
4. 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 a 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:

1. 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.
2. 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".
3. Iterar e otimizar constantemente os 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.
4. 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.
5. 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 de planos não me interessa, vocês ajudam-me a completar, mas sim a gerar planos 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 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:

1. 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.
2. 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. Adequado para navegação móvel.
3. Página inicial de empresa SaaS: Criar uma página inicial de 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.
4. 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 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, um 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 usar 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.