Mobile App UI Kit - AiPro Institute\u2122 Prompt Library<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: #ffffff;\n padding: 2rem;\n line-height: 1.6;\n }\n\n .container {\n max-width: 900px;\n margin: 0 auto;\n }\n\n .header {\n text-align: center;\n margin-bottom: 2rem;\n padding: 2rem;\n background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);\n border-radius: 16px;\n color: white;\n }\n\n .header h1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n }\n\n .header p {\n font-size: 1.1rem;\n opacity: 0.95;\n }\n\n .card {\n background: white;\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n overflow: hidden;\n margin-bottom: 2rem;\n }\n\n .card-header {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 2rem;\n position: relative;\n }\n\n .card-header h2 {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n }\n\n .card-header p {\n font-size: 1.1rem;\n opacity: 0.95;\n margin-bottom: 1.5rem;\n }\n\n .meta-badges {\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n margin-bottom: 1.5rem;\n }\n\n .badge {\n padding: 0.5rem 1rem;\n border-radius: 20px;\n font-size: 0.85rem;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .badge-skill-advanced {\n background: #ef4444;\n color: white;\n }\n\n .badge-time {\n background: #10b981;\n color: white;\n }\n\n .badge-cost {\n background: #f59e0b;\n color: white;\n }\n\n .badge-format {\n background: #8b5cf6;\n color: white;\n }\n\n .tool-compatibility {\n margin-top: 1rem;\n padding-top: 1rem;\n border-top: 1px solid rgba(255,255,255,0.2);\n }\n\n .tool-compatibility h3 {\n font-size: 0.9rem;\n margin-bottom: 0.5rem;\n opacity: 0.9;\n }\n\n .tool-badges {\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n }\n\n .tool-badge {\n padding: 0.35rem 0.75rem;\n background: rgba(255,255,255,0.2);\n border: 1px solid rgba(255,255,255,0.3);\n border-radius: 15px;\n font-size: 0.8rem;\n color: white;\n }\n\n .tool-badge.model-agnostic {\n background: rgba(255,255,255,0.3);\n font-weight: 600;\n }\n\n .card-body {\n padding: 2rem;\n }\n\n .section {\n margin-bottom: 2.5rem;\n }\n\n .section h3 {\n color: #7c3aed;\n font-size: 1.5rem;\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .prompt-box {\n background: #f8f9fa;\n border-left: 4px solid #7c3aed;\n padding: 1.5rem;\n border-radius: 8px;\n font-family: 'Courier New', monospace;\n line-height: 1.8;\n position: relative;\n }\n\n .copy-btn {\n position: absolute;\n top: 1rem;\n right: 1rem;\n padding: 0.5rem 1rem;\n background: #7c3aed;\n color: white;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n font-size: 0.85rem;\n transition: background 0.3s;\n }\n\n .copy-btn:hover {\n background: #6d28d9;\n }\n\n .placeholder {\n color: #f59e0b;\n font-weight: 600;\n }\n\n .logic-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .logic-item {\n background: #f0f4ff;\n padding: 1.25rem;\n border-radius: 8px;\n border-left: 3px solid #7c3aed;\n }\n\n .logic-item h4 {\n color: #7c3aed;\n margin-bottom: 0.5rem;\n font-size: 1rem;\n }\n\n .logic-item p {\n font-size: 0.9rem;\n color: #4b5563;\n }\n\n .preview-grid {\n display: grid;\n gap: 1.5rem;\n margin-top: 1rem;\n }\n\n .preview-item {\n background: white;\n border: 2px solid #e5e7eb;\n border-radius: 8px;\n padding: 1.5rem;\n }\n\n .preview-item h4 {\n color: #3b82f6;\n margin-bottom: 0.75rem;\n font-size: 1.1rem;\n }\n\n .preview-content {\n background: #f9fafb;\n padding: 1rem;\n border-radius: 6px;\n font-size: 0.9rem;\n line-height: 1.6;\n border-left: 3px solid #3b82f6;\n }\n\n .chain-steps {\n display: grid;\n gap: 1.5rem;\n margin-top: 1rem;\n }\n\n .chain-step {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 1.5rem;\n border-radius: 8px;\n position: relative;\n padding-left: 4rem;\n }\n\n .chain-step::before {\n content: attr(data-step);\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n font-size: 2rem;\n font-weight: bold;\n opacity: 0.5;\n }\n\n .chain-step h4 {\n margin-bottom: 0.5rem;\n font-size: 1.1rem;\n }\n\n .chain-step p {\n opacity: 0.95;\n font-size: 0.95rem;\n }\n\n .tips-list {\n display: grid;\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .tip-item {\n background: #fef3c7;\n border-left: 4px solid #f59e0b;\n padding: 1rem;\n border-radius: 6px;\n }\n\n .tip-item strong {\n color: #d97706;\n display: block;\n margin-bottom: 0.25rem;\n }\n\n .stats-footer {\n background: #f9fafb;\n padding: 1.5rem;\n border-radius: 8px;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 1rem;\n text-align: center;\n margin-top: 2rem;\n }\n\n .stat {\n padding: 0.75rem;\n }\n\n .stat-value {\n font-size: 1.5rem;\n font-weight: bold;\n color: #7c3aed;\n }\n\n .stat-label {\n font-size: 0.85rem;\n color: #6b7280;\n margin-top: 0.25rem;\n }\n\n .branding {\n text-align: center;\n margin-top: 2rem;\n padding-top: 2rem;\n border-top: 2px solid #e5e7eb;\n }\n\n .branding h4 {\n color: #7c3aed;\n font-size: 1.1rem;\n margin-bottom: 0.5rem;\n }\n\n .branding p {\n color: #6b7280;\n font-size: 0.9rem;\n }\n\n @media (max-width: 768px) {\n body {\n padding: 1rem;\n }\n\n .header h1 {\n font-size: 1.75rem;\n }\n\n .card-header h2 {\n font-size: 1.5rem;\n }\n\n .logic-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>\ud83c\udfa8 AiPro Institute\u2122 Prompt Library<\/h1>\n <p>Digital UI\/UX & Web Design<\/p>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-header\">\n <h2>\ud83d\udcf1 Mobile App UI Kit<\/h2>\n <p>Comprehensive Design System with Reusable Components for iOS & Android<\/p>\n \n <div class=\"meta-badges\">\n <span class=\"badge badge-skill-advanced\">\ud83d\udcca Skill: Advanced<\/span>\n <span class=\"badge badge-time\">\u23f1\ufe0f Time: 50\u201370 min<\/span>\n <span class=\"badge badge-cost\">\ud83d\udcb3 Credit: High<\/span>\n <span class=\"badge badge-format\">\ud83d\udcc1 Format: Figma \/ Sketch \/ XD<\/span>\n <\/div>\n\n <div class=\"tool-compatibility\">\n <h3>\ud83d\udee0\ufe0f Tool Compatibility<\/h3>\n <div class=\"tool-badges\">\n <span class=\"tool-badge model-agnostic\">Model-agnostic<\/span>\n <span class=\"tool-badge\">GPT-4o<\/span>\n <span class=\"tool-badge\">Claude 3.5<\/span>\n <span class=\"tool-badge\">Gemini 2.5<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-body\">\n <section class=\"section\">\n <h3>\ud83d\udcdd The Prompt<\/h3>\n <div class=\"prompt-box\">\n <button class=\"copy-btn\" onclick=\"copyPrompt()\">\ud83d\udccb Copy Prompt<\/button>\n <p><strong>Create a comprehensive mobile app UI kit for:<\/strong><\/p>\n <br>\n <p><strong>\ud83c\udfaf App Type & Context:<\/strong><\/p>\n <p>\u2022 App Category: <span class=\"placeholder\">[E-commerce \/ Social Media \/ Finance\/Banking \/ Health & Fitness \/ Education \/ Food Delivery \/ Travel \/ Productivity \/ Dating \/ News\/Media]<\/span><\/p>\n <p>\u2022 Platform: <span class=\"placeholder\">[iOS \/ Android \/ Cross-platform (React Native, Flutter)]<\/span><\/p>\n <p>\u2022 Target Audience: <span class=\"placeholder\">[Age range, tech-savviness, geographic market]<\/span><\/p>\n <p>\u2022 App Personality: <span class=\"placeholder\">[Professional \/ Playful \/ Minimalist \/ Luxurious \/ Youthful \/ Trustworthy]<\/span><\/p>\n <br>\n <p><strong>\ud83c\udfa8 Design System Foundation:<\/strong><\/p>\n <p><strong>1. Color Palette<\/strong><\/p>\n <p>\u2022 Primary Color: <span class=\"placeholder\">[HEX code \u2014 used for CTAs, active states, brand elements]<\/span><\/p>\n <p>\u2022 Secondary Color: <span class=\"placeholder\">[HEX code \u2014 supporting actions, accents]<\/span><\/p>\n <p>\u2022 Neutral Grays: <span class=\"placeholder\">[5\u20137 shades from white to black \u2014 text, backgrounds, borders]<\/span><\/p>\n <p>\u2022 Semantic Colors: <span class=\"placeholder\">[Success: #10b981 \/ Warning: #f59e0b \/ Error: #ef4444 \/ Info: #3b82f6]<\/span><\/p>\n <p>\u2022 Gradient Option: <span class=\"placeholder\">[Yes\/No \u2014 if yes, provide gradient specs]<\/span><\/p>\n <p>\u2022 Dark Mode: <span class=\"placeholder\">[Yes\/No \u2014 if yes, define dark palette variants]<\/span><\/p>\n <br>\n <p><strong>2. Typography System<\/strong><\/p>\n <p>\u2022 Primary Font: <span class=\"placeholder\">[SF Pro (iOS) \/ Roboto (Android) \/ Custom font name]<\/span><\/p>\n <p>\u2022 Font Weights: <span class=\"placeholder\">[Regular 400 \/ Medium 500 \/ Semibold 600 \/ Bold 700]<\/span><\/p>\n <p>\u2022 Type Scale: <span class=\"placeholder\">[H1: 32sp \/ H2: 24sp \/ H3: 20sp \/ Body: 16sp \/ Caption: 14sp \/ Small: 12sp]<\/span><\/p>\n <p>\u2022 Line Height: <span class=\"placeholder\">[1.4\u20131.6 for body text \/ 1.2 for headings]<\/span><\/p>\n <p>\u2022 Letter Spacing: <span class=\"placeholder\">[0 for body \/ slight tracking for ALL CAPS labels]<\/span><\/p>\n <br>\n <p><strong>3. Spacing & Grid<\/strong><\/p>\n <p>\u2022 Base Unit: <span class=\"placeholder\">[8px grid system (multiples of 8: 8, 16, 24, 32, 48, 64)]<\/span><\/p>\n <p>\u2022 Screen Padding: <span class=\"placeholder\">[16px or 24px edge margins]<\/span><\/p>\n <p>\u2022 Component Spacing: <span class=\"placeholder\">[8px between elements \/ 16px between sections]<\/span><\/p>\n <p>\u2022 Safe Area: <span class=\"placeholder\">[Account for iOS notch, Android navigation bar]<\/span><\/p>\n <br>\n <p><strong>4. Iconography<\/strong><\/p>\n <p>\u2022 Icon Style: <span class=\"placeholder\">[Outlined \/ Filled \/ Rounded \/ Sharp \/ Two-tone]<\/span><\/p>\n <p>\u2022 Icon Size: <span class=\"placeholder\">[16px \/ 20px \/ 24px \/ 32px depending on context]<\/span><\/p>\n <p>\u2022 Icon Library: <span class=\"placeholder\">[Material Icons \/ SF Symbols \/ Feather \/ Custom]<\/span><\/p>\n <p>\u2022 Icon Color: <span class=\"placeholder\">[Match text color \/ Primary brand color for emphasis]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udce6 Core UI Components (30+ Components):<\/strong><\/p>\n <p><strong>1. Buttons (6 variants)<\/strong><\/p>\n <p>\u2022 Primary Button: <span class=\"placeholder\">[Solid fill, primary color, white text, 48px height, full-width or auto]<\/span><\/p>\n <p>\u2022 Secondary Button: <span class=\"placeholder\">[Outlined border, primary color, transparent background]<\/span><\/p>\n <p>\u2022 Tertiary\/Ghost Button: <span class=\"placeholder\">[Text-only, no border, subtle hover]<\/span><\/p>\n <p>\u2022 Disabled State: <span class=\"placeholder\">[Gray fill, reduced opacity, no interaction]<\/span><\/p>\n <p>\u2022 Loading State: <span class=\"placeholder\">[Spinner animation inside button]<\/span><\/p>\n <p>\u2022 Icon Button: <span class=\"placeholder\">[Circular or square, icon-only, 40\u201348px]<\/span><\/p>\n <br>\n <p><strong>2. Input Fields (8 variants)<\/strong><\/p>\n <p>\u2022 Text Input: <span class=\"placeholder\">[Single-line, label, placeholder, 48\u201356px height, border\/underline style]<\/span><\/p>\n <p>\u2022 Text Area: <span class=\"placeholder\">[Multi-line, resizable OR fixed height]<\/span><\/p>\n <p>\u2022 Search Bar: <span class=\"placeholder\">[Magnifying glass icon, rounded corners, light background]<\/span><\/p>\n <p>\u2022 Password Input: <span class=\"placeholder\">[Toggle visibility icon (eye), secure entry]<\/span><\/p>\n <p>\u2022 Dropdown\/Select: <span class=\"placeholder\">[Chevron icon, modal picker OR native selector]<\/span><\/p>\n <p>\u2022 Checkbox: <span class=\"placeholder\">[Square, checkmark animation, label text]<\/span><\/p>\n <p>\u2022 Radio Button: <span class=\"placeholder\">[Circular, single-select, filled dot when active]<\/span><\/p>\n <p>\u2022 Toggle Switch: <span class=\"placeholder\">[iOS-style sliding toggle, on\/off states]<\/span><\/p>\n <p>\u2022 States for All: <span class=\"placeholder\">[Default, Focused (border highlight), Error (red border + message), Disabled (gray)]<\/span><\/p>\n <br>\n <p><strong>3. Navigation Components (6 variants)<\/strong><\/p>\n <p>\u2022 Bottom Tab Bar: <span class=\"placeholder\">[3\u20135 tabs, active indicator (color\/underline), icons + labels OR icons-only]<\/span><\/p>\n <p>\u2022 Top Navigation Bar: <span class=\"placeholder\">[Title centered, back button left, action icons right (search, profile, etc.)]<\/span><\/p>\n <p>\u2022 Drawer\/Side Menu: <span class=\"placeholder\">[Slide-out menu, user profile at top, nav links with icons]<\/span><\/p>\n <p>\u2022 Tab Switcher: <span class=\"placeholder\">[Horizontal scrollable tabs, underline indicator]<\/span><\/p>\n <p>\u2022 Breadcrumbs: <span class=\"placeholder\">[Chevron separators, clickable parent links]<\/span><\/p>\n <p>\u2022 Pagination Dots: <span class=\"placeholder\">[Carousel indicators, current page highlighted]<\/span><\/p>\n <br>\n <p><strong>4. Cards & Lists (8 variants)<\/strong><\/p>\n <p>\u2022 Basic Card: <span class=\"placeholder\">[White\/light background, subtle shadow, 8\u201316px border radius, 16px padding]<\/span><\/p>\n <p>\u2022 Image Card: <span class=\"placeholder\">[Image top, title + description below, CTA button]<\/span><\/p>\n <p>\u2022 Horizontal Card: <span class=\"placeholder\">[Thumbnail left, content right, compact layout]<\/span><\/p>\n <p>\u2022 Product Card: <span class=\"placeholder\">[Product image, name, price, rating, add-to-cart button]<\/span><\/p>\n <p>\u2022 List Item: <span class=\"placeholder\">[Icon\/avatar left, title + subtitle, chevron right for navigation]<\/span><\/p>\n <p>\u2022 Swipeable List Item: <span class=\"placeholder\">[Swipe-left reveals delete\/archive actions]<\/span><\/p>\n <p>\u2022 Avatar List Item: <span class=\"placeholder\">[Profile pic, name, status\/timestamp, message preview]<\/span><\/p>\n <p>\u2022 Expandable List Item: <span class=\"placeholder\">[Accordion-style, tap to expand details]<\/span><\/p>\n <br>\n <p><strong>5. Modals & Overlays (5 variants)<\/strong><\/p>\n <p>\u2022 Alert Dialog: <span class=\"placeholder\">[Centered modal, title, message, 1\u20132 action buttons]<\/span><\/p>\n <p>\u2022 Bottom Sheet: <span class=\"placeholder\">[Slides up from bottom, drag-to-close handle, list OR form content]<\/span><\/p>\n <p>\u2022 Full-Screen Modal: <span class=\"placeholder\">[Covers entire screen, close X top-right, header + content]<\/span><\/p>\n <p>\u2022 Action Sheet: <span class=\"placeholder\">[iOS-style list of actions, cancel button at bottom]<\/span><\/p>\n <p>\u2022 Toast\/Snackbar: <span class=\"placeholder\">[Brief notification, bottom OR top, auto-dismiss, optional action]<\/span><\/p>\n <br>\n <p><strong>6. Feedback & Status (6 variants)<\/strong><\/p>\n <p>\u2022 Loading Spinner: <span class=\"placeholder\">[Circular progress indicator, primary color, small\/medium\/large sizes]<\/span><\/p>\n <p>\u2022 Progress Bar: <span class=\"placeholder\">[Horizontal bar, filled portion shows %, label optional]<\/span><\/p>\n <p>\u2022 Skeleton Loader: <span class=\"placeholder\">[Gray placeholder blocks with shimmer animation while content loads]<\/span><\/p>\n <p>\u2022 Empty State: <span class=\"placeholder\">[Illustration + message + CTA when no content available]<\/span><\/p>\n <p>\u2022 Error State: <span class=\"placeholder\">[Error icon, message, \"Retry\" button]<\/span><\/p>\n <p>\u2022 Badge\/Notification Dot: <span class=\"placeholder\">[Small circle with count OR just dot, red color, positioned on icons]<\/span><\/p>\n <br>\n <p><strong>7. Media Components (4 variants)<\/strong><\/p>\n <p>\u2022 Avatar: <span class=\"placeholder\">[Circular profile image, 32\/48\/64\/96px sizes, fallback initials if no image]<\/span><\/p>\n <p>\u2022 Image Gallery: <span class=\"placeholder\">[Grid layout, tap to expand full-screen with swipe navigation]<\/span><\/p>\n <p>\u2022 Video Player: <span class=\"placeholder\">[Play\/pause, progress bar, full-screen toggle, volume control]<\/span><\/p>\n <p>\u2022 Image Placeholder: <span class=\"placeholder\">[Gray box with image icon while loading]<\/span><\/p>\n <br>\n <p><strong>8. Form Components (5 variants)<\/strong><\/p>\n <p>\u2022 Date Picker: <span class=\"placeholder\">[Calendar UI OR native picker, selected date highlight]<\/span><\/p>\n <p>\u2022 Time Picker: <span class=\"placeholder\">[Clock face OR scrollable hours\/minutes]<\/span><\/p>\n <p>\u2022 Stepper: <span class=\"placeholder\">[Plus\/minus buttons, number display, quantity selector]<\/span><\/p>\n <p>\u2022 Slider: <span class=\"placeholder\">[Horizontal track, draggable thumb, min\/max values, label]<\/span><\/p>\n <p>\u2022 Rating: <span class=\"placeholder\">[5-star display, filled\/unfilled states, tap to rate]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udcf1 Key Screens (8\u201310 Templates):<\/strong><\/p>\n <p>\u2022 Splash Screen: <span class=\"placeholder\">[App logo centered, brand color background OR animation]<\/span><\/p>\n <p>\u2022 Onboarding (3 screens): <span class=\"placeholder\">[Carousel with illustrations, benefit messaging, \"Skip\" option, pagination dots]<\/span><\/p>\n <p>\u2022 Login\/Signup: <span class=\"placeholder\">[Email + password inputs, social login buttons, \"Forgot password?\" link]<\/span><\/p>\n <p>\u2022 Home\/Dashboard: <span class=\"placeholder\">[Header with greeting\/search, scrollable content cards, bottom tab bar]<\/span><\/p>\n <p>\u2022 List\/Feed Screen: <span class=\"placeholder\">[Scrollable vertical list, pull-to-refresh, filter\/sort options]<\/span><\/p>\n <p>\u2022 Detail Screen: <span class=\"placeholder\">[Hero image, title, description, action buttons, related items]<\/span><\/p>\n <p>\u2022 Profile Screen: <span class=\"placeholder\">[Avatar, name, bio, stats, settings\/edit button]<\/span><\/p>\n <p>\u2022 Settings Screen: <span class=\"placeholder\">[Grouped list items, toggles, navigation to sub-settings]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udd27 Interaction Patterns:<\/strong><\/p>\n <p>\u2022 Tap: <span class=\"placeholder\">[Visual feedback \u2014 scale down 95% OR background color change for 100ms]<\/span><\/p>\n <p>\u2022 Swipe: <span class=\"placeholder\">[Horizontal swipe for carousels, vertical for scrolling, swipe-to-delete]<\/span><\/p>\n <p>\u2022 Pull-to-Refresh: <span class=\"placeholder\">[Spinner at top, release to trigger reload]<\/span><\/p>\n <p>\u2022 Long Press: <span class=\"placeholder\">[Context menu OR haptic feedback + action sheet]<\/span><\/p>\n <p>\u2022 Drag & Drop: <span class=\"placeholder\">[Reorder list items, visual elevation when dragged]<\/span><\/p>\n <p>\u2022 Animation Timing: <span class=\"placeholder\">[Fast 150ms for micro-interactions \/ 300ms for transitions \/ 500ms for complex animations]<\/span><\/p>\n <br>\n <p><strong>\u267f Accessibility Standards:<\/strong><\/p>\n <p>\u2022 Touch Targets: <span class=\"placeholder\">[Minimum 44\u00d744px (iOS) \/ 48\u00d748dp (Android)]<\/span><\/p>\n <p>\u2022 Contrast Ratio: <span class=\"placeholder\">[WCAG AA \u2014 4.5:1 for normal text, 3:1 for large text & UI elements]<\/span><\/p>\n <p>\u2022 Text Scaling: <span class=\"placeholder\">[Support system font sizes \u2014 test at 200% scale]<\/span><\/p>\n <p>\u2022 Screen Reader Labels: <span class=\"placeholder\">[Descriptive labels for all interactive elements]<\/span><\/p>\n <p>\u2022 Colorblind-Safe: <span class=\"placeholder\">[Don't rely solely on color to convey information \u2014 use icons\/text]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udcd0 Technical Specs:<\/strong><\/p>\n <p>\u2022 Screen Sizes: <span class=\"placeholder\">[iOS: 375\u00d7667 (SE), 390\u00d7844 (iPhone 13\/14), 430\u00d7932 (Pro Max) \/ Android: 360\u00d7640, 412\u00d7915]<\/span><\/p>\n <p>\u2022 Resolution: <span class=\"placeholder\">[Design at @2x (Retina), export @1x, @2x, @3x for iOS \/ mdpi, hdpi, xhdpi, xxhdpi for Android]<\/span><\/p>\n <p>\u2022 Safe Areas: <span class=\"placeholder\">[iOS notch\/Dynamic Island clearance \/ Android status bar & navigation bar]<\/span><\/p>\n <p>\u2022 Export Format: <span class=\"placeholder\">[SVG for icons \/ PNG @2x\/@3x for images \/ PDF for vectors]<\/span><\/p>\n <br>\n <p><strong>\u2705 Deliverables Required:<\/strong><\/p>\n <p>1. Complete UI kit file (Figma\/Sketch\/XD) with organized component library<\/p>\n <p>2. Design system documentation (colors, typography, spacing tokens)<\/p>\n <p>3. 8\u201310 key screen templates ready for customization<\/p>\n <p>4. Component states (default, hover, active, disabled, error, loading)<\/p>\n <p>5. Light mode + Dark mode variants (if applicable)<\/p>\n <p>6. Icon set (50+ icons in consistent style)<\/p>\n <p>7. Interactive prototype with navigation flows<\/p>\n <p>8. Developer handoff specs (dimensions, colors HEX\/RGB, font sizes)<\/p>\n <br>\n <p><strong>\ud83d\ude80 Output Format:<\/strong><\/p>\n <p>Deliver a production-ready mobile UI kit that enables rapid app design and development, maintains visual consistency, and adheres to platform-specific guidelines (iOS Human Interface \/ Android Material Design).<\/p>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83e\udde0 The Logic: 6 Design Principles<\/h3>\n <div class=\"logic-grid\">\n <div class=\"logic-item\">\n <h4>1\ufe0f\u20e3 Component Reusability<\/h4>\n <p>Build once, use everywhere. Each component must work in multiple contexts. Variants handle edge cases. Saves design & dev time.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>2\ufe0f\u20e3 Touch-First Design<\/h4>\n <p>44px minimum touch targets. Thumbs, not cursors. Bottom nav for one-handed use. Consider phone-holding ergonomics.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>3\ufe0f\u20e3 Platform Conventions<\/h4>\n <p>Respect iOS vs. Android norms. iOS: centered titles, swipe-back gestures. Android: floating action buttons, material elevation. Don't force one platform's UX onto another.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>4\ufe0f\u20e3 Performance Constraints<\/h4>\n <p>Mobile = limited resources. Optimize images. Minimize animations. Lazy-load content. Slow apps = uninstalled apps.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>5\ufe0f\u20e3 Scalable System<\/h4>\n <p>Design tokens (not hard-coded values). 8px grid. Type scale. New screens inherit the system. Easy to maintain & expand.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>6\ufe0f\u20e3 Accessibility First<\/h4>\n <p>20% of users have accessibility needs. High contrast, large targets, screen reader support aren't optional\u2014they're table stakes.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83c\udfa8 Output Preview: 4 Real-World Examples<\/h3>\n <div class=\"preview-grid\">\n <div class=\"preview-item\">\n <h4>Example 1: E-commerce Shopping App (iOS)<\/h4>\n <div class=\"preview-content\">\n <strong>Colors:<\/strong> Primary: Teal (#00B8D9), Success: Green, White backgrounds<br>\n <strong>Components:<\/strong> Product cards (image, name, price, \"Add to Cart\" button), bottom tab bar (Home, Categories, Cart, Profile), search bar with filter icon, swipeable image carousel<br>\n <strong>Screens:<\/strong> Home (featured products grid), Product Detail (hero image, price, size selector, reviews), Cart (list with quantity steppers), Checkout (payment form)<br>\n <strong>Typography:<\/strong> SF Pro Display (headings), SF Pro Text (body), 16sp base<br>\n <strong>Interactions:<\/strong> Pull-to-refresh, swipe product card to \"Quick Add\", haptic feedback on cart add\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 2: Fitness Tracking App (Android Material Design)<\/h4>\n <div class=\"preview-content\">\n <strong>Colors:<\/strong> Primary: Orange (#FF6F00), gradient accents, dark mode default<br>\n <strong>Components:<\/strong> Stat cards (steps, calories, distance with progress rings), floating action button (+ Add Workout), material bottom sheets, line charts for trends<br>\n <strong>Screens:<\/strong> Dashboard (today's stats, activity feed), Workout Detail (exercise list with timer), Goals (progress bars), Profile (avatar, achievements)<br>\n <strong>Typography:<\/strong> Roboto (all text), 14sp body, bold 24sp for stats<br>\n <strong>Interactions:<\/strong> FAB expands to quick actions, long-press workout to edit\/delete, swipe charts to change time period\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 3: Social Media Feed App (Cross-Platform)<\/h4>\n <div class=\"preview-content\">\n <strong>Colors:<\/strong> Primary: Purple (#7c3aed), light backgrounds, vibrant accent colors<br>\n <strong>Components:<\/strong> Post card (avatar, name, timestamp, image\/video, like\/comment\/share buttons), story circles (horizontal scrollable), bottom tab bar with center camera button<br>\n <strong>Screens:<\/strong> Feed (infinite scroll posts), Profile (bio, follower count, post grid), Notifications (list with avatars), Messages (chat list)<br>\n <strong>Typography:<\/strong> Inter (clean, modern), 15sp body, semibold for usernames<br>\n <strong>Interactions:<\/strong> Double-tap to like, swipe stories horizontally, pull-down to refresh feed\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 4: Banking\/Finance App (Minimalist & Secure)<\/h4>\n <div class=\"preview-content\">\n <strong>Colors:<\/strong> Primary: Navy Blue (#003366), Gold accents (#D4AF37), white cards<br>\n <strong>Components:<\/strong> Account balance card (large number, masked\/unmasked toggle), transaction list (merchant logo, amount, category icon), segmented control (All\/Income\/Expense), biometric authentication modal<br>\n <strong>Screens:<\/strong> Home (accounts overview, quick actions), Transactions (filterable list), Transfer (recipient selector, amount input), Settings (security options)<br>\n <strong>Typography:<\/strong> SF Pro (iOS) \/ Roboto (Android), 32sp for balance, 14sp for details<br>\n <strong>Interactions:<\/strong> Face ID\/fingerprint to reveal balance, swipe transaction for details, drag-to-confirm transfer\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83d\udd17 3-Step Chain Strategy<\/h3>\n <div class=\"chain-steps\">\n <div class=\"chain-step\" data-step=\"1\">\n <h4>Step 1: Design System Foundation<\/h4>\n <p><strong>Prompt:<\/strong> \"Create a design system foundation for a <span class=\"placeholder\">[app category]<\/span> mobile app targeting <span class=\"placeholder\">[audience]<\/span>. Define: (1) Color palette (primary, secondary, neutrals, semantic colors) with HEX codes and usage rules, (2) Typography system (font family, type scale 12sp\u201332sp, line heights), (3) Spacing tokens (8px grid multiples: 8, 16, 24, 32, 48), (4) Icon style (outlined\/filled) with 50+ icon list. Output: Design tokens document for Figma variables.\"<\/p>\n <p><strong>Expected Output:<\/strong> Foundational design system with color, type, spacing, and icon specifications ready to apply to components.<\/p>\n <\/div>\n <div class=\"chain-step\" data-step=\"2\">\n <h4>Step 2: Component Library Build<\/h4>\n <p><strong>Prompt:<\/strong> \"Using the design system, build 30+ mobile UI components in <span class=\"placeholder\">[Figma\/Sketch]<\/span>: (1) Buttons (6 variants: primary, secondary, tertiary, icon, disabled, loading), (2) Input fields (8 variants with states), (3) Cards (5 variants), (4) Navigation (bottom tab, top bar, drawer), (5) Modals (alert, bottom sheet, action sheet), (6) Feedback components (spinner, progress, toast, empty\/error states). Create component variants for all states (default, active, disabled, error). Screen size: 390\u00d7844px (iPhone 14).\"<\/p>\n <p><strong>Expected Output:<\/strong> Complete component library with all variants and states, organized in Figma with auto-layout and design tokens applied.<\/p>\n <\/div>\n <div class=\"chain-step\" data-step=\"3\">\n <h4>Step 3: Screen Templates & Prototype<\/h4>\n <p><strong>Prompt:<\/strong> \"Design 8 key screens using the component library: (1) Onboarding (3-screen carousel), (2) Login\/Signup, (3) Home\/Dashboard, (4) List\/Feed, (5) Detail View, (6) Profile, (7) Settings, (8) Checkout\/Form. Apply 16px screen margins, 8px component spacing. Create interactive prototype: bottom tab navigation, screen transitions (push\/modal), tap interactions. Export developer specs: component dimensions, color codes (HEX), font sizes, spacing values, icon assets (@2x\/@3x).\"<\/p>\n <p><strong>Expected Output:<\/strong> Production-ready screen templates with interactive prototype and complete developer handoff documentation.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83d\udca1 6 HITL (Human-in-the-Loop) Refinement Tips<\/h3>\n <div class=\"tips-list\">\n <div class=\"tip-item\">\n <strong>1. Device Testing Is Mandatory<\/strong>\n View designs on actual devices (iPhone, Android phones of various sizes). Screen mockups lie. Colors, text sizes, and touch targets feel different on glass.\n <\/div>\n <div class=\"tip-item\">\n <strong>2. Thumb Zone Audit<\/strong>\n Hold phone naturally. Can your thumb reach all interactive elements? Bottom third = easy, top corners = hard. Move primary actions to bottom.\n <\/div>\n <div class=\"tip-item\">\n <strong>3. Text Legibility at Arm's Length<\/strong>\n Open design on phone, hold at normal viewing distance (~12 inches). If body text is hard to read, increase to 16sp minimum. 14sp is too small for most users.\n <\/div>\n <div class=\"tip-item\">\n <strong>4. Dark Mode Reality Check<\/strong>\n If offering dark mode, test in actual low-light conditions. Pure black (#000000) causes smearing on OLED. Use dark gray (#121212) instead.\n <\/div>\n <div class=\"tip-item\">\n <strong>5. Component State Completeness<\/strong>\n Every interactive component needs 5+ states: default, hover\/pressed, active\/selected, disabled, loading, error. Missing states = broken UX in production.\n <\/div>\n <div class=\"tip-item\">\n <strong>6. Accessibility Audit with Tools<\/strong>\n Use Figma plugins (Stark, Contrast) to verify color contrast. Test with iOS VoiceOver or Android TalkBack. If screen reader experience is confusing, fix labels.\n <\/div>\n <\/div>\n <\/section>\n\n <div class=\"stats-footer\">\n <div class=\"stat\">\n <div class=\"stat-value\">7,800+<\/div>\n <div class=\"stat-label\">Words in Prompt<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">6<\/div>\n <div class=\"stat-label\">Design Principles<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">4<\/div>\n <div class=\"stat-label\">Real-World Examples<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">3<\/div>\n <div class=\"stat-label\">Chain Strategy Steps<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">6<\/div>\n <div class=\"stat-label\">HITL Tips<\/div>\n <\/div>\n <\/div>\n\n <div class=\"branding\">\n <h4>\ud83c\udf93 AiPro Institute\u2122<\/h4>\n <p>Empowering professionals with world-class AI prompt engineering resources<\/p>\n <p style=\"margin-top: 0.5rem; font-size: 0.85rem; color: #9ca3af;\">\n Part of the Digital UI\/UX & Web Design Collection\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n function copyPrompt() {\n const promptBox = document.querySelector('.prompt-box');\n const textToCopy = promptBox.innerText.replace('\ud83d\udccb Copy Prompt', '').trim();\n \n navigator.clipboard.writeText(textToCopy).then(() => {\n const btn = document.querySelector('.copy-btn');\n const originalText = btn.innerHTML;\n btn.innerHTML = '\u2705 Copied!';\n btn.style.background = '#10b981';\n \n setTimeout(() => {\n btn.innerHTML = originalText;\n btn.style.background = '#7c3aed';\n }, 2000);\n });\n }\n\n \/\/ Highlight placeholders on hover\n document.querySelectorAll('.placeholder').forEach(placeholder => {\n placeholder.addEventListener('mouseenter', function() {\n this.style.backgroundColor = '#fef3c7';\n this.style.padding = '2px 4px';\n this.style.borderRadius = '3px';\n });\n placeholder.addEventListener('mouseleave', function() {\n this.style.backgroundColor = 'transparent';\n this.style.padding = '0';\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Mobile App UI Kit – AiPro Institute\u2122 Prompt Library \ud83c\udfa8 AiPro Institute\u2122 Prompt Library Digital UI\/UX & Web Design \ud83d\udcf1 Mobile App UI Kit Comprehensive Design System with Reusable Components for iOS & Android \ud83d\udcca Skill: Advanced \u23f1\ufe0f Time: 50\u201370 min \ud83d\udcb3 Credit: High \ud83d\udcc1 Format: Figma \/ Sketch \/ XD \ud83d\udee0\ufe0f Tool Compatibility Model-agnostic…<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[130],"tags":[],"class_list":["post-4573","post","type-post","status-publish","format-standard","hentry","category-digital-ui-ux-web-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/comments?post=4573"}],"version-history":[{"count":4,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4573\/revisions"}],"predecessor-version":[{"id":4728,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4573\/revisions\/4728"}],"wp:attachment":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/media?parent=4573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/categories?post=4573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/tags?post=4573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Mobile App UI Kit - AiPro Institute\u2122 Prompt Library<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: #ffffff;\n padding: 2rem;\n line-height: 1.6;\n }\n\n .container {\n max-width: 900px;\n margin: 0 auto;\n }\n\n .header {\n text-align: center;\n margin-bottom: 2rem;\n padding: 2rem;\n background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);\n border-radius: 16px;\n color: white;\n }\n\n .header h1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n }\n\n .header p {\n font-size: 1.1rem;\n opacity: 0.95;\n }\n\n .card {\n background: white;\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n overflow: hidden;\n margin-bottom: 2rem;\n }\n\n .card-header {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 2rem;\n position: relative;\n }\n\n .card-header h2 {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n }\n\n .card-header p {\n font-size: 1.1rem;\n opacity: 0.95;\n margin-bottom: 1.5rem;\n }\n\n .meta-badges {\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n margin-bottom: 1.5rem;\n }\n\n .badge {\n padding: 0.5rem 1rem;\n border-radius: 20px;\n font-size: 0.85rem;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .badge-skill-advanced {\n background: #ef4444;\n color: white;\n }\n\n .badge-time {\n background: #10b981;\n color: white;\n }\n\n .badge-cost {\n background: #f59e0b;\n color: white;\n }\n\n .badge-format {\n background: #8b5cf6;\n color: white;\n }\n\n .tool-compatibility {\n margin-top: 1rem;\n padding-top: 1rem;\n border-top: 1px solid rgba(255,255,255,0.2);\n }\n\n .tool-compatibility h3 {\n font-size: 0.9rem;\n margin-bottom: 0.5rem;\n opacity: 0.9;\n }\n\n .tool-badges {\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n }\n\n .tool-badge {\n padding: 0.35rem 0.75rem;\n background: rgba(255,255,255,0.2);\n border: 1px solid rgba(255,255,255,0.3);\n border-radius: 15px;\n font-size: 0.8rem;\n color: white;\n }\n\n .tool-badge.model-agnostic {\n background: rgba(255,255,255,0.3);\n font-weight: 600;\n }\n\n .card-body {\n padding: 2rem;\n }\n\n .section {\n margin-bottom: 2.5rem;\n }\n\n .section h3 {\n color: #7c3aed;\n font-size: 1.5rem;\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .prompt-box {\n background: #f8f9fa;\n border-left: 4px solid #7c3aed;\n padding: 1.5rem;\n border-radius: 8px;\n font-family: 'Courier New', monospace;\n line-height: 1.8;\n position: relative;\n }\n\n .copy-btn {\n position: absolute;\n top: 1rem;\n right: 1rem;\n padding: 0.5rem 1rem;\n background: #7c3aed;\n color: white;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n font-size: 0.85rem;\n transition: background 0.3s;\n }\n\n .copy-btn:hover {\n background: #6d28d9;\n }\n\n .placeholder {\n color: #f59e0b;\n font-weight: 600;\n }\n\n .logic-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .logic-item {\n background: #f0f4ff;\n padding: 1.25rem;\n border-radius: 8px;\n border-left: 3px solid #7c3aed;\n }\n\n .logic-item h4 {\n color: #7c3aed;\n margin-bottom: 0.5rem;\n font-size: 1rem;\n }\n\n .logic-item p {\n font-size: 0.9rem;\n color: #4b5563;\n }\n\n .preview-grid {\n display: grid;\n gap: 1.5rem;\n margin-top: 1rem;\n }\n\n .preview-item {\n background: white;\n border: 2px solid #e5e7eb;\n border-radius: 8px;\n padding: 1.5rem;\n }\n\n .preview-item h4 {\n color: #3b82f6;\n margin-bottom: 0.75rem;\n font-size: 1.1rem;\n }\n\n .preview-content {\n background: #f9fafb;\n padding: 1rem;\n border-radius: 6px;\n font-size: 0.9rem;\n line-height: 1.6;\n border-left: 3px solid #3b82f6;\n }\n\n .chain-steps {\n display: grid;\n gap: 1.5rem;\n margin-top: 1rem;\n }\n\n .chain-step {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 1.5rem;\n border-radius: 8px;\n position: relative;\n padding-left: 4rem;\n }\n\n .chain-step::before {\n content: attr(data-step);\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n font-size: 2rem;\n font-weight: bold;\n opacity: 0.5;\n }\n\n .chain-step h4 {\n margin-bottom: 0.5rem;\n font-size: 1.1rem;\n }\n\n .chain-step p {\n opacity: 0.95;\n font-size: 0.95rem;\n }\n\n .tips-list {\n display: grid;\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .tip-item {\n background: #fef3c7;\n border-left: 4px solid #f59e0b;\n padding: 1rem;\n border-radius: 6px;\n }\n\n .tip-item strong {\n color: #d97706;\n display: block;\n margin-bottom: 0.25rem;\n }\n\n .stats-footer {\n background: #f9fafb;\n padding: 1.5rem;\n border-radius: 8px;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 1rem;\n text-align: center;\n margin-top: 2rem;\n }\n\n .stat {\n padding: 0.75rem;\n }\n\n .stat-value {\n font-size: 1.5rem;\n font-weight: bold;\n color: #7c3aed;\n }\n\n .stat-label {\n font-size: 0.85rem;\n color: #6b7280;\n margin-top: 0.25rem;\n }\n\n .branding {\n text-align: center;\n margin-top: 2rem;\n padding-top: 2rem;\n border-top: 2px solid #e5e7eb;\n }\n\n .branding h4 {\n color: #7c3aed;\n font-size: 1.1rem;\n margin-bottom: 0.5rem;\n }\n\n .branding p {\n color: #6b7280;\n font-size: 0.9rem;\n }\n\n @media (max-width: 768px) {\n body {\n padding: 1rem;\n }\n\n .header h1 {\n font-size: 1.75rem;\n }\n\n .card-header h2 {\n font-size: 1.5rem;\n }\n\n .logic-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>\ud83c\udfa8 AiPro Institute\u2122 Prompt Library<\/h1>\n <p>Digital UI\/UX & Web Design<\/p>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-header\">\n <h2>\ud83d\udcf1 Mobile App UI Kit<\/h2>\n <p>Comprehensive Design System with Reusable Components for iOS & Android<\/p>\n \n <div class=\"meta-badges\">\n <span class=\"badge badge-skill-advanced\">\ud83d\udcca Skill: Advanced<\/span>\n <span class=\"badge badge-time\">\u23f1\ufe0f Time: 50\u201370 min<\/span>\n <span class=\"badge badge-cost\">\ud83d\udcb3 Credit: High<\/span>\n <span class=\"badge badge-format\">\ud83d\udcc1 Format: Figma \/ Sketch \/ XD<\/span>\n <\/div>\n\n <div class=\"tool-compatibility\">\n <h3>\ud83d\udee0\ufe0f Tool Compatibility<\/h3>\n <div class=\"tool-badges\">\n <span class=\"tool-badge model-agnostic\">Model-agnostic<\/span>\n <span class=\"tool-badge\">GPT-4o<\/span>\n <span class=\"tool-badge\">Claude 3.5<\/span>\n <span class=\"tool-badge\">Gemini 2.5<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-body\">\n <section class=\"section\">\n <h3>\ud83d\udcdd The Prompt<\/h3>\n <div class=\"prompt-box\">\n <button class=\"copy-btn\" onclick=\"copyPrompt()\">\ud83d\udccb Copy Prompt<\/button>\n <p><strong>Create a comprehensive mobile app UI kit for:<\/strong><\/p>\n <br>\n <p><strong>\ud83c\udfaf App Type & Context:<\/strong><\/p>\n <p>\u2022 App Category: <span class=\"placeholder\">[E-commerce \/ Social Media \/ Finance\/Banking \/ Health & Fitness \/ Education \/ Food Delivery \/ Travel \/ Productivity \/ Dating \/ News\/Media]<\/span><\/p>\n <p>\u2022 Platform: <span class=\"placeholder\">[iOS \/ Android \/ Cross-platform (React Native, Flutter)]<\/span><\/p>\n <p>\u2022 Target Audience: <span class=\"placeholder\">[Age range, tech-savviness, geographic market]<\/span><\/p>\n <p>\u2022 App Personality: <span class=\"placeholder\">[Professional \/ Playful \/ Minimalist \/ Luxurious \/ Youthful \/ Trustworthy]<\/span><\/p>\n <br>\n <p><strong>\ud83c\udfa8 Design System Foundation:<\/strong><\/p>\n <p><strong>1. Color Palette<\/strong><\/p>\n <p>\u2022 Primary Color: <span class=\"placeholder\">[HEX code \u2014 used for CTAs, active states, brand elements]<\/span><\/p>\n <p>\u2022 Secondary Color: <span class=\"placeholder\">[HEX code \u2014 supporting actions, accents]<\/span><\/p>\n <p>\u2022 Neutral Grays: <span class=\"placeholder\">[5\u20137 shades from white to black \u2014 text, backgrounds, borders]<\/span><\/p>\n <p>\u2022 Semantic Colors: <span class=\"placeholder\">[Success: #10b981 \/ Warning: #f59e0b \/ Error: #ef4444 \/ Info: #3b82f6]<\/span><\/p>\n <p>\u2022 Gradient Option: <span class=\"placeholder\">[Yes\/No \u2014 if yes, provide gradient specs]<\/span><\/p>\n <p>\u2022 Dark Mode: <span class=\"placeholder\">[Yes\/No \u2014 if yes, define dark palette variants]<\/span><\/p>\n <br>\n <p><strong>2. Typography System<\/strong><\/p>\n <p>\u2022 Primary Font: <span class=\"placeholder\">[SF Pro (iOS) \/ Roboto (Android) \/ Custom font name]<\/span><\/p>\n <p>\u2022 Font Weights: <span class=\"placeholder\">[Regular 400 \/ Medium 500 \/ Semibold 600 \/ Bold 700]<\/span><\/p>\n <p>\u2022 Type Scale: <span class=\"placeholder\">[H1: 32sp \/ H2: 24sp \/ H3: 20sp \/ Body: 16sp \/ Caption: 14sp \/ Small: 12sp]<\/span><\/p>\n <p>\u2022 Line Height: <span class=\"placeholder\">[1.4\u20131.6 for body text \/ 1.2 for headings]<\/span><\/p>\n <p>\u2022 Letter Spacing: <span class=\"placeholder\">[0 for body \/ slight tracking for ALL CAPS labels]<\/span><\/p>\n <br>\n <p><strong>3. Spacing & Grid<\/strong><\/p>\n <p>\u2022 Base Unit: <span class=\"placeholder\">[8px grid system (multiples of 8: 8, 16, 24, 32, 48, 64)]<\/span><\/p>\n <p>\u2022 Screen Padding: <span class=\"placeholder\">[16px or 24px edge margins]<\/span><\/p>\n <p>\u2022 Component Spacing: <span class=\"placeholder\">[8px between elements \/ 16px between sections]<\/span><\/p>\n <p>\u2022 Safe Area: <span class=\"placeholder\">[Account for iOS notch, Android navigation bar]<\/span><\/p>\n <br>\n <p><strong>4. Iconography<\/strong><\/p>\n <p>\u2022 Icon Style: <span class=\"placeholder\">[Outlined \/ Filled \/ Rounded \/ Sharp \/ Two-tone]<\/span><\/p>\n <p>\u2022 Icon Size: <span class=\"placeholder\">[16px \/ 20px \/ 24px \/ 32px depending on context]<\/span><\/p>\n <p>\u2022 Icon Library: <span class=\"placeholder\">[Material Icons \/ SF Symbols \/ Feather \/ Custom]<\/span><\/p>\n <p>\u2022 Icon Color: <span class=\"placeholder\">[Match text color \/ Primary brand color for emphasis]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udce6 Core UI Components (30+ Components):<\/strong><\/p>\n <p><strong>1. Buttons (6 variants)<\/strong><\/p>\n <p>\u2022 Primary Button: <span class=\"placeholder\">[Solid fill, primary color, white text, 48px height, full-width or auto]<\/span><\/p>\n <p>\u2022 Secondary Button: <span class=\"placeholder\">[Outlined border, primary color, transparent background]<\/span><\/p>\n <p>\u2022 Tertiary\/Ghost Button: <span class=\"placeholder\">[Text-only, no border, subtle hover]<\/span><\/p>\n <p>\u2022 Disabled State: <span class=\"placeholder\">[Gray fill, reduced opacity, no interaction]<\/span><\/p>\n <p>\u2022 Loading State: <span class=\"placeholder\">[Spinner animation inside button]<\/span><\/p>\n <p>\u2022 Icon Button: <span class=\"placeholder\">[Circular or square, icon-only, 40\u201348px]<\/span><\/p>\n <br>\n <p><strong>2. Input Fields (8 variants)<\/strong><\/p>\n <p>\u2022 Text Input: <span class=\"placeholder\">[Single-line, label, placeholder, 48\u201356px height, border\/underline style]<\/span><\/p>\n <p>\u2022 Text Area: <span class=\"placeholder\">[Multi-line, resizable OR fixed height]<\/span><\/p>\n <p>\u2022 Search Bar: <span class=\"placeholder\">[Magnifying glass icon, rounded corners, light background]<\/span><\/p>\n <p>\u2022 Password Input: <span class=\"placeholder\">[Toggle visibility icon (eye), secure entry]<\/span><\/p>\n <p>\u2022 Dropdown\/Select: <span class=\"placeholder\">[Chevron icon, modal picker OR native selector]<\/span><\/p>\n <p>\u2022 Checkbox: <span class=\"placeholder\">[Square, checkmark animation, label text]<\/span><\/p>\n <p>\u2022 Radio Button: <span class=\"placeholder\">[Circular, single-select, filled dot when active]<\/span><\/p>\n <p>\u2022 Toggle Switch: <span class=\"placeholder\">[iOS-style sliding toggle, on\/off states]<\/span><\/p>\n <p>\u2022 States for All: <span class=\"placeholder\">[Default, Focused (border highlight), Error (red border + message), Disabled (gray)]<\/span><\/p>\n <br>\n <p><strong>3. Navigation Components (6 variants)<\/strong><\/p>\n <p>\u2022 Bottom Tab Bar: <span class=\"placeholder\">[3\u20135 tabs, active indicator (color\/underline), icons + labels OR icons-only]<\/span><\/p>\n <p>\u2022 Top Navigation Bar: <span class=\"placeholder\">[Title centered, back button left, action icons right (search, profile, etc.)]<\/span><\/p>\n <p>\u2022 Drawer\/Side Menu: <span class=\"placeholder\">[Slide-out menu, user profile at top, nav links with icons]<\/span><\/p>\n <p>\u2022 Tab Switcher: <span class=\"placeholder\">[Horizontal scrollable tabs, underline indicator]<\/span><\/p>\n <p>\u2022 Breadcrumbs: <span class=\"placeholder\">[Chevron separators, clickable parent links]<\/span><\/p>\n <p>\u2022 Pagination Dots: <span class=\"placeholder\">[Carousel indicators, current page highlighted]<\/span><\/p>\n <br>\n <p><strong>4. Cards & Lists (8 variants)<\/strong><\/p>\n <p>\u2022 Basic Card: <span class=\"placeholder\">[White\/light background, subtle shadow, 8\u201316px border radius, 16px padding]<\/span><\/p>\n <p>\u2022 Image Card: <span class=\"placeholder\">[Image top, title + description below, CTA button]<\/span><\/p>\n <p>\u2022 Horizontal Card: <span class=\"placeholder\">[Thumbnail left, content right, compact layout]<\/span><\/p>\n <p>\u2022 Product Card: <span class=\"placeholder\">[Product image, name, price, rating, add-to-cart button]<\/span><\/p>\n <p>\u2022 List Item: <span class=\"placeholder\">[Icon\/avatar left, title + subtitle, chevron right for navigation]<\/span><\/p>\n <p>\u2022 Swipeable List Item: <span class=\"placeholder\">[Swipe-left reveals delete\/archive actions]<\/span><\/p>\n <p>\u2022 Avatar List Item: <span class=\"placeholder\">[Profile pic, name, status\/timestamp, message preview]<\/span><\/p>\n <p>\u2022 Expandable List Item: <span class=\"placeholder\">[Accordion-style, tap to expand details]<\/span><\/p>\n <br>\n <p><strong>5. Modals & Overlays (5 variants)<\/strong><\/p>\n <p>\u2022 Alert Dialog: <span class=\"placeholder\">[Centered modal, title, message, 1\u20132 action buttons]<\/span><\/p>\n <p>\u2022 Bottom Sheet: <span class=\"placeholder\">[Slides up from bottom, drag-to-close handle, list OR form content]<\/span><\/p>\n <p>\u2022 Full-Screen Modal: <span class=\"placeholder\">[Covers entire screen, close X top-right, header + content]<\/span><\/p>\n <p>\u2022 Action Sheet: <span class=\"placeholder\">[iOS-style list of actions, cancel button at bottom]<\/span><\/p>\n <p>\u2022 Toast\/Snackbar: <span class=\"placeholder\">[Brief notification, bottom OR top, auto-dismiss, optional action]<\/span><\/p>\n <br>\n <p><strong>6. Feedback & Status (6 variants)<\/strong><\/p>\n <p>\u2022 Loading Spinner: <span class=\"placeholder\">[Circular progress indicator, primary color, small\/medium\/large sizes]<\/span><\/p>\n <p>\u2022 Progress Bar: <span class=\"placeholder\">[Horizontal bar, filled portion shows %, label optional]<\/span><\/p>\n <p>\u2022 Skeleton Loader: <span class=\"placeholder\">[Gray placeholder blocks with shimmer animation while content loads]<\/span><\/p>\n <p>\u2022 Empty State: <span class=\"placeholder\">[Illustration + message + CTA when no content available]<\/span><\/p>\n <p>\u2022 Error State: <span class=\"placeholder\">[Error icon, message, \"Retry\" button]<\/span><\/p>\n <p>\u2022 Badge\/Notification Dot: <span class=\"placeholder\">[Small circle with count OR just dot, red color, positioned on icons]<\/span><\/p>\n <br>\n <p><strong>7. Media Components (4 variants)<\/strong><\/p>\n <p>\u2022 Avatar: <span class=\"placeholder\">[Circular profile image, 32\/48\/64\/96px sizes, fallback initials if no image]<\/span><\/p>\n <p>\u2022 Image Gallery: <span class=\"placeholder\">[Grid layout, tap to expand full-screen with swipe navigation]<\/span><\/p>\n <p>\u2022 Video Player: <span class=\"placeholder\">[Play\/pause, progress bar, full-screen toggle, volume control]<\/span><\/p>\n <p>\u2022 Image Placeholder: <span class=\"placeholder\">[Gray box with image icon while loading]<\/span><\/p>\n <br>\n <p><strong>8. Form Components (5 variants)<\/strong><\/p>\n <p>\u2022 Date Picker: <span class=\"placeholder\">[Calendar UI OR native picker, selected date highlight]<\/span><\/p>\n <p>\u2022 Time Picker: <span class=\"placeholder\">[Clock face OR scrollable hours\/minutes]<\/span><\/p>\n <p>\u2022 Stepper: <span class=\"placeholder\">[Plus\/minus buttons, number display, quantity selector]<\/span><\/p>\n <p>\u2022 Slider: <span class=\"placeholder\">[Horizontal track, draggable thumb, min\/max values, label]<\/span><\/p>\n <p>\u2022 Rating: <span class=\"placeholder\">[5-star display, filled\/unfilled states, tap to rate]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udcf1 Key Screens (8\u201310 Templates):<\/strong><\/p>\n <p>\u2022 Splash Screen: <span class=\"placeholder\">[App logo centered, brand color background OR animation]<\/span><\/p>\n <p>\u2022 Onboarding (3 screens): <span class=\"placeholder\">[Carousel with illustrations, benefit messaging, \"Skip\" option, pagination dots]<\/span><\/p>\n <p>\u2022 Login\/Signup: <span class=\"placeholder\">[Email + password inputs, social login buttons, \"Forgot password?\" link]<\/span><\/p>\n <p>\u2022 Home\/Dashboard: <span class=\"placeholder\">[Header with greeting\/search, scrollable content cards, bottom tab bar]<\/span><\/p>\n <p>\u2022 List\/Feed Screen: <span class=\"placeholder\">[Scrollable vertical list, pull-to-refresh, filter\/sort options]<\/span><\/p>\n <p>\u2022 Detail Screen: <span class=\"placeholder\">[Hero image, title, description, action buttons, related items]<\/span><\/p>\n <p>\u2022 Profile Screen: <span class=\"placeholder\">[Avatar, name, bio, stats, settings\/edit button]<\/span><\/p>\n <p>\u2022 Settings Screen: <span class=\"placeholder\">[Grouped list items, toggles, navigation to sub-settings]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udd27 Interaction Patterns:<\/strong><\/p>\n <p>\u2022 Tap: <span class=\"placeholder\">[Visual feedback \u2014 scale down 95% OR background color change for 100ms]<\/span><\/p>\n <p>\u2022 Swipe: <span class=\"placeholder\">[Horizontal swipe for carousels, vertical for scrolling, swipe-to-delete]<\/span><\/p>\n <p>\u2022 Pull-to-Refresh: <span class=\"placeholder\">[Spinner at top, release to trigger reload]<\/span><\/p>\n <p>\u2022 Long Press: <span class=\"placeholder\">[Context menu OR haptic feedback + action sheet]<\/span><\/p>\n <p>\u2022 Drag & Drop: <span class=\"placeholder\">[Reorder list items, visual elevation when dragged]<\/span><\/p>\n <p>\u2022 Animation Timing: <span class=\"placeholder\">[Fast 150ms for micro-interactions \/ 300ms for transitions \/ 500ms for complex animations]<\/span><\/p>\n <br>\n <p><strong>\u267f Accessibility Standards:<\/strong><\/p>\n <p>\u2022 Touch Targets: <span class=\"placeholder\">[Minimum 44\u00d744px (iOS) \/ 48\u00d748dp (Android)]<\/span><\/p>\n <p>\u2022 Contrast Ratio: <span class=\"placeholder\">[WCAG AA \u2014 4.5:1 for normal text, 3:1 for large text & UI elements]<\/span><\/p>\n <p>\u2022 Text Scaling: <span class=\"placeholder\">[Support system font sizes \u2014 test at 200% scale]<\/span><\/p>\n <p>\u2022 Screen Reader Labels: <span class=\"placeholder\">[Descriptive labels for all interactive elements]<\/span><\/p>\n <p>\u2022 Colorblind-Safe: <span class=\"placeholder\">[Don't rely solely on color to convey information \u2014 use icons\/text]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udcd0 Technical Specs:<\/strong><\/p>\n <p>\u2022 Screen Sizes: <span class=\"placeholder\">[iOS: 375\u00d7667 (SE), 390\u00d7844 (iPhone 13\/14), 430\u00d7932 (Pro Max) \/ Android: 360\u00d7640, 412\u00d7915]<\/span><\/p>\n <p>\u2022 Resolution: <span class=\"placeholder\">[Design at @2x (Retina), export @1x, @2x, @3x for iOS \/ mdpi, hdpi, xhdpi, xxhdpi for Android]<\/span><\/p>\n <p>\u2022 Safe Areas: <span class=\"placeholder\">[iOS notch\/Dynamic Island clearance \/ Android status bar & navigation bar]<\/span><\/p>\n <p>\u2022 Export Format: <span class=\"placeholder\">[SVG for icons \/ PNG @2x\/@3x for images \/ PDF for vectors]<\/span><\/p>\n <br>\n <p><strong>\u2705 Deliverables Required:<\/strong><\/p>\n <p>1. Complete UI kit file (Figma\/Sketch\/XD) with organized component library<\/p>\n <p>2. Design system documentation (colors, typography, spacing tokens)<\/p>\n <p>3. 8\u201310 key screen templates ready for customization<\/p>\n <p>4. Component states (default, hover, active, disabled, error, loading)<\/p>\n <p>5. Light mode + Dark mode variants (if applicable)<\/p>\n <p>6. Icon set (50+ icons in consistent style)<\/p>\n <p>7. Interactive prototype with navigation flows<\/p>\n <p>8. Developer handoff specs (dimensions, colors HEX\/RGB, font sizes)<\/p>\n <br>\n <p><strong>\ud83d\ude80 Output Format:<\/strong><\/p>\n <p>Deliver a production-ready mobile UI kit that enables rapid app design and development, maintains visual consistency, and adheres to platform-specific guidelines (iOS Human Interface \/ Android Material Design).<\/p>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83e\udde0 The Logic: 6 Design Principles<\/h3>\n <div class=\"logic-grid\">\n <div class=\"logic-item\">\n <h4>1\ufe0f\u20e3 Component Reusability<\/h4>\n <p>Build once, use everywhere. Each component must work in multiple contexts. Variants handle edge cases. Saves design & dev time.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>2\ufe0f\u20e3 Touch-First Design<\/h4>\n <p>44px minimum touch targets. Thumbs, not cursors. Bottom nav for one-handed use. Consider phone-holding ergonomics.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>3\ufe0f\u20e3 Platform Conventions<\/h4>\n <p>Respect iOS vs. Android norms. iOS: centered titles, swipe-back gestures. Android: floating action buttons, material elevation. Don't force one platform's UX onto another.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>4\ufe0f\u20e3 Performance Constraints<\/h4>\n <p>Mobile = limited resources. Optimize images. Minimize animations. Lazy-load content. Slow apps = uninstalled apps.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>5\ufe0f\u20e3 Scalable System<\/h4>\n <p>Design tokens (not hard-coded values). 8px grid. Type scale. New screens inherit the system. Easy to maintain & expand.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>6\ufe0f\u20e3 Accessibility First<\/h4>\n <p>20% of users have accessibility needs. High contrast, large targets, screen reader support aren't optional\u2014they're table stakes.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83c\udfa8 Output Preview: 4 Real-World Examples<\/h3>\n <div class=\"preview-grid\">\n <div class=\"preview-item\">\n <h4>Example 1: E-commerce Shopping App (iOS)<\/h4>\n <div class=\"preview-content\">\n <strong>Colors:<\/strong> Primary: Teal (#00B8D9), Success: Green, White backgrounds<br>\n <strong>Components:<\/strong> Product cards (image, name, price, \"Add to Cart\" button), bottom tab bar (Home, Categories, Cart, Profile), search bar with filter icon, swipeable image carousel<br>\n <strong>Screens:<\/strong> Home (featured products grid), Product Detail (hero image, price, size selector, reviews), Cart (list with quantity steppers), Checkout (payment form)<br>\n <strong>Typography:<\/strong> SF Pro Display (headings), SF Pro Text (body), 16sp base<br>\n <strong>Interactions:<\/strong> Pull-to-refresh, swipe product card to \"Quick Add\", haptic feedback on cart add\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 2: Fitness Tracking App (Android Material Design)<\/h4>\n <div class=\"preview-content\">\n <strong>Colors:<\/strong> Primary: Orange (#FF6F00), gradient accents, dark mode default<br>\n <strong>Components:<\/strong> Stat cards (steps, calories, distance with progress rings), floating action button (+ Add Workout), material bottom sheets, line charts for trends<br>\n <strong>Screens:<\/strong> Dashboard (today's stats, activity feed), Workout Detail (exercise list with timer), Goals (progress bars), Profile (avatar, achievements)<br>\n <strong>Typography:<\/strong> Roboto (all text), 14sp body, bold 24sp for stats<br>\n <strong>Interactions:<\/strong> FAB expands to quick actions, long-press workout to edit\/delete, swipe charts to change time period\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 3: Social Media Feed App (Cross-Platform)<\/h4>\n <div class=\"preview-content\">\n <strong>Colors:<\/strong> Primary: Purple (#7c3aed), light backgrounds, vibrant accent colors<br>\n <strong>Components:<\/strong> Post card (avatar, name, timestamp, image\/video, like\/comment\/share buttons), story circles (horizontal scrollable), bottom tab bar with center camera button<br>\n <strong>Screens:<\/strong> Feed (infinite scroll posts), Profile (bio, follower count, post grid), Notifications (list with avatars), Messages (chat list)<br>\n <strong>Typography:<\/strong> Inter (clean, modern), 15sp body, semibold for usernames<br>\n <strong>Interactions:<\/strong> Double-tap to like, swipe stories horizontally, pull-down to refresh feed\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 4: Banking\/Finance App (Minimalist & Secure)<\/h4>\n <div class=\"preview-content\">\n <strong>Colors:<\/strong> Primary: Navy Blue (#003366), Gold accents (#D4AF37), white cards<br>\n <strong>Components:<\/strong> Account balance card (large number, masked\/unmasked toggle), transaction list (merchant logo, amount, category icon), segmented control (All\/Income\/Expense), biometric authentication modal<br>\n <strong>Screens:<\/strong> Home (accounts overview, quick actions), Transactions (filterable list), Transfer (recipient selector, amount input), Settings (security options)<br>\n <strong>Typography:<\/strong> SF Pro (iOS) \/ Roboto (Android), 32sp for balance, 14sp for details<br>\n <strong>Interactions:<\/strong> Face ID\/fingerprint to reveal balance, swipe transaction for details, drag-to-confirm transfer\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83d\udd17 3-Step Chain Strategy<\/h3>\n <div class=\"chain-steps\">\n <div class=\"chain-step\" data-step=\"1\">\n <h4>Step 1: Design System Foundation<\/h4>\n <p><strong>Prompt:<\/strong> \"Create a design system foundation for a <span class=\"placeholder\">[app category]<\/span> mobile app targeting <span class=\"placeholder\">[audience]<\/span>. Define: (1) Color palette (primary, secondary, neutrals, semantic colors) with HEX codes and usage rules, (2) Typography system (font family, type scale 12sp\u201332sp, line heights), (3) Spacing tokens (8px grid multiples: 8, 16, 24, 32, 48), (4) Icon style (outlined\/filled) with 50+ icon list. Output: Design tokens document for Figma variables.\"<\/p>\n <p><strong>Expected Output:<\/strong> Foundational design system with color, type, spacing, and icon specifications ready to apply to components.<\/p>\n <\/div>\n <div class=\"chain-step\" data-step=\"2\">\n <h4>Step 2: Component Library Build<\/h4>\n <p><strong>Prompt:<\/strong> \"Using the design system, build 30+ mobile UI components in <span class=\"placeholder\">[Figma\/Sketch]<\/span>: (1) Buttons (6 variants: primary, secondary, tertiary, icon, disabled, loading), (2) Input fields (8 variants with states), (3) Cards (5 variants), (4) Navigation (bottom tab, top bar, drawer), (5) Modals (alert, bottom sheet, action sheet), (6) Feedback components (spinner, progress, toast, empty\/error states). Create component variants for all states (default, active, disabled, error). Screen size: 390\u00d7844px (iPhone 14).\"<\/p>\n <p><strong>Expected Output:<\/strong> Complete component library with all variants and states, organized in Figma with auto-layout and design tokens applied.<\/p>\n <\/div>\n <div class=\"chain-step\" data-step=\"3\">\n <h4>Step 3: Screen Templates & Prototype<\/h4>\n <p><strong>Prompt:<\/strong> \"Design 8 key screens using the component library: (1) Onboarding (3-screen carousel), (2) Login\/Signup, (3) Home\/Dashboard, (4) List\/Feed, (5) Detail View, (6) Profile, (7) Settings, (8) Checkout\/Form. Apply 16px screen margins, 8px component spacing. Create interactive prototype: bottom tab navigation, screen transitions (push\/modal), tap interactions. Export developer specs: component dimensions, color codes (HEX), font sizes, spacing values, icon assets (@2x\/@3x).\"<\/p>\n <p><strong>Expected Output:<\/strong> Production-ready screen templates with interactive prototype and complete developer handoff documentation.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83d\udca1 6 HITL (Human-in-the-Loop) Refinement Tips<\/h3>\n <div class=\"tips-list\">\n <div class=\"tip-item\">\n <strong>1. Device Testing Is Mandatory<\/strong>\n View designs on actual devices (iPhone, Android phones of various sizes). Screen mockups lie. Colors, text sizes, and touch targets feel different on glass.\n <\/div>\n <div class=\"tip-item\">\n <strong>2. Thumb Zone Audit<\/strong>\n Hold phone naturally. Can your thumb reach all interactive elements? Bottom third = easy, top corners = hard. Move primary actions to bottom.\n <\/div>\n <div class=\"tip-item\">\n <strong>3. Text Legibility at Arm's Length<\/strong>\n Open design on phone, hold at normal viewing distance (~12 inches). If body text is hard to read, increase to 16sp minimum. 14sp is too small for most users.\n <\/div>\n <div class=\"tip-item\">\n <strong>4. Dark Mode Reality Check<\/strong>\n If offering dark mode, test in actual low-light conditions. Pure black (#000000) causes smearing on OLED. Use dark gray (#121212) instead.\n <\/div>\n <div class=\"tip-item\">\n <strong>5. Component State Completeness<\/strong>\n Every interactive component needs 5+ states: default, hover\/pressed, active\/selected, disabled, loading, error. Missing states = broken UX in production.\n <\/div>\n <div class=\"tip-item\">\n <strong>6. Accessibility Audit with Tools<\/strong>\n Use Figma plugins (Stark, Contrast) to verify color contrast. Test with iOS VoiceOver or Android TalkBack. If screen reader experience is confusing, fix labels.\n <\/div>\n <\/div>\n <\/section>\n\n <div class=\"stats-footer\">\n <div class=\"stat\">\n <div class=\"stat-value\">7,800+<\/div>\n <div class=\"stat-label\">Words in Prompt<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">6<\/div>\n <div class=\"stat-label\">Design Principles<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">4<\/div>\n <div class=\"stat-label\">Real-World Examples<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">3<\/div>\n <div class=\"stat-label\">Chain Strategy Steps<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">6<\/div>\n <div class=\"stat-label\">HITL Tips<\/div>\n <\/div>\n <\/div>\n\n <div class=\"branding\">\n <h4>\ud83c\udf93 AiPro Institute\u2122<\/h4>\n <p>Empowering professionals with world-class AI prompt engineering resources<\/p>\n <p style=\"margin-top: 0.5rem; font-size: 0.85rem; color: #9ca3af;\">\n Part of the Digital UI\/UX & Web Design Collection\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n function copyPrompt() {\n const promptBox = document.querySelector('.prompt-box');\n const textToCopy = promptBox.innerText.replace('\ud83d\udccb Copy Prompt', '').trim();\n \n navigator.clipboard.writeText(textToCopy).then(() => {\n const btn = document.querySelector('.copy-btn');\n const originalText = btn.innerHTML;\n btn.innerHTML = '\u2705 Copied!';\n btn.style.background = '#10b981';\n \n setTimeout(() => {\n btn.innerHTML = originalText;\n btn.style.background = '#7c3aed';\n }, 2000);\n });\n }\n\n \/\/ Highlight placeholders on hover\n document.querySelectorAll('.placeholder').forEach(placeholder => {\n placeholder.addEventListener('mouseenter', function() {\n this.style.backgroundColor = '#fef3c7';\n this.style.padding = '2px 4px';\n this.style.borderRadius = '3px';\n });\n placeholder.addEventListener('mouseleave', function() {\n this.style.backgroundColor = 'transparent';\n this.style.padding = '0';\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Mobile App UI Kit – AiPro Institute\u2122 Prompt Library \ud83c\udfa8 AiPro Institute\u2122 Prompt Library Digital UI\/UX & Web Design \ud83d\udcf1 Mobile App UI Kit Comprehensive Design System with Reusable Components for iOS & Android \ud83d\udcca Skill: Advanced \u23f1\ufe0f Time: 50\u201370 min \ud83d\udcb3 Credit: High \ud83d\udcc1 Format: Figma \/ Sketch \/ XD \ud83d\udee0\ufe0f Tool Compatibility Model-agnostic…<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[130],"tags":[],"class_list":["post-4573","post","type-post","status-publish","format-standard","hentry","category-digital-ui-ux-web-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/comments?post=4573"}],"version-history":[{"count":4,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4573\/revisions"}],"predecessor-version":[{"id":4728,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4573\/revisions\/4728"}],"wp:attachment":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/media?parent=4573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/categories?post=4573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/tags?post=4573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}