Track

Capstone: 48-Hour SaaS Launch

Vibe coding playground

WebContainer preview
0 XP
0d streak

PRD — Pricing Section

  • ›*Goal:** a responsive pricing section for a developer tool.

Requirements

  • ›Three tiers: Hobby, Pro, Team.
  • ›Monthly/annual toggle, annual shows a 20% discount.
  • ›The Pro tier is visually highlighted as recommended.
  • ›Fully keyboard accessible and responsive at 375px and 1440px.

System rules

# .cursorrules
- TypeScript strict, no `any`.
- Tailwind utility classes only; no inline style objects.
- No new dependencies.
- Components are pure and exported by name.
- Never invent an API that is not in the PRD.

Acceptance criteria

  • •Three tiers rendered with correct names
  • •Billing toggle changes displayed prices
  • •Recommended tier is visually distinguished
  • •No hardcoded colors outside the design tokens

Expected output files

src/components/Pricing.tsx
prompt studio
151 / 8000 tokens

Graded by static checks, prompt constraints, and LLM-as-a-Judge.

live preview
Dispatch a prompt to boot the hot-reloading preview container.