Building Agentically and Celebrating Watches

I've shared past experiences with vibe coding and it's been a fascinating way to experiment and build on a small scale, but while it works well for POCs and other small utilities (I won't say 'toys' as I've built useful, if small, things now multiple times), it isn't really a "process" and not one that would work over a project with a longer time frame. This is where "Agentic Development" comes in. It's not always referred to as such and it's a huge topic, but let me give you my opinion on it and then demonstrate how I used it to build my newest project, I Watch Watches.

Agentic Development in a Nutshell

Vibe coding is traditionally defined by a quick prompt passed to an AI agent. There may be a few rounds of changes afterwards, but the process is relatively simple and straightforward. Acceptable for a team of one and smaller projects, but not necessarily a "real" enterprise/larger environment.

Agentic development integrates your AI agent or harness across an entire development process. Broadly speaking it entails:

• A planning stage where you may start with a prompt, but the agent doesn't write any code, but instead creates a plan. That plan is shared with you and you have the opportunity to adjust as you see fit. Add something, remove something, tweak something, this is where you and the agent agree on not just what is being done, but how. For developers who worry about AI taking your job, this is where your experience comes into play. I always validate that the plan makes sense and is building how I (or my organization) would build.
• An implementation phase where the AI agent takes over - but even here the process can be far different from simple vibe coding. A good harness (like Cursor!) will let you define rules ("always do X") as well as skills ("when doing Y, here is how we do it") which lets you give firm guardrails for how code will be generated. This is especially useful in cases where you are working on a team within a large codebase and need to ensure you follow the established procedures for that project.
• Validation is also part of the process. A good agent/harness will not just build something but also validate that it actually worked. This could also be combined with creating tests to cover new features.
• On top of validating the change worked, you can also add an additional level of verification, so for example, when a PR is submitted, you can use an agent (at Cursor this is Bugbot, but of course other options exist).

That's a pretty high level overview, but the end result is that you've got AI agents working for you in a much more controlled, and reliable way. Honestly it's already changed how I do a lot of my work even in cases where I've written every bit of code. Having the agent there to help validate and check what I've done is like having a virtual intern who never complains.

So, how about an example?

Watches are my bling

I've been a huge fan of watches for pretty much all my life. I remember Swatches as a kid (I literally just signed up for a pre-order for a new one) and as I got older, I started collecting more and more watches and finding myself stopping at jewelry stores just to peruse their collections. I've got some cheap ones, some expensive ones, and some weird ones, but I love them all.

This is my current favorite and I've got it on right now: Memento Mori Rose

Yes, this is a Camden watch, and the name initially caught my attention, but their collection is incredible (I have two). Even better, they literally check the timezone of where their watches are being shipped and will set the watch to the appropriate time.

My typical way of discovering new watches is either seeing it on a person or seeing it on Facebook. Shockingly, if you Like a few watch ads, you end up seeing a lot more, and honestly I'm fine with that. (Facebook is where I first saw the Camden Watch company.) A few days ago it finally clicked that there's probably a decent amount of watch blogs out there, why not start aggregating them so I can see watches my own way - in my own app.

How I Started

So obviously I'm using Cursor (where I work, just as a reminder!) and it's got a dedicated Plan mode. I switched to that and started off with this prompt:

My stack was Astro, on Netlify, using their built-in database support, which is not something I've actually used before. Note I gave direction on how aggregation should occur, specifically Netlify CRON-based serverless functions.

When I submitted this, I got a few follow-up questions including my mocks. At some point (honestly I can't find it now), I directed Cursor to not implement search for now. (If you visit the site today, search does work, but that was a second session which I'll turn into a second post.) I also said I wanted pagination with ten items per page, but I told Cursor to ensure that number was easily configurable. I'd say the follow-up questions and back and forth was probably about ten more minutes of work. When done, this plan was created. Note that the links below won't work as they are local to my project. They absolutely did work post creation which was super helpful to verify how things were done.

I told Cursor to execute and it went to work. When it was done, I got this:

I love, love, love how it ended with clear instructions on how to test myself, specifically the Netlify CLI database stuff that I'd never used before. And I knew how to run a Netlify serverless function already, but the curl command was a handy reminder. (As an FYI, a CRON serverless function for Netlify can be called via HTTP locally, but not in production. That's handy!)

At this point I was able to test and it worked perfectly... almost. One blog's items were returning broken images. I asked Cursor about that:

it looks like the media for ablogtowatch all return broken images. investigate why

And here's the response. Honestly, I do not think I could have figured this out on my own:

I selected the first option and let Cursor implement it.

After this, I made a few more changes:

• Initially the footer just repeated the title. I had it link to my blog instead.
• Cursor can generate favicons, so I asked for three options and picked one. When I did, Cursor went ahead and wired it into the HTML.

What's Next

I hope this made sense and I hope the power and flexibility of how I built it is clear. As I mentioned, I've already done improvements, but I want to cover that in the next blog post. You can find the site here, https://iwatchwatches.netlify.app/. I may spring for a real domain later. You can find the code here, https://github.com/cfjedimaster/iwatchwatches