Prompt para crear una página de precios SaaS en Next.js

Prompt de IA para copiar y pegar y crear una página de precios SaaS en Next.js con Tailwind, alternancia de facturación y datos de planes listos para Stripe.

Usa este prompt para generar una página de precios pulida y optimizada para conversiones con un conmutador de facturación mensual/anual, un nivel destacado “Más Popular” y una configuración de plan tipada que se conecta directamente con Stripe Checkout — sin datos de relleno.

Prompt principal

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.

Notas de implementación

La página debe ser un componente de servidor para que sea renderizable estáticamente; eleva 'use client' solo a los componentes de alternancia y tarjeta que necesiten useState.
handleCheckout debe aceptar (planId: string, interval: 'monthly' | 'annual') — esta firma coincide con el prompt de Stripe Checkout, así que mantenla estable.
Tailwind v4 usa configuración CSS-first; evita tailwind.config.ts a menos que ya exista.

Cambios de archivo esperados

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)

Criterios de aceptación

bun run build termina con código 0 sin errores de TypeScript.
Al alternar mensual/anual se actualizan los precios de las tres tarjetas sin recargar la página.
La insignia “Más Popular” es visible en la tarjeta Pro.
Se llama a handleCheckout con el planId e interval correctos cuando se hace clic en un CTA.

Comandos de prueba

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

Errores comunes de IA

Marcar el archivo de la página como 'use client', lo que anula el renderizado del servidor.
Codificar precios fijos dentro de JSX en lugar de derivarlos de PLANS.
Usar patrones theme.extend de tailwind.config.ts que no se aplican a Tailwind v4.
Olvidar exportar el tipo Plan, lo que rompe la integración con Stripe Checkout más adelante.

Prompt de corrección

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.