Vibe Coding 视觉词典（上篇）：布局、页面结构、导航与常用组件

土豆不吐皮

Vibe Coding 视觉词典（上篇）：布局、页面结构、导航与常用组件
很多人让 AI 做网页时，只会说：
帮我做一个高级、简洁、有设计感的网站。
问题在于，“高级”“简洁”“有设计感”都不是明确的网页结构。AI 不知道内容应该怎么排，也不知道用户应该怎么浏览和操作。

一个完整网页可以先拆成四层：

• 页面布局 Layout：页面上的内容怎么排。
  
  
• 页面结构 Page Structure：用户先看到什么，接着看到什么。
  
  
• 导航 Navigation：用户如何移动、跳转和切换。
  
  
• 组件 UI Components：用户如何点击、展开、输入和获得反馈。
  
  
  

下面所有示例都以 个人网站为例子。每个词条只保留三部分：概念说明、适用场景、可直接复制给 AI 的提示词。

目录：

第一章：页面布局 Layout

• 1. 卡片式布局 Card-based Layout
  
• 2. 瀑布流 Masonry Layout
  
• 3. 便当盒布局 Bento Grid
  
• 4. 分屏布局 Split-screen Layout
  
• 5. CSS 网格布局 CSS Grid Layout
  
• 6. 弹性布局 Flexbox
  
• 7. 侧边栏布局 Sidebar Layout
  
• 8. 仪表盘布局 Dashboard Layout
  
• 9. 响应式布局 Responsive Layout
  
• 10. 全出血布局 Full-bleed Layout
  
  

第二章：页面结构 Page Structure

• 11. 单页网站 Single-page Website
  
• 12. 多页网站 Multi-page Website
  
• 13. 落地页 Landing Page
  
• 14. 案例研究页 Case Study Page
  
• 15. 首屏 Hero Section
  
• 16. 功能网格 Feature Grid
  
• 17. 固定叙事区 Sticky Storytelling
  
• 18. 时间线 Timeline
  
• 19. 常见问题 FAQ Section
  
• 20. 页脚 Footer
  
  

第三章：导航与切换 Navigation

• 21. 固定导航 Sticky Navbar
  
• 22. 汉堡菜单 Hamburger Menu
  
• 23. 面包屑 Breadcrumb
  
• 24. 锚点跳转 Anchor Link
  
• 25. 标签切换 Tabs
  
• 26. 侧边导航 Sidebar Navigation
  
• 27. 超级菜单 Mega Menu
  
• 28. 底部导航 Bottom Navigation
  
• 29. 分页 Pagination
  
• 30. 返回顶部 Back to Top
  
  

第四章：常用组件 UI Components

• 31. 模态框 Modal
  
• 32. 抽屉 Drawer
  
• 33. 手风琴 Accordion
  
• 34. 气泡提示 Tooltip
  
• 35. 轻提示 Toast
  
• 36. 轮播图 Carousel
  
• 37. 图片灯箱 Lightbox
  
• 38. 表单 Form
  
• 39. 命令面板 Command Palette
  
• 40. 悬浮操作按钮 Floating Action Button
  
  

下载地址：

游客，如果您要查看本帖隐藏内容请回复