Back to writing

Trying Vibe Coding for the First Time with Claude Code: I Built an Invoice Generator in One Day

/ / 3 min read

I kept hearing about **vibe coding** all over the place. AI writing your code. Projects done faster. It sounded cool. Productive. Trendy. So I thought, why not?

On this page

I kept hearing about vibe coding all over the place.
AI writing your code. Projects done faster.
It sounded cool. Productive. Trendy.
So I thought, why not?

I had a project idea I actually needed for myself: a custom invoice generator.
Instead of writing it line by line, I tried something new:
I gave the job to Claude Code and just vibed.

Here’s how it went.


What Is Vibe Coding?

To me?
Vibe coding is when you tell the AI what to build
…and just watch it work.

No endless boilerplate.
No starting from scratch.
You’re like the architect, and the AI is your builder.


My Setup: One Day, One Idea, One AI

Here’s how I did it:

  1. I described the project to ChatGPT — a full picture of what I wanted.
  2. ChatGPT turned that into a PRD — clean, structured, easy to follow.
  3. I gave that PRD to Claude Code — and told it to generate the full project.
  4. Claude Code started coding — backend, frontend, everything.

And then… I vibed. Just me and the AI.
Coffee in hand. Watching code appear. Fixing. Tweaking. Guiding.


The Final Product: My Invoice Generator

Here’s what Claude and I built:

  • User authentication (admin + normal users)
  • Only admins can create users
  • Admins set invoice limits for each user
  • Each user sees only their own invoices
  • You can create, view, edit, preview, and download invoices as PDF
  • 5 ready-made invoice templates
  • Custom invoice builder — design your own template using HTML, CSS, and a custom templating language
  • SMTP configuration — send emails with a message + PDF invoice attached

The coolest part?
You don’t just use the templates…
You can create your own invoice design from scratch.

I even made it so that I can email the invoice directly, clean and professional.


So… Was It Easy?

Not gonna lie, not fully.
At first, I asked Claude to use Laravel 12.
It ignored me and went with Laravel 11 and Breeze.
That was annoying.

And because I’m not a master in prompt engineering (yet),
It took me a bit to get the hang of it.
Around 6 to 10 hours in total.

But still…
I didn’t write most of the code.
Claude did.


What I Learned

  • Claude Code is powerful. But you need to guide it like a team member.
  • Writing a good prompt is like writing a good task brief.
  • If you’re not clear, it’ll guess. Sometimes wrong.
  • When you are clear? Magic.

Would I Use It Again?

Absolutely.
I just need to get better at prompting for code.

I already know my next project.
But this one? I picked it on purpose.
I’ll actually use this invoice generator for myself, and share it with a few friends too.


Final Thoughts

This was my first time trying vibe coding.
And while it wasn't perfect, it was definitely worth it.

I didn’t just save time.
I built something real. Useful. For me.

The future of development?
It might just be you, your idea… and your AI.

And that’s a vibe I’m ready for.


🚀 Let’s build something amazing! If you have a project in mind or need help with your next design system, feel free to reach out.
📧 Email: safi.abdulkader@gmail.com | 💻 LinkedIn: @abdulkader-safi | 📱 Instagram: @abdulkader.safi | 🏢 DSRPT

Drop me a line, I’m always happy to collaborate! 🚀

FAQ

Frequently asked

Vibe coding is the approach of telling an AI what to build and then watching it generate the code while you guide and refine the result. Instead of writing endless boilerplate or starting from scratch, you act as the architect and the AI acts as the builder. In practice that means describing your idea clearly, handing it off to an AI coding tool, and steering it through tweaks and fixes rather than typing most of the code yourself.

Yes, it is possible. Building a working invoice generator with authentication, PDF export, templates, and email sending took roughly six to ten hours in total using Claude Code. It was not effortless, since clear prompting takes practice, but most of the code was written by the AI rather than by hand. The bottleneck is usually how clearly you can describe what you want, not the AI's ability to produce code.

A practical workflow is to first describe your project to ChatGPT in full detail, then have it turn that description into a clean, structured PRD. You then hand that PRD to a coding AI like Claude Code and ask it to generate the full project, backend and frontend included. From there you stay involved, reviewing, fixing, and guiding the AI like a team member rather than walking away.

The main limitation is that the AI needs clear direction, and if you are vague it will guess, sometimes incorrectly. For example, a request to use Laravel 12 was ignored in favor of Laravel 11 with Breeze, which required correction. Good results depend heavily on prompt engineering skill, so treating prompts like well-written task briefs makes a big difference in output quality.

For many developers it is worth it, because it saves time and lets you build something real and useful quickly even on a first attempt. The catch is that you still need to guide the AI like a team member and keep improving how you prompt for code. It works best when you treat the AI as a capable builder under your direction rather than expecting flawless results with no oversight.

Enjoyed this? Let's talk.

Start a conversation →