Built a production site with Claude Code in 4 days. No developer, no Figma.
Design + development · 2026 · Live site
A visual content studio needed a site that could compete with high-end production company portfolios — but feel completely different. I designed the visual direction, made the key creative calls, and built the whole thing in Astro with Claude Code. My first commercial site as a designer-developer.
The brief
Degu Studio produces photography and video content for brands like Crocs, Maxima, and Manilla. Most production studios aim for a polished, upscale look. Degu wanted the opposite — to communicate speed, energy, and being digitally native. The site needed to stand out among competitors, not blend in.
Design direction
The initial reference was a polished, gradient-heavy interactive aesthetic common in the space. After researching the competitive landscape, I pushed back — that look wouldn't differentiate Degu, and the trend was already aging. Instead, I developed a direction built around motion and texture:
Everything moves — the site needed to feel like a virtual universe, not a static page. Cinematic intro, velocity-based scroll effects in the gallery, animated transitions throughout.
Animated logo — inspired by the Calcifer character from Studio Ghibli — playful, alive, a personality statement.
Typography chosen for contrast — slightly rough, classic forms set against polished imagery. The tension between raw and refined mirrors how the studio works.
Custom WebGL pattern — replacing the expected gradient backgrounds — a velocity-based effect that responds to user interaction rather than sitting passively on screen.
Image 1: Hero detail
Image 2: Interaction detail
What I built
- Designed and built the full site in Astro with Claude Code
- Wrote a custom Astro code style guide to constrain Claude Code's output — without it, the code became inconsistent and tangled. The guide enforced component structure, naming conventions, and architecture patterns across every prompt
- GSAP-powered animations throughout: cinematic intro, scroll-driven gallery effects, animated logo, marquee CTA ticker
- Infinite horizontal scroll galleries per project — five separate gallery routes with their own content architecture
- 74 PageSpeed score (mobile) without dedicated optimisation — despite heavy visual and animation content. 100% accessibility score.
- Adaptive design — purpose-built layouts for each screen size, not just fluid resizing
What I learned building with AI
This was my first commercial site built as a designer writing code with Claude Code. A few things stood out:
- Learned to structure architecture the way a developer would: components, layouts, transitions, content, animations — each with a clear role, all talking to each other
- Learned to write specs for overall architecture and individual components — clear instructions that kept Claude Code's output clean and consistent
- Design decisions happened in code, not Figma — I was designing in the real medium, seeing real constraints like performance, load times, and scroll behaviour as I designed, not discovering them after handoff