Bridging Design and Code with AI
This project started with a simple question,
"As a designer, how far can I go in building a functional product on my own?"
To find out, I built this static website as an experiment, blending traditional design thinking with the power of modern AI tools.
Crafting the Experience by using Figma
I started by wearing my UX/UI Designer hat. Using Figma,
I mapped out the user journey and designed a clean, high-fidelity interface.
I built a mini Design System (colors, type, and components) to ensure a smooth transition from canvas to code.
My focus was on a "Content-First" layout—making sure the static site remains lightweight, fast, and intuitive.
Using Google Stitch to translate the design into prompts for a static website
Strategizing with AI - Qwen
Once the design was ready, I acted as a product manager and consulted Qwen.
I used Qwen as my AI Mentor to brainstorm the site's logic and map out the technical structure.
Whenever I hit a roadblock or needed to explain a complex feature, Qwen provided clear guidance, making the technical side much more approachable for a designer.
Iterating multiple times until the final output met my expectations.
Bringing it to Life
This project taught me that AI isn't here to replace designers—it’s here to give us wings. By leveraging these tools, I was able to step outside the Figma frame and deliver a fully functional website. It has completely changed how I think about the relationship between design and technology.
This was the most exciting part—turning my Figma pixels into real code.
I used Windsurf, an agentic IDE that felt like having a senior developer by my side.
Smart Development: Windsurf helped me translate my design vision into clean, functional code remarkably fast. Its "Flow" feature allowed the AI to understand the entire project context, making the development process feel seamless and collaborative.
Version Control & Publishing: To keep everything organized, I used Github. I managed my code versions and pushed the project to a repository, which served as the bridge to publishing my site live. This workflow ensured that my transition from local development to a live URL was smooth and professional.