Resources
Tutorials
Practical sequences grounded in current routes: /compose, /studio, /studio/decompose, /studio/frame-builder. Each card links to numbered steps and an expected result.
Beginner
First screen from scratch
Create a project, open Compose, add a screen, and place your first assets from the Library.
Open tutorialImport screenshot → clean UI
Run Image → Screen on a HUD screenshot, review regions, then tidy structure in Compose.
Open tutorialBasic 9-slice setup
Author stable slice lines in Slice Studio, then verify stretch in Compose.
Open tutorialIntermediate
Build a reusable UI kit
Promote repeated chrome to components and keep colors on Style Brain swatches.
Open tutorialConvert messy extraction into clean layout
After Image → Screen, use stacks, align, and grouping to mimic a deliberate kit.
Open tutorialUse stacks properly
Work within auto-layout v1 limits: persist structure, apply layout passes, avoid expecting full live hug/fill from the solver yet.
Open tutorialAdvanced
Full UI pipeline (image → systemized UI)
Chain Generate/Library → Slice Studio → Compose extract → Style Brain → export.
Open tutorialOptimize for game engine export
Pick PNG scale, transparency, SVG usage, and engine preset deliberately.
Open tutorialCreate scalable UI systems
Combine components, stacks MVP, constraints, and Frame Builder for modular chrome.
Open tutorial