{ "name": "design-good", "version": "2.0", "goal": "Generate GOOD-looking mobile apps (correct, polished, mobile-first — validated against the Gemini-family auto-rater).", "look": "good", "note": "For each prompt, generate with the design instruction. combined_prompt = prompt + two newlines + design_instruction, for generators taking a single prompt field; or send prompt as the user turn and design_instruction as the system instruction.", "design_instruction": "You are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic.", "count": 179, "recommended_variant": "floor", "variants": { "floor": { "desc": "v2-floor, the mechanized correctness floor — RECOMMENDED (= the top-level design_instruction). Crowned best by 2/3 rater families in a 6-rater blind panel, including the Gemini family (≈ Auto-rater v2, the grader that matters); never flagged most-AI-looking (4/66 flags); beats Build's default for every family.", "design_instruction": "You are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, "experimental_editorial": { "desc": "v2-next, aggressive distinctiveness (floor + typography/color/layout push) — EXPERIMENTAL, editorial/content genres only (photography, portfolio, resume, magazine). Claude-family raters crown it (mean 4.36) but Gemini penalizes it as over-styled (mean 2.91), so it would score WORSE on Auto-rater v2 for general apps. The one genre where every family prefers it is editorial (photography 6/6 unanimous). Do not use as the general 'good' arm.", "design_instruction": "You are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic.\n\nDISTINCTIVE — it must NOT read as a typical AI-generated app:\n- TYPOGRAPHY: do not default to Inter/Roboto/system-ui. Load a genre-fit character typeface (editorial: Fraunces/Newsreader; technical: JetBrains Mono/Space Grotesk; display: Clash/Satoshi/Bricolage Grotesque) via Google Fonts/Fontshare with a strong system fallback stack (if the webfont 404s it must fall back to a legible face, never Times). Use the character face for display/headings; BODY uses a highly-legible text face (a grotesque or workhorse serif), never a display face at body sizes. Weight & size extremes (300–800, 3×+ jumps) for headings only; body stays weight 400–600 and ≥16px.\n- COLOR — the Lila ban: NO indigo/violet/blue \"AI purple\" gradient, no orange→pink, no gradient text. Commit to ONE distinctive dominant hue from the brand's world + one sharp accent; flat or very subtle system-matched gradients only.\n- FORM: pick ONE deliberate radius identity — sharp/editorial (0–4px) OR soft (12–16px) — and apply it consistently (the goal is escaping reflexive rounded-2xl, not random inconsistency). Let borders, weight and contrast carry hierarchy — not a soft drop-shadow + frosted-glass card on everything. No reflexive glassmorphism, aurora glow, or floating 3D-blob backgrounds.\n- ICONS: no emoji-as-icons, no interchangeable Lucide-as-decoration, no colored top-border accent cards.\n- LAYOUT grammar: don't default to centered-hero + badge + three-icon-cards, or a generic bento grid; use intentional, asymmetric composition with ONE signature moment.\n- GENRE & DENSITY: match information density to the audience — data/enterprise apps get real density (not hollow whitespace); consumer apps get deliberate breathing room. Visual apps (gallery, generative, photo, meme, camera result) must SHOW the visual content richly on the first screen, not just controls.\n- COPY: specific, human, brand-voiced; no \"Build the future / all-in-one / supercharge\" filler.\n- MOTION: one orchestrated, purposeful reveal; respect prefers-reduced-motion; no reflexive beams/spotlight/shimmer/particles.\n- POV: commit to a brand personality, audience, and one emotional tone; every choice serves it.\nTHE TEST: would a designer immediately say \"an AI made this\"? If any doubt, push type, color, and layout further from the default." } }, "status": "v2 — DECIDED by a 6-rater / 3-model-family blind panel over the Stage-2 probe (11 apps × 3 arms = 33 builds, genre-stratified). The v2-floor instruction is the shipped 'good': preferred as best by 2/3 families (Gemini 23/33 best-picks, Fable 7/11), never flagged most-AI-looking (4/66 flags), and it beats Build's default for every family. The Gemini raters approximate Auto-rater v2, the grader this golden set calibrates. The aggressive 'distinctive' arm (v2-next) is demoted to variants.experimental_editorial: Claude-family raters crown it (mean 4.36) but Gemini penalizes it as over-styled (mean 2.91) — 'looks great to a Claude rater ≠ scores well on the Gemini auto-rater'. Objective enforcement holds regardless of rater: overflow 12→0, sub-14px text 178→8, slug leaks patched. Known gap: contrast is flat across arms (~14 fails) — instructions can't fix what the generator can't measure; enforce via the contrast lint post-check (golden-set/tools/contrast-lint, WCAG-AA gate) instead.", "prompts": [ { "id": "p001", "prompt": "plant doctor — snap a photo and tell me what's wrong", "category": "AI vision / multimodal", "tier": "core", "affordance": [ "camera" ], "combined_prompt": "plant doctor — snap a photo and tell me what's wrong\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p002", "prompt": "scan what's in my fridge and suggest a recipe", "category": "AI vision / multimodal", "tier": "core", "affordance": [ "camera" ], "combined_prompt": "scan what's in my fridge and suggest a recipe\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p003", "prompt": "snap a receipt and split it with friends", "category": "AI vision / multimodal", "tier": "core", "affordance": [ "camera" ], "combined_prompt": "snap a receipt and split it with friends\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p004", "prompt": "point my camera at a menu and translate it", "category": "AI vision / multimodal", "tier": "core", "affordance": [ "camera" ], "combined_prompt": "point my camera at a menu and translate it\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p005", "prompt": "identify the plant, dog, or bug in a photo", "category": "AI vision / multimodal", "tier": "core", "affordance": [ "camera" ], "combined_prompt": "identify the plant, dog, or bug in a photo\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p006", "prompt": "describe a scene and generate an image I can keep editing", "category": "AI vision / multimodal", "tier": "core", "affordance": [], "combined_prompt": "describe a scene and generate an image I can keep editing\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p007", "prompt": "turn my selfie into a fantasy avatar", "category": "AI vision / multimodal", "tier": "core", "affordance": [ "camera" ], "combined_prompt": "turn my selfie into a fantasy avatar\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p008", "prompt": "snake game with a high score", "category": "Games & playful", "tier": "core", "affordance": [], "combined_prompt": "snake game with a high score\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p009", "prompt": "2048", "category": "Games & playful", "tier": "core", "affordance": [], "combined_prompt": "2048\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p010", "prompt": "tap-the-dot reaction game", "category": "Games & playful", "tier": "core", "affordance": [], "combined_prompt": "tap-the-dot reaction game\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p011", "prompt": "would-you-rather, party edition", "category": "Games & playful", "tier": "core", "affordance": [], "combined_prompt": "would-you-rather, party edition\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p012", "prompt": "90s music trivia quiz", "category": "Games & playful", "tier": "core", "affordance": [], "combined_prompt": "90s music trivia quiz\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p013", "prompt": "to-do list", "category": "Productivity / micro-utilities", "tier": "core", "affordance": [], "combined_prompt": "to-do list\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p014", "prompt": "habit tracker with streaks", "category": "Productivity / micro-utilities", "tier": "core", "affordance": [], "combined_prompt": "habit tracker with streaks\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p015", "prompt": "pomodoro focus timer", "category": "Productivity / micro-utilities", "tier": "core", "affordance": [], "combined_prompt": "pomodoro focus timer\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p016", "prompt": "split the bill and calculate the tip", "category": "Productivity / micro-utilities", "tier": "core", "affordance": [], "combined_prompt": "split the bill and calculate the tip\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p017", "prompt": "voice notes that auto-transcribe and summarize", "category": "Productivity / micro-utilities", "tier": "core", "affordance": [ "voice" ], "combined_prompt": "voice notes that auto-transcribe and summarize\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p018", "prompt": "freelancer invoice generator", "category": "Professional / business", "tier": "core", "affordance": [], "combined_prompt": "freelancer invoice generator\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p019", "prompt": "a simple CRM for my leads", "category": "Professional / business", "tier": "core", "affordance": [], "combined_prompt": "a simple CRM for my leads\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p020", "prompt": "sales dashboard with charts", "category": "Professional / business", "tier": "core", "affordance": [], "combined_prompt": "sales dashboard with charts\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p021", "prompt": "a kanban board for my projects", "category": "Professional / business", "tier": "core", "affordance": [], "combined_prompt": "a kanban board for my projects\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p022", "prompt": "a calculator for my hourly freelance rate", "category": "Professional / business", "tier": "core", "affordance": [], "combined_prompt": "a calculator for my hourly freelance rate\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p023", "prompt": "a chatbot with a personality I pick", "category": "Chat / persona / assistant", "tier": "core", "affordance": [], "combined_prompt": "a chatbot with a personality I pick\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p024", "prompt": "AI cooking buddy that talks me through a recipe", "category": "Chat / persona / assistant", "tier": "core", "affordance": [ "voice" ], "combined_prompt": "AI cooking buddy that talks me through a recipe\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p025", "prompt": "AI journal that asks me one question a day", "category": "Chat / persona / assistant", "tier": "core", "affordance": [], "combined_prompt": "AI journal that asks me one question a day\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p026", "prompt": "meme generator", "category": "AI creative toys", "tier": "core", "affordance": [], "combined_prompt": "meme generator\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p027", "prompt": "make a birthday video for a friend", "category": "AI creative toys", "tier": "core", "affordance": [], "combined_prompt": "make a birthday video for a friend\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p028", "prompt": "sticker maker from my photos", "category": "AI creative toys", "tier": "core", "affordance": [ "camera" ], "combined_prompt": "sticker maker from my photos\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p029", "prompt": "workout tracker — sets and reps", "category": "Health & fitness", "tier": "core", "affordance": [], "combined_prompt": "workout tracker — sets and reps\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p030", "prompt": "water intake reminder", "category": "Health & fitness", "tier": "core", "affordance": [], "combined_prompt": "water intake reminder\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p031", "prompt": "flashcards from a photo of my notes", "category": "Education / study", "tier": "core", "affordance": [ "camera" ], "combined_prompt": "flashcards from a photo of my notes\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p032", "prompt": "solve a math problem from a picture", "category": "Education / study", "tier": "core", "affordance": [], "combined_prompt": "solve a math problem from a picture\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p033", "prompt": "a poll I can send to my group chat", "category": "Social", "tier": "core", "affordance": [], "combined_prompt": "a poll I can send to my group chat\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p034", "prompt": "a BeReal-style photo app for me and my friends", "category": "Social", "tier": "core", "affordance": [ "camera" ], "combined_prompt": "a BeReal-style photo app for me and my friends\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p035", "prompt": "a music player like Spotify", "category": "Media / e-commerce / finance", "tier": "core", "affordance": [], "combined_prompt": "a music player like Spotify\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p036", "prompt": "an online store for my sneakers", "category": "Media / e-commerce / finance", "tier": "core", "affordance": [], "combined_prompt": "an online store for my sneakers\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p037", "prompt": "a monthly budget tracker", "category": "Media / e-commerce / finance", "tier": "core", "affordance": [], "combined_prompt": "a monthly budget tracker\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p038", "prompt": "coffee shops near me on a map with a list", "category": "Location", "tier": "core", "affordance": [ "location" ], "combined_prompt": "coffee shops near me on a map with a list\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p039", "prompt": "a relaxing fishing island game", "category": "Games & playful", "tier": "marquee", "affordance": [], "combined_prompt": "a relaxing fishing island game\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p040", "prompt": "a cozy gardening game", "category": "Games & playful", "tier": "marquee", "affordance": [], "combined_prompt": "a cozy gardening game\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p041", "prompt": "a space exploration game", "category": "Games & playful", "tier": "marquee", "affordance": [], "combined_prompt": "a space exploration game\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p042", "prompt": "a creature-training world", "category": "Games & playful", "tier": "marquee", "affordance": [], "combined_prompt": "a creature-training world\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p043", "prompt": "a synthwave endless runner", "category": "Games & playful", "tier": "marquee", "affordance": [], "combined_prompt": "a synthwave endless runner\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p044", "prompt": "a top-down mini-golf game with physics", "category": "Games & playful", "tier": "marquee", "affordance": [], "combined_prompt": "a top-down mini-golf game with physics\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p045", "prompt": "a retro arcade snake with a twist", "category": "Games & playful", "tier": "marquee", "affordance": [], "combined_prompt": "a retro arcade snake with a twist\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p046", "prompt": "a time machine that reimagines me in past decades", "category": "AI creative toys", "tier": "marquee", "affordance": [], "combined_prompt": "a time machine that reimagines me in past decades\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p047", "prompt": "an interactive abstract art generator", "category": "AI creative toys", "tier": "marquee", "affordance": [], "combined_prompt": "an interactive abstract art generator\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p048", "prompt": "a lo-fi beat maker", "category": "AI creative toys", "tier": "marquee", "affordance": [], "combined_prompt": "a lo-fi beat maker\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p049", "prompt": "a live sports commentator for any game", "category": "AI creative toys", "tier": "marquee", "affordance": [], "combined_prompt": "a live sports commentator for any game\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p050", "prompt": "a personal portfolio", "category": "Personal / lifestyle", "tier": "marquee", "affordance": [], "combined_prompt": "a personal portfolio\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p051", "prompt": "a link-in-bio for my photography", "category": "Personal / lifestyle", "tier": "marquee", "affordance": [], "combined_prompt": "a link-in-bio for my photography\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p052", "prompt": "point my camera at a landmark, get its history", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera", "location" ], "combined_prompt": "point my camera at a landmark, get its history\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p053", "prompt": "scan a barcode and compare prices", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "scan a barcode and compare prices\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p054", "prompt": "snap a wine label for tasting notes", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "snap a wine label for tasting notes\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p055", "prompt": "live-translate a street sign", "category": "AI vision / multimodal", "tier": "extended", "affordance": [], "combined_prompt": "live-translate a street sign\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p056", "prompt": "scan my closet, suggest an outfit", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "scan my closet, suggest an outfit\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p057", "prompt": "point at the night sky, name the stars", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera", "location" ], "combined_prompt": "point at the night sky, name the stars\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p058", "prompt": "photograph a spreadsheet, turn it into a table", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "photograph a spreadsheet, turn it into a table\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p059", "prompt": "measure a room by pointing my camera", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "measure a room by pointing my camera\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p060", "prompt": "snap a business card, save the contact", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "snap a business card, save the contact\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p061", "prompt": "scan a document and sign it", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "scan a document and sign it\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p062", "prompt": "point at a product, pull up reviews", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "point at a product, pull up reviews\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p063", "prompt": "snap a rash, get first-aid guidance", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "snap a rash, get first-aid guidance\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p064", "prompt": "count objects in a photo — pills, coins, a crowd", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "count objects in a photo — pills, coins, a crowd\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p065", "prompt": "photograph a whiteboard and clean it up", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "photograph a whiteboard and clean it up\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p066", "prompt": "snap a car, identify make/model/year", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "snap a car, identify make/model/year\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p067", "prompt": "read a nutrition label, flag my allergens", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "read a nutrition label, flag my allergens\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p068", "prompt": "scan handwriting into typed text", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "scan handwriting into typed text\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p069", "prompt": "snap a mushroom, is it safe", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "snap a mushroom, is it safe\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p070", "prompt": "decode clothing wash symbols from a tag", "category": "AI vision / multimodal", "tier": "extended", "affordance": [], "combined_prompt": "decode clothing wash symbols from a tag\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p071", "prompt": "scan a book cover for summary + reviews", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "scan a book cover for summary + reviews\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p072", "prompt": "snap a meal, estimate calories", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "snap a meal, estimate calories\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p073", "prompt": "photograph leaves, ID the tree", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "photograph leaves, ID the tree\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p074", "prompt": "point at a movie poster, add to my watchlist", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "point at a movie poster, add to my watchlist\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p075", "prompt": "describe the scene out loud for low vision", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "voice" ], "combined_prompt": "describe the scene out loud for low vision\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p076", "prompt": "scan a receipt, log it to an expense category", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "scan a receipt, log it to an expense category\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p077", "prompt": "snap a stain, tell me how to remove it", "category": "AI vision / multimodal", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "snap a stain, tell me how to remove it\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p078", "prompt": "word-guess game like wordle", "category": "Games & playful", "tier": "extended", "affordance": [], "combined_prompt": "word-guess game like wordle\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p079", "prompt": "trivia battle vs an AI", "category": "Games & playful", "tier": "extended", "affordance": [], "combined_prompt": "trivia battle vs an AI\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p080", "prompt": "tap the right color before the timer", "category": "Games & playful", "tier": "extended", "affordance": [], "combined_prompt": "tap the right color before the timer\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p081", "prompt": "tower-stacking game", "category": "Games & playful", "tier": "extended", "affordance": [], "combined_prompt": "tower-stacking game\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p082", "prompt": "emoji memory match", "category": "Games & playful", "tier": "extended", "affordance": [], "combined_prompt": "emoji memory match\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p083", "prompt": "idle cookie-clicker", "category": "Games & playful", "tier": "extended", "affordance": [], "combined_prompt": "idle cookie-clicker\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p084", "prompt": "flappy-style tapper", "category": "Games & playful", "tier": "extended", "affordance": [], "combined_prompt": "flappy-style tapper\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p085", "prompt": "tic-tac-toe vs AI", "category": "Games & playful", "tier": "extended", "affordance": [], "combined_prompt": "tic-tac-toe vs AI\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p086", "prompt": "hangman with weird categories", "category": "Games & playful", "tier": "extended", "affordance": [], "combined_prompt": "hangman with weird categories\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p087", "prompt": "rock-paper-scissors with camera gestures", "category": "Games & playful", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "rock-paper-scissors with camera gestures\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p088", "prompt": "color-by-numbers pixel art", "category": "Games & playful", "tier": "extended", "affordance": [], "combined_prompt": "color-by-numbers pixel art\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p089", "prompt": "escape-room riddle game", "category": "Games & playful", "tier": "extended", "affordance": [], "combined_prompt": "escape-room riddle game\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p090", "prompt": "spot-the-difference from two photos", "category": "Games & playful", "tier": "extended", "affordance": [], "combined_prompt": "spot-the-difference from two photos\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p091", "prompt": "AI dungeon-master text adventure", "category": "Games & playful", "tier": "extended", "affordance": [], "combined_prompt": "AI dungeon-master text adventure\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p092", "prompt": "truth-or-dare party spinner", "category": "Games & playful", "tier": "extended", "affordance": [], "combined_prompt": "truth-or-dare party spinner\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p093", "prompt": "countdown to my next vacation", "category": "Productivity / micro-utilities", "tier": "extended", "affordance": [], "combined_prompt": "countdown to my next vacation\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p094", "prompt": "trip packing checklist", "category": "Productivity / micro-utilities", "tier": "extended", "affordance": [], "combined_prompt": "trip packing checklist\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p095", "prompt": "QR code for my wifi", "category": "Productivity / micro-utilities", "tier": "extended", "affordance": [], "combined_prompt": "QR code for my wifi\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p096", "prompt": "all-in-one unit converter", "category": "Productivity / micro-utilities", "tier": "extended", "affordance": [], "combined_prompt": "all-in-one unit converter\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p097", "prompt": "grocery list grouped by aisle", "category": "Productivity / micro-utilities", "tier": "extended", "affordance": [], "combined_prompt": "grocery list grouped by aisle\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p098", "prompt": "shared house shopping list", "category": "Productivity / micro-utilities", "tier": "extended", "affordance": [], "combined_prompt": "shared house shopping list\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p099", "prompt": "password generator + vault", "category": "Productivity / micro-utilities", "tier": "extended", "affordance": [], "combined_prompt": "password generator + vault\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p100", "prompt": "car maintenance log", "category": "Productivity / micro-utilities", "tier": "extended", "affordance": [], "combined_prompt": "car maintenance log\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p101", "prompt": "subscription tracker so I stop overpaying", "category": "Productivity / micro-utilities", "tier": "extended", "affordance": [], "combined_prompt": "subscription tracker so I stop overpaying\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p102", "prompt": "white-noise sleep timer", "category": "Productivity / micro-utilities", "tier": "extended", "affordance": [], "combined_prompt": "white-noise sleep timer\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p103", "prompt": "birthday reminder for everyone", "category": "Productivity / micro-utilities", "tier": "extended", "affordance": [], "combined_prompt": "birthday reminder for everyone\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p104", "prompt": "mileage log for work trips", "category": "Productivity / micro-utilities", "tier": "extended", "affordance": [ "location" ], "combined_prompt": "mileage log for work trips\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p105", "prompt": "gift ideas tracker per person", "category": "Productivity / micro-utilities", "tier": "extended", "affordance": [], "combined_prompt": "gift ideas tracker per person\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p106", "prompt": "random decision wheel", "category": "Productivity / micro-utilities", "tier": "extended", "affordance": [], "combined_prompt": "random decision wheel\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p107", "prompt": "meeting cost calculator", "category": "Professional / business", "tier": "extended", "affordance": [], "combined_prompt": "meeting cost calculator\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p108", "prompt": "contract clause explainer", "category": "Professional / business", "tier": "extended", "affordance": [], "combined_prompt": "contract clause explainer\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p109", "prompt": "cold email from a LinkedIn bio", "category": "Professional / business", "tier": "extended", "affordance": [], "combined_prompt": "cold email from a LinkedIn bio\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p110", "prompt": "voice-note standup summarizer", "category": "Professional / business", "tier": "extended", "affordance": [ "voice" ], "combined_prompt": "voice-note standup summarizer\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p111", "prompt": "quote builder for a contractor", "category": "Professional / business", "tier": "extended", "affordance": [], "combined_prompt": "quote builder for a contractor\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p112", "prompt": "shift scheduler for my team", "category": "Professional / business", "tier": "extended", "affordance": [], "combined_prompt": "shift scheduler for my team\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p113", "prompt": "inventory counter for my shop", "category": "Professional / business", "tier": "extended", "affordance": [], "combined_prompt": "inventory counter for my shop\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p114", "prompt": "commission calculator for reps", "category": "Professional / business", "tier": "extended", "affordance": [], "combined_prompt": "commission calculator for reps\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p115", "prompt": "debate partner that takes the other side", "category": "Chat / persona / assistant", "tier": "extended", "affordance": [], "combined_prompt": "debate partner that takes the other side\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p116", "prompt": "reflective listener that just mirrors me", "category": "Chat / persona / assistant", "tier": "extended", "affordance": [], "combined_prompt": "reflective listener that just mirrors me\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p117", "prompt": "Spanish tutor I chat with", "category": "Chat / persona / assistant", "tier": "extended", "affordance": [ "voice" ], "combined_prompt": "Spanish tutor I chat with\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p118", "prompt": "rubber-duck coding buddy", "category": "Chat / persona / assistant", "tier": "extended", "affordance": [], "combined_prompt": "rubber-duck coding buddy\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p119", "prompt": "interview practice bot for a job I paste", "category": "Chat / persona / assistant", "tier": "extended", "affordance": [], "combined_prompt": "interview practice bot for a job I paste\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p120", "prompt": "AI that texts like a historical figure", "category": "Chat / persona / assistant", "tier": "extended", "affordance": [], "combined_prompt": "AI that texts like a historical figure\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p121", "prompt": "turn my doodle into polished art", "category": "AI creative toys", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "turn my doodle into polished art\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p122", "prompt": "startup name generator", "category": "AI creative toys", "tier": "extended", "affordance": [], "combined_prompt": "startup name generator\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p123", "prompt": "tattoo design from a description", "category": "AI creative toys", "tier": "extended", "affordance": [], "combined_prompt": "tattoo design from a description\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p124", "prompt": "pet portrait in a painting style", "category": "AI creative toys", "tier": "extended", "affordance": [], "combined_prompt": "pet portrait in a painting style\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p125", "prompt": "album cover generator for my band", "category": "AI creative toys", "tier": "extended", "affordance": [], "combined_prompt": "album cover generator for my band\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p126", "prompt": "AI comic strip from a story I type", "category": "AI creative toys", "tier": "extended", "affordance": [], "combined_prompt": "AI comic strip from a story I type\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p127", "prompt": "fantasy map generator for my campaign", "category": "AI creative toys", "tier": "extended", "affordance": [], "combined_prompt": "fantasy map generator for my campaign\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p128", "prompt": "logo generator with color variants", "category": "AI creative toys", "tier": "extended", "affordance": [], "combined_prompt": "logo generator with color variants\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p129", "prompt": "rep counter using my camera", "category": "Health & fitness", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "rep counter using my camera\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p130", "prompt": "desk posture checker", "category": "Health & fitness", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "desk posture checker\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p131", "prompt": "lower-back stretch routine", "category": "Health & fitness", "tier": "extended", "affordance": [], "combined_prompt": "lower-back stretch routine\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p132", "prompt": "sleep log with trends", "category": "Health & fitness", "tier": "extended", "affordance": [], "combined_prompt": "sleep log with trends\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p133", "prompt": "couch-to-5k run coach", "category": "Health & fitness", "tier": "extended", "affordance": [ "location" ], "combined_prompt": "couch-to-5k run coach\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p134", "prompt": "cycle + period tracker", "category": "Health & fitness", "tier": "extended", "affordance": [], "combined_prompt": "cycle + period tracker\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p135", "prompt": "quiz me from a PDF I upload", "category": "Education / study", "tier": "extended", "affordance": [], "combined_prompt": "quiz me from a PDF I upload\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p136", "prompt": "spaced-repetition vocab trainer", "category": "Education / study", "tier": "extended", "affordance": [], "combined_prompt": "spaced-repetition vocab trainer\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p137", "prompt": "explain this like I'm five", "category": "Education / study", "tier": "extended", "affordance": [], "combined_prompt": "explain this like I'm five\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p138", "prompt": "periodic table explorer", "category": "Education / study", "tier": "extended", "affordance": [], "combined_prompt": "periodic table explorer\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p139", "prompt": "typing speed trainer", "category": "Education / study", "tier": "extended", "affordance": [], "combined_prompt": "typing speed trainer\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p140", "prompt": "travel phrasebook for my trip", "category": "Education / study", "tier": "extended", "affordance": [ "location" ], "combined_prompt": "travel phrasebook for my trip\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p141", "prompt": "anonymous confessions board for my dorm", "category": "Social", "tier": "extended", "affordance": [], "combined_prompt": "anonymous confessions board for my dorm\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p142", "prompt": "event RSVP with a live headcount", "category": "Social", "tier": "extended", "affordance": [], "combined_prompt": "event RSVP with a live headcount\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p143", "prompt": "group gift pool with contributions", "category": "Social", "tier": "extended", "affordance": [], "combined_prompt": "group gift pool with contributions\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p144", "prompt": "neighborhood tool-lending board", "category": "Social", "tier": "extended", "affordance": [], "combined_prompt": "neighborhood tool-lending board\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p145", "prompt": "shared photo album for a wedding", "category": "Social", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "shared photo album for a wedding\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p146", "prompt": "mood-based playlist generator", "category": "Media / e-commerce / finance", "tier": "extended", "affordance": [], "combined_prompt": "mood-based playlist generator\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p147", "prompt": "concert finder for my artists", "category": "Media / e-commerce / finance", "tier": "extended", "affordance": [ "location" ], "combined_prompt": "concert finder for my artists\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p148", "prompt": "price-drop tracker for a wishlist", "category": "Media / e-commerce / finance", "tier": "extended", "affordance": [], "combined_prompt": "price-drop tracker for a wishlist\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p149", "prompt": "stock + crypto portfolio glance", "category": "Media / e-commerce / finance", "tier": "extended", "affordance": [], "combined_prompt": "stock + crypto portfolio glance\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p150", "prompt": "loyalty punch-card wallet", "category": "Media / e-commerce / finance", "tier": "extended", "affordance": [], "combined_prompt": "loyalty punch-card wallet\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p151", "prompt": "compound interest visualizer", "category": "Media / e-commerce / finance", "tier": "extended", "affordance": [], "combined_prompt": "compound interest visualizer\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p152", "prompt": "day-trip itinerary from where I am", "category": "Location / travel", "tier": "extended", "affordance": [ "location" ], "combined_prompt": "day-trip itinerary from where I am\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p153", "prompt": "find a bathroom near me fast", "category": "Location / travel", "tier": "extended", "affordance": [ "location" ], "combined_prompt": "find a bathroom near me fast\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p154", "prompt": "remember my parking spot — photo + pin", "category": "Location / travel", "tier": "extended", "affordance": [ "camera", "location" ], "combined_prompt": "remember my parking spot — photo + pin\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p155", "prompt": "hiking trails by difficulty near me", "category": "Location / travel", "tier": "extended", "affordance": [ "location" ], "combined_prompt": "hiking trails by difficulty near me\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p156", "prompt": "tipping + currency cheat sheet by country", "category": "Location / travel", "tier": "extended", "affordance": [], "combined_prompt": "tipping + currency cheat sheet by country\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p157", "prompt": "flight delay + gate tracker", "category": "Location / travel", "tier": "extended", "affordance": [ "location" ], "combined_prompt": "flight delay + gate tracker\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p158", "prompt": "bedtime story with my kid's name", "category": "Kids / family", "tier": "extended", "affordance": [], "combined_prompt": "bedtime story with my kid's name\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p159", "prompt": "chore chart with stars", "category": "Kids / family", "tier": "extended", "affordance": [], "combined_prompt": "chore chart with stars\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p160", "prompt": "spelling-bee practice out loud", "category": "Kids / family", "tier": "extended", "affordance": [ "voice" ], "combined_prompt": "spelling-bee practice out loud\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p161", "prompt": "what can I cook with these 3 ingredients", "category": "Food / cooking", "tier": "extended", "affordance": [], "combined_prompt": "what can I cook with these 3 ingredients\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p162", "prompt": "week meal plan + grocery list", "category": "Food / cooking", "tier": "extended", "affordance": [], "combined_prompt": "week meal plan + grocery list\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p163", "prompt": "cocktail maker from my liquor shelf", "category": "Food / cooking", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "cocktail maker from my liquor shelf\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p164", "prompt": "paint calculator for a room", "category": "Home / DIY", "tier": "extended", "affordance": [], "combined_prompt": "paint calculator for a room\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p165", "prompt": "watering schedule for my houseplants", "category": "Home / DIY", "tier": "extended", "affordance": [], "combined_prompt": "watering schedule for my houseplants\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p166", "prompt": "home inventory for insurance", "category": "Home / DIY", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "home inventory for insurance\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p167", "prompt": "breed-specific dog care tips", "category": "Pets", "tier": "extended", "affordance": [], "combined_prompt": "breed-specific dog care tips\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p168", "prompt": "pet feeding + meds reminders", "category": "Pets", "tier": "extended", "affordance": [], "combined_prompt": "pet feeding + meds reminders\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p169", "prompt": "is this food safe for my dog", "category": "Pets", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "is this food safe for my dog\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p170", "prompt": "wedding seating-chart builder", "category": "Events / planning", "tier": "extended", "affordance": [], "combined_prompt": "wedding seating-chart builder\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p171", "prompt": "potluck sign-up, no duplicate dishes", "category": "Events / planning", "tier": "extended", "affordance": [], "combined_prompt": "potluck sign-up, no duplicate dishes\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p172", "prompt": "catalog my vinyl collection", "category": "Hobbies / collections", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "catalog my vinyl collection\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p173", "prompt": "board-game shelf with play counts", "category": "Hobbies / collections", "tier": "extended", "affordance": [], "combined_prompt": "board-game shelf with play counts\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p174", "prompt": "sneaker collection catalog", "category": "Hobbies / collections", "tier": "extended", "affordance": [ "camera" ], "combined_prompt": "sneaker collection catalog\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p175", "prompt": "guided breathing with a visual", "category": "Wellness / mindfulness", "tier": "extended", "affordance": [], "combined_prompt": "guided breathing with a visual\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p176", "prompt": "gratitude log, three a day", "category": "Wellness / mindfulness", "tier": "extended", "affordance": [], "combined_prompt": "gratitude log, three a day\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p177", "prompt": "daily affirmation generator", "category": "Wellness / mindfulness", "tier": "extended", "affordance": [], "combined_prompt": "daily affirmation generator\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p178", "prompt": "date-night idea spinner", "category": "Dating / relationships", "tier": "extended", "affordance": [], "combined_prompt": "date-night idea spinner\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." }, { "id": "p179", "prompt": "dating bio writer from my answers", "category": "Dating / relationships", "tier": "extended", "affordance": [], "combined_prompt": "dating bio writer from my answers\n\nYou are a senior product designer. Design an excellent, mobile-first interface. These rules OVERRIDE any default you'd otherwise reach for — Tailwind indigo, shadcn defaults, rounded-2xl-on-everything, Inter, dark-mode-by-default. Apply them to every screen you generate now and in every later edit.\n\nNO OVERFLOW AT 390px (implement, don't just intend): put overflow-x:hidden and max-width:100vw on the root. Give every img/video/canvas/iframe max-width:100%; height:auto; display:block. Give every flex/grid child that holds text or media min-width:0 (this is the #1 cause of \"impossible\" overflow). Put intrinsically wide content (tables, code, pill rows, carousels) in a wrapper with overflow-x:auto. Never set a fixed px width or min-width on a layout container — use %, rem, fr, or 100%; px widths only for icons/avatars ≤320px. Long names and multi-line / translated strings must wrap, never push the layout wider.\n\nTYPE FLOOR: root font-size 16px; size all text in rem; body ≥16px. The scale bottoms at 14px — NEVER use a smaller step (no text-xs) anywhere, including stat numbers, badges, tabs, captions, legends, footnotes, and table cells. Clear heading hierarchy; cap reading width ~60 characters.\n\nCONTRAST (lexical rule, since you can't measure it): body text is one high-contrast color per surface — near-black (#111–#1a1a1a) on light, near-white (#f5f5f5–#fff) on dark. Never mid-gray on a mid-tone, never tinted-on-tinted. Text over a gradient or image needs a solid or ≥60%-opacity scrim behind it. Use the accent hue only for large text (≥24px bold) and non-text UI — never for body copy.\n\nCOLOR SYSTEM: one neutral scale + a single accent + semantic success/danger only; no clashing colors. Do NOT default to dark mode — light or dark is a deliberate brand choice.\n\nBRAND: invent a real, human brand + product name and use only those. Treat any slug, ID, filename, or version string in this prompt as internal metadata — NEVER render it as visible copy anywhere: not in titles, subtitles, headers, footers, badges, captions, and not inside invented model / version / serial / build / SKU strings (never e.g. \"MODEL: ANALOG S2-L13\"). If you need a version, model, or serial label, invent a fully human one that contains no token from the prompt.\n\nFIRST SCREEN: populated with realistic seeded content — never an empty placeholder, a title-only splash, an error/\"unavailable\" state, or a pure onboarding / sign-on / \"tap to start\" GATE. Open directly on the app's main working screen (a game opens in-game, a tool opens with the tool populated); any name/setup step is optional and inline, never a blocking full-screen gate. Never render an image that can 404 into a broken box; use a designed on-brand placeholder.\n\nLAYOUT & ACTION: 8pt spacing grid, deliberate whitespace, everything aligned; multi-pane layouts collapse to one column on mobile; exactly one primary action per screen (highest contrast), no competing CTAs.\n\nMOBILE: dvh for full-height layouts; tap targets ≥44px; safe-area insets.\n\nSELF-CHECK: emit a one-line HTML comment at the very top of the output listing the checks you actually applied, e.g. . Make it look intentionally designed, not generic." } ] }