Final Result
Architecture Interview Prep Tool Product Designer
A dedicated platform designed to help software developers prepare for design system architecture interviews, featuring practical challenges and an integrated whiteboard for architectural mapping.
One click and you're in
Step 1:
Design System & Prototype
I initially began by designing the core screens of the system to establish the look and feel. From these completed screens, I extracted the design rules and built the Design System defining the colors, typography, and component
library to ensure consistency throughout the website's development process.
Core screen design
Starting to Build design system
Step 2:
AI Review: Polishing the Design System
Next, I wanted to validate my design system and ensure it was truly production ready. I used Gemini as an AI consultant. Following this consultation, I made precise adjustments, such as expanding the color palette, and adding missing component states, to make the design system fully complete.
Step 3:
From Design to Development: AI Prompt
I utilized Claude Code’s 'plan mode' to generate the website. I provided instructions on how to extract the design specifications from Figma, alongside strict guidelines for the site’s expected appearance and interactive behavior.
Ready for Claude: Final Design System
I reviewed the plan and the layout sketch and decided to let him develop the website.
54:42
Time left
my design
Step 4:
The website
Removing gradient
Adding corner radius
Claude made some mistakes, missing behaviors, wrong colors, etc…
So I decided to ask him to make adjustments according to my design system.
Improvments
After I approved the layout I instructed him to generate the website.
Deployment
At last I asked Claude to deploy it to production for free… :)
Also, even though it wasn't part of my design he gave me a good idea for the timer
Claude's design
Challenges along the way
In the beginning, I didn't use Claude Code plan mode and asked gemini to create a Markdown file that described my website and it's behavior, it didn't work as planed
The design seemed outdated
The color palette wasn't an exact match to mine
Generated unrelated behaviors
After review I realized he went rogue with the design
Archo
Client | Personal project
Design field| UX.UI
Year| 2026
Tool| Claude Code
I had so much fun!
Bye!!!