Product Design with Claude Code

As a designer, I can see that AI coding tools and generative solutions lack taste and craft, and taste and craft are what make products stand out. Lots of people think AI will replace designers, but they’re missing the point. The real opportunity isn’t in AI doing design work. It’s in AI amplifying your ability to think about design. It improves the speed and quality of your work.

Like most designers, I was using AI tools for quick tasks brainstorming headlines, writing user stories, getting fresh perspectives on creative problems. Each tool had its strength: ChatGPT for speed, Grok for creative views, Gemini for data analysis. But Claude became my go-to for anything requiring deep, contextual thinking. Claude is great, but its web interface isn’t. Every conversation starts from scratch. I’d have to upload the same research files repeatedly and re-explain project context. It was like working with a brilliant colleague who has amnesia.

I have been following Dan Shipper and his Every.to for some time now. I always liked their simple and clean writings and actionable advice. Some time ago he began to talk a lot about Claude Code and how it empowers him and pushes speed and quality of his work. He described Claude Code as fundamentally different from chat interfaces.

They write code and build products. They are engineers. I’m a designer. I create experiences, not algorithms. Could Claude Code actually understand and enhance design work?

I tried it and it was GOOD!

Claude Code doesn’t just chat about your work, it lives with your work.

I felt the difference right away. I created a Claude Code session within my design project folder. Figma files connected through MCP, Notion documentation via MCP, research documents in my folders, and my CLAUDE.md files with project context, Supermega Design Guidelines and project-specific guidelines.

I asked: “Review the onboarding flow against our user interviews and stakeholder requirements”.

Claude understood the entire context. It knew what users struggled with from the interviews. It knew what stakeholders prioritized from meeting notes. It saw how my current wireframes addressed or didn’t address these needs.

My entire design process was working as one intelligent system. Smart and quick.

The Design Process

What does the work of a designer actually look like?

First, you research. You look at what competitors are doing. You study different approaches. You analyze existing solutions to understand what works and what doesn’t.

Then you design. This happens in two ways. Sometimes you’re working within systems, following patterns, maintaining consistency, using established components. Other times you’re being creative, innovating, solving problems in new ways, pushing boundaries.

Then you communicate. A lot. You explain your decisions to stakeholders who care about business results. You present to clients who want to see their vision come to life. You work with developers and product managers who need to understand what you’re building.

Then you iterate. New information comes in. Requirements change. Users react differently than expected. So you go back to research, back to design, back to communication.

This cycle never stops. You’re doing all of these things at once, across multiple projects, all the time.

The old way was difficult, time-consuming and pretty messy. Research was scattered across docs and folders. Designs in Figma. Communication on email, WhatsApp, Slack. Project context spread between email threads and Notion pages. Want to explain why you chose this design approach? Hope you remember which conversation that happened in. The tools worked fine individually. There was no unified design process that would amplify thinking and work.

Claude Code helps!

New way, Claude Code way is much faster and simpler. I like things simple, as a designer.

So how designer can actually use Claude Code?

First — take the time to set up your system.

I like to start every project with project-level claude.md file. It can be different from project to project, but, generally, it contains relevant project info, our design philosophy and guidelines. You do not want to overcomplicate it and you should build it up as you move on with the project. There are tons of examples online, but I suggest creating your own.

Next — synthesize your research and findings

Within a project folder on my computer, I create one folder /research, and store everything in it. User interviews, competitor analysis, reports, stakeholder docs and explorations. Claude Code now has access to all. To help him navigate it, I modify claude.md file with instructions on where to find what and how to use it, etc. Claude Code will scan your files and find patterns and insights you may have missed.

Make research cumulative. Every new insight adds to the system. Finished a user interview? Drop the transcript in the folder. Claude Code connects it to previous knowledge.

In the last project after adding numerous research files. I asked “what are the one problem that users share”. It found the pattern I didn’t know existed.

Claude also helps you do your research. The web version of Claude has those annoying limits. You hit usage caps right when you’re in the flow. With Claude Code, you don’t have those problems.

I can upload dozens of research materials and analyze them all in one continuous conversation. No “context limit reached” messages.

With direct file access, Claude Сode reads directly from your research folders.

Claude code can not design for you!

I mean, it can, but it will be generic AI slop, so do not rely on it for actual designs. Instead, use it to design decisions smarter.

