Design, vibe coding, and organization
Agentic tools help us build fast, but without a clear playground and a few rules, the next designer and the next agent can both get stuck.
The messy folder
Over the last year, vibe coding has become a part of my workflow, just like it has for so many other product designers. Alongside Figma, I now explore and build prototypes with AI agents in tools like Cursor and Claude, and use GitHub to publish them in a shareable format.
A few weeks ago, in the middle of a project, I stopped and actually looked at my local folder, and realized it had turned into a junk folder. Exploratory prototypes sat next to near-final versions, along with git publish leftovers, docs and decks I’d added for “context”, a new markdown file for every feature I’d explored, and clones of reference repos I’d pulled in to look at.
To me it still made sense, because I knew what everything was and why it was there, and so did my agent, as long as I stayed in the same session. But if I opened a brand new agent with no chat history, or handed this to another designer, would they understand any of it? Clearly not. The work wasn’t portable, it was stuck in the session that created it.
Faster, but all over the place
Not long ago, most design exploration lived in Figma. Now one project bounces between Figma, Claude, Cursor, GitHub and a growing pile of local folders. Prototypes that took days show up in an afternoon. We’re all under pressure to ship fast, the prototype is usually the only thing anyone looks at, and there’s no rulebook yet for what a good foundation even looks like. The speed is exciting, but it’s also what makes things get out of hand so quickly.
We’ve been here before, in Figma
Designers have never been famous for organization, and there are endless memes about how we name files: final, new_final, new_final_final. But a lot of that is just the nature of the work. We try 10, 20, sometimes 100 options, and the discarded ones, along with the trail of why we didn’t go that way, need a home too.
Engineers might say this is what git branches are for, and they’re not wrong, but branches don’t match how designers explore. When I have 10 versions of a flow, I want to run them side by side and compare how each one looks, feels and works, not switch between branches one at a time. And since GitHub Pages publishes one site per repo, I’d either have to build my own Figma-style switcher into the prototype or keep the options in separate folders anyway.
Figma lived through this. Frames sprawled across one endless canvas until nobody knew which frame was current, so we got pages, sections, and a culture of design hygiene across the community (although, some designers are still guilty of skipping the hygiene part). Figma’s solution worked because the structure came from decisions we made with our own hands, and even when it got messy, you could zoom around, squint and find “the real one”. Humans are weirdly good at navigating mild chaos.
But agents can’t squint
With vibe coding, we explain what we want in natural language and the agent does most of the executing. That’s the magic of AI, but for organization I think it’s also a bit of a trap. Unless you tell an agent how to organize, or put it in the project instructions or a rules file, it has no idea what goes where. It doesn’t know whether to create a new .md file or add to an existing one, which folder is for exploration, which one is the main prototype, and which one means “please don’t touch this”.
An agent can read every file in seconds, but it can’t read your mind. My folder had all the files but none of the decisions, like which version was the real one and what was safe to edit, because those only lived in my head. So it guesses, and that’s exactly how folders get messy.
Get Sanjana’s stories in your inbox
Join Medium for free to get updates from this writer.
That’s why I don’t think a messy local folder is as “fine” as a messy Figma file used to be. And organizing once isn’t enough either. You also need rules, skills and project instructions living in the folder itself, so you’re not re-prompting the same preferences every session or going back to clean up again and again. Organize the playground, then teach the agent how to keep it that way. The goal isn’t to delete exploration, it’s to make it easy to find, compare and hand off.
How I cleaned up my playground
Until the tools catch up with how designers think, those of us vibe coding regularly have to invent our own setup. When I started, these were the questions that helped:
- What’s the main version, what’s exploration and what’s archive?
- Where do product clones live, and is it obvious they shouldn’t be casually edited?
- If a new person or a new agent opened this cold, where would they start?
- What rules should the agent follow every time, without being reminded?
Then I grouped like with like, kept prototypes separate from reference clones, and put plans where they belonged. I added a short map at the top that says what the workspace is, what not to touch and how to run the real thing, and I swapped the trail of one-off docs for one living context file. Next to all that, I left instructions the agent could reuse, like where new work goes, how to name files, when to update context and when not to invent yet another random doc.
I planned all of this with my agent and then had it make the changes. The point isn’t that AI cleaned my folders. The point is that organization is a design choice, and agents can help you build it once you’ve named the rules.
Turns out the agent liked it too
What surprised me was what I observed after the restructure. The agent worked noticeably faster and more reliably. It edited the wrong file far less often, it stopped creating random new .md files, and I spent way less time re-explaining things at the start of every session. From what I could tell, it used fewer tokens too. The model hadn’t changed, but the folder had. Similar things were grouped together, the starting point was obvious and the boundaries were clear.
This is where taxonomy, ontology and semantics quietly do a lot of the work. I’ve spent the last 2 years designing for data platforms and problems around data discovery, which is where I learned these concepts and why they matter. In very simple terms, and in the context of a folder, taxonomy is how you group things, ontology is how those groups relate to each other, and semantics is whether the names actually mean what they say. The same things that help people find the right dataset helped my agent find the right file, because a folder called “explorations” sitting next to one called “main-prototype” tells it more than any prompt I could write.
And if you think about it from a product design lens, this is basically information architecture, the same thinking that makes a good website or design system easy to navigate, just applied to a folder.
We talk a lot about prompting, but much less about workspace prompting: the structure and rules you leave behind so the next session doesn’t have to decode your history.
So, pause before you go fast again
If your vibe coding output is speeding up, put organization on the critical path, not as guilt cleanup for someday but as part of how you ship. Figma had to invent structure when canvases got out of hand, and our local playgrounds are at that same stage, except this time we have to invent the pages, sections and branches ourselves and teach our agents to follow them. So pause, organize and write the rules down, then go fast again.
If you’ve built rules and a playground setup that work for prototypes, agents and humans, I’d love to hear about it, especially the one rule you refuse to break.
