You can vibe-code your way to innovation. Here’s how to get started.

0
22

You can vibe-code your way to innovation. Here’s how to start.

AI is revolutionizing how we build software, and at lightning speed. Plenty of software engineers are moving toward a new normal where they essentially ask AI tools to code for them, then step in to fix errors and double-check work, for example. But thanks to vibe coding, it’s actually pretty easy to get started with software development, both with consumer-grade AI tools like ChatGPT and with dedicated software engineering tools with AI built into them.

The term “vibe coding” has certainly become a bit of a buzzword, but don't hold that against it. This phenomenon isn't just a passing trend. The promise of vibe coding is that one day soon, you’ll be able to create functional software simply by describing it in natural language.

Have a sweet idea for an app or website, but don’t have the coding know-how to actually make it yourself? Vibe coding is the answer. Here’s how to get started with vibe coding, so you can turn your ideas into reality.

Getting started

Before you start vibe-coding, it’s worth thinking about the kind of software you want to build and how much experience you have in coding and software development, if any. The good news is that AI is going to take care of most of the actual coding, but a basic understanding of how code works will be helpful, especially if you need to troubleshoot or your idea is too advanced for basic tools.

If you don’t have any coding experience, then it’s perhaps worth using a consumer-grade AI tool to help you figure out the right approach for your project. Essentially, basic AI chatbots like ChatGPT are likely to work fine for simpler tasks like single-file websites, but as soon as you start needing to manage multiple different files, in different types and folders, and with different folders of resources like images, you’re likely to need to rely on more professional coding tools. Many websites can be made in a single HTML file, but the more complicated they get, the easier it is to split them out into multiple files.

Rest assured, we’re here to help you get building, even with professional tools. I have some coding experience, and was able to get a professional coding setup together for very little money. Don’t assume that just because you’re new to coding, professional tools are off-limits to you — it’ll just take a little more effort to get started using them. You can also read about the pros and cons of using ChatGPT, Grok, and Claude for coding projects.

Vibe coding with beginner tools

Creating the code

If your project is basic enough, you may be able to build it straight from an AI chatbot, like ChatGPT or Claude, without even needing to pay for a subscription (though a subscription will likely help as you troubleshoot and customize your project).

In these tools, vibe-coding is much more about the prompt than anything else. ChatGPT and Claude can create decently fleshed-out websites and web apps, but take the time to be as descriptive as possible about what you’re looking for, down to the design, features, and look of the software. Here’s an example:

Mashable Light Speed

  • Bad prompt: Make me a website that shows me the time in different time zones.

  • Better prompt: Make me a website that shows me the time in different time zones. I should be able to select the time zones I want displayed when I first open the website, after which they should display in both analog and digital time formats, with a list of three of the major cities in those time zones. The website should have a colorful design, with a retro feel.

I ran both of these prompts through ChatGPT, and honestly, got decent results with both – but there’s no denying that the second had more direction in terms of how it worked and how it looked.

screenshot of a chatgpt-generated website showing clocks of various time zones

Credit: Christian de Looper

screenshot of a chatgpt-generated website showing clocks of various time zones

Credit: Christian de Looper

In both instances, ChatGPT will create a simple HTML file, and you’ll be able to see all of the code it created, and a preview of what the website itself will look like. If you’re happy with it, you can move on, but if not, you should be able to ask ChatGPT to make revisions to better match your original vision. Just keep in mind that it’s not uncommon for services like ChatGPT to create bugs, and then have trouble finding or fixing those bugs.

Going from code to product

If you’re just tinkering around for fun, maybe you never intended to actually create a final product that anyone can access on the web, but if you want others to be able to access your project, you’ll need to upload the files that ChatGPT created to a web hosting account

That process really has nothing to do with AI, though ChatGPT or another tool might be able to help guide you through the steps. The basic gist is that you’ll need to buy a domain name (the name of your website) and pay for hosting from a service like GoDaddy, where you’ll upload the .html file that ChatGPT created, after which you’ll be able to access the website from any web browser.

