Vibe coding tools and projects is my happy place. I could do this for hours. I've built pages before with HTML/CSS, but AI has handed me new powers, and now all my ridiculous tool/product/app ideas can actually go live.

I recently built an email signature generator. If you're a professional or a business owner, a branded signature matters for trust and credibility. But anyone who's tried to make one knows most providers don't make it easy.

There are third-party solutions and templates out there, though design-wise most of them look clunky. So as a designer my next thought was obvious: why don't I build one?

The idea is simple. A well-designed template, basic customization, easy content editing, and a one-click way to copy it into your email provider. Clean, simple, works across providers, looks good on mobile, and doesn't scream "this was vibe-coded."

So I started building. I'm not a technical person. I know a bit of HTML/CSS and what good design looks like, so the MVP had to be minimal. No scary words like API, database, PR, git, or terminal. Those are future-me problems.

Process

  1. Vibe code the first prototype. Quick, dirty, ugly. We're thinking about functionality here, not polishing the UI. Lovable, Replit, Claude, or something similar, just to get something working.
  2. Brainstorming. Share the prototype with Claude and/or ChatGPT (HTML, screenshot, or link), explain what I'm building, ask for feedback on what's missing and what could be improved. During this phase I'm thinking about MVP scope and UX. It has to be simple and light. The goal is a working tool quickly, with fewer but better-quality features. I dismiss suggestions that are too complex or just unnecessary for the first iteration.
  3. Build. Once I had the feature list, I asked Claude and/or ChatGPT to build the HTML. I can't comment on code quality, but the UI at this stage was drastically better, and Claude was clearly superior here. So now I've got the meat. Time to iterate and polish.
  4. Polishing. This is the trickiest stage and it took far more time than it should have. I maxed out the limits multiple times and kept jumping between Claude and Codex. The hard part is that even with a plan, the plan is never perfect. I kept coming up with improvements along the way. The classic drill: add, remove, make bigger, replace, repeat.
  5. UI. As a designer, I couldn't go with default purple gradients or generic Claude UI, so this stage also took some time. Mostly research on Pinterest for inspiration and shadcn/ui for structure. In general the UI was built with clear, specific instructions rather than vibes like "make it minimal/clean/modern," which usually produce a very generic look.
  6. Check-up. Once I was more or less happy with the tool, I asked both Claude and ChatGPT to review the code and functionality: clean up code, check best practices, that sort of thing. Running this on both is genuinely useful because they end up checking each other's mistakes. There were cases where ChatGPT couldn't fix mobile behaviour even with detailed instructions. I took the code to Claude and it fixed it immediately.
  7. Testing. Since my tool is an email signature generator, I had to test how it actually works in real life: on different email providers, how it behaves when you add the signature, and how it looks on the receiver's side. This part seems easier than it is, because an email signature isn't rendered the same way as regular HTML across providers. Broken UI, different colours, missing icons, broken layout on mobile, to name a few. I took the issues I found back to Claude/ChatGPT and fixed them through further iterations.

Lessons learned

Literally, just ask. You don't need to know all the technicalities, best practices, and solutions. Stuck on something? Delegate the problem to AI.

Brutally cut the scope. AI amplifies the temptation to add every bell and whistle, but don't. At least not for V1. It only creates more problems to solve.

Use both Claude and ChatGPT. It felt like having two colleagues. If one gets tired (aka hits the token limit), I bring the code to the other. If I don't like a proposed solution, I go for a second opinion.

Vibe coding something to production can genuinely be a single-prompt affair if all you need is a memory game for your grandma. But building something decent still takes time. It's the thinking, the crafting, the designing of the experience. That's the part I actually enjoy, and honestly, that part hasn't changed with AI. The tools are new, the process is the same.

Hope this was helpful. Feel free to test and use it yourself, and let me know how it went in the comments.

Try the email signature generator ↗︎