364 lines
7.6 KiB
Markdown
364 lines
7.6 KiB
Markdown
---
|
||
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 开发也能统一 |