← All case studiesPersonal project — fully public

Designed, built, and shipped this entire site myself, with Claude as an agentic dev partner

Role

Senior UX Designer, UX Researcher & Web Developer

Focus

Brand design, agentic AI-directed development, deployment

Tools & methods

Claude (agentic coding), Adobe Illustrator, Adobe Photoshop, Next.js, TypeScript, GitHub, HostGator

Overview

This case study is the portfolio itself, designed and built the way I actually work today. I designed the brand system, directed an AI agent to build the production code, wrote and corrected every piece of content, and handled the deployment myself, end to end.

The challenge

Brand identity, real product content, working code, and deployment all had to come together into one coherent, live product

Directing an AI agent well enough to get production-quality output meant catching its mistakes, not just accepting its first draft

The whole thing had to hold up to the same evidence-language standard I was applying to every other case study on this site

My approach

01Brand and visual system

I designed the UXTOM identity, logo treatment, color tokens, and typography system in Illustrator and Photoshop before any code existed.

02Directing the agentic build

I worked with Claude as a coding partner to scaffold and build the production site in Next.js and TypeScript, providing the real content, structure, and design direction at every step rather than accepting default output.

03Building a reusable working system

I created custom Claude skills to encode my brand and editorial standards directly into the workflow, and connected Figma through MCP so design work and the live codebase draw from the same source instead of drifting apart.

04Reviewing and correcting the work

I reviewed every round of AI-generated work against my own standards: catching AI-sounding phrasing, correcting brand-color mappings that didn't match my actual tokens, fixing claims about my own background that weren't accurate, and rejecting a self-tagging system on my case studies once I recognized it was forcing my work into categories that didn't reflect how the projects actually happened.

05Version control and deployment

I set up the GitHub repository myself, reviewed what got committed, and I'm handling deployment through HostGator to get the site live at its real domain.

Key deliverables

Brand identity and visual system (Illustrator, Photoshop)

Production Next.js/TypeScript codebase

All real site content, written and corrected in my own voice

GitHub repository with full version history

Deployment via HostGator

Selected artifacts

Actual screens from this live site. Nothing here is anonymized or redacted.

UXTOM homepage hero and Atomic Thinking section

The homepage — brand system, positioning, and the Atomic Thinking framework, live.

One of the real case study pages, built with the same structure as this one.

The resume page, pulling from the same content system as the rest of the site.

Want a closer look at the real work? Get in touch.

Outcome

This site is the outcome: a product built from a blank brand concept through a real codebase to deployment, with every round of AI-generated work reviewed and corrected against my own judgment and voice along the way.

What this demonstrates

End-to-end brand and product designDirecting agentic AI tools to ship production codeCritical review and correction of AI-generated outputFront-end development fluency (Next.js, TypeScript)Version control and deploymentSelf-directed execution from concept to launch

What I'd validate next

Now that real analytics are live, I'd want to start collecting direct feedback from actual visitors, not just traffic data, to validate what's landing and what isn't, and keep iterating on the site the same way going forward — it's a working product, not a finished one.

Have a similar problem?

If a product's structure has stopped matching how people actually use it, I'd genuinely love to hear about it.

Say hello