MAKEUP / BEAUTY · TUTORIAL LEARNING PROTOTYPE
Makeup — from video to practice.
Turn a tutorial into actions you can find, replay and practise—without losing the original demonstration.
Follow one eye techniquePrototype / Exploration
Map · later native iteration
Same eye-demo structure, separate native captures.
Starting point.
This began with a personal observation: pause, scrub backwards, find one action, remember the product, repeat. I wanted the output to answer “What should I do next?” A useful instruction needed an action, face area, tool, technique and a moment in the source—not just a shorter description of the video.
The idea grew from pasting a tutorial link into saved looks, personalisation and creator tools. It became too large for one solo project, so I paused it. Restarting meant narrowing the ambition to one loop: video → useful structure → Makeup Map → targeted Practice.
ONE TECHNIQUE, FOUR PLACES
Follow “Light base”.
Portfolio walkthrough using the native eye-demo data. The source action is explained; these archived screens are from separate iterations, not one AI extraction run.
A blended edge.
浅杏色铺满眼窝
边缘晕染干净
Sweep light apricot across the lid and blend the edge.
Cover the lid with light apricot; blend the edge.
Give the action a short name, a place and an instruction.
Find the same action under Eyeshadow and tap Continue.
Keep the footage visible, replay the range and mark it done.
01 / INFORMATION ARCHITECTURE
A place to return to.
Detail when it helps.
The first checklist still left me asking “where was that eye technique?” I made the Map a place to re-enter: find Eyes, open Eyeshadow, then choose Light base. Finer actions stay behind an explicit expansion; a Micro-step earns that extra depth only if it deserves its own replay loop.
These archived native iterations show the next refinement: a dense timeline became a Section route with progress, a next action and an explicit expansion control.
- Find a familiar area
- Resume a specific action
- Open finer detail deliberately
02 / WATCHING + PRACTISING
Keep the source
within reach.
The earlier instruction mode gave Light base a large card. In the later native player, the source stays dominant: hierarchy above, the current action below, and Map within reach. The learner can reconnect the instruction with the movement instead of mentally switching between two surfaces.
Watching a loop is not the same as finishing a step. Completion stayed an explicit learner action, so replaying a difficult technique would not silently advance their progress.
Explore wide.
Build narrow.
I used Stitch to explore visual directions and screen families quickly. I compared, rejected and combined ideas around the learning intent: visible hierarchy, a dominant source and compact controls. Codex translated selected ideas into native iOS and supported iterative debugging; I kept changing requirements when the result lost the learning logic.
A tutorial you could return to.
Historical device verification on a complex imported eye tutorial confirmed Map navigation, node switching, source-range playback and looping. The saved Look, hierarchy, media and progress remained after force-close and relaunch. This established a working prototype loop, not that people learned faster.
- Map → selected practice unit
- Source range → repeatable loop
- Saved Look + progress → retained on relaunch
Historical device verification · No formal learning-outcome study.
What I took forward.
The prototype made a tutorial something you could locate, practise and return to. My main lesson was that useful AI structure depends on the interaction it enables: a shorter label or a deeper tree is valuable only when it helps someone find and repeat an action.
Content rights and teaching accuracy constrained the visual approach, and the scope needed narrowing. When platforms later absorbed tutorial parsing, I stopped this line rather than expanding into a feature race.