You might notice that I’ve really only focused on actual websites, and not other kinds of software, like apps. That’s because, for the most part, if you’re going to create apps or more advanced websites, it’s probably worth getting set up with more professional tools that can look at multiple or many files at a time, making edits to those files as needed.

Vibe coding with professional tools

If you’re willing to use more professional tools to vibe code, then you can do so without paying too much. I’m not making a guide on all the different tools you can use to code — so for the purpose of this guide, I’m going to focus on using Cursor, which is an AI-first code editor that you can try out for free, after which you’ll need to pay a subscription starting at $20 per month. Despite being a professional tool, Cursor makes it relatively easy to chat with an AI assistant through a dedicated chat pane. Here you’ll be able to ask the AI assistant to make edits to your project, and ask questions about the project as a whole.

Here’s a quick overview that details how to get started with Cursor.

  • Download and install Cursor from the website. Make sure you pick the right version for your computer. 

  • When you first open Cursor, you’ll be asked to log in or sign up with a new account. 

  • You may be asked if you want to import VS Code settings. If you’re not new to coding, you may want to do so — but if you don’t know what VS Code is, then chances are you don’t have VS Code settings to import in the first place.

  • Follow the on-screen instructions to get set up with a project. If you’re new to coding, select “Agent” in the quick-start menu, and don’t worry about installing any Terminal commands.

  • When you’re ready to start creating, click the “Open Project” button and select or create a folder where the project files can be stored. 

The Cursor interface is split up into a few different columns. By default, you’ll see your project’s files and folders on the left, an editor showing the code in those files in the middle, and a chat column on the right. The Cursor AI has two modes — Agent and Ask. Agent directly edits your code and the files in your project, while Ask lets you ask questions about your project without risking it making edits to the code if you don’t want it to. You can still ask Agent questions — but it might take those questions as direction, and start editing code.

While the Cursor agent can help with the actual code of a project, you still might need to use external tools or services during the creation of your project. For example, if you’re adding images or other media to your project, or you want to make use of complicated APIs to enhance your project, you’ll need to do so on your own. Cursor should be able to help guide you through the steps of doing so — but you may need to directly ask it to give you those steps. Make sure to note your skill level when you do so, so it can give you steps that are as easy to follow as possible. 

After you’ve created something in Cursor, you’ll need to test it — and then, if you want to actually publish it, you’ll need to follow the appropriate steps to do so. Those steps vary dramatically depending on what you’ve made – whether it be an app, a website, or something else entirely. AI assistants may be able to help guide you through those steps, but remember that for things like apps, you may need to pay to create developer accounts with the likes of Apple and Google. 


Disclosure: Ziff Davis, Mashable’s parent company, in April filed a lawsuit against OpenAI, alleging it infringed Ziff Davis copyrights in training and operating its AI systems.

Cerca
Categorie
Leggi tutto
Technology
Snag a 27-inch Samsung Odyssey OLED G6 for its lowest price to date
Samsung Odyssey OLED G6 gaming monitor: $549.99 Don't let...
By Test Blogger7 2025-07-14 17:00:18 0 933
Religion
7 Biblical Truths about Work and Rest to Reflect on This Labor Day
7 Biblical Truths about Work and Rest to Reflect on This Labor DayChristianity /...
By Test Blogger5 2025-09-01 05:00:13 0 497
Giochi
Here's the cheapest place to pre-order Shinobi Art of Vengeance
Here's the cheapest place to pre-order Shinobi Art of Vengeance As an Amazon Associate, we...
By Test Blogger6 2025-08-26 18:00:19 0 494
Giochi
How to use Hades 2 cross-save between PC and Nintendo Switch
How to use Hades 2 cross-save between PC and Nintendo Switch How do you use Hades 2...
By Test Blogger6 2025-09-25 17:00:13 0 203
Technology
Score a pair of Bose QuietComfort headphones at Amazon for $120 off
Best headphones deal: Get Bose QuietComfort headphones for $120 off...
By Test Blogger7 2025-08-27 17:00:18 0 497