Bolt.new is an emerging AI-driven development platform that allows users to generate complete websites directly from natural language descriptions without writing code. As a "vibe coding" tool, it understands and realizes the user's creative intent, including site structure, functionality, style and atmosphere. In this article, we will explain in detail how to use Bolt.new to quickly create professional websites.

Bolt.new and its core features

Bolt.new is a "vibe coding" platform that generates websites from natural language descriptions without writing code. Its core functionality is to take a user's idea for a website described in natural language and turn it into a real, usable website.

It's like a combination of v0 and Cursor, allowing users to edit full-stack programs efficiently and effectively.Bolt runs the backend directly in the browser and supports deployment to Netlify, plus you can generate apps with the latest programming languages/frameworks such as React, Next.js, Remix, SvelteKit, and Vite.

One of the big advantages of Bolt.new is the ability to dynamically install packages. For example, if you want to install packages like the OpenAI API package or Tailwind, it can do that as well. So basically, it's able to create a complete application, whereas v0 can't do that.

Other notable features include:

• No need to configure the development environment, the web page will be opened and ready to use
• Support multiple rounds of conversations to continuously optimize the code
• Ability to upload hand-drawn sketches for conversion to website
• Real-time code generation and preview
• Provides one-click deployment capabilities

Getting started with Bolt.new to create a website

The process of using Bolt.new is very intuitive:

1. Visit the official website: open your browser and typehttps://bolt.newand register for an account (free accounts are supported)
2. Describe what you want: enter your website needs in the input box in the center of the home page like a chat!
3. AI starts generating websites: Within seconds to minutes, Bolt.new automatically generates a working draft website, including page structure and corresponding HTML/CSS/JavaScript.
4. Explore and optimize: you can modify the prompt to regenerate it, use interface tools to fine-tune it further, or modify the code directly

For code generation, you don't need to install any software, you can use it by opening the URL, and there is no problem of China region being restricted. During the code generation process, you can optimize your website through multiple rounds of conversation with Bolt. Click code and preview buttons respectively, you can view the corresponding code and preview the effect.

When the website design is completed, you can directly download the generated code via download in the upper right corner, or you can directly click deploy to deploy with one click.

Writing Efficient Bolt.new Prompt Words

Creating effective cue words is the key to using Bolt.new. Here are some important principles:

1. The more specific the description, the better: AI is strong, but it's not a worm in your stomach. The more specific you are, the more it can restore the structure, color scheme, functionality, and style you want.
2. Focus on "atmosphere and style" expression: Bolt belongs to the "vibe coding" tool, which understands not only "what to do", but also "how to present".
3. Constantly iterating and optimizing Prompts: Initial prompts are often just rough drafts, and really good prompts require multiple rounds of experimentation, refinement, and polishing.
4. Start with the big picture and refine it gradually: asking for too much at the beginning may "confuse" the AI. It is more effective to give the framework first and then add details.
5. Combined with code editing: sometimes the AI generated results are not precise enough, and manually adjusting the code can realize higher precision control.

Cue word template formula

High-quality prompt words can follow this basic structure: "Create a [type of website] for [target audience], with pages that contain [specific structure], a color scheme of [color], a style [vibe word], and an overall feel [descriptive adjective]. Please ensure that mobile adaptation is supported."

Example:

Tech Stack: Doing it in pure HTML + TailwindCSS

Core function: I want to do a marathon training program website, the user to fill in their age, height, weight, the latest marathon and the latest half-marathon race results, their expected goal to improve the performance (PB), click the button, you can generate the training program. Plan generation algorithm I do not care, you help me to complete, but to plan to generate out so that users feel professional, justified, willing to pay. Generated plans should at least include the current level of the athlete, the plan to achieve the target performance of the time required, as well as the time period of the training program and the reason and so on.

Functional area: you want to have a complete header, testinoials, faq, features, pricing, how it works ,footer area. The copyright owner of the website is AI Nuggets Society, 联系方式jiangzziv@gmail.com The rest of the content needs to be written professionally and authentically.

Website copywriting: For all copywriting content on the website, I require you to use Chinese. About this marathon training program website you need to emphasize that it is professional and is projected by big data.

Website Style: The color scheme and style of the website needs to be modern and advanced, similar to the style of Apple's official website. The website needs to be adaptive to various screen sizes.

Practical cases and examples

Here are some examples of prompt words for different types of websites:

1. Personal Portfolio Website: Creation of a minimalist personal portfolio website for a freelance graphic designer. The page contains a top navigation bar, a profile, a large picture display area, and a contact form. The color scheme is black, white and grey, using large sans-serif fonts, simple layout, enough white space, and the overall style is modern and artistic. It is suitable for mobile.
2. Product landing page: design a product landing page for an eco-friendly water bottle brand with a natural and fresh overall style. Logo and simple navigation at the top, high-resolution image of the product in the middle, with green and light brown color scheme. Include a product features block, a user reviews slider and a "pre-order now" button. The bottom of the page contains social media links and a subscription form. Mobile friendly.
3. SaaS Enterprise Home Page: Create a B2B SaaS product home page with product description, feature comparison chart, customer testimonials, pricing table and CTA button. The color scheme uses dark blue + off-white to emphasize the sense of technology and professionalism. The headline font is bold, body text is clear, and the layout is based on responsive grid for desktop and mobile devices. The style is modern, credible and professional.
4. Education Platform Page: Home page design for an online programming course platform. It contains top search navigation, course category card, hot course banner, tutor profile and "Register Now" button. The color is light blue + orange, the overall style is modern and energetic. The use of rounded buttons, large font size headings and clear card layout makes it compatible with mobile and tablet browsing.

Advanced Tips and Best Practices

Iteration and Optimization

A particularly powerful feature of Bolt.new is that if an error occurs during your interaction with the application on the right, a similar response pops up on the left; at this point you simply click on Fix Error on the left and it goes to work fixing it. This feature was not available in several other original automated AI tools.

Another helpful feature is that in multiple iterations, when a new requirement is raised, Bolt modifies the original project code and is able to see the change file corresponding to the code that is jumping around, which helps to understand where the requirement is impacting the overall project.

Practical Function Combination

For the development process, this combination of strategies can be used: at the beginning of development, use Bolt Design to generate the initial design and front-end code. Then import Cursor and continue to use Cursor to make fine-grained modifications and access the back-end. This combines the strengths of both tools to get a better development experience.

Price and resource considerations

If you need more AI tokens or want a private project, you can buy a subscription in the settings of Bolt.new. The cheapest is $20 for 1 month and 10M tokens, which should be enough for the average user. It's worth noting that the free amount may become limited as the platform becomes popular. Currently it's essentially free to use multiple times, but things may change in the future, similar to the trajectory of V0.

With Bolt.new, even users with no programming background can quickly create professional, functional websites. It combines the natural language understanding capabilities of AI with code generation technology to provide a fresh approach to website development. Whether you're an entrepreneur, a content creator or a professional who wants to prototype quickly, Bolt.new can help you realize your website ideas efficiently.

It is worth mentioning that Bolt.new is not only a code generation tool, but also a "vibe coding" platform that understands and realizes the style and atmosphere of the website you want to express. By structuring your cues wisely, you can create websites that are both beautiful and functional.

If you want to use GPT Plus, Claude Pro, Grok Super official paid exclusive account, you can contact our professional team (wx: abch891) if you don't know how to recharge yourself.