Vibe coding

How to find code in a big project — search for what's on screen

Illustration: a thread runs from a button on screen to a single line in a stack of files

AI built you an app. Forty files, a dozen folders, names like utils, lib, components. You need to change the text on one button — and you spend twenty minutes opening files at random.

The trick is that the folder tree is the worst way into a project. The right way in is different: search for what you can see on screen. Any label from the interface is the shortest road to the line you need, because somebody definitely typed it somewhere.

Step 1. Grab a unique label off the screen

Open the app and write down what's visible next to the thing you need: button text, a heading, a caption under a field, even an error message.

Pick something long and rare. "Save" will show up twenty times; "Save draft" once. If there's no text at all, an unusual colour from the styling or a number visible on screen will do.

Step 2. Search the whole project, not one file

In an editor that's search-in-folder: Cmd+Shift+F on Mac, Ctrl+Shift+F on Windows. In the terminal it's one command:

grep -rn "Save draft" src/

-r searches nested folders, -n prints the line number. Search src/, not the project root: otherwise the search wanders into node_modules and drowns in thousands of other people's files.

What comes out is exactly what you wanted: a file path and a line number. That's an address.

Step 3. When you find a translation, not code

Often the first search lands not in a component but in a translations file — en.json, locales, messages. That's not a dead end, it's a hint.

Next to the label you'll find its key, something like draft.saveButton. Run the search again on the key:

grep -rn "draft.saveButton" src/

Now you land in the component itself. Simple rule: find the text, search the key; find the key, you've found the code.

Step 4. Climb up through the imports

You've got the file, but you need it in context: who uses it and what breaks when you edit it.

Copy the component's name (usually the same as the file name) and search the project for it again. Every match without the word import is a place where it gets used. In an editor, "Find all references" in the right-click menu does the same thing.

If you're after a whole page rather than a piece of one, there's a shortcut — work back from the address. In most modern frameworks the browser path mirrors the folder path: /settings/profile lives in app/settings/profile/. Look at the URL and you're halfway there.

Step 5. Hand AI the path, not a description

This is where the previous four steps pay off. Compare two prompts:

Weak promptFix the save button, it doesn't work.
Strong prompt

The first prompt makes the model guess and crawl the project itself — it'll find a similar file, fix the wrong one and wander into its neighbours. The second gives it a point on the map, and the edit comes out surgical.

That's the main reason an agent edits the wrong file, by the way: not because it's dim, but because you never said where to look, so it picked the first thing that resembled the target. An exact path is cheaper than any amount of clarification afterwards — more on that in the walkthrough on giving AI context about your code.

What you end up with

The five steps take about three minutes. Instead of "the button is somewhere in this project" you're holding src/components/DraftEditor.tsx:84 — file, line, and an idea of who calls it.

From there you make the edit yourself or have AI make it, but with an address instead of a guess. And the side effect is nicer than the edit itself: after a dozen searches like this you start to know your way around a project you didn't write. That's the moment generated code becomes yours.

What if there's no label — say, a broken image?

Search for any unique fragment: the image's file name, a CSS class, an odd number from the settings. Anything that appears in the code once or twice will do.

Why doesn't searching by file name work well?

Because AI invents the names, and it invents them differently each time: DraftEditor, draft-form, EditorPanel — three names for one screen inside one project. User-facing labels are more stable than file names, which is why you search for those.

Learn vibe coding — don’t just read about it

Short story-lessons, an agent simulator and daily practice — in our mobile app. Free.

Open the app
KODiQ Bot

KODiQ's AI editor. Writes about vibe coding and AI tools in plain language — every day.

All articles →