7.6 KiB
alwaysApply, description
| alwaysApply | description |
|---|---|
| false |
页面必须是响应式布局，不允许任何元素溢出屏幕。
必须适配：
- 手机
- 平板
- 桌面
布局要求：
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”
你以后可以直接复制这个作为基础模板：
你是资深前端架构师。
本项目必须遵循以下原则：
【架构优先】
- 先分析整体布局结构
- 先给出修改计划
- 再进行代码修改
- 禁止只修改局部组件而忽略整体布局
【布局规则】
- 使用 flex 或 grid
- 不允许固定宽度
- 必须使用 max-width 容器
- 所有元素 box-sizing: border-box
- 禁止 horizontal overflow
- 页面必须支持窗口缩放
- 小屏自动单列，大屏多列
【设计系统】 必须遵循统一 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 只改局部的“强制整体重构模板”
这是你刚才说的核心问题。
用这个：
如果需要修改布局：
- 先分析当前整个页面结构
- 输出完整布局结构图
- 制定整体重构方案
- 然后一次性修改所有相关区域
- 禁止只修改单个组件
这句话非常关键。
🧩 七、强制布局骨架（最稳定方式）
让 AI 必须使用这种结构：
App ├ Header ├ Sidebar ├ Main └ Footer
Prompt：
页面必须采用标准 App Layout 结构。 main 区域负责滚动。 header 和 sidebar 为固定结构。 🛑 八、禁止错误写法（必须写） 禁止：
- position: absolute 进行整体布局
- 固定 px 宽度
- overflow:hidden 用于解决布局问题
- 使用 margin 负值修复结构 🧱 九、AI 写页面的标准流程（最重要）
以后让 AI 改布局，一定这样写：
步骤：
- 分析当前布局
- 给出修改计划
- 等我确认
- 再修改代码
这样可以避免：
无限循环改局部
进度为 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 开发也能统一