TinyFish: A Tiny Tool, a Big Part of My Vibe Coding

TL;DR

I used TinyFish Fetch inside Claude Code while vibe coding my personal portfolio from 0 to 1 over a weekend.

The goal was to give my coding agent enough web context from reference portfolio sites without relying on screenshots or wasting tokens on noisy input.

For one reference site, Claude’s built-in WebFetch returned only one word. TinyFish Fetch returned 500+ words of usable reference context, including section titles, body text, project descriptions, tech stack, and bio content.

That gave Claude something it could actually reason about and helped me avoid building on a hallucinated design context.

“Your AI agent is only as good as the context it gets.”

The problem

I recently took my first shot at vibe coding.

And I mean vibe coding from start to finish.

The goal was simple: build my personal portfolio from 0 to 1 over a weekend, focusing on content and design rather than getting buried in code.

That is probably what most people want when building a personal site. It is why platforms like Squarespace, Wix, and WordPress became so popular. My own previous site was on WordPress.

So starting vibe coding with this project made sense.

But I set myself one rule going in:

No vibe coding without intention.

Tokens are the new currency in the AI era, and feeding unstructured junk to your LLM is the fastest way to burn through them.

I wanted to keep token usage low, get to the goal efficiently, and actually learn something along the way.

Spinning up a portfolio is a simple enough task for most LLMs, so the added constraint made it interesting.

The real challenge was not asking Claude to build a site.

The real challenge was giving Claude the right design context.

What I built

I built my personal portfolio using Claude Code.

The project started in Plan Mode with a set of requirements, features, style preferences, and reference sites I liked.

That last part is what this Build Log is really about: getting inspiration from other personal sites and conveying that to a coding agent.

The idea was not to copy other sites.

It was to give the agent useful context:

• what kind of content I liked
• how I wanted the site structured
• what design choices resonated with me
• what reference sites did well
• what patterns Claude could adapt into my own portfolio

Good context in, good output out.

At first, I tried to keep the workflow lightweight. I intentionally skipped screenshots because I knew they would eat through my token budget quickly.

Instead, I dropped in reference URLs and expected Claude’s built-in WebFetch to pull enough structure from the sites.

That is where the workflow broke.

Where TinyFish fit

TinyFish fit into one specific part of the workflow: fetching usable web context from reference sites for Claude Code.

Claude’s job was to:

• plan the portfolio structure
• reason about design direction
• generate implementation suggestions
• help build and iterate the site

TinyFish’s job was to:

• fetch the actual reference-site content
• return clean page context
• preserve enough structure for Claude to analyze
• give the agent something real to reason about

The first attempt used Claude’s built-in WebFetch.

From one of the reference sites, Claude’s built-in fetch returned a single word.

One word.

Then it confidently wrote up a glowing design review. It praised the site’s minimalism, called the whitespace intentional, and talked about personality through brevity.

But it had hallucinated a design critique from almost nothing.

If I had not been paying attention, I would have let my agent build on a foundation of invented context.

I had recently come across TinyFish, a tool built to help AI agents use the web more like humans do. I set up the TinyFish MCP Server inside Claude Code and tried again.

Same sites.

Same ask.

This time, using TinyFish Fetch.

The difference was immediate.

What worked

1. Fetching page context instead of guessing from sparse output

The most important improvement was simple: Claude had real page context to work with.

From the same reference site that returned one word through Claude’s built-in fetch, TinyFish returned over 500 words of usable reference context.

That included:

• section titles
• body text
• project descriptions
• tech stack
• bio content
• page structure signals

It was clean, readable, and complete enough for Claude to reason about.

Instead of asking the model to infer design structure from almost nothing, TinyFish gave it usable context from the actual page.

2. Avoiding screenshot-heavy prompting

To keep token usage low, I had avoided screenshots.

That constraint made the retrieval layer more important.

TinyFish helped me give Claude reference-site context without relying on image inputs. For this kind of workflow, that matters because screenshots are expensive, heavy, and not always necessary.

If the agent can get structured page content directly, it can still reason about layout, copy, structure, and design patterns without needing every reference to be represented as an image.

3. Turning design inspiration into actionable implementation context

The richer TinyFish result gave Claude specific signals it could act on.

For example, Claude could see that one reference site used a slash-prefixed section format, such as / about and / experience. That was close to the structure I wanted for my own site.

It could also identify how the site used minimal copy, whitespace-first layout, and concise project descriptions.

That changed the quality of the iteration.

Instead of creating a vague design critique, Claude had concrete patterns it could use.

4. Reducing correction loops

After TinyFish returned usable context, I did not need to keep correcting Claude on the same reference-site misunderstanding.

The first attempt had been a dead end because the model was reasoning from incomplete input.

The TinyFish attempt gave it context it could actually use.

Zero correction loops after that step.

Measurable outcome

The workflow difference was clear in one reference-site test:

This was not a large benchmark.

It was a practical before-and-after from a real vibe coding session.

The lesson was obvious: the agent’s output quality depends heavily on the context quality it receives.

Better structured input means better output from Claude and fewer correction loops required by the builder.

Most importantly, it means being able to give your agent context without relying on screenshots.

Keeping token use low while providing the right context is the ultimate win in the vibe coding era.

What I’d do differently / Lessons learned

1. Start with better web context

Had I started with TinyFish, I would have skipped the failed fetch entirely.

I also would have avoided giving Claude space to hallucinate design observations from incomplete page content.

Any time my agent needs to pull context from the web, TinyFish Fetch is where I would start.

2. Do not confuse confident output with grounded output

The most dangerous part of the first attempt was not that WebFetch failed.

The dangerous part was that Claude still produced a confident design analysis.

If you are vibe coding with reference material, make sure your agent actually has the source context before trusting the recommendation.

3. Screenshots are useful, but they should not be the only way to provide context

Screenshots can help with visual design, but they are not always the most efficient first step.

For many coding-agent workflows, clean web context is a better starting point:

• it is lighter than screenshots
• it is easier for the agent to quote or structure
• it can expose page copy, sections, and metadata
• it gives the model something textual to reason over

4. Structured context creates better iteration

Receiving context through structured output gives the agent something to reason about, not just reference.

That matters when the task is not only “copy this design,” but “understand what I like about this reference and adapt the pattern into my own site.”

Recommendation for other builders

If you are vibe coding with Claude Code, Cursor, or another coding agent, do not only focus on the prompt.

Focus on the context you are giving the agent.

Before asking your agent to design, critique, or build from web references, check whether it actually fetched useful content from those references.

A good workflow is:

1. Collect the reference URLs.
2. Use TinyFish Fetch to pull clean page context.
3. Ask the coding agent to extract patterns from the fetched content.
4. Decide which patterns you actually want to adapt.
5. Let the agent implement from grounded context, not guesses.

Humans were not always good at finding information on the web. We had about 20 years to figure it out.

TinyFish is compressing that learning curve for AI agents. They do not need a separate web built for them. They just need better tools to use the one we already have.

Tokens are the new currency.

Context is the new classroom.

And your agent is only as good as the context it gets.

Try it / Links

A quick thanks to Gazi Jarin and Sebastian Tsang — I used their sites as design inspiration for this project, and clearly they served their purpose well.

Want to see the end result? Check out Anant’s portfolio.

Want to give your coding agent better web context?

📌 Sign up free → agent.tinyfish.ai

Docs → docs.tinyfish.ai

Open source Cookbook → github.com/tinyfish-io/tinyfish-cookbook