.jpeg)
Overview
The Problem
We just finished a full brand refresh at Phase2_. New brand, new identity, new energy. And like most rebrands, the guidelines lived in a beautiful Figma file that most people would never open. I wanted to turn it into something alive — a real site people could bookmark, reference, and actually use. Something that felt as intentional as the brand itself.
So instead of writing a spec and waiting for dev availability, I opened Terminal and typed claude.
The Setup
I installed Claude Code, connected it to our Figma file through MCP (Model Context Protocol — basically a plugin that lets Claude read your Figma designs directly), and told it who I was:
"I'm a UX designer with 15 years experience. Strong in Figma, not a daily coder. I want to build a brand guidelines site for Phase2_."
That framing matters. Claude met me where I was — I got the context I needed without having to wade through stuff I already knew.
The Stack: One Conversation
I came in with opinions. We use shadcn/ui on a lot of our internal apps, so I knew it would be a good fit here
— both for the brand guidelines site itself and for the UI component library we'd build alongside it. Claude helped me think through the rest of the stack, explained the tradeoffs, and we landed on Next.js and Tailwind together.
The whole project scaffolded in one command. I didn't know what half the flags meant. Didn't need to.
Figma → Code: The Magic Moment
This is where it gets interesting. I shared a Figma URL:
"Here's our color page — can you pull the palette and build an interactive color page with click-to-copy?"
Claude read my Figma frame. Read the colors, the typography, the layout. Then built the page — with hover states, click-to-copy hex values, and a live gradient builder I didn't even ask for.
I did this for every section of our brand guide. Typography. Logo. Iconography. Photography. Voice & messaging. Each one: share the Figma link, describe the intent, review in the browser, tweak. The feedback loop was minutes, not days.
The Rolodex Builder
This one I'm particularly proud of. During the rebrand, I developed a brand motif around words that complete the Phase2_ name — "Phase2_HasGrit", "Phase2_ShipsWork", "Phase2_GivesAShit". It's not just a visual trick. It's a way to express the brand's character through language, and I thought hard about it as a core part of the identity.
The question was whether we could make it interactive — something teams could actually use to generate assets.
I described it once: "Build a rolodex animation that cycles through words in the Phase2_ format. Let users customize the word list and export it."
Claude built an interactive rolodex with:
- Custom word input (auto-formats to CamelCase)
- Adjustable speed
- Multiple background color options
- Play/pause controls
- Video export at 30fps with smooth easing
That last one went through an iteration. The first version exported GIFs — choppy, 256 colors, huge files. I said "can we make it smoother?" Claude suggested switching to WebM using the browser's built-in MediaRecorder API. No library needed. 30fps. Cubic easing on the transitions. Full color.
A designer and an AI debating video codec tradeoffs. This is the job now.
The Component Library
The site has two tabs: Brand Guidelines and UI/UX Library. The second tab is basically our own themed version of shadcn.com — 20+ components, all styled with Phase2_ tokens, with installation guides for developers.
I told Claude: "Make the component section look like the shadcn create page. This is for devs — give them install commands, the theme CSS, and live previews of every component."
Buttons in six variants. Cards. Forms with every input type. Alerts, dialogs, tooltips. All themed with our brand colors, both light and dark mode. A developer can copy our theme CSS and every component is instantly on-brand — without anyone having to explain the brand to them.
Going Responsive
At some point I realized I'd been building the whole thing at desktop width. One prompt:
"Make it responsive. Collapsible sidebar, hamburger menu, content goes single column on mobile."
Claude rewrote the shell — sliding sidebar with backdrop on mobile, reorganized header with icons instead of text labels, reduced padding, single-column grids. The toggle between Brand Guidelines and UI/UX Library uses a book icon and a </>code icon on mobile. Clean.
Deployed
I wanted it live. Claude installed the GitHub CLI, authenticated me, created the repo, wrote a GitHub Actions deploy workflow, pushed the code, and configured GitHub Pages.
Now every push to main auto-deploys. I don't think about infrastructure. I push changes and they're live in two minutes.
What I Learned
Design skills transfer. Hierarchy, spacing, typography, color theory — all of that translated directly. I wasn't learning to code. I was designing with a new tool. When I said "go bigger on the type, more white space, the underscore is a design motif not decoration" — Claude understood and executed.
Conversation is the interface. The best results came from describing intent, not implementation. "Build a page that makes our color system feel interactive and explorable" beats "create a grid of divs with hex codes" every time.
Iteration is instant. The thing that changes everything isn't that AI can write code. It's that the feedback loop collapses. See something wrong? Say it. Fixed in seconds. Try a different approach? Ask. That speed changes what you're willing to attempt.
The gap is closing. I'm not going to pretend I understand every line of TypeScript in this project. But I can read it, I can direct it, and I can ship it. The gap between "designer who uses dev tools" and "developer" just got a lot narrower.
The Numbers
- 24 pages across brand guidelines and component library
- 20+ themed components in the UI library
- 3 interactive builders (logo generator, rolodex, gradient)
- Fully responsive with collapsible sidebar
- Auto-deploys on every push to GitHub
- 0 lines of code written by hand
Try It
The site is live: Phase2_ Brand Guidelines
The whole thing was built through conversation. If you're a designer who's been curious about Claude Code— stop being curious and start building. The barrier isn't technical skill. It's the willingness to open Terminal and type claude.
Built by the Phase2_ design team using Claude Code. The Figma MCP integration is available now —connect your designs and start building.
.png)
