Prompt-Next.js + Tailwind CSS + shadcn ui 网站prompt

1- 使用场景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#软件 #technology #编程

#prompt