DEV Community

Cover image for Bypassing the Human Brain: How I Built a Full-Stack Prototype in 60 Minutes
4484-ho
4484-ho

Posted on

Bypassing the Human Brain: How I Built a Full-Stack Prototype in 60 Minutes

#webdev #ai

We always try our best to explain things, but we never really know if we're getting through. And customers are always worried: "Do they really understand what I need?"

This is a story about fighting back against that hopeless situation.

"Can you reorganize this complex business logic from scratch?"

That's the request I got recently. At first, I thought about using NotebookLM to organize existing documents and create materials. But that would take time, and I wasn't sure if it would really meet the requirements.

So I tried combining these three tools:

My plan was to quickly build a prototype and get everyone on the same page.

Tools I Used

NotebookLM Skill for Claude Code

I used notebooklm-skill to enable Claude Code to directly access NotebookLM notebooks. I created a .claude/skill directory in the project root and cloned the repository there.

mkdir -p .claude/skill
cd .claude/skill
git clone https://github.com/PleasePrompto/notebooklm-skill notebooklm
Enter fullscreen mode Exit fullscreen mode

Now I could get answers from Claude Code based on documents I'd uploaded to NotebookLM. Honestly, I was surprised.

Before this, I couldn't download materials from NotebookLM, and I thought of it as a separate tool from Agentic Coding. The workflow was: organize requirements and designs in ClaudeCode, then feed them to NotebookLM. That was my mental model.

Since it operates through browser automation internally, it seemed like a simpler structure compared to MCP and similar tools.

Anyway, now I could easily get the information I needed—including all the sources and notes I'd built up with customers over time.

cc-sdd

cc-sdd is a tool that supports Specification-Driven Development. I used it with the standard workflow this time.

The Actual Process

As a prerequisite, I'd already registered our product's requirements documents and business logic materials as sources in NotebookLM.

1. Organizing Specifications with NotebookLM

  1. I asked NotebookLM via Claude Code to create data models needed for the business logic in markdown format
  2. I had it organize the necessary business logic, formulas, data models, and table/column elements for success patterns, then output them in markdown format
  3. Since I'd also placed existing product specifications in NotebookLM, I sent a request asking for a minimal prototype that took all of those into account, and got the results

By this point, I had pretty well-organized specifications.

2. Deciding on the Tech Stack

Once the specifications were organized, I decided on the tech stack first:

  • Database: PostgreSQL
  • Container: Build PostgreSQL with Docker
  • Frontend/Backend: Next.js (configured as BFF architecture)

Since it's a minimal prototype, I kept it simple. With Next.js, I can handle both server-side and frontend with API Routes and Server Components, and database connections are straightforward.

3. Starting Specification-Driven Development with cc-sdd

Once the tech stack was decided, I ran cc-sdd init to initialize the project. Then I followed the standard workflow:

  1. Create requirements (from here on, I had cc-sdd commands directly ask NotebookLM questions while creating requirements)
  2. Create Steering (with the decided tech stack specified)
  3. Specify design
  4. Present tasks
  5. Implement the application

cc-sdd proceeds with implementation based on the specifications.

I think the key point is telling it to query NotebookLM, like this:

/kiro/spec-requirements <spec-name>
I want to create requirements for a minimal setup that can test business logic for customer demos
Please use the Skill to ask NotebookLM questions
Also incorporate the data model and business logic materials I have locally

ultrathink
Enter fullscreen mode Exit fullscreen mode

I told ClaudeCode to build PostgreSQL with Docker containers and implement it as a BFF architecture with Next.js in the Steering. I also had it create table definitions based on the data models I'd obtained earlier.

It's smarter and faster than I am.

All of this took one hour. Honestly, I was surprised myself. Normally, just organizing requirements would take several hours, and building a prototype would take a full day.

Summary

This combination is really useful. Especially the flow of organizing specifications with NotebookLM and then implementing with cc-sdd—it was super helpful for clarifying requirements and maintaining consistency in implementation. I also didn't have to deal with ClaudeCode asking me a bunch of questions. There's something to be said for being clear and fast without going through a human brain.

By the way, the app details are secret, so I won't go into them here (lol). But this tool combination itself is pretty versatile, so I hope you'll give it a try.

And here I am, writing this post after finishing the work so quickly. Don't tell anyone, but it took me the same amount of time to write this post as it did to build the prototype.

Top comments (0)