Vibe Coding – Initial Thoughts

by Mark | Apr 7, 2025 | AI and Machine Learning, Web Design Trends

For those who are unaware, the term “Vibe Coding” was coined in February, 2025 (yes, that long ago) by Andrej Karpathy (a co-founder of OpenAI). This approach relies on large language models (LLMs) to generate working code by providing natural language descriptions of the desired results instead of manually writing the code. We are observing a shift towards the use of AI to generate code. We have seen this in the state and national web development competitions we run. We have heard from a number of educators inquiring about this and how it can impact what is being taught (and should be taught) in their classes.

I thought it would be good to take a look at the capabilities available today (April, 2025). There are any number of AI tools one can use to generate code. Since I have been familiar with VS Code, I chose to use the tool, Cursor. It is readily available for download and can be used as a hobbyist for free and as a professional in a two week trial mode. If you don’t want to install anything on your computer, there are browser based tools such as Replit.

Given that I have been working with web technologies for roughly 33 years, I decided to use the code to build a relatively simple web page. First thing I needed to do was set up a folder to hold the resulting work. I started with this simple request.

I want to build a web page that contains a form seeking first name, last name, email, and comments. The background of the page should be light blue. The submit button should say “Submit Information” and the reset button should say “Clear All”

Cursor replied with the following information (and created the file in my desired folder).

I’ve created a complete web page with a form that meets all your requirements. Here’s what I’ve included:

1. A light blue background for the entire page
2. A clean, modern form design with:

• First Name field
• Last Name field
• Email field
• Comments field (as a textarea)

3. Two buttons:

• “Submit Information” button (in green)
• “Clear All” button (in red)

4. Additional features for better user experience:

• Responsive design that works on all screen sizes
• Form validation (required fields)
• Hover effects on buttons
• Clean typography and spacing
• A white container for the form to make it stand out against the light blue background
• Proper input styling and labels

You can now open the index.html file in any web browser to see the form. The form is fully functional for collecting information, though you’ll need to add backend processing to handle the form submission if you want to actually store or process the data. Would you like me to make any adjustments to the design or add any additional features?

Note that I did not request responsive design. I did not request a clean modern look. I did not request required fields. I did not request hover effects on buttons. Cursor did all this for me.

I then decided it was time to process the information submitted by the form. What better way than to create a PHP page to process the information. The prompt I submitted is below. Yes, I try to mind my manners even when communicating with AI.

Please create a PHP page to process the information submitted by the index.html page. Collected information should be echoed back to the browser.

Cursor accomplished that and provided the additional information below.

I’ve created a complete solution with the following features:

1. Updated the HTML form to submit to phpusing POST method
2. Created a new phpfile that:

• Maintains the same light blue background theme
• Displays the submitted information in a clean, formatted way
• Includes security measures (htmlspecialchars to prevent XSS attacks)
• Handles cases where form fields might be missing
• Provides a “Back to Form” button
• Has a responsive design matching the original form

To use this:

1. Make sure both files (htmland process.php) are in the same directory
2. Ensure you have a PHP server running (you can use XAMPP, MAMP, or any other PHP server)
3. Access the form through your web server (not directly as a file)

When you submit the form, it will:

1. Send the data to php
2. Display all submitted information in a nicely formatted way
3. Allow you to go back to the form using the “Back to Form” button

Would you like me to make any adjustments to the processing page or add any additional features?

Note that I did not ask for the input form to be linked to the PHP process. I did not ask for the PHP to be able to handle missing data. I did not ask for security features. I did not ask for a back to form button.

Of course, I would like the code to be a bit more maintainable, so I provided another prompt.

Please separate all style to a separate CSS file named cursorStyle.css for both index.html and process.php pages.

Cursor accomplished this and provided the following response.

I’ve successfully separated all the styles into a single CSS file and updated both HTML files. Here’s what I did:

1. Created a new file csscontaining all the styles from both pages
2. Organized the CSS file with clear sections:

• Common styles (body)
• Form Container Styles
• Results Container Styles

3. Removed all inline styles from both htmland process.php
4. Added a link to the CSS file in both HTML files using:

html

Apply to index.html

<link rel=”stylesheet” href=”cursorStyle.css”>

The functionality remains exactly the same, but now the styling is:

• More maintainable (all styles in one place)
• More efficient (browser can cache the CSS file)
• Easier to update (changes to styles only need to be made in one place)

Better organized (styles are grouped by purpose).

Note that I did not ask for the resulting stylesheet to be linked.

The results of these efforts can be found in the linked URL. You can try the example out and see how it performs. You can also see how it works on a mobile device (is the design really responsive). The link below will open in a new browser tab.

https://webprofessionals.global/examples/cursorVibeCoding/

One should note that during each step of the process, one can either accept or reject the results. For sake of this article, I blindly accepted the results.

First, let’s examine the resulting CSS. It can be argued that the code would be relatively meaningless to someone who has never written CSS before. However, one can simply hover over the code and learn. There is even a link to the Mozilla Developer Network. In this case, I am hovering over font-family. I confess I am starting to see some benefit in using this as a teaching tool. Start with a task, then have students review and refine the results. Perhaps.

Even classes (defined by a stating period) are somewhat explained. Of course, this mostly comes from the VS Code base.

The HTML is mostly HTML5. The default indent relies on tabs, but that can be a personal preference. The HTML document passes validation with no errors. The CSS file also passes validation with no reported errors.

Ok, what did I learn from this experience? First, it is incredibly easy to write code in this manner. Total time involved in creating the HTML, PHP and associated CSS – less than 5 minutes. Could likely have been done faster, but I type slowly these days. Is the code functional – yes. Easy to maintain – for the most part, yes. I know this is an overly simplistic example, but I was curious what I could accomplish quickly.

Now for my editorial part – where do I see the biggest issues (based on my 3+ decades of working with web technologies)? It is not the code being generated. I know there have been reported issues with more complex applications. However, I have confidence that will only improve over time. I also see that AI tries its best to follow established industry “best practices” with respect to the overall appearance of a web page.

I do see some looming issues. First – I see this potentially affecting/ eliminating intern level positions. Why should I hire an intern when I can use AI to generate similar code? With fewer interns entering the market, replacement of older developers is going to slow.

As applications become more complex, it is likely there will need to be more serious thought about architecture. I do not see AI tools addressing this anywhere in the near future.

Helping clients achieve their business goals is also a concern. Many developers/ designers spend significant time trying to help their client understand the actual business problem they are trying to solve. Often, clients are not certain, they just know they need something. I do not see AI helping much in this arena either.

Additionally, I did not see much regard to accessibility. Note the color scheme selected for the submit and reset buttons (red and green). Might be an issue if one is color blind.

In many respects, it would appear that the ability to code quickly is becoming an obsolete skillset. If one thinks in terms of programming, analysis, and project management, I do not think those areas are going to vanish. In fact, I see more of a need for thoughtful analyses and thorough communication with clients..

Which brings me to the crux of why I am quickly posting this article. I am curious what teachers think of Vibe Coding? I am hoping to do a second part to this introduction focusing on how this is being incorporated into the classroom (or not) and why? If you are a teacher reading this, please reach out to us (via the comments or contact page). We would love to know your insights. The world of AI continues to evolve rapidly. As a professional organization, we need to help our members stay abreast of these changes. This is why we seek your comments.