I had so much fun!
Bye!!!
Archo.
Archo / Project overview
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.
Personal project
2026
UX.UI, Claude Code
Design field
Client
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:
After I approved the layout I instructed him to generate the website.
Claude's design
54:42
Time left
my design
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.
One click and you're in
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.
Challenges along the way
Final Result
Ready for Claude: Final Design System
I reviewed the plan and the layout sketch and decided to let him develop the website.
Also, even though it wasn't part of my design he gave me a good idea for the timer
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
Deployment
At last I asked Claude to deploy it to production for free… :)
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
Year
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