Por qué esta versión es más potente: El - "Build a high-end, brutalist Black and White (B&W) web app focused on mobile addiction recovery through...
Generated Prompt
## APPLICATION OVERVIEW The application is a high-end, brutalist web app designed to aid in mobile addiction recovery through social friction and exclusive status. It combines competitive elements, community challenges, and AI-driven behavioral coaching to foster accountability and encourage users to reduce their screen time. ## CORE FEATURES 1. **Community Hub**: A competitive ranking system that lists users based on their 'Least Screen Time', providing transparency into app usage breakdowns to create social pressure. 2. **The Gauntlet (Weekly Challenges)**: A section offering time-limited challenges such as 'Digital Fast' or 'Midnight Blackout', where users can commit to participate and see a counter of current competitors. 3. **Badge Vault**: Displays 'Exclusive Insignias' categorized by rarity (Common, Rare, Legendary), awarded only upon successful challenge completion, fostering a desire for achievement. 4. **Social Comparison**: Badges are visible next to usernames in the ranking list, allowing users to compare their achievements with friends, enhancing competition. 5. **Knowledge Chat**: A minimalist text-only feed where users can share focus-hacks and tips for reducing screen time. 6. **Personal AI Advisor**: Offers personalized advice based on user app data, displays active challenges with progress bars, and showcases earned badges in a minimalist trophy case. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist, focusing on clean lines, ample white space, and a striking black-and-white color palette to create a high-end, editorial feel. - **Color Mode**: Light theme with dark text on light backgrounds; a strict zero-gray palette (#000000 and #FFFFFF) is implemented throughout. - **Layout**: Mobile-first design featuring a simple, one-column layout with 1px solid borders and square corners. Each section is clearly delineated to enhance usability and focus on key content. - **Typography**: Bold font choices with clear hierarchy for headings, body text, and buttons to ensure readability and visual impact. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for strong type safety and maintainability. - **Styling**: Tailwind CSS for rapid styling and a responsive design approach. - **UI Components**: Utilize shadcn/ui for high-quality, minimalist UI components. - **State Management**: Implement state management with Context API or a suitable library if needed for managing global state. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui. 2. **Define Routing**: Set up routing for the main components of the app: Community Hub, Gauntlet Challenges, Badge Vault, Knowledge Chat, and Personal AI Advisor. 3. **Build Community Hub**: Create a competitive ranking system that fetches and displays user data, with functionality to drill down into individual app usage. 4. **Implement Challenges Section**: Develop the Gauntlet feature, allowing users to commit to challenges and track participation. 5. **Design Badge Vault**: Create a visual representation of badges with categorization by rarity, ensuring that badges are only displayed upon successful completion of challenges. 6. **Integrate AI Advisor**: Develop the AI Behavioral Coaching functionality, ensuring personalized feedback based on user data and challenge progress. 7. **Test User Interactions**: Conduct user testing to refine the experience, ensuring that interactions feel instant and engaging. ## USER EXPERIENCE Users will navigate through a clean, minimalist interface that emphasizes their progress and status within the community. Key interactions include committing to challenges, viewing their ranking and badges, and receiving direct, personalized feedback from the AI advisor. The design ensures that all elements are responsive, providing a seamless experience on mobile devices. Notifications for challenge completions or failures will enhance user engagement and accountability.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
