So, I did a thing. I built my entire blog, The Glitched Goblet by using what's been dubbed as "Vibe Coding." But hear me out, because it's probably not what you're thinking. I also want to apologize in advance for the clickbait title, and all the shameless plugging of my blog throughout this post. I promise it has a point!
This post is going to contain a lot of my thoughts and honestly some ranting with using AI to generate code. If you're just here for the "tips and tricks," feel free to skip to the end. I won't be offended. I promise.
Intro
Now, what do I mean when I say that my blog was built using "Vibe Coding"? To be completely honest and straightforward, I had ChatGPT build 90% of the blog. It created each of the components like the Homepage, Header, Footer, posts, and even the theme. The only content added by me is the blog posts themselves. (You can tell by the typos and bad sentence structure.)
To get to the point of this post and why I'm writing it. From what I've seen, too many individuals are using AI to generate code without understanding what it's doing. This is of course a dangerous practice, and I want to provide some "tips and tricks" on how to get the most out of AI while still having a good understanding of what's going on.
You need to change your mindset on what AI is when it comes to development. AI is just another tool in your toolbox. That's it. By using AI, I was able to build my blog in a fraction of the time it would have taken me to do it manually. I used new frameworks that I wasn't familiar with and wanted to learn while building something I could use. (The frameworks being Nextjs and Tailwindcss.) I already new React, which is what Nextjs is built on, so I was able to understand the code that ChatGPT generated.
Understand the Basics
I feel like a math teacher saying this, but you need to understand the basics before you should use AI to generate code. Just like tossing a math equation into a graphing calculator, you should know how to solve the problem before you let the AI do it for you.
The best part is, if you don't understand the basics, AI can help you with that too! I've used ChatGPT to help me understand new concepts, like how to use a new framework or how to implement a new feature. It's like having a tutor that's available 24/7. (And doesn't get annoyed when you ask the same question 10 times.)
Collaborate
I didn't just let ChatGPT generate the code and call it a day. I collaborated with it. I asked for feedback, suggestions, and improvements. I asked for multiple options and picked the one that I liked the best. I even asked for explanations on why it generated the code it did. Even coming up with the name of the blog was a collaborative effort.
"The Glitched Goblet" was probably the 50th suggestion that ChatGPT gave me. I wanted something that sounded like a tavern name but with a techy twist.
Write the code yourself and ask for feedback. My favorite part has been to make ChatGPT as snarky and candid as possible. It's like having a code review with a friend who's not afraid to tell you that your code is bad. By default, AI is very people pleasing, and doesn't want to hurt your feelings. By allowing it to be straightforward, it helps you learn and grow.
My favorite prompts for feedback are generally short questions followed by pasting the code I want feedback on.
- "Does this look right to you?"
- "I feel like this could be better, or more efficient."
- "What would you do differently?"
- "Can you critique this code?"
Additionally, these are also great prompts to use when debugging code.
Iterate
Don't take the first thing that AI spits out at you as finished. Play around with it, keep what you like, and ask for more options, or ideas for the parts that you don't. I've found that the more I iterate on the code that ChatGPT generates, the better it gets.
The blog posts page used to look like this:
After a few iterations, it now looks like this:
Fun fact, I didn't know how to link images in markdown/Nextjs and had to ask AI. Here's verbatim what I asked:
How do I include images in my Markdown docs? The images are in the public folder. Something like this?
The blog posts page used to look like this:
[Blog Posts Old](../../../public/blog-posts-old.png)
After a few iterations, it now looks like this:
[Blog Posts New](../../../public/blog-posts-new.png)
And the reply:
You're so close, Kaemon — but when working with Next.js and Markdown, the key thing is:
🧠 Images in the
public/folder should be referenced using absolute paths starting from the root (/), not relative paths like../../../public/.
✅ So Here's How to Do It Right:
Assuming the images live here:
/public/blog-posts-old.png
/public/blog-posts-new.png
In your Markdown file, use this syntax:
The blog posts page used to look like this:
After a few iterations, it now looks like this:
No need to use relative paths, and no need to include public/ in the URL — Next.js serves the contents of /public at the root (/).
And that's how I learned how to include images in my markdown files. So you can look forward to more images in my posts going forward!
Don't Let it Code
Want to practice coding? Don't let the AI do all the work. Let it generate a starting point, or provide steps on how to solve a problem. Then, code it yourself. Letting AI do all the work is like using a calculator for every math problem. You'll never learn how to solve the problem yourself. Use prompts like the following while adding "Don't generate code. I want to code this myself" at the end.
- "What are the steps to solve this problem?"
- "Can you provide a starting point for this?"
- "How would you implement this feature?"
The AI will provide you with enough info to get going without it doing all the work for you. Don't let your skills stagnate by relying on AI to do all the work for you.
tldr; - The Tips and Tricks
- Understand the Basics: If you wanna use AI-generated code, make sure you have a solid understanding of the basics. This will help you understand what the AI is doing and why it's doing it.
- Make it Snarky: AI, by default is very people-pleasing. It doesn't want to hurt your feelings. Make it snarky, make it candid, make it real. It'll help you learn and grow.
- Collaborate: Don't just let the AI do all the work. Come up with something yourself and ask for critiques, feedback, improvements, or even just a starting point.
- Iterate: Don't just take the first thing the AI gives you. Play around with what's generated and follow up. Tweak it, change it, ask for more options.
- Don't let it code: Don't let the AI do all the work. Let it generate a starting point, or provide steps on how to solve a problem. Code it yourself and ask for feedback.
Final Thoughts (And a Tiny Rant)
If you're diving into tech or coding purely relying on AI-generated code, please take a moment to reconsider. Use it as a tool to speed up the boilerplate, and collaborate with it to learn and grow. Don't let it do all the work for you. You'll never learn how to solve problems yourself if you do.
I think this trend, while funny now, might cause some future headaches (and hilarious disasters). But hey, that's just my take.
So, what do you think about "Vibe Coding"? Have you tried it? Do you have any tips or tricks to share? Let me know in the comments below. I'm always looking for new ways to improve my workflow.
And if you're interested in reading more of my thoughts, check out my blog at glitchedgoblet.blog.
Extra Fun
While writing this post, I had a big brainstorming session with ChatGPT and added a ton of hidden secrets to the blog. If you can find them all, I'll be very impressed. (And maybe a little scared.)
Top comments (0)