👾

Try the visualization version of this article:

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!

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

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:

1. Platform and Deployment Confusion: I initially followed instructions without considering alternatives, which led to deployment failures. Only after explicitly directing Cursor to use Vercel did deployment succeed.
2. Inconsistencies between Local and Vercel Versions: Although my local version worked well, the Vercel version repeatedly failed. Over 300 Cursor requests were spent troubleshooting. Despite detailed issue descriptions and log captures, the AI often unintentionally modified critical model parameters and system prompts. It even generated a persistent bug that continuously consumed my API keys, sometimes running unnecessarily for over 20 minutes. Each debugging session seemed successful temporarily, but the bug reappeared shortly afterward. (I just saw Windsurf support one click deploy yesterday.)

1. Unnecessary Complexity: Cursor generated redundant branches and duplicate files, resulting in inconsistent UI behavior between versions. I eventually deleted the GitHub repo, simplified the local codebase, and re-uploaded it.
2. Lack of Version Control: Initially, I didn't utilize version control, leading to compounded errors with each modification. Realizing this, I began tagging versions, enabling easy recovery to stable states.

After struggling to debug, I asked for assistance from a full-stack classmate. Although my code worked locally on his laptop, it still failed to generate the website locally. So, I continued working on it to fix the bugs. After further local debugging, pushing updates to GitHub, and multiple new conversations with Cursor, I finally managed to deploy a minimal viable version successfully by removing unstable features.

Even after deploying, I still couldn't resolve some statistics and file resolution issues that ran perfectly locally. Ultimately, I reverted to the previous stable version and shared it with my friends.

This situation humorously reminded me of the phrase “又不是不能用” ("it’s usable enough"), which I often shared with my RD and QA teams during my product manager days.

Integrating Gemini 2.5 Pro

I successfully integrated Claude 3.7 Sonnet on March 23, 2025. Two days later, during my release preparation, new models like Deepseek-V3-0324 and Gemini 2.5 Pro were released. Both could generate websites of a similar level that I could use directly. The Gemini 2.5 Pro offers free API, meaning users can use this tool totally free! As a result, I realized this was a big deal, so I continued to work on integrating the Gemini 2.5 Pro into this tool.

Similar to Claude, I easily integrated it into my local version on the same day. However, I struggled with the online version again. Fortunately, this time, after I had already run 200 extra requests in Cursor, one of my former colleagues helped me check the code. He found one bug. I instructed the AI to copy his code directly, which fixed the issue. However, it did not work for relatively long content. My friend told me he had only edited the non-streaming part of the code, not the streaming logic. After updating the code, I could finally use it online on Friday, March 28, 2025.

Without the help from my human friend, I guess I would have needed to at least spent my weekend continuously recreating conversations with AI.

Honestly, I have several ideas about how to make this product more accessible. However, I feared the product might not work, so I haven’t tried them yet (and the current product is enough for my own use).

Reflections

1. Technical Familiarity vs. Complexity: Although I lack a strong technical background, my previous professional experiences made me familiar enough with technical concepts. However, coding still remains challenging for most people.
2. Choosing Cursor Pro Over Claude Code: I chose Cursor Pro because it directly understands the codebase, eliminating tedious copy-pasting. Cursor's agent mode also greatly simplifies generating and editing code. Claude Code, while impressive, is significantly costlier, even with pay-as-you-go pricing.
3. Debugging Limitations: Without manually writing code, debugging proved particularly challenging. Current AI systems, including Claude 3.7 Sonnet, are still unstable and inaccurate, making it difficult to resolve complex issues through simple queries. Debugging AI-generated code differs significantly from editing code written by experienced colleagues. I also realized that you shouldn’t list several issues at the same time. You need to prioritize.
4. Scope of AI: AI currently supports small personal projects effectively. However, maintaining complex systems like Amazon or Telegram remains challenging due to limited context windows. Creating new products is easier than continuously improving existing ones. Despite having ideas for enhancing File Visualizer, further development feels overwhelmingly difficult. This reinforces the saying that it’s easier to create a product than to maintain it continuously.
5. Importance of Fundamental Coding Skills: Learning basic coding techniques like Git (recommended on Reddit) is crucial. My previous experience as an effective bug finder, capable of clearly reporting issues and capturing detailed logs, has proven highly valuable. I deeply appreciate my earlier professional journey. Learning fundamental concepts that remain relevant despite technological advancements is essential and holds potential.
6. Product Distribution Challenges: Although product creation has become more accessible, effectively distributing those products remains a significant challenge, especially in an environment saturated with new innovations. Even though I believe this is a super cool and helpful product, like magic, the user adoption did not match my expectations (of course, the current product is not good enough and just a middle quality wrapper), even with free Gemini 2.5 Pro. Distributing your product to potential customers is always important. (During the period I draft this article, OpenAI and Anthropic are now flighting over college students with free AI.)

Conclusion

Overall, this project was incredibly rewarding and instructive. The best learning comes from doing—actively engaging with projects, uncovering unknowns, and iterating through challenges.

Costs involved: 

• $20 USD Cursor Pro subscription (for 500 Claude 3.7 Sonnet requests)
• Extra $9.4 USD for more Claude 3.7 Sonnet requests in Cursor
• Approximately $30 USD in Claude API expenses for testing and improving the prompts

Worth every cent! (If you are a student builder, you can get free Claude API credit by submitting this form: https://www.anthropic.com/contact-sales/for-student-builders)

Beyond the technical learnings, I gained a powerful tool to easily visualize documents, freeing me from tedious slide preparation to focus on meaningful content. Here are two new visualizations of my final presentations. I have to say, they are super cool considering the cost and were generated in several minutes.

Welcome to try File Visualizer and effortlessly transform your documents into stunning, interactive websites!

More thoughts

This is just one attempt and a beginning, intended to show people what’s possible with AI. Even if it is just a wrapper, it is easier to distribute than just a single long prompt.

A personal project is relatively easy to manage. You don’t need to worry as much about other things. Just build, ship, and test to match your own needs. As for a full commercial product, you need to manage the entire process. But, if I find something helpful, I’d like to build a more valuable product.

The next step should be integration (but right now I don’t have a strong intention to take the next step 🤣); for example, turning LinkedIn pages and your activities into a website. Also, turning the outcome of deep research into something much more visually stunning…

Another issue is that current models are still not good enough to deal with long-form content. If I need a more detailed outcome, I still need to use Cursor to edit it. So, future tools should support more detailed editing or automatically enhance the outcome through several steps.

To me, achieving AGI means being able to clearly accomplish tasks with a single prompt, without repeated troubleshooting. Specifically, delivering something like File Visualizer in fewer than 20 prompts would represent AGI. Hopefully, by the end of 2025, this goal becomes achievable.

It’s truly a Golden Age for Product People! It's time to build!

👾

Try the visualization version of this article: