Learn by doing
Tutorials
Build your skills one project at a time. Follow a guided workflow, with clear steps, a time estimate, and a result to work toward.
Beginner
First screen from scratch
Create a project, open Compose, add a screen, and place your first assets from the Library.
Start tutorialImport screenshot → clean UI
Run Image → Screen on a HUD screenshot, review regions, then tidy structure in Compose.
Start tutorialBasic 9-slice setup
Author stable slice lines in Slice Studio, then verify stretch in Compose.
Start tutorialIntermediate
Build a reusable UI kit
Promote repeated chrome to components and keep colors on Style Brain swatches.
Start tutorialConvert messy extraction into clean layout
After Image → Screen, use stacks, align, and grouping to mimic a deliberate kit.
Start tutorialUse stacks properly
Work within auto-layout v1 limits: persist structure, apply layout passes, avoid expecting full live hug/fill from the solver yet.
Start tutorialAdvanced
Full UI pipeline (image → systemized UI)
Chain Generate/Library → Slice Studio → Compose extract → Style Brain → export.
Start tutorialOptimize for game engine export
Pick PNG scale, transparency, SVG usage, and engine preset deliberately.
Start tutorialCreate scalable UI systems
Combine components, stacks MVP, constraints, and Frame Builder for modular chrome.
Start tutorial