← Work

AI Collaboration Web Development System Design AI Built ✦

diannedesign.me

What happens when a designer and an AI build something together — from scratch.

1+1

Designer + AI

0

Engineers

∞

Iterations / hr

01

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.

02

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

03

The Workflow

1

Describe direction in natural language

2

Claude implements + explains tradeoffs

3

Review in browser

4

One sentence of feedback

5

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

D

I want the hero to feel alive — not a static headline. Cards orbiting something. But not in perfect circles, more like planets.

C

Elliptical orbits with different inclinations and speeds — the further out, the slower. Mouse creates gravitational pull nearby, escape velocity if too close?

D

Yes. And the tags should come in slowly — professional ones first, personality ones drift in later.

D

My cat sits between my desk and the window and stares at me. Sometimes knocks things over. I want that on my homepage.

C

Two SVG line-art cats that walk out from the navbar. Time-based states — wild at 8pm and midnight, sleeping otherwise. They chase the orbital cards when active.

D

Yes. Sleeping unless the mouse wakes them up. I want it to feel like a discovery, not a feature.

D

My biggest fear is building this and then never updating it. I want you to maintain it for me.

C

CLAUDE-INSTRUCTIONS.md in the repo — a brief that tells any future session who you are, what to update where, how to write about you. After each project I ask what to log, and draft the case study from the notes.

D

That solves the problem I've had for five years.

04

Where We Are

Structure before content. The right foundation first.

Astro architecture + Vercel deployment

90%

Homepage — orbital hero, workflow strip

85%

NOW section — Spotify, Calendar, weather

90%

SEO + Open Graph image

85%

About page

50%

Work page + case studies

40%

Contact page

80%

EN / ZH language toggle

40%

Creative — photography + art

5%

Cat easter eggs — Luna & Sol

05

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.

CLAUDE-INSTRUCTIONS.md

# 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 public/data/now.json — no rebuild needed.

# 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.