---
alwaysApply: false
description: 
---
页面必须是响应式布局，不允许任何元素溢出屏幕。

必须适配：
- 手机
- 平板
- 桌面

布局要求：

1 所有元素使用 flex 或 grid 布局
2 不允许使用固定宽度
3 必须使用 max-width
4 必须使用 box-sizing: border-box
5 页面内容不能超出 viewport
6 禁止 overflow-x

所有图片必须：
max-width:100%
height:auto
object-fit:cover

页面内容必须考虑 header 高度，
主体区域必须使用 padding-top。

主体区域必须允许垂直滚动
overflow-y:auto

请编写一个现代前端页面。

要求：

1 页面必须是响应式布局
2 所有屏幕尺寸必须适配
3 不允许任何元素溢出屏幕
4 必须使用 flex 或 grid 布局
5 不允许使用固定宽度
6 图片必须 max-width:100%
7 页面必须适配手机、平板、桌面
8 包含 media query (768px / 1024px)
9 不允许出现 horizontal scroll
10 所有组件必须保持在 viewport 内

代码必须通过 Chrome responsive mode 测试，
确保不会出现 overflow 或布局错位。

所有页面必须有 container 容器
max-width:1200px
margin:auto
padding:16px

推荐结构 
container
header
main
section
grid
card
foote


| 你的规则                  | 行业术语                               | 说明     |
| --------------------- | ---------------------------------- | ------ |
| 所有元素用 flex/grid       | **Modern Layout System**           | 现代布局系统 |
| 不使用固定宽度               | **Fluid Layout**                   | 流式布局   |
| 使用 max-width          | **Content Container Pattern**      | 内容容器模式 |
| box-sizing:border-box | **Universal Box Model Reset**      | 盒模型重置  |
| 不能超出 viewport         | **Viewport Safe Layout**           | 视口安全布局 |
| 禁止 overflow-x         | **Horizontal Overflow Prevention** | 防止横向滚动 |

Responsive Layout Best Practices
Modern Responsive UI Architecture

| 你的说法 | 行业术语                              | 说明      |
| ---- | --------------------------------- | ------- |
| 大屏   | **Large Screen / Desktop Layout** | 桌面显示器   |
| 小屏   | **Mobile Layout**                 | 手机      |
| 折叠屏  | **Foldable Layout**               | 可折叠设备   |
| 小窗   | **Windowed / Resizable Layout**   | 浏览器窗口缩放 |


Responsive Web Design (RWD)

过渡动画
该页面必须实现响应式布局 (Responsive Layout)。

适配以下 viewport：

Mobile: 360px - 640px
Tablet: 768px - 1024px
Desktop: 1280px - 1920px
Large Screen: >1920px

要求：

1 使用 flex 或 grid 布局
2 不允许固定宽度
3 使用 max-width 控制容器
4 所有图片 max-width:100%
5 页面禁止 horizontal overflow
6 组件必须在小屏幕自动换行
7 在小屏幕使用单列布局
8 在大屏幕使用多列布局
9 页面必须支持浏览器窗口缩放

页面必须支持 foldable devices。

当 viewport 在 600px - 900px 之间时：

1 自动切换为双列布局
2 避免关键元素位于屏幕中央折叠区域
3 内容必须允许重新流式排列


页面必须支持 foldable devices。

当 viewport 在 600px - 900px 之间时：

1 自动切换为双列布局
2 避免关键元素位于屏幕中央折叠区域
3 内容必须允许重新流式排列


布局必须遵循 mobile-safe 和 desktop-safe 的响应式设计原则。

生成一个现代响应式网页。

要求：

1 默认 viewport 为 desktop (1280px)
2 页面必须支持 mobile、tablet、desktop
3 使用 flex 或 grid 布局
4 不允许固定宽度
5 所有图片 max-width:100%
6 不允许 horizontal overflow
7 小屏幕自动单列布局
8 大屏幕自动多列布局
9 页面必须支持浏览器窗口缩放
10 代码必须通过 Chrome responsive mode



先架构，后页面；先设计系统，后组件；先计划，后改代码。

🧠 一、AI 前端开发“终极总控 Prompt”

