Vibe Coding [Part I]: How to craft your own tools with AI

Today I want to talk about micro apps - small, focused tools you can build with AI to solve your specific problems. No more settling for bloated software or hacking together spreadsheet workarounds.

Why craft your own tools?

The math is simple: spending 2-3 hours building a tool that saves you an hour every week is an obvious win. Build it for yourself, or turn it into a small business - others might need the same solution and happily pay for it. The benefits are clear:

• Full Control: Build tools that fit your exact workflow, not the other way around

• Save Time: Automate repetitive tasks and get hours back every month

• Rapid Prototyping: Test ideas quickly and show others exactly what you mean

• Save Money: Skip expensive subscriptions for features you don't need

• Profitable business: Start with solving your own problem, end up with a profitable side project

Apps AI can actually build

Here are some real examples I've seen people use AI builders to solve everyday problems:

Trackers and Calculators

- Incident Logger: Quick entry interface, auto-generated reports, basic trend spotting

- Finance Dashboard: Track what matters to you - expenses, savings goals, investment splits

- Health & Fitness: Log your specific workout data, nutrition, or whatever metrics you care about

Internal Tools

- Report Generator: Pull your data, format it your way, ready to share

- Changelog Emailer: Grab updates from your repos, format them nicely, shoot them out

- Grant/Application Factory: Template engine for those repetitive applications you have to send

Data Tools

- Invoice Collector: Grab invoices from your email, sort them how you want

- Meeting Notes Cleaner: Turn your messy notes into structured summaries

- Custom Dashboard: Pull your important numbers into one view

How to Build with AI: A Practical Workflow

When building with AI, context is everything. You want to guide the AI builder effectively, reducing guesswork and getting to a working solution faster.

The workflow I’ve found best consists of four stages: Plan > Prototype > Iterate > Production.

Planning: Get the Context Right

The key to working with AI is clear communication. Before jumping into code, take time to discuss your idea with AI. This planning phase is crucial - it's where you provide the context that will shape everything that follows.

Remember: you're essentially briefing a developer. The clearer you are, the better the output. Don't ask AI to code right away - first make sure you're both aligned on what you're building.

Use this template to tell AI exactly what you want:

markdown

1. Brief:
[2-3 lines, what are we building and why]

2. Features:
[Core features only - what makes this useful?]

3. Requirements:
[Technical must-haves and constraints]

4. Design:
[UI/UX preferences, keep it simple]

5. Data Model:
[Core data structure, if needed]

Here's how I used it for an expense tracker:

markdown

1. Brief:

Build a quick expense logging app with monthly views. Fast entry, clear overview of where money goes.

2. Features:

- Log expenses (amount, category, date, note)

- See monthly totals

- Category breakdown

- This week/month filters

3. Requirements:

- Browser-based, no backend for now

- localStorage for data

- Works on mobile

- Clean, minimal UI

- Using a component library

4. Design:

- Entry form up top, list below

- Card layout for expenses

- Make amounts easy to scan

- Use colors for categories

5. Data Model:

Expense

- amount

- category

- date

- note

And here you can see the app it generated:

Prototype your app: Focus on Core Functionality

The goal here is to build the smallest possible version that solves your problem. Don't worry about making it perfect - we're building a prototype first, not a polished product. This is where AI is most likely to succeed.

Key principles:

• Focus on the very core functionality and basic UI

• Don't build backend and frontend in the same phase

• Keep your scope narrow - you can add features later

• Test the basic flow to ensure it solves your problem

3. Iterate, Debug and Refine

This is where you and AI work together to improve the prototype. The key is providing good context when things go wrong.

A few types of issues you'll handle:

• Runtime errors (things that break while using the app)

• Compile errors (code that won't build)

• Missing features, or partial implementations

Tips for effective iteration:

• Always include the exact error message in your prompts

• Provide context about when errors occur

• Check the core functionality first. If it works, you can refine design and styling later.

• Break down complex features into smaller changes

• Don't just say "it doesn't work" - explain what's happening

• Test each change before moving to the next

4. Take your app to Production

Once your prototype is working well, you'll want to make it production-ready. This involves adding proper data persistence, handling edge cases, and potentially setting up a backend (if needed).

I'll cover the complete production setup process in a dedicated guide - there's a lot to unpack there.

For now, for your backend needs, consider "Backend as a Service" solution like Supabase. They handle database, auth, and serverless functions without the hassle of setting up your own infrastructure – and it’s easy for AI to integrate with it.

💡Working with AI: Quick Tips

What I've learned:

- Give it context - AI needs the full picture

- Chat first, code later - align on the approach

- Break big features into small chunks

- Share exact errors when debugging

- Make each iteration count

That's it for Part I. In Part II, we'll dig into more advanced topics - how technical should you be? How to take your app to production?

Keep building!