App copy

design/stitch-paywall-prompt.md

@@ -0,0 +1,134 @@
+# Stitch-Prompt: GreenLens Pro Paywall
+
+Der Prompt unten ist zum direkten Kopieren in Stitch. Englisch, weil Stitch damit
+zuverlässiger arbeitet. Darunter stehen Varianten und der Kontext, falls du
+nachsteuern willst.
+
+---
+
+## Prompt (kopieren)
+
+```
+Design a mobile subscription paywall for GreenLens, an iOS plant-care app.
+
+CONTEXT
+The user just finished onboarding. They own 3-20 houseplants, one of them has a
+problem right now (yellow leaves, brown tips), and they are anxious they caused
+it. They are price-sensitive because free alternatives exist (Google Lens).
+Their biggest fear about subscriptions is hidden charges and hard cancellation.
+
+THE ONE JOB OF THIS SCREEN
+Make starting the 7-day free trial feel like the obvious, low-risk next step.
+Everything else is secondary.
+
+HARD CONSTRAINTS
+- Single screen, no scrolling required to reach the primary button on a 6.1"
+  iPhone (390x844pt). Content that does not fit must be collapsed or cut.
+- Dark theme. Background near-black with a green tint (#0F1A12). Primary accent
+  is a muted sage green (#8FBF7F). Text white and warm grey.
+- No hero photo. No stock imagery of plants.
+- Price and billing terms must be visible without interaction.
+- Rounded corners, generous spacing, iOS-native feel. SF Pro or similar.
+
+CONTENT TO PLACE (exact strings, do not rewrite)
+- Small eyebrow label: "GREENLENS PRO"
+- Headline: "Stop guessing what your plant needs."
+- Subline: "Cause, what to check, what to do now - and a follow-up after 7 days."
+- Two plan options the user picks between:
+    Option A - "Monthly", "EUR 4.99 / month", no trial
+    Option B - "Yearly", "EUR 39.99 / year", "that is EUR 3.33 / month",
+               badge "7 DAYS FREE", badge "SAVE 33%"
+- Included, shown compactly (icons or a tight list, not full sentences):
+    "Ranked causes, including what is uncertain"
+    "Concrete things to check"
+    "7-day plan plus follow-up"
+    "100 scans per month"
+- Primary button: "Try 7 days free" (when the yearly option is selected) or
+  "Start now" (when monthly is selected)
+- Under the button, small: "Due today EUR 0.00 - then EUR 39.99 on 3 August"
+- Small print, one line: "Cancel anytime in 2 taps. We remind you 2 days before
+  the trial ends."
+- Top bar: close X on the left, "Restore Purchases" on the right
+- Bottom: "Privacy | Terms"
+
+CRITICAL DESIGN PROBLEM TO SOLVE
+The current version uses a separate on/off switch labelled "Try 7 days free"
+sitting above a single price card. Users do not connect the switch to the price,
+and the switch is easy to miss. Replace this with a plan-selection pattern where
+both options are visible at once and the trial is part of the option itself, not
+a separate control. The recommended option should be visually pre-selected.
+
+DELIVER
+Three distinct layout directions, not colour variations:
+1. Two plan cards side by side, recommended one highlighted with a border and badge
+2. Two plan rows stacked full width with radio-style selection
+3. One recommended plan shown large, the alternative as a small text link
+   underneath ("or EUR 4.99 monthly without trial")
+
+For each direction show the state with the yearly plan selected.
+```
+
+---
+
+## Warum dieser Prompt so gebaut ist
+
+**Die eine Aufgabe ist explizit benannt.** Ohne diesen Satz optimiert Stitch auf
+"schön" statt auf "konvertiert" und produziert wieder ein Hero-Bild.
+
+**Die Strings sind vorgegeben und als unveränderlich markiert.** Sonst erfindet
+das Tool Marketing-Sprache, die gegen die Positionierung arbeitet - "unlimited
+scans", "AI-powered", "99% accurate". Genau diese Formulierungen haben wir aus
+gutem Grund entfernt.
+
+**Das eigentliche Problem steht als eigener Abschnitt drin.** Der Toggle ist die
+Ursache der verbliebenen Friction: Ein Schalter ist ein Ja/Nein-Control, aber
+hier steckt eine Entweder-oder-Entscheidung dahinter (Monat ohne Trial vs. Jahr
+mit Trial). Deshalb versteht niemand, dass das Umlegen den Preis ändert - und
+deshalb war der Schalter mal über, mal unter der Preiskarte, ohne dass es
+je richtig wurde. Zwei sichtbare Optionen lösen das strukturell.
+
+**Drei Richtungen statt drei Farbvarianten.** Sonst bekommst du dreimal dasselbe
+Layout in Grün, Dunkelgrün und Sehr-Dunkelgrün.
+
+---
+
+## Wenn du nachsteuern willst
+
+**Noch weniger Friction:** Ergänze im Prompt
+> "Remove the feature list entirely. Test whether headline, plan choice, price
+> and button alone are enough."
+
+Das wäre die radikalste Variante - und ehrlicherweise die, die ich am ehesten
+gewinnen sehe. Der Nutzer hat die Argumente im Onboarding schon dreimal gelesen.
+
+**Mit Social Proof:** Ergänze
+> "Add one line of social proof directly under the headline: 5.0 stars from 6
+> App Store ratings. Keep it to a single line with stars."
+
+Sechs Bewertungen sind wenig, aber 5,0 ist stark und belegbar. Direkt unter der
+Headline getestet lohnt sich.
+
+**Für den Onboarding-Kontext:** Falls du eine eigene Variante für die Paywall
+direkt nach dem Onboarding willst, ergänze
+> "This version appears immediately after onboarding, before the user has seen
+> any result from the app. Add a single line reminding them what they just told
+> us, e.g. 'Your plan for: yellow leaves, low light'."
+
+---
+
+## Was du danach an mich zurückgeben solltest
+
+Screenshot der gewählten Richtung. Ich baue sie dann in `app/profile/billing.tsx`
+nach - der Umbau von Toggle auf Plan-Auswahl betrifft `selectedPaywallPlan` und
+ist überschaubar, weil beide Produkte (`monthly_pro`, `yearly_pro`) schon
+angebunden sind.
+
+---
+
+## Ein Hinweis, den der Prompt nicht lösen kann
+
+Kein Design behebt, dass die Paywall im Onboarding-Flow **vor** dem ersten
+Ergebnis erscheint. Der Nutzer soll zahlen für etwas, das ihm bisher nur
+beschrieben wurde. Das ist strukturelle Friction, keine visuelle - siehe
+Abschnitt 6.3 im Copy-Audit. Ein besseres Layout holt vielleicht ein paar
+Prozent, ein erlebtes Scan-Ergebnis vor der Paywall holt deutlich mehr.