Personal Project · Designing with Claude
Vibe Coding My Brand
How I shipped a living design system without ever opening Figma
Role
Designer + Builder
Timeline
2025
Team
Solo
Skills
Vibe Coding
Claude Code
Astro
CSS Design Systems
Overview
I didn't design this portfolio. I prompted it.
Most designers build their brand in Figma first — tokens, components, specs — then hand it off to someone who builds it. I flipped that. I sat down with Claude Code and started describing what I wanted out loud, iterating in the browser, watching the system take shape in real CSS and real components. No mockups. No handoff. Just conversation and code.
The goal
Build a complete personal brand identity — colors, typography, spacing, components, interactions — entirely through vibe coding sessions with an AI assistant.
The constraint
No Figma. The browser was the canvas. Every design decision had to be expressed as a prompt, then refined by seeing it live in the actual product.
Vibe coding isn't about writing less code. It's about thinking out loud in a medium that writes back.
The Idea
What if the design system and the product were the same thing?
I wanted my portfolio to feel like it was made by someone who understands both design and engineering deeply — not as separate disciplines, but as a single conversation. That meant the brand guidelines couldn't live in a Figma file that slowly drifts from reality. They had to live in the code itself.
Start from intent
Describe the feeling, the function, the constraint — not the pixel values.
Iterate in the browser
Every change is live. You see it, react to it, and refine it in the same session.
Let the system emerge
Tokens, components, and patterns crystallize naturally as you repeat decisions.
The Process
Prompting as a design tool.
Each session started with a vague intention and ended with something concrete. The process wasn't linear — it was more like a conversation that kept circling closer to something that felt right.
Session 1 — Foundation
Established the core color palette and typographic scale by describing the emotional register I wanted: "quiet confidence, technical depth, warm but not casual."
Session 2 — Components
Built out buttons, badges, cards, and navigation — each prompted by showing Claude the current state and asking what felt off or inconsistent.
Session 3 — Interactions
Layered in animations, hover states, and the custom cursor — each interaction described in terms of feel ("snappy but not harsh") rather than exact timing values.
Session 4 — Documentation
Turned the system into a living reference page at /projects/personal-brand-guidelines — a design system doc that is itself built with the system it documents.
The most useful prompt isn't "make this look better." It's "this feels [X] — what's causing that and how do we change it?"
The Result
A brand system that lives in production.
The output isn't a Figma file or a PDF spec sheet. It's a live page — the Personal Brand Guidelines — that runs the exact same CSS as the rest of the portfolio. Browse the catalog, copy the code snippets, or just read it as a document. Either way, what you're seeing is the system in its natural habitat.
Design tokens
Color, typography, spacing, and radius values defined as CSS custom properties — consistent across every page.
Live components
Buttons, badges, cards, and navigation patterns documented with real, copyable code.
Zero drift
Because the docs are built with the system, they can never fall out of sync with what ships.
Learnings
What vibe coding taught me about design.
Language is design
When you can't point at pixels, you're forced to articulate exactly what you mean. That clarity feeds back into how you think about every design decision.
Constraints accelerate
No Figma meant no endless exploration. Every session had a concrete output: something that either worked or needed one more iteration.
The medium shapes the message
Designing in the browser from day one meant every decision was tested against real text, real viewport sizes, and real interactions — not ideal mockup conditions.
AI as a thinking partner
The best moments weren't when Claude generated something perfect. They were when it asked a clarifying question that made me realize I hadn't thought something through.