Building with Claude Code — Week 1: A Complete Record

Introduction

In January 2026, I decided to run an experiment: build my personal website entirely through collaboration with Claude Code.

Not just using it as a coding assistant, but as a development partner — from architectural decisions to content writing to polishing details.

This article is the complete record of that first week.

Final Results Overview

Item	Count
Articles	30+ (bilingual EN/ZH)
Project Pages	5+ projects
Interactive Components	7 p5.js sketches, 3DGS viewer
Git Commits	100+
Tech Stack	Astro + Tailwind + TypeScript

Day 1-2: Starting from Zero

Building the Foundation

Day one focused on getting the skeleton up:

Tech Choice: Astro (static site generator) + Tailwind CSS
Bilingual Architecture: / for English, /zh/ for Chinese
Content Structure: Blog, Works, About sections

Why Astro + Tailwind?

Astro: Built for content sites. Ships zero JavaScript by default (only loads when needed), so it’s fast. Supports MDX for embedding interactive components in Markdown.

Tailwind: No separate CSS files—styles live directly in HTML. Works well with AI collaboration since structure and styling are in the same place.

Establishing the Workflow

The most important discovery: defining a clear collaboration workflow multiplies efficiency.

I created a CLAUDE.md file with key commands:

I Say	Claude Does
check in	git pull, start dev server, create daily report, show backlog
check out	commit, push, update report
backlog	show todo list

This “ritual” ensures the state is clear at the start and end of each day.

First Batch of Articles

Produced 20+ articles in two days, covering:

Claude Code series (intro, installation)
3D Gaussian Splatting series
NYU program guides (ITP, IDM)
Web development basics (GitHub intro)

Lesson learned: Claude writes fast, but numbers and details often need human verification. I developed the habit of adding a “Sources” section at the end of each article.

Day 3-4: Feature Expansion

My master’s thesis needed a showcase space, so I built a thesis section:

Thesis main page
Weekly progress pages
Class notes section

DragGallery Component

Built a draggable image gallery for showcasing work:

Auto-scroll + mouse drag
Mobile touch support
Slow-down on hover
Momentum on release

3DGS Viewer Integration

Embedded 3D Gaussian Splatting results into the website (Nankunshen project):

Thumbnail preview (Ken Burns animation effect)
Click to load interactive viewer
Smooth loading transition

Creative Coding Portfolio

Integrated 7 p5.js sketches into the Creative Coding page, with 3 as interactive web versions:

LightsUp (lighting game)
LightClock (light clock)
HouseBeats (rhythm game)

Optimization: Original GIF files totaled ~1GB, converted to MP4 brought it down to 19MB.

Mobile Responsive Fixes

Found many components breaking on mobile, fixed them one by one:

p5.js games: switched to aspect-ratio instead of fixed height
Image grids: using auto-fit minmax for mobile stacking
GaussianSplatViewer: made responsive

Day 5-6: Polishing Details

Draft Functionality

Some articles were created but not finished, needed hiding:

Add draft: true in frontmatter to hide
Hid 8 incomplete articles at once

About Page Rewrite

The old About page was formulaic — education, experience, skills list.

Spent two days rethinking:

“Labels (designer/engineer/artist) are just interfaces for others to understand me. But that’s not who I am.”

The final version starts from “what I care about” rather than job titles.

GEO Optimization

Optimized for AI search engines (Perplexity, ChatGPT Search):

Added JSON-LD structured data
Unified brand name
Added Chinese name aliases

Day 7: Final Cleanup

Last day for cleanup:

Deleted unnecessary articles
Updated outdated content
Checked all links

Collaboration Patterns Summary

Effective Prompt Patterns

Batch Updates

Change all [X] to [Y]

Claude spawns multiple agents for parallel processing — 40 files done in minutes.

Verification Requests

[Data] — please double check

Claude looks up sources and updates citations.

Error Reporting

[X] is wrong, it should be [Y]

Immediate fix and checks related issues.

What Worked

Clear workflow — CLAUDE.md defined how we collaborate
Daily reports — Track progress, easy to resume next day
Batch processing — Parallel agents are highly efficient
Immediate fixes — Report issues right away, fix right away

What to Watch Out For

Verify numbers — AI-written numbers (tuition, dates) are often wrong
Define structure first — Didn’t define article templates upfront, had to backfill
Manage tags — Tags multiply quickly and become chaotic

Deeper Reflections

This first week changed more than just development speed.

Knowledge utilization increased dramatically — Things I learned but never had the chance to apply can now be discussed with Claude and implemented immediately. Knowledge stopped being just “knowing” and became “making.”

Redefining productivity — I used to think there was a ceiling on “how much I can do in a day.” That ceiling got broken. Now I’m re-examining: which habits should stay, which should change?

Falling in love with output — When the friction of creating decreases, making things becomes as natural as breathing. Ideas no longer stay in my head—they become articles, code, and finished work.

Cross-device workflow — Claude Code + GitHub + Claude mobile app form a loop. Got an idea while walking? Chat with Claude on your phone, let it draft an outline. Back at your computer, Claude Code picks up the draft and turns it into finished content, committed to GitHub. Ideas don’t disappear—they get caught by the system.

Conclusion

After one week, my understanding of Claude Code shifted from “AI coding assistant” to “development partner.”

The key isn’t how smart it is, but:

Know what you want — The clearer you communicate, the better the results
Establish collaboration rituals — check-in, check-out, daily reports
Humans decide and verify — AI executes, humans quality-check

This isn’t replacing engineers — it’s changing how we work.

Building with Claude Code — Week 2 - Identity, polish, and portfolio
What is Claude Code? - Full feature breakdown
Claude Code for Beginners - Installation guide

Sources

Claude Code Documentation - Official docs
Anthropic - The company behind Claude

Get in Touch

Want to learn how to use Claude Code, or start building your own website with it? Fill out this form and I’ll get in touch!

dazai.studio

Dazai Chen

dazai.studio@gmail.com