Check your work against design rules and principles

Every designer has a design philosophy, a certain style of doing things. It’s good to have it written down.

Every project has its design rules and principles too and it’s good to define and write them down as well.

Once you have these documented in your CLAUDE.md file, Claude Code can help you cross-check your designs against systematic principles.

Find relevant examples quickly

This one applies to bigger projects. I usually create a couple of moodboards for style and for design solutions. Now, through MCP, I can connect them to Claude Code and it “gets” the vibe and the style and design details that we want to achieve. Based on that, later in the project, I can ask questions like “What components should we use in this profile screen, to make users welcome and at home?”. Claude Code knows the references and can suggest solutions based on the actual mood boards, not generic best practices. It’s not always the best ideas, but it’s a quick access to ideas when you need them.

Test the flows you have built

Here’s where Claude Code becomes really useful for design iteration. After you build a flow, you need to test if it actually makes sense. Claude Code can walk through your designs with fresh eyes, and it’s not just a random tester, it knows your research and understands what users actually want.

Claude catches edge cases I missed. “What if a user’s credit card gets declined on the last step? I don’t see an error state for that.”

This isn’t testing with real users — that’s still essential. But it’s a quick way to catch obvious things before you get to real testing.

Document design decisions

The least exciting part of any project is explaining everything you did to the people who have to build it. Developers need technical specs. Product managers need a rationale. Future designers need context. Everyone needs something different.

After I finish the designs, I tell Claude to create design documentation for developers. It can create a detailed description of what we build and why and how user is expected to use it.

For future designers, Claude Code documents the design solutions and ideas we discovered. For product managers, it explains how design decisions connect to business goals based on our research and designs.

This documentation actually stays useful because Claude understands the full context of your decisions, not just the final outputs.

Communicating design

I spend a lot of time explaining my design decisions. With Claude Code, I explain once, then it helps you communicate the same information to different audiences.

Building client presentations used to eat up entire afternoons. Now I tell Claude Code: “Create content for slides about our research findings.” It pulls real quotes from user interviews, screenshots from competitor analysis, and metrics from our data. I just need to design it nicely.

Design system work

I build design systems in Figma and connect them to Claude Code through MCP. Now it can see every component, every variation. It can scan through actual screen designs when needed to spot inconsistencies. It can help you find what components are missing and how you can simplify your work with specific components.

The real power comes when developers start building the components. This is where things sometimes go wrong, developers make small changes that break the design and overall feel of the product.

Recently, I have started building out a components library in code myself. Claude Code helps me bridge the gap between design and development. Using MCP you can translate design to code pretty easily.

It also helps developers stay consistent across the codebase. When they’re building new features, they can ask Claude: “What existing components should I use in this case?” Claude knows the design system and suggests the right components instead of letting developers create new variations.

The design system stays unified instead of becoming two separate things — one in Figma, another in code.

Agents, Agents, Agents

Remember Steve Ballmer screaming “Developers, developers, developers!” at that Microsoft conference? That’s how I feel about agents in Claude Code.

I can now run multiple agents, each focused on different parts of my design work.

Research agent, writing agent, communications agent. I create and run agents based on specific project needs. Agents are not a panacea, but they are very good at specific tasks, like research, analysis, design systems.

After months of using Claude Code, I’ve stopped thinking of it as an AI tool. It’s become part of my design process, like Figma or a sketchbook. The difference is that Claude Code thinks with me, not for me.

The designers who will thrive aren’t the ones who resist AI or the ones who expect AI to do their work. They’re the ones who understand that taste, craft, and human judgment remain irreplaceable. What changes is how fast we can move from insight to solution, from problem to prototype.

Claude Code doesn’t make you a better designer. It makes you a faster, more thorough version of yourself.

But what matters most is that it gives you time back. Time you used to spend on documentation, you now spend exploring creative solutions. Time you used to spend explaining context, you now spend understanding users. Time you used to spend managing files, you now spend perfecting the details that make products memorable.

The best products will still come from designers who care deeply about craft. Who “feels” that spacing feels off by two pixels. Who push back when the easy solution isn’t the right solution.

Claude Code just means we can do all of that better, faster, and with less friction.

Start simple. Pick one project. Set up your CLAUDE.md file. Connect your tools. Then watch how your design process transforms from scattered efforts into unified thinking.