Prompt zum Erstellen einer SaaS-Preisseite in Next.js

Copy-Paste-KI-Prompt zum Erstellen einer SaaS-Preisseite in Next.js mit Tailwind, Umschaltmöglichkeit für Abrechnung und Stricke-ready-Plan-Daten.

Verwenden Sie diesen Prompt, um eine polierte, konversionsoptimierte Preisseite mit einem monatlichen/jährlichen Abrechnungsumschalter, einer hervorgehobenen „Beliebteste“-Stufe und einer typisierten Plan- Konfiguration zu erstellen, die direkt in Stripe Checkout einbindet – keine Platzhalterdaten.

Haupt-Prompt

You are working in a Next.js App Router project using TypeScript and Tailwind CSS v4.

Task: create a `/pricing` page with the following specification.

Plan data:
- Starter: $0/mo, $0/yr — 1 user, 5 projects, community support.
- Pro: $19/mo, $190/yr — 5 users, unlimited projects, email support. Mark as "Most Popular".
- Enterprise: $99/mo, $990/yr — unlimited users, SSO, dedicated support.

UI requirements:
- A client component `<PricingToggle>` with monthly/annual switch; annual shows "Save 17%".
- A `<PricingCard>` component per plan with: name, price, feature list, CTA button.
- "Most Popular" card has a highlighted border and badge.
- CTA buttons call `handleCheckout(planId, interval)` — stub it for now, we will wire Stripe later.
- The page file itself must be a Server Component; only the toggle and cards are Client Components.
- Use Tailwind utility classes only — no CSS modules, no inline styles.

Type requirements:
- Export a `Plan` interface from `src/lib/pricing.ts`.
- Plan data lives in that same file as a `const PLANS: Plan[]`.

Do NOT install any new packages. Stop and list all files before writing code.

Implementierungshinweise

Die Seite muss eine Server-Komponente sein, damit sie statisch rendern kann; heben Sie 'use client' nur auf die Umschalt- und Kartenkomponenten, die useState benötigen.
handleCheckout sollte (planId: string, interval: 'monthly' | 'annual') akzeptieren – diese Signatur entspricht dem Stripe Checkout Prompt, also halten Sie sie stabil.
Tailwind v4 verwendet CSS-first-Konfiguration; vermeiden Sie tailwind.config.ts, es sei denn, es existiert bereits.

Erwartete Dateiänderungen

src/app/pricing/page.tsx            (new — Server Component)
src/components/PricingToggle.tsx    (new — Client Component)
src/components/PricingCard.tsx      (new — Client Component)
src/lib/pricing.ts                  (new — Plan type + PLANS constant)

Akzeptanzkriterien

bun run build beendet mit Exit-Code 0 ohne TypeScript-Fehler.
Umschalten zwischen monatlich/jährlich aktualisiert alle drei Kartenpreise ohne vollständigen Seitenneulad.
Das Abzeichen „Beliebteste“ ist auf der Pro-Karte sichtbar.
handleCheckout wird mit der korrekten planId und interval aufgerufen, wenn ein CTA geklickt wird.

Testbefehle

bun run typecheck
bun run build
bun run dev
# open http://localhost:3000/pricing and verify toggle behavior

Häufige KI-Fehler

Die Seitendatei selbst als 'use client' markieren, was das Server-Rendering verhindert.
Preise fest in JSX codieren, anstatt sie aus PLANS abzuleiten.
tailwind.config.ts mit theme.extend-Mustern verwenden, die für Tailwind v4 nicht gelten.
Vergessen, den Typ Plan zu exportieren, was die spätere Stripe-Checkout-Integration beeinträchtigt.

Fix-Prompt

The pricing page has type errors or the toggle doesn't work. Fix in this order:
1. Remove `'use client'` from `src/app/pricing/page.tsx` — only the child components need it.
2. Make sure `PricingToggle` uses `useState` for the billing interval and passes it down via props.
3. Confirm `handleCheckout` signature is `(planId: string, interval: 'monthly' | 'annual') => void`.
Show the corrected diff only — do not rewrite unrelated files.