Indie Hacker Diaries #27: Using AI to Build a Product

I haven’t said much about AI since I launched Parrot back in September.

Truth be told, for me, AI has been a very transparent, almost invisible tool. I use it nearly every day, but I don’t really think about using it (same as with my laptop).

At this point, AI has more or less replaced the majority of Google searches and digs through Stack Overflow that I used to do. And I think this is a good thing.

A lot of the people reading or listening to this know me from my OG, “is this guy seriously writing 10,000 word tutorials” days.

Back then, learning something or figuring something out was kludgy. You had to dig through blog posts and videos, scour Google for something that made sense, and—if you were lucky enough to have access—ask others around you for help. At the time, finding an in-depth tutorial like one of mine was like finding a nugget of gold. It was rare and is rare to find clear, detailed, direct solutions to your problems.

Today, as AI and LLMs takeover while all of that hasn’t been replaced, it’s all certainly on the back nine. More recently, that’s why I’ve refocused away from tutorials. I still love to write them, but the ROI has continued to plummet, especially in the age of AI.

And I get why.

This week as I’ve continued to make progress on the Mod rewrite (I’ve got ~25 components done), I realized I hadn’t really talked about how I’m using AI to build products.

As a challenge (and a way to save some time), I’ve been using AI to help me write 80-90% of the JavaScript code for the interactive components in Mod. The result is quite staggering. Once prompted with my syntax preferences and some basic rules around do’s and don’ts, I tend to get what I need within 30-45 minutes of back-and-forth prompting.

Last night, I designed and wired up a combobox component using AI. First, I wrote out the HTML that I wanted to use for the component and then, went over to Claude and started a chat with this prompt:

I'm building a combobox component for a CSS framework.

I want you to rewrite the provided JS to adapt to the markup for the combobox in the screenshot provided. Use the same fuzzysort library, coding style, etc. Just make the functionality for the search behave the same.

Also, adapt the JS to handle event listeners on the main .mod-combobox-select element so that when it's clicked, an .is-open class is added to the parent .mod-combobox. It should also hide when I click outside of it.

The HTML I'd like to use:

<div class="mod-combobox">
  <div class="mod-combobox-select">
    <p>Select a Size</p>
    <i class="mod-icon-chevron-down"></i>
  </div>
  <div class="mod-combobox-dropdown">
    <header>
      <i class="mod-icon-search"></i>
      <input class="mod-input" placeholder="Search" />
    </header>
    <div class="mod-combox-dropdown-options">
      <ul>
        <li data-value="small">Small</li>
        <li data-value="medium">Medium</li>
        <li data-value="large">Large</li>
      </ul>
    </div>
  </div>
</div>

For the attachments, I provided a screenshot of the rendered component that I had already built with HTML and CSS (for interactive components, I tend to build them static first and then add the JS stuff after) and the JS from the Autocomplete component Claude also helped me write.

The initial result was nearly perfect. I provided a few additional prompts to get the result I was after:

1. Can you update the JS to also mark the selected item in the dropdown with an .is-selected class?
2. These changes broke keyboard navigation of the list. That should remain intact. Exactly like you had in v1.
3. One change to the JS. If the focus is on the input but the enter/return key is hit and there's a selected item in the list, that should be set as the value for the combobox.

After about 30 minutes, the JS for the component was done and working (you can check out the result in a Github Gist here). Had I wrote all of that from scratch top-of-mind? It would have easily taken a couple of hours.

This is a small example, but I think a worthy foreshadowing of how AI is changing how we build products.

I said it in a previous entry but I’ll say it again: you really, really, really do not want to sleep on this. The speed at which I’m able to ship things has easily 10x’d.

But, with great power comes great responsibility.

Part of the speed boost I’m personally getting from AI is a result of having almost two decades of experience writing code. When you understand what the AI is spitting out and can quickly proof it for errors and adjustments, it’s easier to trust the result.

If you’re just starting out, though, I bet this looks scary if not outright demoralizing.

What scares the crap out of me is thinking of a world littered with products built by people prompting an AI who don’t really understand how the code driving the product works.

To avoid being one of those people yourself, I would encourage anybody reading or listening to this to try the following exercise:

1. Think of a cool feature you’ve seen in an app recently (e.g., a modal with a bouncy show/hide animation). Something in the low-to-medium difficulty range.
2. Next, crack open a Codepen or similar tool and rough out the HTML and CSS. If you don’t know what to write, either ask the AI or sweat out some through some trial-and-error via Google. For what it’s worth, I’ve gotten the best results from prompts by pretending I’m chatting with an actual human (i.e., write as though you’re talking to a friend or family member).
3. Once you have that base HTML and CSS code, finally, move on to the JS. Don’t worry if you don’t fully understand it yet. Just focus on getting it to work how you envision in your mind.

Stick with it. Work through this process until you get something viable. Then, go back to square one. Take all of the code and start to read it. Really try to understand it. Ask questions about why something works the way it does. What does that mean? Why is this here? Do we really need this thing?

Through this process, I’d argue that you should find yourself picking things up much quicker than scratching your head over tutorials.

Once you’ve gotten comfortable with this process (and you’re getting results to your liking), I’d next challenge you to build a whole product. Don’t get too wild with it. Make sure it’s something attainable. For example, maybe try to build a simple CMS or a way to upload files to Amazon S3.

Skip all of the fancy stuff, too, like payments. Just make a product that works for a single, free user. Get into the groove of shipping working software with AI at your side. Once you feel proficient, then start aiming at a full-blown, customer ready product.

Is this going to make you a gozillionaire over night? No. Aside from gambling or committing some sort of crime, very little in this world is likely to get you that.

What you will get, though, is a defensible skill set that will serve you well into the future, and hopefully, one or more products that you can iterate on.

Worst case scenario? You’ll be a better, more experienced developer.

Remember: AI is just a tool, not a replacement for thinking. I think that the people who win in the long-term are those who use AI to speed up the learning and building process, but, still make a point to go back and know (at least to some degree) how everything works.

The losers long-term will be people who blindly trust what the AI spits out and are gobsmacked when their product falls apart and they don’t know why.