HTML 是描述网页内容结构的标记语言。
h1 表示大标题，p表示段落，a表示链接。你不需要会写它，但你得知道当 AI 给你一大段尖括号代码时，那叫 HTML。如果你发现 AI 生成的页面结构乱了，你可以说"导航栏用 nav，不要用 div"，AI 就明白怎么改。
VibeHub 里的原话："HTML 是用标签描述网页内容结构、供浏览器渲染页面的标记语言。"
这三个词能帮你做什么：知道"前端"是你工作的范围，"Markdown"是跟 AI 沟通的通用语言，"HTML"是 AI 产出东西的底层结构。不用背，知道有这三个东西就够了。
按钮和链接：长得很像，但 AI 不能搞混
按钮（Button）
按钮做一件事：在当前页面执行操作。保存、提交、删除、下载、发送——点完之后页面不跳转到别的地方，只是在当前页面做出反应。
什么时候该说"按钮"：你希望用户点击后，"保存"一下当前填写的内容；或者"提交"一个表单；或者"删除"一条记录。
VibeHub 里的原话："按钮是让用户在当前页面执行保存、提交、删除等操作的可点击控件。"
喂给 AI 的话："页面底部放一个蓝色主按钮，文案'保存更改'。旁边放一个白色边框的次按钮，文案'取消'。两个按钮水平并排，间距 12px。"
链接（Link）
链接也点击，但它不做操作，它跳转页面。点击"查看详情"会跳到详情页，点击"返回首页"会跳到首页，点击"帮助文档"会打开新页面。
什么时候该说"链接"：你希望用户点击后，去到另一个页面、另一个 tab、或者另一个网站。
最容易搞混的地方：你说"加一个返回按钮"，AI 可能会生成 button，但实际上"返回"应该是一个 a 链接。所以你要说得准确一点——"加一个'返回首页'链接"。
VibeHub 里的原话："链接是带用户前往另一个页面、页内位置或资源地址的可点击文本或元素。"
喂给 AI 的话："页面底部加一个'返回首页'链接，用a标签，蓝色文字。旁边再加一个'查看帮助文档'链接，新窗口打开。"
一句话记住区别
排版（Typography）、分割线（Divider）、间距（Space）
这三个是基础样式，不用单独记。碰到需要的时候直接说就行：
- 排版（Typography）：你想控制文字的大小、粗细、颜色。喂给 AI 的话："标题用 24px 加粗 #1a1a1a，正文用 16px 灰色 #666，辅助文字用 12px #999。"
- 分割线（Divider）：两块内容之间想加一条线隔开。喂给 AI 的话："产品介绍和用户评价之间加一条 1px 灰色分割线，上下各留 24px 间距。"
- 间距（Space）：想让元素之间不要紧挨着。喂给 AI 的话："三张卡片之间留 24px 间距，用 gap 实现，不要用 margin。"
6 种页面骨架：第一句话就该告诉 AI
Vibe Coding 新手最常犯的错误：上来就说"帮我做一个后台管理页面"。AI 获得的信息太少，只能猜一个布局——它猜中了你想要的算你运气，没猜中你得花好几轮对话改布局。
正确的做法是第一句话就告诉 AI用哪种布局。
顶栏布局（Top Nav）
导航菜单横着排在最顶上，下面一大块内容区，内容区居中不贴边。
看 VibeHub 的截图："顶部导航布局是一种把主要导航放在页面上方、下方安排内容区域的页面结构。内容区居中限宽 1080~1200px。"
适合做什么：企业官网、产品首页、博客主页。
喂给 AI 的话："用 Top Nav 布局。顶部导航栏 64px 高、半透明背景、吸顶固定。导航栏左边是 Logo，中间是链接（产品/功能/定价/关于），右边是'登录'和'免费开始'按钮。内容区居中限宽 1080px。"
左侧栏布局（Sidebar）
左侧一竖条深色菜单，右边是大块内容区。
看 VibeHub 的截图："侧栏布局是一种把层级导航放在页面一侧、把主要任务内容放在另一侧的页面结构。"
适合做什么：后台管理、数据分析面板、设置页面。（VibeHub 自己用的就是这种）
喂给 AI 的话："用 Sidebar 侧栏布局。左侧导航宽度 240px、深色背景、白色文字。顶部显示 Logo，下面依次是仪表盘/项目/设置三个导航项。右侧内容区自适应填充剩余宽度。"
单页滚动布局（Single Page）
一个长页面，从上到下，一段一段展示内容，不需要翻页。
看 VibeHub 的截图："单页滚动布局是一种把相关内容按阅读顺序放在同一长页面中的页面结构。"
适合做什么：产品 Landing Page、个人简历、作品集。
喂给 AI 的话："用 Single Page 单页布局。从上到下依次是：Hero 首屏大标题 + CTA 按钮 → 三个功能卡片横排 → 用户评价轮播 → 定价三栏对比 → 页脚。导航栏吸顶，滚动时半透明背景。"
文档三栏布局（Doc Layout）
左边目录、中间正文、右边当前章节大纲。
看 VibeHub 的截图："文档三栏布局是一种同时显示整站目录、正文内容和本页大纲的页面结构。"
适合做什么：技术文档、API 文档、帮助中心。
喂给 AI 的话："用 Doc Layout 三栏布局。左侧目录宽度 240px、显示页面大纲树。中间正文区自适应、最大宽度 720px。右侧大纲宽度 200px、显示当前页面的 H2/H3 标题。滚动时目录和大纲都吸顶固定。"
卡片网格布局（Card Grid）
多个同尺寸卡片整齐排列，屏幕宽就多放几列，窄就少放几列。
看 VibeHub 的截图："卡片网格布局是一种用规则行列排列同类卡片，并随可用宽度换行的页面结构。"
适合做什么：商品列表、分类导航、工具集合页、博客列表。
喂给 AI 的话："用 Card Grid 布局。每张卡片最小宽度 280px。大屏幕 4 列、中等屏幕 2 列、手机 1 列。每张 Card 包含图片、标题、简短描述和'查看详情'链接。"
居中窄栏布局（Centered Column）
页面中间一窄条内容，两边大片空白。
看 VibeHub 的截图："居中窄栏布局是一种限制内容栏宽度并将其置于页面中央的页面结构。内容栏居中限宽 600~720px。"
适合做什么：博客文章、新闻详情、阅读型页面。
喂给 AI 的话："用 Centered Column 布局。内容区居中限宽 680px。背景浅灰色 #f5f5f5，内容区背景白色。正文用 18px 大字号，行高 1.8。"
选哪种？看这个简单判断
回答两个问题：你的页面主要是"操作"还是"阅读"？
- 操作型（后台、表单、数据管理）→ 选侧栏布局（Sidebar）
- 阅读型（文章、文档、博客）→ 选居中窄栏（Centered Column）或三栏文档（Doc Layout）
- 展示型（官网、产品介绍）→ 选顶栏（Top Nav）或单页滚动（Single Page）
- 聚合型（商品列表、工具集合）→ 选卡片网格（Card Grid）
8 个导航组件：让用户不迷路
页面骨架搭好了，现在告诉 AI 用户在这个页面里怎么移动。
导航菜单（Menu）
放在左侧或顶部，列出所有页面的入口。可展开、可选中高亮。
看 VibeHub 的截图："导航菜单是按层级组织页面或功能入口、帮助用户在产品中移动的导航组件。"
喂给 AI 的话："左侧 Menu 导航包含三个一级菜单：仪表盘、项目、设置。'项目'展开有子菜单：全部项目、进行中、已完成。当前页面对应的菜单项高亮显示。"
面包屑（Breadcrumb）
显示你现在在哪个位置，格式是"首页 > 某个分类 > 当前页面"。每段都可以点回去。
看 VibeHub 的截图："面包屑是按层级展示当前页面路径、帮助用户返回上级的导航组件。首页 / 组件 / 面包屑。"
喂给 AI 的话："页面顶部加 Breadcrumb：首页 > 文章 > 正文。最后一项不加链接，只显示文字。"
分页（Pagination）
数据太多一页放不下，分成多页显示。底部显示"上一页 1 2 3 ... 10 下一页"。
看 VibeHub 的截图："分页是把大量结果分成多个可定位页面浏览的导航组件。‹ 1 2 3 … 10 ›。"
喂给 AI 的话："表格底部加 Pagination 分页，每页 20 条。显示总条数，比如'共 128 条'。当前页高亮。"
步骤条（Steps）
多步流程告诉用户到哪一步了。比如注册："第一步填写信息 → 第二步确认订单 → 第三步完成支付"。
看 VibeHub 的截图："步骤条是展示多步流程及当前进度的导航与状态组件。✓ 填写信息 → 2 确认订单 → 3 完成支付。"
喂给 AI 的话："发布流程用 Steps 步骤条：1 填写内容 / 2 预览 / 3 发布。第一步已完成显示 ✓，第二步进行中高亮，第三步未开始灰色。"
下拉菜单（Dropdown）
一个入口点开，弹出几个选项。比如点击"更多"出现"编辑/复制链接/删除"。
看 VibeHub 的截图："下拉菜单是点击一个入口后展开一组相关操作的浮层菜单组件。更多操作 ▾ → 重命名 / 复制链接 / 删除。"
喂给 AI 的话："每行末尾加三个竖点图标，点击展开 Dropdown：编辑、复制链接、删除。删除用红色文字。"
锚点（Anchor）
长页面里跳到指定章节。比如文章右侧显示"一背景 / 二方案 / 三结论"，点击就滚到对应位置。
看 VibeHub 的截图："锚点是让用户在同一长页面内跳到指定章节位置的页内导航链接。"
喂给 AI 的话："页面右侧加 Anchor 锚点导航。监听页面滚动，当前所在章节高亮。点击锚点平滑滚动到对应位置。"
回到顶部（BackTop）
页面滚得太长了，右下角一个小按钮，点一下直接回到页面最上面。
看 VibeHub 的截图："回到顶部是让用户从长页面当前位置快速返回页首的导航按钮。"
喂给 AI 的话："页面滚动超过 300px 时右下角显示回到顶部按钮。按钮为圆形、白色背景、阴影、带一个上箭头图标。点击平滑滚动到顶部。"
跳过导航链接（SkipLink）
网页左上角一个隐藏链接，按键盘 Tab 键才出现，作用是让盲人用户直接跳到页面主要内容，不用一个个读菜单。你不用专门管它，但知道这个存在就好。
看 VibeHub 的截图："跳过导航链接是让键盘用户直接把焦点移到页面主内容的快捷链接。"
实战：把上面学的都用上
现在你把这一篇学的所有东西合起来，喂给 AI 做一个后台页面。
一句话喂给 AI：
"用 Sidebar 布局。左侧导航宽度 240px、深色背景，Menu 包含：仪表盘、项目管理（展开：全部/进行中/已完成）、设置。顶部 Breadcrumb 显示当前位置。右侧内容区域上方是操作按钮（一个'新建项目'主按钮），下方是表格，表格底部加 Pagination 分页，每页 20 条。页面滚动超过 300px 右下角显示回到顶部按钮。内容区用居中窄栏，限宽 1080px。"
AI 收到这句话，就知道全部信息：布局结构、导航层级、操作位置、数据展示方式、分页行为、辅助功能。一次生成，基本不用改。
AI 速览
