Let AI Write Inclusive UI — Rebuilding Compose UI with Design Rules Skill

on YouTube ↗38m

" summary

Translates Fukushima City’s dementia-friendly design guidelines into 14 Jetpack Compose rules and uses a Design Rules Skill to generate code via Claude, Cursor, or Copilot. It enforces concrete accessibility constraints (4.5:1 contrast, 48dp touch targets, consistent error wording and TalkBack semantics), adapts layouts for large screens (two-pane on Android 17), and verifies outputs with Compose UI tests and CI rule-sync so regressions are rejected and AI-generated UI is maintainable.

AI-written summary · about

" chapters (8)

1. 0:00Introduction
2. 3:43AI-written UI issues
3. 7:21Inclusive UI rules
4. 11:43Skill design foundations
5. 18:34Rule distribution
6. 21:42Demo: Inclusive UI by AI
7. 33:51Validation and rule growth
8. 35:39Summary

" related talks

• 23mComposing With ConfidenceAdam McNeilly · droidcon London 2022
• 43mBuilding Accessible Apps with Jetpack ComposeKarol Wrótniak · Android Worldwide July 2023
• 34mOverview of UI testing in ComposeMichael Bailey · droidcon New York 2022
• 39mRe-Compose your UI: building an atomic design libraryTatiana Irene, Giuseppe Scabellone · droidcon Italy 2022
• 29mComposing With ConfidenceAdam McNeilly · droidcon New York 2022
• 18mCompose: Implementing responsive UI for larger screensMatvei Malkov, Alex Vanyo · Android Dev Summit 2022: Form Factors
• 42mBuilding Compose Apps for everyoneJoe Birch · Mobius 2021 Moscow
• 18mCompose: Implementing responsive UI for larger screensMatvei Malkov, Alex Vanyo · Android Dev Summit 2022