<aside> 🌟

I released my very first web app last week! I’d like to share the story behind this product; I think it might be more interesting than the product itself.

</aside>

image.png

<aside> 👾

Try the visualization version of this article:

image.png

</aside>

Honestly, I didn’t manually write a single line of code for this app. Instead, I continuously refined prompts and clicked “accept” in Cursor—a process recently coined as “Vibe Coding” by Andrej Karpathy.

As a former product manager without a strong technical background, I believe this experience is worth sharing. Here’s a brief behind-the-scenes look into creating File Visualizer.

Inspiration and Early Exploration

I was inspired by a tweet from padphone, highlighting Claude 3.7 Sonnet’s powerful document visualization capabilities. After seeing 歸藏(guizang.ai)’s tweet, I wanted to apply this technique to enhance the transcripts for the Up Our Game Canada project, turning plain documents into engaging content.

Initially, handling long transcripts was challenging since neither Claude’s official nor Perplexity app could manage them effectively. Poe provided better results but still struggled with 63-page documents. Eventually, I used the Anthropic Playground so I could manually configure parameters especially input tokens and the thinking budget for long content. The quality amazed me so much that I tweeted about it, feeling one step closer to experiencing AGI!

https://x.com/hubeiqiao/status/1900023483523858510

This discovery was a breakthrough—I realized I could visualize any document (within context limitations).

image.png

Choosing to "Vibe Code"

However, the Anthropic Playground was too unstable for long-form content, frequently disconnecting and incurring unnecessary token costs. Initially, I tested the Anthropic API directly in Cursor without a UI, and the promising results encouraged me to continue.

While I usually prefer existing products over building from scratch, no-code platforms like Lovable, Replit, and Bolt quickly ran out of free quota without producing results. So, I revisited Cursor. Amazingly, Cursor generated a functional local version almost immediately, motivating me to subscribe to Cursor Pro ($20) and fully embrace Vibe Coding.

This experience reignited my product instincts—clearly defining requirements, delegating execution to AI, and smoothly iterating without friction.

Challenges Encountered

I built the local version of File Visualizer on March 14, 2025, aiming to launch it online by the weekend. Instead, it wasn’t ready until March 23, 2025—after over 400 Cursor Pro requests.

Here are some of the issues and mistakes I encountered during the process: