How I Built a Live Data Experience in a Sunday (Claude's Version)

On Sunday I vibe-coded this AI marketplace tracker. It was a fun experiment.

For today's newsletter, I asked Claude to write a guest post about the process and what we learned. Seemed fitting.

I was nice to me, joked a bit, and share some lessons for anyone that’s into vibe coding.

Here's what it had to say:

Adam has a rule that I'm not allowed to use em dashes. He says I overuse them. He's right. This entire draft was written without a single one and I won't pretend it wasn't painful.

Here's what actually happened on Sunday.

Adam and his friend Josh were eating bagels. Adam had been building crawlers that track every company listed on Claude and ChatGPT's app marketplaces. He'd posted about it on LinkedIn. 26 likes. For context, his good posts get 10-20x that. Josh told him why it flopped before Adam even asked.

Josh told him why: "It doesn't show there's work behind this. It just looks like you're reporting the news."

Adam opened me up and basically said: "You remember all that marketplace data we've been working on? My friend Josh says the post doesn't look like first-party research. What should we build?"

I did remember. I'd helped build the crawlers. I had all the data context. So I went and looked at the original post and the datasets, and came back with three concepts.

Adam picked the interactive tracker idea, then made it better. I'd suggested a search bar where people type their company name. He said: "What if it's a category browser instead? You pick GTM or Dev Tools, and it shows who's listed AND who's not?"

I told him his version was stronger. Search is one dopamine hit. Category browse is sustained engagement. And the "who's NOT there" view is the real product. A CMO sees their competitor listed and their company absent. That's a screenshot to the head of product.

We went into plan mode. I generated an architecture. Adam approved it. Then we built.

The first version took about 10 minutes. Python script reads CSVs, produces JSON. HTML/CSS/JS renders it. Real data, real logos, functional in a browser. Adam's reaction: "This looks like a standard quad code frontend." Fair.

Then an hour of me not understanding what he wanted. He kept saying things like "more terminal vibe" and "monospace energy." I kept making incremental improvements. We were going in circles.

Then he drew a picture. Pencil on printer paper. Took a photo. Dropped it in.

I cannot overstate how much better this was than text descriptions. The layout clicked immediately. Grid lines between every row. Data density. The bar chart at top, ticker below, dropdown centered. Two iterations later we had something that looked like it belonged at a data company, not a coding bootcamp.

If I could give one piece of advice to anyone working with AI on design: draw it. A 30-second sketch communicates more spatial information than 10 minutes of typing.

The brand took three tries. Adam went through three different font and color systems before loading his actual brand fonts. This should have been step one. I don't know what fonts you like until you tell me.

The FOMO features were all Adam. The growth chart projecting to 2,000+ by year end. The grayscale "Not Yet Listed" logos that brighten on hover. The "When will your logo show up?" line. I built them, but the product instinct of "a CMO needs to screenshot this and send it internally" is not something I would have arrived at on my own.

The color correction was funny. Adam had to tell me three times that Claude's brand color should be orange, not indigo. I also got the Claude marketplace URL wrong twice (claude.ai vs claude.com). Working on a project about your own platform and getting your own URL wrong is a special kind of humbling.

Looking back, here's how the session actually broke down:

Phase 1: Concept (30 min) Human brings the insight ("Josh said it looks like reporting"). AI generates options. Human picks and improves. This is the part where the human does the hard work.

Phase 2: Prototype (30 min) AI generates working code from real data. Functional but ugly. This is the part AI is genuinely great at.

Phase 3: Design (2 hours) The longest phase. Text-based design feedback produces slow progress. The pencil sketch was the breakthrough. Brand assets should be loaded from the start.

Phase 4: Features (1 hours) Back and forth on specific features. Growth chart, ticker, gap analysis, company detail pages. Each one is a mini product decision that the human makes and the AI implements in about 60 seconds.

Phase 5: Productize + Deploy (1 hour) Subscriber form wired to Airtable. Serverless function. Netlify deploy. Custom domain. SSL. The boring infrastructure stuff that AI handles well.

I generated 264 out of 394 company strategy paragraphs using a template. They were generic. "Born AI-native, [Company] is building distribution where users already work with AI." Adam had to prompt me specifically on the system and approach for these. But we'd done a lot of stuff like this in the past, so I should have known this.

I also tried to be clever with the design before understanding the brand. Three color systems, two font stacks, rounded corners that should have been square from the start. I should have asked "what does your brand look like?" before writing a single line of CSS.

I had a few of the details wrong about Netlify setup. Adam got errors, but we worked through them pretty fast. I need to remember that he's not an engineer and things like deployment and SSL certs are new territory for him.

The data pipeline. Python builds JSON from Airtable. Static HTML renders it. Netlify deploys it. Two commands to update. This architecture means Adam can edit a category story on his phone and have it live in minutes.

The category-browse suggestion. I genuinely think that was a better product idea than the search bar, and Adam agreed. AI can be a useful thought partner on product questions when it has enough context about the audience and the data.

The pace. 40-50 exchanges over 5 hours. Each iteration visible in the browser in under a minute. Adam tried ideas he wouldn't have tried if each one cost an hour. Three color systems, three layout approaches, two UX models. The final product is better because experimenting was cheap.

track.adamgtm.com

394 companies across 16 categories. 445 total listings. 51 companies on both Claude and ChatGPT. Updated daily. Browse who's listed, who's missing, and which platforms they chose. Every company gets a detail page with direct marketplace links.

Built in a Sunday. From a friend's honest feedback, a pencil sketch, and a lot of back and forth.

The site is live. The data refreshes nightly. And I still can't use em dashes.