File size: 4,141 Bytes
d491dc1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | # Emergent & Stitch Execution Guide: HyperFlow Zomato-District UI
This file serves as the definitive input instructions for **Emergent** (using the Claude Fable model) to generate, refine, and wire the visual layers of the **HyperFlow 3.0** platform in **Google Stitch**.
---
## 1. System Prompt & Instruction for Emergent
Copy and paste the following block directly as your initial prompt to Emergent:
```text
You are an expert design engineer running Claude Fable in Google Stitch. I have uploaded the 'EMERGENT_INSTRUCTIONS.md' file.
Analyze this document to:
1. Initialize the Obsidian Hyperflow Design System using the exact color tokens, typography settings (Inter for UI, JetBrains Mono for metrics), and 8px/4px layout rhythm.
2. Edit and generate all 16 screen permutations described in the document.
3. Purge all placeholders: use authentic high-resolution restaurant images, real food menu photos, and proper payment provider logos (no cartoon drawings or placeholder cards).
4. Implement haptic click triggers, hover highlights, and haptic-style transitions between panels.
Read the uploaded EMERGENT_INSTRUCTIONS.md fully before starting the generation process.
```
---
## 2. Design System Configuration (Stitch JSON Settings)
Ensure your Stitch project's design system parameters match the following:
```json
{
"designTheme": {
"colorMode": "DARK",
"font": "INTER",
"roundness": "ROUND_EIGHT",
"customColor": "#FF0077",
"saturation": 3,
"namedColors": {
"background": "#040406",
"surface": "#0A0A0F",
"surface-elevated": "#14141F",
"primary": "#FF0077",
"secondary": "#8F00FF",
"success": "#00E676",
"warning": "#FFB300",
"border-glass": "rgba(255, 255, 255, 0.06)"
}
},
"deviceType": "MOBILE"
}
```
---
## 3. Screen Specifications (All 16 Screens)
### A. Mobile Smartphone Client (11 Screens/States)
1. **Splash & Onboarding** – Centered glowing monogram logo with a radial backdrop fade and "Continue with Phone" button.
2. **Auth Portal** – Phone login sheet prompting OTP passcode entry with haptic-feedback keypad.
3. **Home Discovery Feed** – Top location header (Indiranagar, BLR), promo card carousel, tab switches ("Zomato Food" vs. "Instamart Store"), category pills, and "AI Recommended Pick of the Day".
4. **Search / Autocomplete** – Search bar with text input and autocomplete dropdown tags for trending dishes.
5. **Restaurant Detail Page** – Parallax header image, menu cards with calorie/protein badges, and floating bottom basket summary.
6. **Cart Drawer** – Slide-up panel displaying active orders, Ev vs. Normal delivery options, and the circular **AI Macro Nutrition Progress Ring**.
7. **Coupon Selection** – Coupon drawer showcasing active codes (`DIWALI50`, `HYPERPRO`, `FREEFEES`) with active borders.
8. **Secure Payment Screen** – Selector for Google Pay, Paytm, and co-branded credit cards. Confirming orders triggers full-screen `canvas-confetti` celebrations.
9. **Active Delivery Tracker** – Leaflet-based dark tiles map with coordinates from Patia Warehouse to Gaurav's home (Plot Lp 60, Prasanti Vihar). Animates a rider marker.
10. **AI Agent Chat Console** – Typewriter dialog window, displaying active tool executions as glass badges.
11. **Dineout Slot Booking** – Booking slots calendar for premium hotels (e.g. Mayfair Lagoon) with party size counters.
### B. Operations Control Room Dashboard (5 Screens/Tabs)
12. **System Telemetry Quadrant** – Plots live PSI (Population Stability Index) feature drift and Outbox queue sizes on area charts.
13. **Restaurant SLA Dashboard** – Lists active kitchen preparation timers, transitioning borders to red as limits are reached.
14. **Dark Store Picking Console** – Warehouse checklist showing aisle coordinates (e.g. Aisle 5, C3) and "Mark Packed" checkbox triggers.
15. **Geospatial Dispatch Map** – Renders delivery routes, showing rider velocity (`m/s`) and weather sensor anomalies.
16. **ML Guard / Dispute Triage** – Fraud monitoring table illustrating dispute details and semantic plausibility indicators.
|