It's time to connect your repo to Claude Design

I've been a Figma user for the last five years, and before that I was competent with Illustrator and Photoshop. Based on what I'm seeing while building The Path, we are rapidly approaching the time when Claude Design is the only tool that engineering and design need in order to share a common language. We may already be there.

Many of the collaboration skills between design and engineering that I've honed over the course of the last too-many years go from design to engineering and then a small reflection back from engineering to design. It usually looks like:

It's supposed to look and work like this. Please engineer it.

Sure, but if it were built slightly differently, we'd save six weeks of effort.

With experience and practice, this process gets faster and easier and saves a lot of time compared to constant iteration or delivering the wrong thing. It takes a few weeks to design, and it takes a few weeks to implement, and the savings of six weeks in that process make a big difference. That said, educating a designer or product manager about what's possible is often the least-invested skill because it is so expensive and so difficult and outside of design's and product's wheelhouse.

Claude design bridges this gap.

We connected our repo to Claude Design and asked it to come up with a design system exclusively based on the code. It enumerated every component that is actually in the code today and did a decent job of understanding how they look. This has led to our designer having more insight into what can be built and whether or not it makes sense. It has also allowed our designer to:

Ask if a particular implementation is easy.
Determine whether or not a component already exists.
Ensure that new functionality is going to match up with existing components.
Double-check that the design that they have given us matches standards in the code base already.

But, something interesting happened when we went the other direction.

I was building a new pagination indicator for our codebase. As part of due diligence, I always try to find out if existing components exist before I implement new ones. Turns out that we already had two existing pagination components, and we were about to add a third. Typically, I'd call the designer over, or I'd make an executive decision, or I would take my best guess as to what to do in the situation. I wouldn't get feedback until everything had been built, and then the designer would decide if it was worth the amount of effort to re-implement so that I could keep moving forward and not bother someone else whose time was valuable.

Instead, I started leveraging Claude Design. Here's the prompt I used.

There are at least three pagination dot components already:

PagingIndicator (foundation/progress/) — continuous-progress dots with color interpolation. Takes a float progress value. Used for smooth scroll-position tracking.

PreAuthSurveyPageIndicator (screens/onboarding/pre-auth-survey/) — animated dots that expand the active dot wider. Uses Animated.timing for transitions.

ExpressionOnboardingPaginationDots (screens/expression/) — the one you're looking at. Static (no animation), active dot is wider, uses design tokens.

Let's visualize them all as a new HTML preview file.

Claude Design produced a file that I shared with our designer. This is more than just a design review. It is rendered code in a way that the designer can easily understand. Being able to visualize both the problem and the solution and hand it off to a designer in seconds with a visualization of the problem empowers everyone to make improvements to the experience in the app and keep our codebase clean.

We picked the middle one.

Like any new tool, Claude Design is going to take practice, but I am extremely excited about the initial exploration that we've done here. The amount of time that we've spent has been very worth it. I spent hours working with Figma and trying to get their MCP server to produce something that I could use to talk clearly with my designer. Instead, now I am just leaning into Claude Design. It's not perfect, but neither is Figma. I see a lot more opportunities for iteration and refinement in process using Claude Design compared to the way that I have used Figma, whiteboards, Photoshop, etc. over the course of the last 20 years.