AI 提示词模板

请帮我生成一个[网站类型]的完整前端页面。

## 页面信息
- 网站名称：[名称] | 页面类型：首页/产品/文章/联系
- 设计风格：简约/科技感/温馨/专业 | 主色调：[颜色]
- 响应式：桌面 + 平板 + 手机

## 页面内容
- 头部导航：Logo、菜单、CTA 按钮
- Hero 区域：大标题、副标题、行动号召
- 特色展示：3-4 个卡片 | 数据统计 | 客户评价轮播 | 联系表单
- 底部：版权信息、社交链接

## 技术要求
- HTML5 + CSS3 + Vanilla JS，BEM 命名
- Flexbox/Grid 布局，Font Awesome/SVG 图标
- CSS transition/animation

HTML 页面骨架

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网站标题</title>
</head>
<body>
  <header class="header">
    <nav class="nav">
      <div class="container">
        <a href="/" class="nav__logo">Logo</a>
        <ul class="nav__menu">
          <li><a href="#" class="nav__link">首页</a></li>
          <li><a href="#" class="nav__link">关于</a></li>
          <li><a href="#" class="nav__link">服务</a></li>
          <li><a href="#" class="nav__link">联系</a></li>
        </ul>
      </div>
    </nav>
  </header>
  <main><!-- 页面主要内容 --></main>
  <footer class="footer">
    <div class="container"><p>&copy; 2026 公司名称</p></div>
  </footer>
</body>
</html>

响应式布局检查清单

  • 在 320px、768px、1024px、1440px 断点测试
  • 移动端导航可展开可关闭
  • 触控区域 ≥ 44px
  • 图片使用 srcset 适配高分屏
  • 表格在移动端可横向滚动