H. Jiao / AI projectPiano Practice01 | 02Piano Practice
A web app for learning songs note by note, logging practice sessions, and tracking streaks.
Fig. 01 — Home screen[Live]Fig. 02 [Try it] · click, or press A–K
- Idea
- Practice piano, track everything
- Direction
- Songs, sessions, streaks, stats
- Scope
- 18 songs · 8 skill categories
H. Jiao / AI projectBuilding this site02 | 02phases, from direction to site From blank page to a designed experience
My Claude for Designers talk: how I use AI to turn a design direction into a real website.
Fig. 01 — Talk site[Live]- 01Find a direction
- 02Define the structure
- 03Build the visual language
- 04Bring it to life
- 05Refine through reality
Fig. 02 [Process] · five phases, in order
- Idea
- AI is only as good as its direction
- Direction
- Mood and structure first, then Claude
- Format
- Talk · Claude for Designers · 2026
