Figma for design. Claude Design for rapid prototyping. Claude Code for implementation. And Fika — the desktop IDE I built with friends — keeping it all manageable. Here's how this site actually got built.
Building a personal portfolio is a rite of passage. Building one without touching a template, with AI doing the heavy lifting, feels like something different. Here's every tool that made it into the actual workflow — and why.
Figma is still the best design tool on the market, and I used it as the foundation for this site's visual language. The cobalt blue mat background, the hard-shadow card style, the sticker aesthetic — all established in Figma before a single line of code was written.
The rule I follow: if you can't describe the design system in tokens, you don't have a design system. Getting spacing, colour, and type scales defined in Figma meant translating them to Tailwind v4 CSS variables was mechanical. That's the point — creative decisions front-loaded, implementation on autopilot.
Claude Design (claude.ai/design) is Anthropic's AI design tool, and it's genuinely different from anything I've used before. You describe what you want in conversation, iterate on it in real-time, and end up with a working HTML/CSS/JS prototype you can hand straight to a coding agent as a spec.
This blog was designed entirely in a single Claude Design session. Two layout variants, a full post detail view, category filters, the lot — about 20 minutes of back-and-forth. The output was a self-contained HTML file that captured exactly where I'd landed visually. No design-to-handoff gap, because the prototype is the handoff.
Claude Code is Anthropic's CLI coding agent and it built the majority of this site. I gave it the design files, described the architecture I wanted — Next.js 16, Tailwind v4, Sanity CMS, route groups — and it scaffolded the whole thing. Components, schema, queries, studio integration, type definitions.
This isn't vibe coding. It's closer to pair programming with a senior engineer who has infinite context, never gets tired, and always checks their types. I reviewed every diff, made architectural calls, and directed the work. Claude Code did the implementation. That split felt right — and the output speaks for itself.
Fika is a desktop IDE for Claude Code that I built with friends. The core problem it solves: Claude Code sessions are powerful but difficult to manage at scale. Fika gives you multi-project tabs — each with isolated git state, terminal, and file tree — so you can run parallel Claude sessions across different branches without losing context.
The integrated git interface handles staging, committing with AI-generated messages, diffs, and branch management. There's a dashboard overview of all active Claude sessions with live status indicators. GitHub and Jira integrations mean the project management side doesn't need a separate window open.
Building Fika on nights and weekends alongside people I trust taught me more about product thinking than any single client project. There's a gap between 'working app' and 'app people actually use', and Fika forced me to live in that gap. Highly recommend building something real with people who'll tell you when it's bad.
Figma for design clarity. Claude Design for rapid prototyping. Claude Code for implementation. Fika for keeping the Claude Code workflow sane. None of these tools replace judgement — but together they compress the gap between idea and shipped product in a way that wasn't possible two years ago.
Thoughts? Hit me up — I'm always down to talk tech.