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

【修改规则】
如果需要改布局：
必须重构整体 layout，
不能只修改一个组件。



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


如果页面需要适配：
移动端 + 平板 + 桌面

必须使用响应式设计。

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

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

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

该页面为 Desktop-only。

设计基准：1280px。

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



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

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


App
 ├ Header
 ├ Sidebar
 ├ Main
 └ Footer

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


步骤：

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



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




要求：

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


Layout First
Design System First
Plan Before Code

只要做到这三点：

不会溢出

不会错位

不会风格混乱

不会局部修改失控