UI Component

生成移动优先的英雄区

支持工具:ChatGPTCursor

使用场景

请求AI生成一个具有特定样式和布局的移动优先英雄区域（hero section），并指定使用Tailwind CSS框架。

Prompt 正文

将以下内容复制到你选择的 AI 工具中。

Generate a mobile-first hero section with a gradient background, centered text, and a CTA button using Tailwind CSS.
在 Cursor 中打开

示例输出

<section class="bg-gradient-to-r from-blue-500 to-purple-600 text-white">
  <div class="container mx-auto px-6 py-24 text-center">
    <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-4">Your Awesome Headline</h1>
    <p class="text-lg md:text-xl mb-8">A compelling subheading to describe your product or service.</p>
    <button class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full hover:bg-gray-200 transition-colors">Call to Action</button>
  </div>
</section>