πŸš€ Level Up Your Code with AI: My Vibe Coding Workflow

 

Been feeling like you're spending more time wrestling with code than actually building cool stuff? You're not alone! I've been on a deep dive into how Artificial Intelligence can help us software developers, and let me tell you, it's a game changer. Think of it less like robots stealing our jobs and more like having a super helpful (if slightly forgetful) assistant who can seriously boost your coding power.

After weeks of experimenting, I've landed on a workflow that blends the magic of AI with the essential skills of a human developer. I started with AI app generators, got hooked by the magic, but quickly hit their limitations when I needed production-ready code in my own tech stack. It's not about letting the AI take over completely, but about smart collaboration. Ready to see how you can code smarter, not harder?

Here's a breakdown of my key takeaways and how I'm integrating AI into my daily coding life:

🎯 The Power of the Prompt (It's a Real Skill!)

Forget just asking the AI to "write some code." It turns out, how you ask is just as important as what you ask for. This is where prompt engineering comes in. Think of it as having a secret language that unlocks the AI's full potential. I've started building a library of go-to prompts (many learned from my app generator days), and they've made a huge difference in the quality of the AI's output. Here are a few of my favorites:

Role Playing: Tell the AI to act like an expert. For example, "You are a UI/UX expert, suggest improvements to this design..." This helps the AI focus its responses from a specific perspective.

Prompting for Better Prompts: Get meta! Ask the AI to help you refine your request. For instance, after your initial prompt, add "...ask me 10 yes or no questions to help you respond." This guides the AI to understand your needs better.

Keyword Actions: Use specific keywords to direct the AI's actions:

  • Investigate for debugging: "Investigate why nothing happens when I click on a button." This tells the AI to analyze the problem.
  • Provide a plan. No code to [task]. Use this to break down complex tasks. Iterate over the plan with the AI until you're happy, and then finally ask it to "implement" the code.
  • Continue: Sometimes the AI seems to wander off track. Simply saying "continue" often brings it back to the task at hand.

πŸ’» AI Code Editors: The Sweet Spot

While AI-powered app generators are great for proof of concepts and initial designs, I've found that AI code editors are far more powerful and cost-effective for most developers. I tried tools like lovable and bolt. After some research I took lovable for a real spin and was able to feel the magic of AI as it built out one of my long-standing project ideas - a money management app. But as soon as needed to get down to the nitty gritty it struggled bad. Furthermore, I was weary of my prompt credits getting wasted for debugging tasks. One of the great features is Github integration so I was able to load up my IDE and get to work. Simple fix, but AI was probably overthinking it. This experience taught me that the prompting skills I'd learned from app generators were incredibly valuable - I just needed to apply them in an environment where I had full control over my stack and could build real production apps for multiple platforms.

A few Youtube videos and experimentation later I came to agree it was much cheaper for a dev to use an AI coder, than an AI app generator, albeit I did not agree that it could be used by a non coder because you still had to run a lot of the commands yourself. You also needed to know more of the ins and outs of development like picking a css framework or dev language. In an AI app builder you just say build and voila! POC app ready! (Warning! I didn't say production ready)

πŸ” Linting and Testing: Your AI Quality Assurance Team

While setting up strict linters like ESLint can feel tedious as a developer, it's incredibly valuable when working with AI-generated code (aka "vibe code"). Plus, you can copy-paste linter errors directly to AI for instant fixes.

Automated Code Standards: Linters act as a quality assurance tool, and the best part is, the AI can often fix the code itself to conform to your defined coding standards!

πŸ‘¨‍πŸ’» Human Devs: Still Absolutely Essential

Despite the amazing capabilities of AI, I've found that it always reaches a point where human intervention is needed. In every project I've worked on with AI, I've had to step in to fix issues before moving forward.

Guidance is Key: AI needs direction on fundamental aspects like folder structure and file naming conventions to align with your chosen framework or personal preferences.

Version Control is Your Safety Net: You absolutely still need Git! Sometimes the AI generates code that's way off, and you'll need to revert to previous versions or even restart a feature.

🧠 The AI Amnesia Problem (and How to Solve It)

One of the quirks of working with AI is its tendency to forget or misinterpret past conversations, especially in longer interactions. Here are a couple of strategies I've found helpful:

Knowledge Docs: Some tools, like Windsurf IDE, allow you to create knowledge documents that accompany your prompts, giving the AI crucial context.

Markdown to the Rescue: My go-to solution is to store key design decisions, the purpose of the app, the tech stack, coding style guidelines, and preferred response formats as Markdown files in my repository. I can then feed this information to the AI as needed to keep it on track.

Automated Checks: Don't forget to tell your AI assistant to run essential checks after making changes. For example, adding "after editing any files run 'yarn lint' and fix any errors."

πŸ€” My Thoughts? We're Still in the Driver's Seat (For Now!)

Is AI going to replace software developers overnight? I seriously doubt it. But it is fundamentally changing how we work. Think of it as having a super-powered, slightly forgetful assistant. The key is to embrace the change, learn how to communicate effectively with AI (prompt engineering is crucial!), and maintain good development practices (hello, Git and linters!).

I'm excited to see how AI continues to evolve in the software development world. What are your experiences? Share your thoughts and any funny AI mishaps in the comments below!

#AICoding #SoftwareDevelopment #PromptEngineering 

πŸ“š Useful Resources: Dive Deeper!

Here are some resources to help you explore the world of AI in software development:

Prompt Engineering:

  • Prompt Library: https://docs.lovable.dev/tips-tricks/prompting-library
  • Best Practices: https://docs.lovable.dev/user-guides/best-practice

AI Code Editors:

  • (Recommended) Windsurf (formerly Codeium): https://windsurf.com/
  • Cursor: https://www.cursor.com/

AI App Generators:

  • (Recommended) Lovable: https://lovable.dev/
  • Bolt.new: https://bolt.new/

Comments

Post a Comment

Popular posts from this blog

Expandable Search Box with Bootstrap 5

I've always liked the expandable search box. Its minimal and provides a nice animation when hovered over.  In the past I've come across javascript implementations but had not been able to use them.  Recently, I came across a pure CSS implementation that I ported across to Bootstrap.  Inspired by https://codepen.io/studiocaro/pen/ZbKodG this version works with Bootstrap 5. You start with the boiler plate code for nav from bootstrap.  Next I wrapped the form in a div with an id="form". I've also changed to a dark background by switching navbar-light bg-light to navbar-dark bg-dark for better contrast. If you want the search icon then add "entypo-search" class to the search form. The CSS responsible for the animation are: #form {   ...   -webkit-transition: width .55s ease;   -moz-transition: width .55s ease;   -ms-transition: width .55s ease;   -o-transition: width .55s ease;   transition: width .55s ease; } Video Live See the Pen ...
Read more

Lowering the boundary to Code Contribution

Image
Thinking of using Gitpod as your Cloud IDE? Read this first... I'm preparing for a hands-on coding workshop and wanted my participants to get coding as fast as they can. I decided to leverage Gitpod as a Cloud IDE. Here’s how I set it up including challenges I encountered and their remedies. πŸ§‘‍πŸ’» Gitpod Gitpod is a tool I've been using to set up an isolated development (dev) environment for troubleshooting. I have relied on ready made repositories from the open source community, but now was a chance to dive deeper. 🐳 Docker Compose Ready My repository uses docker and docker compose. Docker is great for providing consistent dev environments across multiple developers. It's also great for isolating your project from other projects on your machine so you can mix and match your tools. I dived straight in and got my repository loaded on Gitpod. Gitpods default image  supports docker, docker compose, php, and node out of the box. So it was as simple as running ‘docker compose u...
Read more