starry-skin
Meghana JkBuild a complete cross-platform mobile app (iOS + Android) called SUGI — an AI-powered skincare companion for Gen Z users. The app is completely free with no paywalls or subscriptions. --- 🎨 DESIGN AESTHETIC - Bright, playful, Gen Z energy - Bold gradients, soft pastels mixed with vibrant accent colors (coral, lavender, mint, sky blue) - Rounded corners, bubbly UI elements, micro-animations on every interaction - Fun, conversational tone throughout all copy and empty states - Dark mode support - Custom illustrated empty states and onboarding screens - Typography: modern, slightly chunky sans-serif (like DM Sans or Plus Jakarta Sans) --- 📱 APP STRUCTURE — SCREENS & NAVIGATION Bottom tab navigation with 5 tabs: 1. Home (Dashboard) 2. Scan (AI Skin Analysis) 3. Routine 4. Progress 5. Profile --- 🔐 AUTH & ONBOARDING - Splash screen with SUGI logo animation - Onboarding carousel (3–4 slides): explain AI scan, routine tracking, progress photos - Sign up / Login with Email, Apple, Google - After auth: skin profile quiz (skin type, concerns, age range, climate, allergies, current products used) - Quiz results generate an initial skin profile saved to user account --- 🏠 HOME (DASHBOARD) - Personalized greeting: "Hey [Name], your skin is glowing today ✨" - Daily skin tip card (rotates daily) - Today's routine checklist (AM/PM steps with checkboxes) - Streak counter (days consistent with routine) - Quick action buttons: "Scan My Skin", "Log Today", "View Progress" - Recent AI scan summary card - Recommended products carousel - Skin score widget (0–100) based on recent scans and routine consistency - Notifications/reminders bell icon --- 📸 AI SKIN ANALYSIS (SCAN TAB) - Camera screen with face oval overlay guide - Upload photo OR take live photo - AI analyzes the photo and detects: • Skin type (oily, dry, combination, normal, sensitive) • Acne & breakouts (location, severity) • Dark spots & hyperpigmentation • Fine lines & wrinkles • Pores (enlarged, clogged) • Redness & irritation • Under-eye circles • Skin texture & tone evenness • Hydration level estimate • UV damage indicators - Results screen with: • Annotated face map highlighting detected issues • Skin score (0–100) • Detailed breakdown per concern with severity level • Personalized advice per concern • Recommended ingredients to look for • Ingredients to avoid • Suggested product types - Save scan to history - Share scan results card (as image) - Scan history list with date, thumbnail, score --- 🛍️ PERSONALIZED PRODUCT RECOMMENDATIONS - Dedicated section on Home and in Scan results - Products recommended based on: scan results + skin profile quiz + routine gaps - Each product card shows: • Product image • Name, brand • Key ingredients • Why it's recommended for the user (AI-generated reason) • Skin concern it targets • User ratings • Link to buy (external) - Filter by: category (cleanser, moisturizer, SPF, serum, toner, eye cream, etc.), concern, ingredient, price range - Save/bookmark products to a "My Wishlist" collection - "Build My Routine" button that auto-generates a routine from recommended products --- 📋 SKINCARE ROUTINE TRACKER (ROUTINE TAB) - AM Routine and PM Routine tabs - Add steps manually or from recommended products - Each step: • Product name, step type (cleanse, tone, treat, moisturize, protect) • Application instructions • Wait time between steps (optional timer) • Drag-to-reorder - Daily check-in: mark each step as done - Streak tracking (daily, weekly, monthly) - Routine reminders (push notifications, custom time for AM and PM) - "Routine Score" based on completeness - Suggested steps if routine is incomplete (e.g., "You're missing SPF!") - Edit/delete steps - Routine templates: Beginner, Anti-acne, Anti-aging, Brightening, Sensitive Skin --- 📈 PROGRESS TRACKING (PROGRESS TAB) - Before & After photo comparison (side-by-side slider) - Photo log: take or upload weekly check-in photos - Timeline gallery of all progress photos - Skin score graph over time (line chart) - Per-concern trend charts (e.g., acne improving over 4 weeks) - Milestone badges: "First Scan", "7-Day Streak", "Skin Score +10", etc. - Monthly skin report summary card - Share progress as a beautifully designed card image --- 👤 PROFILE TAB - Profile photo, name, username - Edit skin profile / re-take quiz - Saved products (wishlist) - Scan history - Routine history - Achievements & badges collection - Settings: • Notification preferences (AM/PM reminder times) • Theme (light/dark) • Units & preferences • Privacy settings • Delete account • About / FAQ - Logout --- 🔔 NOTIFICATIONS - AM routine reminder (custom time) - PM routine reminder (custom time) - Weekly progress check-in reminder - Daily skin tip push notification - Streak at-risk warning ("Don't break your 5-day streak!") - Milestone celebration alerts --- 🧠 AI & BACKEND - Use any suitable AI vision API for skin analysis (e.g., OpenAI Vision, Google Vision, or a custom model) - Use any suitable backend (Supabase or Firebase recommended) for: • User auth (email, Apple, Google) • Storing scan results, photos, routines, progress • Product database • User profile & preferences - All user data stored securely, photos stored in cloud storage - Offline support for routine check-ins (sync when online) --- 📦 TECHNICAL REQUIREMENTS - React Native with Expo (for cross-platform iOS + Android) - TypeScript throughout - Smooth animations using Reanimated or Moti - Camera integration (Expo Camera) - Image picker (Expo Image Picker) - Push notifications (Expo Notifications) - Local storage for offline support - Clean folder structure: /screens, /components, /hooks, /services, /store, /assets - State management: Zustand or Redux Toolkit - Navigation: React Navigation (stack + bottom tabs) --- 🌟 EXTRA DETAILS - App name: SUGI - Completely free — no subscriptions, no paywalls, no ads - Friendly, encouraging micro-copy throughout ("Your skin is on a journey 🌱") - Accessibility: proper contrast, font scaling support - Loading skeletons on all async screens - Error states with illustrated empty states - Haptic feedback on key interactions - Confetti animation on milestone achievements
Comments (0)
Sign in to leave a comment
System Requirements
System Requirements Document (SRD) for Project: starry-skin
1. Introduction
The starry-skin project, envisioned by Meghana Jk, is a cross-platform mobile application named SUGI — an AI-powered skincare companion tailored for Gen Z users. The app is designed to provide a free, engaging, and personalized skincare experience, leveraging AI technology to analyze skin health, recommend routines, and track progress. With a focus on inclusivity, accessibility, and community, SUGI aims to empower users to achieve their skincare goals while fostering a sense of connection and encouragement.
This document outlines the system requirements for starry-skin, ensuring alignment with Meghana's vision and the needs of the target audience in India and beyond.
2. System Overview
SUGI is a mobile application that combines AI-driven skin analysis, personalized skincare routines, and progress tracking into a vibrant, user-friendly platform. The app will feature:
- AI-powered skin analysis using high-level insights.
- Personalized skincare routines based on user profiles and AI recommendations.
- Progress tracking with visual comparisons and milestone achievements.
- Social sharing features to foster community engagement.
- A playful, Gen Z-friendly design aesthetic with support for light and dark modes.
The app will be developed using React Native for cross-platform compatibility (iOS and Android) and will integrate AI models and backend services to deliver a seamless user experience.
3. Functional Requirements as Story Points
- As a User, I should be able to sign up or log in using Email, Apple, or Google.
- As a User, I should be able to complete a skin profile quiz to generate a personalized skincare profile.
- As a User, I should be able to view a personalized dashboard with daily tips, routine checklists, and skin scores.
- As a User, I should be able to perform an AI skin analysis by uploading or taking a photo.
- As a User, I should be able to view high-level insights from the AI analysis, including skin type, hydration, and key concerns.
- As a User, I should be able to save and view my scan history.
- As a User, I should be able to track my skincare routine and mark steps as completed.
- As a User, I should be able to view progress through before-and-after photos, graphs, and milestone badges.
- As a User, I should be able to share my progress or achievements with friends via social media or chat.
- As a User, I should be able to receive personalized product recommendations based on my skin profile and routine gaps.
- As a User, I should be able to save recommended products to a wishlist.
- As a User, I should be able to customize notifications for reminders and tips.
- As a User, I should be able to switch between light and dark modes.
4. User Personas
1. Gen Z User
- Age Range: 18–25
- Goals: Improve skin health, learn about skincare, track progress, and share achievements with friends.
- Pain Points: Overwhelmed by skincare options, lack of personalized advice, and difficulty staying consistent with routines.
2. Casual Skincare Enthusiast
- Age Range: 26–35
- Goals: Maintain a simple skincare routine, monitor skin health, and discover effective products.
- Pain Points: Limited time for complex routines, difficulty finding trustworthy product recommendations.
5. Visuals Colors and Theme
Color Palette
- Background: #F9F6FF (Soft Lavender)
- Surface: #FFFFFF (Pure White)
- Text: #333333 (Deep Charcoal)
- Accent: #FF6F91 (Vibrant Coral)
- Muted Tones: #B3C7D6 (Soft Sky Blue)
Design Aesthetic
- Bright, playful, and energetic with bold gradients and soft pastels.
- Rounded corners and bubbly UI elements.
- Micro-animations for interactions.
- Fun, conversational tone throughout.
6. Signature Design Concept
The starry-skin homepage will feature an interactive galaxy map where each star represents a feature or section of the app. Users can navigate by "zooming" into stars, which animate and expand into feature-specific content. For example:
- The "Scan My Skin" star will pulse with a glowing effect, inviting users to explore AI skin analysis.
- The "Progress" star will display a constellation of milestones achieved, with twinkling animations for new badges.
- The background will subtly shift colors based on the time of day (e.g., soft lavender in the morning, deep indigo at night).
Micro-interactions include:
- Stars that "twinkle" when hovered over.
- Smooth zoom-in transitions when selecting a star.
- A subtle parallax effect as users scroll or navigate.
This design will create an unforgettable first impression, aligning with the app's playful and futuristic vibe.
7. Non-Functional Requirements
- Performance: The app should load within 2 seconds on average devices.
- Scalability: Support up to 1 million users without performance degradation.
- Accessibility: WCAG 2.1 compliance for contrast, font scaling, and screen reader support.
- Security: All user data must be encrypted in transit and at rest.
- Localization: Support for English and Hindi languages.
8. Tech Stack
Frontend
- React Native with Expo
- TypeScript
Backend
- Python with FastAPI
Database
- MySQL (primary database)
- MongoDB (for unstructured data like scan results)
AI Models
- GPT 5.4 for user-friendly responses.
- Google Nano Banana for image generation.
AI Tools
- Langchain for AI workflow orchestration.
- Litellm for LLM routing.
Orchestration
- Docker and docker-compose for local development.
- Kubernetes for server-side orchestration.
9. Assumptions and Constraints
- The app will be free with no paywalls or subscriptions.
- Users will need an internet connection for AI skin analysis and syncing data.
- Offline support will be limited to routine check-ins and local storage of progress photos.
10. Glossary
- AI Skin Analysis: The process of using artificial intelligence to analyze skin health and detect concerns.
- Skin Score: A numerical representation (0–100) of overall skin health based on AI analysis and routine consistency.
- Routine Tracker: A feature that allows users to log and track their skincare steps daily.
- Progress Card: A shareable visual summary of a user's skincare journey, including milestones and achievements.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No user flows yet.
The User Flow Agent will generate per-persona navigation diagrams after SRD updates.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No user flows yet.
The User Flow Agent will generate per-persona navigation diagrams after SRD updates.
No comments yet. Be the first!