kitchen/.trae/rules/design-ui.md

【设计系统】 必须遵循统一 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

只要做到这三点：

不会溢出

不会错位

不会风格混乱

不会局部修改失控