Work 作品 About 關於 Creative 創作 Contact 聯絡 Resume 履歷
← 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
Right Now 現在進行中
Working on 正在進行

Building this portfolio site with Claude 正在和 Claude 一起建造這個作品集

diannedesign.me diannedesign.me

Thinking about 思考中

How to design with AI — not just use it 如何與 AI 一起設計,而不只是使用它

Listening to 聆聽中

DtmF

Bad Bunny

Seattle 西雅圖

Design

The Visual Language

Less is more

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.

Accent — #E04F72

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.

The orbital hero

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.

"Where We Are" — honest by design

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.

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

Next

Admin CMS at /admin

Next

Password-protected portfolio versions

Next

Agent case study system

Next

An incomplete site with the right foundation is more valuable than a complete one built on the wrong one.

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