An interface with roots.

I wanted my portfolio to show how I design today. AI has changed how I ship, and I wanted the site itself to demonstrate what I could imagine, direct, and build.

It also needed to feel like me: thoughtful, curious, and grounded in the people experiencing it.

The tension: an expressive experience invites play, but a recruiter needs readable, accessible work quickly. Every decision below balances the two.

I explored Awwwards, Httpster, and Footer Design for composition, interaction, and thoughtful endings.

I collected references into a moodboard and sketched the layouts myself. Giving Claude something to see made my instructions more specific.

I explored human forms in ASCII, pixelated landscapes, and personal objects arranged around an interactive About page. The thread was familiar things, translated into a digital world.

Kept: nature, digital texture, personal details, and quiet typography.

Refined: competing visual ideas, inconsistent components, and layouts that only worked at one screen size.

I started in Claude Code because I wanted to build the site myself, with AI as my implementation partner. When the early hero wasn’t capturing the atmosphere I wanted, I shifted visual exploration into Claude Design.

I use AI to prototype what I can’t in Figma, like interactions and animations. I choose carefully what I spend design time on: you don’t need to redesign the wheel when an existing component will do.

I used AI to bridge visual exploration and implementation in a solo project. Its value was helping me turn references and specifications into versions I could inspect and refine. This was an AI-assisted build, not an AI-powered product.

Reference → sketch → generate → critique → refine.

AI helped me explore visual directions and build working versions. References and sketches made my instructions more specific.

I defined the concept, selected references, drew wireframes, and directed the layout, copy, and interactions. AI generated visual explorations and implementation drafts. I reviewed the results, rejected directions that missed the intent, and specified revisions.

Early exploration

Current direction

A real prompt

This is an instruction I gave for a hover interaction, with the boundary I paired it with.

Before I delegate, I ask: “Would I hand this to an intern if every hour cost me?” I like to automate things I know how to do. When I don’t, I do some research first to understand how it would be done.

I treat AI like an expensive intern: I hand it what I already know how to do, and keep the calls on priorities, accessibility, and trust for myself.

I used AI, prompting, and a job posting I’m interested in to audit my own portfolio. I read its answers the way I would an intern’s work: findings to check, not conclusions to accept.

This role-specific review is separate from the accessibility testing below. It flagged:

• Unsupported speed and impact claims.
• Prototype work described as production outcomes.
• Inconsistent role labels, titles, terminology, and tools.
• Missing evidence of research, iteration, and outcomes.
• An unclear distinction between AI-assisted building and designing an AI-powered product.

The role-specific audit exposed gaps between what I claimed and what the portfolio demonstrated. I clarified prototype status, removed unsupported comparisons, and made my contribution more explicit.

• Delegate: building components from an existing design system, summarising research into first themes, and turning a finished Figma flow into a clickable prototype.
• Keep (these are on me to think about): prioritising which problem to solve first, comparing options against business goals, final calls on accessibility and user trust, and the final design, user flow, and UX pattern in how a component is used.

The project has an instruction file, AGENTS.md, that records the design system, routing rules, type scale, spacing, and accessibility decisions. Claude Code reads it at the start of a session, and I updated it when a decision changed so a later session would not build on a stale rule.

Real excerpts from the file:

This is structured instruction, not a measured system. I did not test how well it prevented drift.

During hero exploration, I asked for an interaction expressing the intersection of nature and digital worlds. One generated concept revealed circuitry beneath a branch.

AI interpreted the intersection as circuitry beneath nature. I caught the mismatch by comparing the output with my original intent: preserve a familiar feeling while changing its visual language. I revised the brief so the same flower and landscape would translate into pixels.

A second example: contrast

The About page’s navigation sits on a photograph of foliage. The first soft dark patch the AI placed behind it looked fine to me. I measured it instead, on the real pixels behind each link with the text hidden, at ten window sizes from 1024×500 to 2560×1366.

• 25% patch: up to 90% of a link’s pixels failed 4.5:1 contrast.
• 40% patch: up to 33% still failed.
• 55% patch: none failed, and the lowest ratio was 5.05.

The lesson: I did not ask the model whether it was readable. I checked it against a number, and the result became the documented rule.

I adapted prompts from AI UX Playground to review the site’s design system and implementation.

Looking back, my review criteria were intent, consistency, behaviour, and evidence. Did the result express the concept, follow the design system, work across input methods and screen sizes, and support its claims?

The checklist surfaced inconsistent styles, contrast over imagery, hidden keyboard stops, and mobile focus behaviour. I treated AI findings as issues to investigate and verify, not as verified results. To avoid grading AI with AI, I checked each finding against a measurement or by hand: contrast ratios on real pixels, and Tab order in the browser. The recorded accessibility audit documented the following fixes.

• Keyboard: Home went from 16 Tab stops, 7 of them invisible, to 9 visible ones, with one nav exposed at a time.
• Phone menu: it became a proper dialog. Focus moves in, Tab stays inside, and Escape or “back” returns focus to the menu button.
• Project covers: every cover is reachable by keyboard.

Speed vs. personality.
AI generated many options. Moodboards, sketches, and critique helped me decide which ones felt like me.

Atmosphere vs. contrast.
Keep the landscape. Adjust the ink. Text colour responds to the image beneath it, even across themes.

Speed vs. verification.
AI built working versions. Every claim of “readable” or “accessible” still had to be measured before I believed it.

Effect vs. performance.
The pixel hover effect loads separately from the hero, once the page is idle or the pointer first enters it, so the photograph and copy come first and the clean photograph is the fallback. It draws only while something is changing and while the hero is on screen. With reduced motion, the mouse does nothing and a button switches on a still patch.

Requested vs. verified. I asked for these behaviours and checked them in a browser: the patch clears after the pointer leaves, and the reduced-motion toggle works. I did not measure frame rate or CPU use, so I make no claim that it is fast.

Hover vs. readable.
Hanging objects on desktop. A readable list on mobile. The same stories, with no dependence on hover.

References and sketches helped me communicate my intent and refine AI-generated versions. This project proved how easy it is to spin up sophisticated interfaces using AI, but the true value lies in the context I give the model, rigorous human-in-the-loop editing, and systematic auditing against numbers, not impressions.

• What Shipped: Portfolio website, landscape hero, interactive About page, shared case studies, and accessibility fixes.
• The AI Workflow: Design references/ systems, high-speed generation, rigorous manual audits, and strict UX curation.
• Who calls the shots: AI is a tool. Even when it gets most of the way there, I have to assess whether the design meets my standard, because the accountability for bad design is mine, not the AI’s.
• Strategic Next Steps: Early design tokens, responsive rules, and shared components for a solid architecture.