DIRECTING TO AI THROUGH DESIGN
An AI-assisted workflow for building interactive design systems
00 — Overview
AI Workflow
01 — Problem
Define Problem
I built this because I kept running into the same problem. The tools exist, but using them well is harder than it looks. Most people interact with AI through a chat box. I wanted to find out what happens when you push it further: use it as a production partner, not a search engine.
But the real question I was trying to answer was: how do you give an AI taste? How do you build a shared aesthetic, label it, describe it precisely enough, so that what comes out actually matches what you had in mind? This site is the experiment. Every piece of it was built without writing a line of code by hand. What I was figuring out the whole time was the language. The exact way to describe a visual feeling so the AI can replicate it perfectly. That is what this project documents.
02 — My Workflow
How I Work
DIRECTION Assembled two moodboards to lock in the visual direction early. One focused on material and form, the other on typography and graphic system. Both fed into the final visual language.
INTERACTION Multiple approaches to the 3D scene and card interactions were tested in parallel. Speed mattered more than quality at this stage.
REVERTED Two versions of the camera movement were tested. Both felt wrong once seen in the browser. The original position was locked. A fix for the hero headline created a worse problem than the original bug. Both fixes were reverted.
MOTION Scroll speeds, easing curves, and transition timings were dialed in last. Each value was adjusted until the movement felt intentional at full scroll speed.
03 — AI Limitations
When It Breaks
04 — What I Found
I Found
06 — Design
At first, I considered exploring the project through industrial design and physical product development. As the idea evolved, however, I realized that I was more interested in how a concept could be communicated through 3D, motion, and interactive web experiences.
I therefore developed the project as an experimental, AI-assisted website. This direction gave me an opportunity to explore how 3D motion, scroll interaction, and cinematic language could be translated into a digital experience.
Before building the website, I studied a range of 3D and motion-focused websites and created several moodboards to analyze their camera movement, materials, typography, composition, and pacing. This research helped me establish the project's visual direction and explore how AI could support the process from concept development and prototyping to implementation.
07 — Tools
08 — Reflection
Learned
Designing with AI changed what I thought the designer's job was.
I assumed that if I wrote a detailed enough prompt, AI would be able to generate the website I had in mind.
During production,
Before the results became accurate, I had to define the design foundation myself:
- typography weight, scale, and hierarchy
- page spacing, card proportions, and information structure
- 3D materials, lighting, and environment reflections
- the camera movement from far to near and back into position
- scroll, hover, flip, and loading interactions
- which elements were allowed to change and which had to remain fixed
- the references, screenshots, colors, and assets used as visual evidence
Only after these decisions were clear could Claude translate them into working HTML, CSS, JavaScript, Three.js, and GSAP.
The main skill I developed was not simply prompting AI to write code. I had to specify:
- where the camera should begin
- how close it should move
- how long the movement should take
- how subtle the rotation should be
- which easing curve to use
- where the camera should finally settle
I also learned that generating more versions does not always improve the result. Knowing which parts are already working, what should remain untouched, and when to stop is also part of design judgment.
For future AI-assisted projects, I would define the full experience before asking AI to build it:
- collect references and create a moodboard
- establish the typography, color, material, and layout system
- map the page structure and interaction flow
- prepare the 3D models, images, and other assets