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.

5.8 KiB Raw Permalink Blame History