diannedesign.me
What happens when a designer and an AI build something together — from scratch.
1+1
Designer + AI
0
Engineers
∞
Iterations / hr
The Problem
Most designers avoid their portfolio until they need it. The issue isn't effort — it's architecture. A static site can't represent someone who's always moving.
This site is designed to update itself: a NOW section that reflects today, case studies that draft from session notes, a system that Claude maintains between projects.
The Approach
Not "generate me a homepage." More like: here's my aesthetic, here's five years of work, here's what I hate about most portfolios — let's build something neither of us would make alone.
Dianne
- Creative direction + final judgment
- Five years of work and content
- Real-time design critique
Claude
- Architecture + implementation
- Writing in Dianne's voice
- Ongoing maintenance system
The Visual Language
Most portfolios compete for attention — bold gradients, full-bleed imagery, animated everything. The decision here was the opposite: extreme whitespace, a single accent colour, Inter at light weight. The work is the loudest thing on the page. The site's job is to get out of the way.
This pink isn't a brand exercise — it's a personal one. On a near-white canvas it catches the eye without competing with content. It marks every action, every hover state, every important line. Warm enough to feel human. Specific enough to be memorable. It's the one place the site has a personality of its own.
A static headline looks like every other portfolio. The orbital card animation exists for one reason: you should feel that this site is alive within the first two seconds of arriving. The cards carry both professional identity and personal detail — a static layout can hold one, an animated one holds both without hierarchy. The cats, when they eventually walk out, are a discovery rather than a feature.
Most portfolios hide incompleteness. This one names it. The progress tracker is there because this site is itself the work — an ongoing build, not a finished artefact. Showing the real status is consistent with the thesis: a portfolio should reflect how its owner actually works, not perform a version of finished they haven't reached yet.
The Workflow
Describe direction in natural language
Claude implements + explains tradeoffs
Review in browser
One sentence of feedback
Adjusted in under 2 minutes
Repeat →
The iteration speed changes what's possible. The constraint shifts from "is this feasible?" to "is this right?"
Real conversations → design decisions
Where We Are
Structure before content. The right foundation first.
Astro architecture + Vercel deployment
Homepage — orbital hero, workflow strip
NOW section — Spotify, Calendar, weather
SEO + Open Graph image
About page
Work page + case studies
Contact page
EN / ZH language toggle
Creative — photography + art
Cat easter eggs — Luna & Sol
NextAdmin CMS at /admin
NextPassword-protected portfolio versions
NextAgent case study system
NextAn incomplete site with the right foundation is more valuable than a complete one built on the wrong one.
The Agent System
CLAUDE-INSTRUCTIONS.md lives in the repo — a creative brief that tells any future session who Dianne is, what the design system is, which file to edit.
After each project: Claude asks what was worked on, logs notes, drafts the case study. The portfolio writes itself, a little at a time.
# Your role
You are Dianne's site agent. When writing about Dianne, use third person, warm and direct tone.
# To update the NOW section
Edit src/data/now.json — triggers a Vercel redeploy.
# Design system
Accent: #E04F72 · Font: Inter · Generous whitespace · Mobile-first.
Live. Architecturally sound. The integrations are real.
Still filling in the content — in the right order.
Designs in Figma. Builds with Claude. — This is what that looks like.