你以后可以直接复制这个作为基础模板：

你是资深前端架构师。

本项目必须遵循以下原则：

【架构优先】
1. 先分析整体布局结构
2. 先给出修改计划
3. 再进行代码修改
4. 禁止只修改局部组件而忽略整体布局

【布局规则】
1. 使用 flex 或 grid
2. 不允许固定宽度
3. 必须使用 max-width 容器
4. 所有元素 box-sizing: border-box
5. 禁止 horizontal overflow
6. 页面必须支持窗口缩放
7. 小屏自动单列，大屏多列

【设计系统】
必须遵循统一 design system：
- 颜色
- 字体
- 间距
- 圆角
- 阴影
- 按钮样式

【修改规则】
如果需要改布局：
必须重构整体 layout，
不能只修改一个组件。
🏗 二、标准项目结构（强烈推荐）

让 AI 按这个结构生成代码：

/src
  /layout
  /components
  /pages
  /styles
  /design-system

Prompt 加一句：

请按以下结构组织代码：
layout / components / pages / styles。

这样多个 AI 写的代码天然统一。

🎨 三、统一风格（解决色调不一致）

多个 AI 最大问题是：

一个用蓝色

一个用紫色

一个按钮圆角不同

一个阴影不同

解决方法：强制使用设计系统。

Prompt 加：

所有页面必须使用统一设计系统变量，
禁止自定义颜色。
必须使用 CSS 变量或主题系统。

例如：

:root {
  --primary: #2563eb;
  --background: #f8fafc;
  --text: #0f172a;
}
📱 四、响应式统一规则模板

如果页面需要适配：

移动端 + 平板 + 桌面

加这段：

必须使用响应式设计。

断点：
- 640px
- 768px
- 1024px
- 1280px

小屏幕：单列布局
中屏幕：双列布局
大屏幕：多列布局
🪟 五、桌面专用页面模板

如果某些页面 不需要响应式：

该页面为 Desktop-only。

设计基准：1280px。

不需要 mobile 适配。
不需要 media query。

这样 AI 不会乱写。

🔄 六、防止 AI 只改局部的“强制整体重构模板”

这是你刚才说的核心问题。

用这个：

如果需要修改布局：

1. 先分析当前整个页面结构
2. 输出完整布局结构图
3. 制定整体重构方案
4. 然后一次性修改所有相关区域
5. 禁止只修改单个组件

这句话非常关键。

🧩 七、强制布局骨架（最稳定方式）

让 AI 必须使用这种结构：

App
 ├ Header
 ├ Sidebar
 ├ Main
 └ Footer

Prompt：

页面必须采用标准 App Layout 结构。
main 区域负责滚动。
header 和 sidebar 为固定结构。
🛑 八、禁止错误写法（必须写）
禁止：
- position: absolute 进行整体布局
- 固定 px 宽度
- overflow:hidden 用于解决布局问题
- 使用 margin 负值修复结构
🧱 九、AI 写页面的标准流程（最重要）

以后让 AI 改布局，一定这样写：

步骤：

1. 分析当前布局
2. 给出修改计划
3. 等我确认
4. 再修改代码

这样可以避免：

无限循环改局部

进度为 0

越改越乱

🚀 十、真正专业团队的做法

大型团队通常会：

1️⃣ 先写 Design System
2️⃣ 再写 Layout System
3️⃣ 再写 Component Library
4️⃣ 最后写 Pages

AI 也必须按这个顺序。

💎 十一、终极万能 Prompt（推荐收藏）

你可以直接用这个：

请作为高级前端架构师开发页面。

要求：

- 优先设计整体布局结构
- 使用 flex/grid
- 响应式设计
- 使用统一设计系统
- 不允许固定宽度
- 不允许 horizontal overflow
- 修改布局时必须整体重构
- 不允许只改局部组件
- 输出清晰结构
- 代码必须可维护
🎯 最后总结

解决你所有问题的核心只有三句话：

Layout First
Design System First
Plan Before Code

只要做到这三点：

不会溢出

不会错位

不会风格混乱

不会局部修改失控

多 AI 开发也能统一