#UI界面设计 #vibecoding #codex 很多人用 Vibe Coding 写页面时，第一句话就是： “帮我做一个后台管理页面。” “帮我做一个好看的列表页。” “加个筛选，加个表格，加几个按钮。” 但 AI 真开始写的时候，页面经常就变得很奇怪。 按钮位置不对。 筛选栏乱放。 表格挤在一起。 弹窗、抽屉、右侧面板混着用。 问题往往不是 AI 完全不会写。 而是我们描述页面时，太模糊了。 页面其实有一套很常见的结构： 页眉、顶部导航、左侧导航、主内容区、页面标题区、筛选栏、工具栏、表格区域、分页器、右侧面板、弹窗、抽屉、页脚。 你说“按钮放上面”，AI 不一定知道是哪里。 你说“放在筛选栏右侧”，它就清楚多了。 你说“做个详情”，它可能生成一堆杂乱字段。 你说“用右侧抽屉展示详情，包含基础信息、操作记录和底部按钮”，结果通常会稳定很多。 所以我整理了三张图： 第一张：常见后台页面布局 包括页眉、顶部导航、左侧导航、主内容区、筛选栏、工具栏、表格、分页器、弹窗、抽屉等。 第二张：补充页面布局 包括 Hero 区、Banner、卡片网格、Tabs、步骤条、表单布局、详情页、时间线、看板、日历、空状态、错误页等。 第三张：常见控件名称 包括输入框、文本域、搜索框、下拉框、单选框、复选框、开关、日期选择器、主按钮、危险按钮、提示气泡、通知提醒、骨架屏、上传控件、树形控件等。 以后写 Vibe Coding 提示词，可以不要这样说： 帮我做一个用户列表页，能搜索，能筛选，能看数据。 可以改成： 创建一个后台用户列表页，采用顶部页眉 + 左侧导航 + 主内容区布局。 主内容区内使用居中内容容器。 顶部为页面标题区，标题下方是筛选栏，包含关键词搜索框、状态下拉框、日期范围选择器、查询按钮和重置按钮。 筛选栏下方是工具栏，包含新增、导出、刷新和批量操作。 主体使用数据表格，表格右侧为行操作区，包含查看、编辑、删除。 表格底部右侧放分页器。 点击查看时，从右侧打开详情抽屉；点击删除时，弹出确认弹窗。 Vibe Coding 不只是“感觉对了就行”。 建议收藏这三张图。 以后写页面、写提示词、提需求、改 UI，都能用得上。