When Design Started Talking to Code
A product designer’s journey exploring AI-assisted workflows to reduce the distance between imagination and implementation.
The Gap Between
my Ideas and Reality
For the longest time, my workflow as a product designer always ended at the same place.
No matter how immersive the motion felt or how clearly I visualized the experience. Everything eventually stayed inside static frames and prototypes.
I could:
But bringing those experiences to life in a fully functional way was always dependent on development.
And somewhere between handoff discussions, feasibility constraints, and implementation compromises, parts of the original experience often changed.
The problem was never development itself.
But because translating motion, rhythm, responsiveness, and interaction feel from design into frontend behavior is genuinely difficult.
That curiosity stayed with me for a long time:
“What if I could reduce the distance between imagination and implementation?”
This portfolio website became my attempt to explore that question. Not just as a website project. But as an experiment in AI-assisted product creation.
When Curiosity Turned Into Experimentation
Initially, I approached AI tools the same way many designers do. As assistants.
While designing my portfolio in Figma, I used tools like Claude and ChatGPT mostly for:
- design reviews,
- UX writing,
- layout feedback,
- interaction suggestions,
- and validating whether I was moving in the right direction.
Sometimes I’d ask:
- whether a section hierarchy felt overwhelming,
- if the spacing lacked breathing room,
- how a transition could feel smoother,
- or if the visual rhythm felt inconsistent.
The feedback loops became much faster. Instead of waiting for reviews, I could challenge my own thinking continuously during the design process.
But at this stage, AI still felt like a supporting layer. The real shift happened later.
When I started wondering:
“Can I actually build this experience through AI-assisted workflows?”
That’s when the experiment truly began.
The First Outputs Were Far From Perfect
At the beginning, I believed prompting alone would be enough.
I assumed I could simply describe sections and AI would accurately transform them into polished frontend experiences.
That assumption disappeared very quickly.
The first few implementations were inconsistent:
- Broken Spacing
- Weak Hierarchy
- Failed Responsiveness
- Disconnected Interactions
Sometimes the layouts looked technically functional while completely missing the feel of the original design.
Other times, animations became overly dramatic and distracting.
That phase taught me something important very early:
AI understands instructions. But it struggles to understand design intent without structure.
And that realization completely changed my workflow.
The Workflow Changed When I Discovered “Copy as Code”
The biggest breakthrough came unexpectedly through Figma itself.
Instead of only describing layouts through prompts, I started using Figma’s “Copy as Code” feature for individual frames.
This became the turning point of the entire project.
Because now Claude Code wasn’t trying to imagine layouts from text descriptions alone.
It could already understand:
- spacing relationships,
- typography hierarchy,
- layout structure,
- alignment systems,
- color usage,
- and component positioning through actual HTML and CSS structures generated directly from the design.
The difference in output quality was immediate. Not perfect. But significantly closer to my original vision.
That moment changed how I viewed AI-assisted development completely. I stopped treating AI like a “website generator.”
Instead, I started treating it like:
A frontend collaborator that performs better when given structured design context.
The clearer the input became, the better the implementation behaved. And honestly, it started feeling very similar to improving developer handoff systems.
I Slowly Started Building My Own System
Once I understood what worked, my process became far more intentional.
Repeatedly refining AI-generated implementations forced me to think more deeply about:
- systems,
- behaviors,
- responsiveness,
- animation timing,
- frontend limitations,
- and implementation logic.
That completely changed how confidently I could iterate. Because suddenly, experimentation became safer.
If something broke, I could always return to a stable version instead of rebuilding everything from scratch.
But something else also started changing during this process. I stopped thinking purely in screens.
Not because I was trying to become a frontend engineer. But because implementation was no longer happening “after” design.
It became part of the design thinking process itself.
This project taught me something important:
AI can accelerate implementation. But meaningful product experiences still depend on strong systems, structured thinking, and human judgment underneath them.
The Most Satisfying Moment Wasn’t Designing It
After weeks of iterations, broken outputs, prompt refinements, visual corrections, and implementation experiments, there was one final step left.
That final deployment process once again reminded me how important collaboration still is.
An experience that previously existed only inside my imagination and static frames had become fully interactive and alive on the web.
What This Project Actually Taught Me
This project didn’t convince me that AI can replace developers.
If anything, it made me appreciate frontend engineering even more deeply.
What it really changed was my understanding of where the future of product design may be heading.
Because now Claude Code wasn’t trying to imagine layouts from text descriptions alone.
AI didn’t remove the need for:
- product thinking,
- UX judgment,
- visual systems,
- taste,
- or decision-making.
In fact, those things became even more important. Because without direction, AI-generated outputs quickly became chaotic.
The real value wasn’t:
“Now designers don’t need developers.”
The real value was:
“Designers can now participate much closer to implementation than ever before.”
And that changes the relationship between imagination and execution entirely. This portfolio started as a website project. But somewhere during the process, it became something much bigger
An exploration of how designers may build, communicate, iterate, and collaborate in the future.
Let's Build
Something Impactful
Have a product challenge or a bold idea? Let's create something that works beautifully and drives real results.
Currently open to full-time product design opportunities
Discuss an Opportunity