{"@context":"https://ihatereading.in/roadmap/schema/v1","type":"roadmap-chapter","roadmap":{"slug":"vibe-coding-mobile-app-development","title":"Vibe Coding Mobile App Roadmap (Expo, Tailwind & AI Agents)","url":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development","machineUrl":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development.json"},"slug":"ui-with-tailwind-nativewind","title":"UI with Tailwind (NativeWind) & Design Systems","url":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development/ui-with-tailwind-nativewind","machineUrl":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development/ui-with-tailwind-nativewind.json","summary":{"breadcrumb":"Vibe Coding Mobile App Roadmap (Expo, Tailwind & AI Agents) → UI with Tailwind (NativeWind) & Design Systems","purpose":"Style React Native screens with Tailwind classes through NativeWind, build reusable components and design tokens, and prompt agents for consistent mobile UI.","prerequisites":["Expo Setup & Project Structure"],"afterThisChapter":["Pages, Routing & Navigation"]},"agentLens":null,"topics":[{"id":"nativewind","slug":"nativewind","title":"NativeWind","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["NativeWind lets you write `className=\"flex-1 bg-white p-4\"` on React Native components."],"why":["Consistent tokens and components keep AI-generated screens looking like one app instead of ten."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"NativeWind lets you write `className=\"flex-1 bg-white p-4\"` on React Native components. Expo documents a Tailwind guide, and NativeWind has its own install steps that track Tailwind versions.","example":null,"mentalModel":"Tailwind classes are a LEGO set with a fixed brick vocabulary; a design system is the instruction booklet that says which bricks make a button.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is NativeWind and when do you use it in a mobile app?"],"practice":["Define your palette as tokens, build Button, Card and Input in components/ui, then have an agent build a Sign-in screen using only those components."],"interview":["Why define design tokens before generating screens with an AI agent?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Define your palette as tokens, build Button, Card and Input in components/ui, then have an agent build a Sign-in screen using only those components.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://www.nativewind.dev/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/ai-react-tailwind-code-generator-app","/blogs/fastest-way-to-convert-figma-design-to-react-code","/blogs/20-websites-for-design-engineers"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"utility-first-thinking","slug":"utility-first-thinking","title":"Utility-first thinking","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Layout, spacing, colour and typography come from small composable classes."],"why":["Consistent tokens and components keep AI-generated screens looking like one app instead of ten."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Layout, spacing, colour and typography come from small composable classes. Agents are good at this style because the vocabulary is small and well documented.","example":null,"mentalModel":"Tailwind classes are a LEGO set with a fixed brick vocabulary; a design system is the instruction booklet that says which bricks make a button.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Utility-first thinking and when do you use it in a mobile app?"],"practice":["Define your palette as tokens, build Button, Card and Input in components/ui, then have an agent build a Sign-in screen using only those components."],"interview":["Why define design tokens before generating screens with an AI agent?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Define your palette as tokens, build Button, Card and Input in components/ui, then have an agent build a Sign-in screen using only those components.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://tailwindcss.com/docs"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/ai-react-tailwind-code-generator-app","/blogs/fastest-way-to-convert-figma-design-to-react-code","/blogs/20-websites-for-design-engineers"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"design-tokens","slug":"design-tokens","title":"Design tokens","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Define colours, spacing and radii once in `tailwind.config.js` (for example `primary`, `surface`, `muted`) and use the names everywhere so a re-theme is one file."],"why":["Consistent tokens and components keep AI-generated screens looking like one app instead of ten."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Define colours, spacing and radii once in `tailwind.config.js` (for example `primary`, `surface`, `muted`) and use the names everywhere so a re-theme is one file.","example":null,"mentalModel":"Tailwind classes are a LEGO set with a fixed brick vocabulary; a design system is the instruction booklet that says which bricks make a button.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Design tokens and when do you use it in a mobile app?"],"practice":["Define your palette as tokens, build Button, Card and Input in components/ui, then have an agent build a Sign-in screen using only those components."],"interview":["Why define design tokens before generating screens with an AI agent?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Define your palette as tokens, build Button, Card and Input in components/ui, then have an agent build a Sign-in screen using only those components.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://tailwindcss.com/docs/theme"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/ai-react-tailwind-code-generator-app","/blogs/fastest-way-to-convert-figma-design-to-react-code","/blogs/20-websites-for-design-engineers"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"reusable-components","slug":"reusable-components","title":"Reusable components","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Build `Button`, `Card`, `Input`, `Screen` and `Text` once with variants, then ask agents to compose screens from them instead of re-styling every view."],"why":["Consistent tokens and components keep AI-generated screens looking like one app instead of ten."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Build `Button`, `Card`, `Input`, `Screen` and `Text` once with variants, then ask agents to compose screens from them instead of re-styling every view.","example":null,"mentalModel":"Tailwind classes are a LEGO set with a fixed brick vocabulary; a design system is the instruction booklet that says which bricks make a button.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Reusable components and when do you use it in a mobile app?"],"practice":["Define your palette as tokens, build Button, Card and Input in components/ui, then have an agent build a Sign-in screen using only those components."],"interview":["Why define design tokens before generating screens with an AI agent?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Define your palette as tokens, build Button, Card and Input in components/ui, then have an agent build a Sign-in screen using only those components.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://docs.expo.dev/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/ai-react-tailwind-code-generator-app","/blogs/fastest-way-to-convert-figma-design-to-react-code","/blogs/20-websites-for-design-engineers"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"platform-aware-design","slug":"platform-aware-design","title":"Platform-aware design","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Follow Apple's Human Interface Guidelines and Material 3 for tap-target size, navigation patterns and typography, and use `ios:` and `android:` variants where they differ."],"why":["Consistent tokens and components keep AI-generated screens looking like one app instead of ten."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Follow Apple's Human Interface Guidelines and Material 3 for tap-target size, navigation patterns and typography, and use `ios:` and `android:` variants where they differ.","example":null,"mentalModel":"Tailwind classes are a LEGO set with a fixed brick vocabulary; a design system is the instruction booklet that says which bricks make a button.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Platform-aware design and when do you use it in a mobile app?"],"practice":["Define your palette as tokens, build Button, Card and Input in components/ui, then have an agent build a Sign-in screen using only those components."],"interview":["Why define design tokens before generating screens with an AI agent?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Define your palette as tokens, build Button, Card and Input in components/ui, then have an agent build a Sign-in screen using only those components.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://developer.apple.com/design/human-interface-guidelines/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/ai-react-tailwind-code-generator-app","/blogs/fastest-way-to-convert-figma-design-to-react-code","/blogs/20-websites-for-design-engineers"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"style-prompts-from-our-database","slug":"style-prompts-from-our-database","title":"Style prompts from our database","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Use image and video style prompts for app icons, splash art, onboarding illustrations and store screenshots, so your visual identity stays consistent."],"why":["Consistent tokens and components keep AI-generated screens looking like one app instead of ten."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Use image and video style prompts for app icons, splash art, onboarding illustrations and store screenshots, so your visual identity stays consistent.","example":null,"mentalModel":"Tailwind classes are a LEGO set with a fixed brick vocabulary; a design system is the instruction booklet that says which bricks make a button.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Style prompts from our database and when do you use it in a mobile app?"],"practice":["Define your palette as tokens, build Button, Card and Input in components/ui, then have an agent build a Sign-in screen using only those components."],"interview":["Why define design tokens before generating screens with an AI agent?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Define your palette as tokens, build Button, Card and Input in components/ui, then have an agent build a Sign-in screen using only those components.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":[],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/ai-react-tailwind-code-generator-app","/blogs/fastest-way-to-convert-figma-design-to-react-code","/blogs/20-websites-for-design-engineers"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]}],"updatedAt":"2026-10-23T06:00:54.377Z"}