Vibecoding Prompt: "Nuggets" — A Curated Information Discovery App Demo ## Project Overview Build a non-functional, visually-driven demo for a mobile app concept called "Nuggets". This is a pitch/showcase prototype — buttons don't need to work, data can be hardcoded. The goal is to communicate the idea and vibe beautifully. ## Core Concept Nuggets is an app that lets users select topics of interest (Technology, Music, Literature, Film, Finance, etc.). It then "scans" Twitter/X for the most relevant, popular, and recent tweets on those topics, reads them, and distills clusters of tweets into a single, sharp headline — delivered to the user as a notification. Tagline: "Less doomscrolling. More nuggets." ## Aesthetic & Vibe - Color palette: Deep matte black background, rich gold (#D4AF37 / #FFD700) accents, off-white text, subtle dark-gray card surfaces. - Mood: Slick, premium, editorial — think luxury watch brand meets modern fintech app. - Visual motif: Literal gold "nuggets" — small glowing gold shapes (rounded, organic pebble forms) that represent curated pieces of information. Use them as bullet points, loading indicators, and decorative elements. - Typography: A clean modern serif for headlines (e.g., Fraunces, Playfair) paired with a crisp sans-serif (Inter, Geist) for UI. - Micro-interactions: Subtle gold shimmer, soft glow on hover, smooth fades. Nothing flashy — restrained elegance. ## Pages / Sections to Build ### 1. Landing / Hero - Bold headline: "Less doomscrolling. More nuggets." - Short subcopy explaining the concept. - A decorative cluster of animated gold nuggets. - CTA button: "Get the Nuggets" (non-functional). ### 2. Topics of Interest - A grid of selectable topic chips/cards (Technology, Music, Literature, Film, Sports, Finance, Politics, Science, etc.). - Selected topics get a gold border/glow. ### 3. "How It Works" — The Transformation Showcase (KEY PAGE) This is the hero demonstration page. Split layout: - Left side: Show 5 sample tech tweets stacked as cards (with fake usernames, avatars, and realistic tweet content about, say, a new AI model launch). Add a visual "distillation" effect — an animated gold line or flowing particles showing the 5 tweets converging into a single nugget. - Right side: A realistic iPhone mockup (rounded frame, notch, lock screen or home screen visible) displaying a push notification from "Nuggets" with the single distilled headline (e.g., "OpenAI drops GPT-5: faster, cheaper, and now natively multimodal."). The notification should have the gold nugget icon as the app icon. ### 4. Value Proposition Section Three short pillars with gold nugget icons: - Curated, not crawled — Only what matters. - Headlines, not threads — Read in seconds. - Signal, not noise — Reclaim your attention. ### 5. Footer Minimal — logo (a gold nugget + "Nuggets" wordmark), tagline, fake social links. ## Technical Notes - Single-page scrolling site OR multi-route, your call — prioritize visual impact. - Fully responsive, but design mobile-second; the desktop pitch view is primary. - Use placeholder/hardcoded content throughout. No backend, no real API calls. - Add gentle scroll-triggered animations (fade-ins, nugget particle effects). ## Deliverable A polished, presentation-ready demo that makes a viewer instantly get the product in under 10 seconds and want to use it.