How to Structure Your Claude Code Workspace as a Designer

If you've started experimenting with Claude Code — Anthropic's AI tool that lets you build and iterate on real products through conversation — you've probably hit a moment where things feel a little… scattered. Where does your design brief live? How does Claude "know" what your project is about? Why does it keep forgetting the context you gave it three sessions ago?

The answer, it turns out, isn't more prompting. It's structure.

A designer and UX writer named Nick Babich recently shared a project folder structure specifically designed for design projects in Claude Code — and it's a genuinely useful starting point for anyone who wants their AI workspace to feel less like a messy desk and more like a well-organized studio.

Here's what it means for you.

Your Workspace Is Also Your Brief

The core insight in Babich's approach is simple: Claude Code reads your files, so your files are your brief. The structure he proposes puts a set of special "context" files right at the top level of your project folder — the first thing Claude sees when it opens your workspace.

The most important of these is CLAUDE.md. Think of it as the cover page of your project: it's where you tell Claude who you are, what the product does, what conventions you follow, and anything else it should always keep in mind. There's also a CLAUDE.local.md — a private version of the same idea, for notes that are personal to your machine and shouldn't be shared with a team.

There's also a DESIGN.md file for design-specific context (think: your design principles, component naming conventions, tone of voice), and a .mcp.json file — that last one is a configuration file (essentially a settings document) that connects Claude to external tools. You don't need to fully understand it to use it; just know it's the handshake between your workspace and any plugins or services you've plugged in.

A "Team Toolkit" That Lives Inside Your Project

Babich's structure includes a hidden folder called .claude/ — the dot at the front means it's tucked away and doesn't clutter your main view. Inside it lives what he calls your Team Toolkit: subfolders for rules (guardrails for how Claude should behave), skills (reusable instructions for tasks Claude does repeatedly), and agents (more autonomous workflows you can trigger).

For a designer just starting out, you don't need to set all of this up at once. But it's worth knowing it's there. Over time, as you find yourself repeating the same kinds of requests — "always use our brand colors," "format components this way," "check accessibility before you ship" — you can encode those into rules and skills so you stop having to say them out loud every session.

Where Your Actual Design Work Lives

The rest of the structure is refreshingly familiar. There's a docs/ folder with a brief, product requirements, and a running log of design decisions. There's a src/components/ folder for the actual UI components Claude helps you build. And there's a reference/ folder with subfolders for screenshots, competitor examples, moodboards, user flows, and research.

That last folder is particularly interesting for designers. You can literally drop in your competitor screenshots, your moodboard exports, your user research summaries — and Claude can reference them as context when you're making decisions. Your inspiration board becomes part of your working environment.

There's also a design-tokens.json file at the root. Design tokens are the named values (colors, spacing, typography sizes) that keep a product visually consistent — and having them as a structured file means Claude can read and apply them directly, rather than you having to paste in hex codes every time.

Why Structure Matters More Than Prompts

Here's the mindset shift that's easy to miss: with tools like Claude Code, the quality of your setup determines the quality of your output — sometimes more than the cleverness of your prompts. A well-organized workspace means Claude always has the right context. It means your team (or future you) can pick up where you left off. It means less time re-explaining and more time actually building.

This is genuinely good news for designers. Thinking about information architecture, clear labeling, and logical hierarchy? That's design thinking. You already know how to do this — you're just applying it to a new kind of artifact.

Start Small, Grow Into It

You don't need to implement this entire structure on day one. A reasonable starting point: create a CLAUDE.md file in your project folder and write a few sentences about what you're building. Add a reference/ folder and drop in any visual inspiration you have. Then build from there.

The structure Babich proposes is a scaffold, not a straitjacket. Take the parts that make sense for where you are, and leave the rest for later. What matters is that you start treating your workspace as a designed thing — because how you organize your context shapes everything Claude does with it.