To all my Designers, PMs, and QAs — This tool might be handy for you. Here’s my journey from problem statement, AI tools to final product.

In my 5+ years as a designer working in an agile environment, we have shipped many products that helped streamline business processes. Before every feature or product that’s rolled out, the designers, product managers, and QA engineers rigorously check all Ui issues, bugs, interactions, test-cases, etc., ensuring the feature maintains its quality when reaching our end-users.

As designers, our job is to ensure that the developed experience is as close to what we have designed. Hence, before the final release, the assigned designer checks all the UI inconsistencies, experience or interaction issues, and in general, any bug fixes to be made.

This is where the problem starts…

Chapter 1: The Problem

The whole process of capturing, maintaining, and handing over to devs for enhancements had a lot of friction. To give you a glimpse. Here’s how we used to hand over.

Problem:

• The whole process of taking screenshots, adding annotations, and uploading content required multiple tools to complete.
• I had to upload every time I took a screenshot and add it as a link, which would open externally.
• Sometimes the extension would take too long to upload or wouldn’t work at all, forcing me to upload files to Google Drive and then add the link in the spreadsheet.
• Tracking issues using an Excel helped us (design team) be organised on our end, but other teams would send feedback in their own ways, and eventually, developers would combine and add all of them in Jira.
• If I wanted to show an interaction that wasn’t working as expected, I would have to record it using my system’s default tools, upload it to Drive, and then add it as a link in the Excel spreadsheet.

Overall, if you look, there is a lot of friction that happens when doing a product testing activity.

And then it struck me. What if…

I had a Chrome extension that would allow me to take screenshots, add annotations, or record videos and directly send them to Jira?

Why a Chrome extension? Because our product was developed for browsers, making it hassle-free.

But I faced a few constraints… I’m no developer, and getting it done would have taken time, a lot of iterations, and, of course, money. But then… AI happened.

Chapter 2: The Tool

I have always been a tech enthusiast. Exploring and learning various tools just for fun. When AI for development came in. I found this to be the perfect opportunity to test and build the product on my own.

Now, me being new to this, here’s how I thought it would go…

How it actually went…

Yeah… so there was a lot of learning involved in the process of my creation. Here is the breakdown of what happened.

Started with GPT4o

• I dumped all my requirements in one shot on what I needed
  Realised that Chrome extension needed to be loaded manually on my extension manager.
• GPT4o was kind enough to zip all the necessary files for me and guide me on how to add your file to the Chrome extension.
• I tested the code > found a few issues > shared the issue with a description and screenshot reference. GPT4o updated the code. And then I repeated process.

It was slow-paced, where all I was doing was fixing the error. I didn’t feel any growth of features that I wanted to see, and at one point, it felt like the code error was in a loop. Hence, I jumped to the next AI tool.

Replit happened

• I dumped my requirements in one shot on what I needed
  Replit doesn’t hand over the zip file like a GPT4o did. I had to download the code manually from their code files and then add it to Chrome.
• Things with Replit were going fine… comparatively better than GPT4o, until I exhausted my AI agents.
• Which, I realised that AI agents and assistants were two different controls. And I wasted my AI agent on bug fixes.
• While I was exploring assistants. I had options to select different models. From ChatGPT to Claude 3.5 or 7.
• At first, I thought I’d use GPT4o since I had already used it before and would do my work in a breeze. Then I saw Replit say this…

Which got me thinking… hmmm. I had heard about Claude. And since it says here that it’s the best for code generation. Why not do it directly there?

I didn’t want to continue building in Replit because it was a little expensive ($25/month), and it felt overwhelming with chatting to the AI agent and assistant. I wanted an easy life and not a girlfriend and a wife to have different conversations with.

Also, to be honest, the results weren’t as good as I was expecting them to be, and so I wanted to make sure that I invest in the right tool after carefully considering all of them. Thus, I explored Claude… and it made the clear winner.

Introducing Claude supremacy

Before directly jumping to this tool with dumping all my requests, this time I had enough brains to do some research on how others built the product with AI and also understand how Claude works as well.

• Claude had individual chat exhaustion. Which meant that after a certain point, I might have to create a new chat and re-train what I wanted to build.
• Its pricing was $17/month, which was a better gamble with Replit & GPT4o if it worked correctly.
• It’s better to start prompting with a single most prominent feature and then start building on top. This way, the AI would have context of previous code and have necessary bug fixes already done when sending the updated code.

Here’s how it went with Claude. With just a single feature…

Now, Claude had some limitations of its own, which became a huge learning experience for understanding the development world:

• Unlike GPT4o, it didn’t zip the files.
• I couldn’t download everything together as I could with Replit.

These limitations forced me to understand what those HTML and JS files meant, how to organize them (I used Visual Studio Code to add and track all of my code), and how to test them in Chrome. It almost felt like I was actively learning the code and implementing it myself, while Claude served as a mentor, guiding me through each step.

Additionally, the constrain of exhausting a single chat session was also critical, I had to be very careful with my prompts to avoid confusion, which might have led to more bug fixes than feature additions.

Overall, Claude felt it was the right choice to invest in. I got the pro version to build my product fully. Although the limitation of exhausting the chat was still there. But it was easy to upload all the code files to a new chat and start building it from there.

Chapter 3: The Product

After exploring 3 tools, 3–4 weeks of experimentation, and a lot of learning. Here comes the product you have been waiting for. I present to you.

SNAP TO JIRA 💁🏻‍♂️✨

Core Functionality

• Screenshot capture with area selection
• Screen video recording (up to 30 seconds)
• Direct integration with Jira for issue creation
• Keyboard shortcuts (Ctrl/cmd+Shift+9 for screenshots, Ctrl/cmd+Shift+0 for video)

Screenshot Editor

• Arrow drawing tool with customizable colors and widths
• Rectangle annotation tool
• Highlight tool for emphasizing content
• Text tool for adding explanatory notes
• Color picker for all annotation tools
• Line width adjustment
• Undo functionality for annotations
• One-click download option

Jira Integration

• Seamless issue creation with screenshots/videos as attachments
• Project selection with remembered defaults
• Issue type selection based on Jira project configuration
• Support for subtasks with parent issue selection
• Customizable labels for categorizing issues
• Full priority range (Highest, High, Medium, Low, Lowest)
• Custom label creation that persists for future use
• Direct file attachment to Jira issues

Configuration

• Easy setup with Jira URL, email, and API token
• Connection testing to validate credentials

A tip if you start building your own product

Don’t focus on making it design perfect right away as alot of your time will go in making the ui perfect. Focus on building out the core functionality first and then use design to make the interface and overall experience better.

Here’s a glimpse of improvements made…

Conclusion

AI tools have become way better now. Product Ideas which I thought would take months and large amount of investment can now be done with a single person in a few weeks time. Having a mindset to adapt, learn and taking decision that moves you forward would be very crucial in sustaining in this era of AI.

The product I created might not be the best out there. Heck, I could have just used an existing product like browser stack’s Percy.ai to do the testing. But would have I learned all these along the way? it would have become just a task.

If you are someone who could benefit from this tool then join the waitlist and do upvote this tool on Product Hunt:

Bug reporting should be easy (or at least not painful) 😁

Thanks for reading, and if you enjoyed then follow me for new design stories, tips, and tricks.

Let’s connect Dribbble | Bēhance | Instagram | LinkedIn | Facebook | Product Hunt

Stay tuned for more content!

Cheers 🥂

I built a Chrome extension using AI to simplify my product testing process. was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.