My AI Lab
A space of AI-assisted experiments, from building design flows to testing game ideas, built to explore what's possible.

React
MediaPipe
Web Audio API
Interactive Web Game
Real Hand Tracking Balloon Shooter
I built a hand-tracking balloon shooter that runs entirely in the browser. Point your finger to aim, pinch to shoot. Or you can play with mouse.
I directed
Color: Lavender and Sky Blue
Grid, spacing scale, component patterns
Two font family with usage
WCAG 2.1 AA accessibility
Claude Give me MORE THAN WHAT I EXPECTED
200+ design tokens
100+ annotated components
40 sections across 3 parts
Live interactive cheat sheet
3 hours end-to-end
Full Design System
Claude AI
Github
Vercel
Token Architecture
Component Library
Accessibility
Raw Output
Full Design System
40
sections
200+
tokens
100+
components
~3hr
total time
I used Claude AI to build my own portfolio design system. I give it direction on colour, typography, and layout, and letting it do the generation. I wasn't just prompting randomly. I give the direction of my design style.
The result is a fully annotated, three-part design system covering tokens, components, dashboard patterns, dark mode, accessibility guidelines, and a live quick-reference sheet. But, some places are still need to adjust especially font family.
This is the raw output. I haven't cleaned up yet. Then, I use Vercel to put into live. Claude helps me create structured direction turned into a living design system within hours. I bet it saves a lot of time rather than to create from scratch.
Say hello!
I love discussing product ideas from different perspectives.