1. Next.js + Tailwind CSS + shadcn/ui 网站搭建 Prompt

以下 20 个模块化 Prompt 默认基于 Next.js + Tailwind CSS + shadcn/ui 技术栈使用，可逐段投喂给 AI 生成对应页面模块，最后用"通用优化"做收尾检查。

1.1. 使用场景

你正在为一家科技创业公司构建一个现代化、响应式的网站。这个网站需要展示产品、吸引潜在客户，并提供便捷的信息访问。要求在所有设备上都具有视觉吸引力、高性能和用户友好性，同时具备优秀的 SEO、国际化支持以及无障碍功能。

1.2. 导航栏

📌 “打造一个时尚的粘性导航栏，能够完美适应从桌面到移动端的各种设备。包含一个在滚动时会缩小的 logo，点击后展开成全宽搜索栏的搜索图标，以及一个移动端的汉堡菜单。确保所有交互元素有清晰的焦点样式，并优化导航加载性能（例如延迟加载二级菜单）。”

1.3. 首屏区域

🌅 “设计一个引人注目的首屏区域，让访客快速了解我们的故事。使用循环播放的背景视频或高质量图片，并覆盖醒目的标题、简短描述和一个跳动的行动召唤按钮。为慢速网络提供静态图片占位符，并确保所有文本在视频不可用时仍然清晰可见。”

1.4. 特性网格

🌟 “开发一个既富信息又具互动性的’特性’网格。每个特性卡片在悬停时翻转显示更多细节。确保从桌面端 3x2 的网格布局到移动端的单列布局都能无缝过渡，并为移动端设计点击展开的替代交互。”

1.5. 定价表

💰 “创建一个清晰、有说服力的定价表，包含月/年付的切换开关、'最受欢迎’标签，以及悬停在’立即注册’按钮上的微妙动画效果。确保在移动端垂直堆叠时，表格仍然保持清晰且易于比较。”

1.6. 推荐轮播

🎠 “设计一个通过社交证明建立信任的推荐轮播。包括客户照片、公司 logo 和精选语录的淡入淡出效果。在移动端将其转化为可滑动的卡片界面，确保轮播控件对键盘和屏幕阅读器可用。”

1.7. 联系表单

📬 “构建一个用户友好且安全可靠的联系表单。包括实时反馈的智能验证、询问类型的下拉菜单，以及附件上传功能。实现成功或失败提示，并提供重新尝试的选项，同时支持防止垃圾邮件的后端 API 集成。”

1.8. 页脚

📜 “精心设计一个既实用又吸引人的页脚。包含双步骤选择过程的邮件订阅、移动端可折叠的链接区域，以及滚动后出现的’返回顶部’按钮。为所有链接添加键盘可访问性，并通过渐进式披露提升内容层次。”

1.9. 博客列表

📝 “开发一个动态博客列表页面，具备无限滚动和分类筛选功能。包括一个特色文章区域、预估阅读时间和作者信息。使用骨架屏加载状态，在获取内容时为用户提供流畅体验。”

1.10. 产品展示

🛍️ “创建一个沉浸式产品展示，包含 360 度产品视图、缩放功能和图片画廊。移动端加入一个粘性的’加入购物车’栏，并优化延迟加载以提升性能。为图片画廊实现触摸缩放和滑动浏览的功能。”

1.11. FAQ 区域

❓ “设计一个既全面又易于导航的 FAQ 部分。支持按类别分组、搜索高亮结果，并在每个答案末尾添加’这个回答有帮助吗？'的反馈选项。确保搜索栏支持键盘导航，并为移动端优化折叠和展开效果。”

1.12. 团队板块

👥 “精心打造一个能为品牌注入个性的’认识团队’板块。加入悬停状态展示每位团队成员的趣事，并在不同断点优雅重排为砌体布局。在移动端用点击代替悬停交互。”

1.13. 数据可视化

📊 “构建一个吸引眼球的’关键数据’部分。使用 SVG 动画进行数据可视化，实现滚动触发的计数动画，并确保移动设备上的布局同样引人注目。”

1.14. 互动时间线

⏳ “设计一个讲述品牌故事的互动公司时间线。桌面端采用横向滚动，移动端采用纵向滚动，并加入视差效果和滚动触发的动画，增强沉浸感。”

1.15. 图片画廊

🖼️ “创建一个带灯箱功能和延迟加载的图片画廊。包括分类筛选、图片标签和单张图片分享功能，针对移动设备优化触摸交互和手势缩放。”

1.16. 新闻订阅组件

📰 “开发一个高转化率的新闻订阅组件。使用渐进式披露的多步骤表单，展示样例新闻，并加入社交证明（如用户评论）。为桌面用户添加退出意图弹窗，在移动端避免干扰体验。”

1.17. 社交媒体墙

🖥️ “搭建一个汇聚各平台内容的社交媒体墙。支持无限滚动、平台特定样式和直接点赞或分享帖子的功能。确保内容能在不同屏幕尺寸下平滑重排。”

1.18. 引导流程

🧭 “设计一个多步骤引导流程，包含进度条、即时验证、复杂字段的工具提示以及保存进度的选项。最终步骤提供摘要确认，并为移动端优化流程导航。”

1.19. 智能搜索

🔍 “打造一个智能搜索组件，具备自动完成、最近搜索和热门建议功能。实现键盘导航、语音搜索，并确保搜索覆盖无障碍且可关闭。”

1.20. 页面

🚫 “创建一个引人注目的 404 页面。包含搜索栏、热门内容链接，以及一个小游戏或互动元素以吸引用户。确保页面响应式且符合品牌风格。”

1.21. 浮动操作按钮（FAB）

➕ “实现一个浮动操作按钮（FAB），提供快速访问关键操作（如’联系我们’或’免费试用’）。点击后弹出快捷选项菜单，确保在不同屏幕尺寸和方向上都能保持最佳位置。”

1.22. 通用优化

• 📈 SEO 和性能：确保每个页面优化图片和视频的加载策略，包含适当的 meta 标签和结构化数据。
• 🌍 国际化：所有内容支持多语言切换，并为 RTL 语言优化布局。
• ♿ 无障碍：符合 WCAG 标准，为交互元素添加键盘导航支持和动画跳过选项。