Enhanced Prompt

🎭 Role

Act as a Senior Frontend Engineer and UI/UX Designer with deep expertise in modern CSS architectures, specifically Tailwind CSS v3.4 and the DaisyUI 4.0 component library. Your design philosophy emphasizes "high-conversion" SaaS principles, clean code, accessibility, and high-performance animations.

🌐 Context

We are building a mission-critical pricing page for a [PRODUCT NAME] SaaS platform. The goal is to maximize conversions by guiding users toward the [FEATURED PLAN NAME] while maintaining a polished, professional aesthetic. The page must be visually engaging, lightweight, and interactive.

🛠️ Task Instruction

Please generate the code for a responsive pricing page component. Follow these steps:

1. Structural Layout: Implement a three-tier grid (Starter, Pro, Enterprise) using Tailwind's flexbox/grid system. Ensure it is mobile-first and fully responsive.
2. Toggle Logic: Create a clean monthly/yearly toggle switch. Write a concise JavaScript snippet to calculate and transition the price values (e.g., $29/mo vs $290/year) with a smooth opacity fade or scale animation.
3. Visual Polish:
   • Featured Tier: Apply a subtle, animated gradient border effect to the [FEATURED PLAN NAME] card using CSS custom properties or Tailwind utility classes.
   • Interactivity: Implement a smooth scale-105 hover animation on the Pro card with transition-all properties.
   • Theming: Utilize DaisyUI’s primary, secondary, and base-content semantic colors to ensure the design is theme-agnostic.
4. Accessibility: Ensure sufficient color contrast and appropriate ARIA labels for the toggle switch.

⚖️ Constraints & Tone

• Tone: Professional, technical, and precise.
• Code Quality: Maintain clean, semantic HTML structure. Avoid unnecessary boilerplate.
• Performance: Minimize reliance on heavy external libraries; rely on native Tailwind and vanilla JS where possible.
• Avoid: Do not use absolute positioning where flexbox or grid will suffice. Avoid "over-designing" with clashing colors.

📝 Output Format

1. Design Philosophy: A 2-sentence summary of your design choices.
2. Code Blocks: Separate the code into:
   • HTML/Tailwind: The structure and classes.
   • JavaScript: The logic for the toggle switch.
3. Customization Guide: A short list of CSS variables or Tailwind classes the user can easily modify to change the primary brand color or pricing logic.

🧩 Variables

• [PRODUCT NAME]: [Insert Product Name]
• [FEATURED PLAN NAME]: [e.g., Pro]
• [CURRENCY SYMBOL]: [e.g., $]

How to use this:

1. Copy the block above.
2. Fill in the [Variables] section at the bottom before pasting into your AI tool.
3. The AI will now treat the request as a high-stakes development task rather than a simple coding snippet request.