本文转自： https://t.me/aigc1024/aigc1024/8499
仅做个人收藏，版权归原作者所有
# 20个打造出色 Next.js + Tailwind CSS + shadcn/ui 网站的关键 Prompt
使用场景：你正在为一家科技创业公司构建一个现代化、响应式的网站。这个网站需要展示他们的产品、吸引潜在客户，并提供便捷的信息访问。网站要求在所有设备上都具有视觉吸引力、高性能和用户友好性。
1. “打造一个时尚的粘性导航栏，能够完美适应从桌面到移动端的各种设备。包含一个在滚动时会缩小的 logo，点击后展开成全宽搜索栏的搜索图标，以及一个在移动端优雅转变为全屏导航的汉堡菜单。”
2. “设计一个引人注目的首屏区域，让访客一眼就能了解我们的故事。融入一个循环播放的背景视频，上面覆盖着醒目的标题和一个微妙跳动的行动召唤按钮。确保在各种设备和较慢的网络连接下，文字都能保持清晰可读。”
3. “开发一个既富有信息又具互动性的’特性’网格。每个特性卡片在悬停时应翻转以显示更多细节，网格布局要能从桌面端的 3×2 无缝过渡到移动端的单列布局。”
4. “创建一个清晰、有说服力且注重转化的定价表。包含月付/年付的切换开关，’最受欢迎’标签，以及悬停在’立即注册’按钮上时的细微动画。确保在小屏幕上垂直堆叠时不失清晰度。”
5. “设计一个通过社交证明建立信任的推荐轮播。包括客户照片、公司 logo 和淡入淡出的精选语录。在移动端，将其转变为可滑动的卡片界面，以获得原生应用般的体验。”
6. “构建一个既用户友好又安全可靠的联系表单。包括提供实时反馈的智能验证、询问类型下拉菜单，以及附件上传功能。与后端 API 集成以实现垃圾邮件防护和即时通知。”
7. “精心设计一个既实用又吸引人的页脚。包含一个双步骤选择过程的邮件订阅、移动端可折叠的链接区域，以及滚动后出现的’返回顶部’按钮。确保所有元素都支持键盘访问。”
8. “开发一个动态博客列表页面，具备无限滚动和分类筛选功能。包括一个特色文章区域、预估阅读时间和作者信息。实现骨架屏加载状态，在获取内容时提供更流畅的用户体验。”
9. “创建一个沉浸式的产品展示，包含 360 度产品视图、缩放功能和图片画廊。在移动端加入一个粘性的’加入购物车’栏，并实现延迟加载以优化性能。”
10. “设计一个既全面又易于导航的 FAQ 部分。实现一个能高亮显示结果的搜索功能，按类别分组问题，并在每个答案末尾添加’这个回答有帮助吗？’的反馈选项。”
11. “精心打造一个能为品牌注入个性的’认识团队’板块。加入悬停状态以展示每位团队成员的有趣事实，并实现一个能在不同断点优雅重排的砌体布局。”
12. “构建一个能吸引眼球并传达影响力的动画’关键数据’部分。使用 SVG 动画进行数据可视化，实现滚动触发的计数动画，并确保布局在移动设备上同样引人注目。”
13. “设计一个能以视觉方式讲述你们故事的互动公司时间线。在桌面端实现横向滚动，在移动端实现纵向滚动。添加视差效果，并在里程碑进入视图时触发动画。”
14. “创建一个具有灯箱功能和延迟加载的砌体图片画廊。包括分类筛选、图片标签和单张图片分享功能。针对移动设备优化触摸交互。”
15. “开发一个能提高转化率的新闻订阅组件，配以精炼的文案。实现一个具有渐进式披露的多步骤表单，展示样例新闻，并加入社交证明。为桌面用户添加一个退出意图弹窗。”
16. “搭建一个汇聚各平台内容的社交媒体墙。实现无限滚动、平台特定样式，以及直接点赞或分享帖子的功能。确保墙面能在不同屏幕尺寸下平滑重排。”
17. “设计一个带进度条的多步骤引导流程，允许用户保存进度并稍后继续。为复杂字段添加工具提示，实现即时验证，并在最终提交前加入一个总结步骤。同时优化桌面和移动体验。”
18. “打造一个智能搜索组件，具备自动完成、最近搜索和热门建议功能。实现键盘导航、语音搜索能力，并确保搜索覆盖层是无障碍的且可关闭的。”
19. “创建一个能将错误转化为机会的 404 页面。包含一个搜索栏、热门内容链接，也许还可以加入一个小游戏或互动元素来吸引用户。确保页面完全响应式并保持品牌一致性。”
20. “实现一个浮动操作按钮（FAB），提供快速访问关键操作如’联系我们’或’开始免费试用’的途径。点击/轻触时包含一个快速拨号菜单，并确保FAB在不同屏幕尺寸和方向上都能保持最佳位置。”