Greenlens/design/stitch-paywall-prompt.md

# 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.