You're a product designer. Design a polished mobile app UI for a habit-tracking app called "Streak" — shown as 3 iPhone screens side by side in a single self-contained HTML page: (1) a home screen with today's habits and progress rings, (2) a habit-detail screen with a streak calendar and stats, (3) an 'add habit' screen. Make it look like a real, modern iOS app — clean type, a considered color system, realistic components, proper spacing inside device frames. Use inline SVG for icons and UI chrome (no external icon libraries).
This test uses real image generation for any photographic content (e.g. a user avatar or an empty-state illustration). Where you want a generated image, output this exact tag and the harness will replace it with a real image:
<!-- IMG-GEN prompt="a friendly minimal illustration of ..." size="1024x1024" -->
NOTE TO THE VIEWER: to run this prompt yourself, you'll need to paste in your own OpenAI API key for the image generation step.
Return only the HTML.
…