很多人让 AI 做网页时，只会说：
帮我做一个高级、简洁、有设计感的网站。
问题在于，"高级""简洁""有设计感"都不是明确的网页结构。AI 不知道内容应该怎么排，也不知道用户应该怎么浏览和操作。
一个完整网页可以先拆成四层：
- 页面布局 Layout：页面上的内容怎么排。
- 页面结构 Page Structure：用户先看到什么，接着看到什么。
- 导航 Navigation：用户如何移动、跳转和切换。
- 组件 UI Components：用户如何点击、展开、输入和获得反馈。
下面所有示例都以 Punk 的个人网站为例子。每个词条只保留三部分：概念说明、适用场景、可直接复制给 AI 的提示词。
第一章：页面布局 Layout
页面布局决定内容如何占据屏幕：是整齐排列、错落排列、左右分屏，还是由大小不同的模块组成。它回答的是"页面上的东西怎么排"。
1. 卡片式布局 Card-based Layout
把内容拆成一张张独立卡片，每张卡片承载一个项目、一篇文章、一项服务或一组信息。卡片之间边界清楚，浏览速度快，也是 AI 最容易稳定实现的布局之一。
适合：作品集、博客列表、功能介绍、工具导航、商品列表、个人主页。
为 Punk 的个人网站创建一个响应式卡片式布局，
项目区展示 6 张独立卡片，每张卡片包含项目封面、项目名称、两行简介、技术标签和"查看项目"按钮；
桌面端三列，平板端两列，手机端单列；
使用米白背景、深绿色强调色、细边框、克制圆角和轻微阴影。2. 瀑布流 Masonry Layout
卡片宽度大致一致，但高度不统一，内容像瀑布一样自然错落。它不会强迫每一行严格对齐，因此特别适合不同尺寸的图片和视觉作品。
适合：AI 生图作品集、摄影集、灵感墙、案例封面、视觉型博客。
为 Punk 创建一个瀑布流作品画廊，
使用三列 Masonry Layout 展示不同宽高比的 AI 作品，保留图片原始比例，不要裁切成统一高度；
桌面端三列，平板端两列，手机端单列；
图片进入视口附近时再加载，点击后打开全屏预览。3. 便当盒布局 Bento Grid
用大小不同的矩形模块组成页面。最大的区域负责展示核心内容，小模块放技能、文章、联系方式、数字或状态，依靠尺寸差异建立视觉优先级。
适合：个人主页、产品首页、SaaS 首页、创作者网站、AI 工具展示页。
为 Punk 设计一个 Bento Grid 个人主页，
左侧使用一张大型 Hero 卡片展示姓名、身份介绍和主要按钮，右侧使用大小不同的模块卡片展示 About、Skills、Latest Writing 和 Contact，底部放一张横向 Featured Project 卡片；
不要做成平均九宫格，要通过模块大小突出主次关系。4. 分屏布局 Split-screen Layout
把页面分成左右两部分，常见形式是左边文字、右边视觉，或者一边固定、另一边滚动。它能让信息和视觉同时成为主角。
适合：个人首页、产品介绍、登录页、创意作品集、对比页面。
为 Punk 的个人主页设计一个 Split-screen Hero，
左侧占 45%，展示姓名、身份、简介和两个操作按钮，右侧占 55%，展示抽象的网页界面与空间化视觉；
桌面端保持左右分屏，手机端改为上下结构，文字在前、视觉在后。
5. CSS 网格布局 CSS Grid Layout
按照明确的行和列组织页面，适合处理二维关系。它可以让不同模块占据不同列宽，构建规则或非对称的复杂页面。
适合：复杂首页、杂志排版、Dashboard、非对称作品集、响应式模块。
使用 CSS Grid 构建 Punk 的作品页面，
桌面端采用 12 列网格，主项目占 8 列，项目说明占 4 列，其余项目每张占 4 列；
900px 以下改为 6 列，640px 以下改为单列；
使用 grid-template-columns 和 gap，不要用绝对定位硬拼布局。6. 弹性布局 Flexbox
让一组元素沿一个主要方向排列，最适合处理一行或一列中的对齐、间距和顺序。它常出现在导航栏、按钮组和卡片内部。
适合：顶部导航、工具栏、按钮组、标签、头像与文字组合、卡片内部。
Punk 网站的顶部导航使用 Flexbox，左侧显示 Punk Logo，右侧显示 Work、About、Writing、Contact 和主题切换按钮；
使用 justify-content: space-between 和 align-items: center，小屏幕时隐藏文字导航并显示 Hamburger Menu。7. 侧边栏布局 Sidebar Layout
页面一侧长期保留一条栏，另一侧显示主要内容。侧边栏可以承载个人信息、分类、目录、筛选器或后台导航。
适合：博客、文档站、后台、作品归档、设置页。
为 Punk 的个人网站添加侧边栏布局，桌面端侧边栏固定 280px 宽，显示个人简介、导航和社交链接，主内容区自适应；
移动端侧边栏隐藏，改为顶部导航。8. 仪表盘布局 Dashboard Layout
通常由侧边导航、顶部工具栏、统计卡片、图表、表格和最近活动构成，强调信息密度与任务效率。
适合：个人内容后台、项目管理、数据产品、CMS、AI 工具控制台。
为 Punk 设计一个简洁的个人内容后台 Dashboard，
左侧为侧边导航，顶部为工具栏，主体区域由统计卡片、最近文章表格和一个小图表组成；
信息密度要高，但保持清晰的视觉层级。
9. 响应式布局 Responsive Layout
同一个网页根据屏幕尺寸重新排列，而不是把桌面页面整体缩小。桌面、平板和手机应该有不同的布局状态。
适合：几乎所有公开网页。
让 Punk 的个人网站完全响应式，设置 desktop、tablet、mobile 三种布局状态；
桌面端内容最大宽度为 1200px，平板端卡片两列，手机端单列并把顶部导航改成 Hamburger Menu；
保证正文不出现横向滚动，所有按钮在触屏设备上都有清晰点击区域。10. 全出血布局 Full-bleed Layout
图片、视频或颜色区域一直延伸到屏幕边缘，不受普通内容容器限制。它常被用来制造沉浸式首屏或章节过渡。
适合：品牌首页、作品开场、摄影网站、产品发布页、沉浸式故事。
为 Punk 的作品集做一个 Full-bleed 首屏，
背景图片或颜色区域完全延伸到屏幕边缘，不受内容容器宽度限制；
下方内容区恢复常规容器宽度，形成沉浸式开场与常规内容的对比。
第二章：页面结构 Page Structure
页面结构决定用户先看到什么、接着看到什么，以及一个页面如何讲完一件事。它回答的是"内容按什么顺序出现"。
11. 单页网站 Single-page Website
所有主要内容都放在同一页面中，用户通过滚动或锚点导航浏览 Hero、About、Projects、Writing 和 Contact。
适合：个人名片、轻量作品集、活动页、早期产品介绍、信息量不大的官网。
为 Punk 做一个单页个人网站，依次包含 Hero、About、Projects、Writing 和 Contact 五个区块；
顶部导航使用锚点链接，点击后平滑滚动到对应区块。12. 多页网站 Multi-page Website
不同内容拥有独立页面和网址，例如首页、作品列表、项目详情、关于、文章和联系页面。它更适合长期扩展。
适合：成熟作品集、博客、企业官网、内容站、项目较多的网站。
将 Punk 的个人网站从单页改为多页结构，
包含首页、作品列表、项目详情、关于、文章和联系页面；
每个页面共享统一的导航和页脚，使用相对路径保证子页面跳转正确。13. 落地页 Landing Page
围绕一个明确目标组织页面，用户被引导完成注册、购买、预约、下载或联系。页面中的每一部分都服务于同一个行动。
适合：AI 产品、课程、活动、Newsletter、个人服务、作品发布。
为 Punk 的新书发布做一个 Landing Page，
围绕一个核心行动（预约购买）组织页面：Hero 简介、三个卖点、作者介绍、常见问题、购买按钮；
每个区块都引导用户向下一个区块或直接完成行动。14. 案例研究页 Case Study Page
不仅展示最终效果，还讲清项目背景、问题、过程、关键决策、方案、结果和复盘。
适合：设计师作品集、开发者项目、产品项目、品牌案例、求职作品集。
为 Punk 的某个项目写一个 Case Study 页面，
按背景、问题、过程、关键决策、方案、结果、复盘的结构组织内容；
用时间线或章节标题区分阶段，关键决策处给出理由说明。
15. 首屏 Hero Section
用户打开页面最先看到的区域，负责快速回答你是谁、你做什么、为什么值得继续看，以及下一步该点哪里。
适合：几乎所有首页和 Landing Page。
为 Punk 的个人网站设计 Hero 首屏，
包含姓名、一句话身份介绍、两句价值主张和一个主要行动按钮；
背景使用简洁的视觉元素，不要放过多文字。16. 功能网格 Feature Grid
用三到六个并列模块介绍能力、服务或产品功能，每个模块通常包含图标、标题和短说明。
适合：能力介绍、产品功能、服务清单、优势展示。
在 Punk 的首页添加一个 3x2 功能网格，
每个模块包含图标、标题和两行说明，介绍他的服务或能力；
保持模块之间间距一致，图标风格统一。17. 固定叙事区 Sticky Storytelling
一侧内容固定，另一侧随着滚动依次出现不同阶段，让复杂过程像讲故事一样被阅读。
适合：产品故事、项目过程、时间线、复杂功能解释、品牌叙事。
为 Punk 的项目介绍做一个 Sticky Storytelling，
左侧固定展示项目核心视觉，右侧滚动依次出现项目背景、挑战、方案、结果四个阶段；
右侧每到一个阶段，左侧视觉同步切换。18. 时间线 Timeline
用一条线和多个节点按时间顺序展示经历、版本、里程碑或项目进展。
适合：职业经历、项目里程碑、产品版本、公司历史、学习路径。
在 Punk 的 About 页面添加一条 Vertical Timeline，每个节点包含年份、事件名称和两行说明；
桌面端内容位于时间线右侧，手机端保持单列；
使用细线条和圆形节点，不要做成复杂路线地图。
19. 常见问题 FAQ Section
把常见问题集中放在页面末段，通常通过折叠面板展开答案，帮助用户快速消除疑虑。
适合：服务说明、产品定价、课程、合作流程、常见疑问。
在 Punk 的服务页面添加 FAQ 区块，包含 6 个常见问题；
使用 Accordion 折叠交互，默认收起，点击标题展开答案；
问题要覆盖服务流程、价格、周期和售后。20. 页脚 Footer
页面最底部的收尾区域，用来承载站点导航、社交链接、联系方式、版权信息和订阅入口。
适合：所有完整网站。
为 Punk 的个人网站设计页脚，
包含三列：站点导航、社交链接、订阅输入框；
底部一行显示版权信息，风格与全站一致。
第三章：导航与切换 Navigation
导航决定用户怎样在页面和内容之间移动。它回答的是"我在哪里、我还能去哪里、点击后会发生什么"。
21. 固定导航 Sticky Navbar
页面向下滚动时，顶部导航仍然保持可见，适合长页面和需要频繁跳转的内容。
适合：长页面、单页网站、文档、Landing Page、作品集。
将 Punk 网站的顶部导航改为 Sticky Navbar，
页面滚动时导航固定在顶部，背景加半透明模糊效果；
导航项保持 Home、Work、About、Writing、Contact 五个入口。22. 汉堡菜单 Hamburger Menu
手机端右上角常见的三条横线按钮，点击后展开或滑出完整导航。
适合：移动网站、小屏界面、极简导航、导航项较少的网站。
为 Punk 网站实现汉堡菜单，
桌面端显示完整导航，移动端折叠为汉堡按钮；
点击后从右侧滑出导航面板，点击遮罩或导航项后关闭；
使用 aria-expanded 和 aria-label 保证无障碍。
23. 面包屑 Breadcrumb
在页面顶部显示层级路径，例如"首页 › 作品 › AI 工具 › 项目详情"，帮助用户理解当前页面在网站结构中的位置。
适合：多层级网站、电商、博客、文档、项目详情页。
在 Punk 的项目详情页添加面包屑导航，路径为"首页 › 作品 › 项目名称"；
使用 nav aria-label 包裹，层级之间用分隔符，最后一级为当前页面不加链接。24. 锚点跳转 Anchor Link
点击导航后不打开新页面，而是移动到当前页面中的指定区块。
适合：单页网站、长文章、Landing Page、文档目录、页面内目录。
在 Punk 的单页网站中使用锚点跳转，
导航链接指向各区块 ID，点击后平滑滚动到目标位置；
滚动到对应区块时，导航项高亮显示当前位置。
25. 标签切换 Tabs
多个标签共用同一块内容区域，一次只显示其中一个同等级视图。
适合：内容分类、数据视图、设置、作品分类、月度与年度图表。
在 Punk 的作品区添加 Tabs，标签为 All、Web、AI、Experiments，默认显示 All；
切换标签时只更新下方项目网格，不刷新整个页面；
使用 tablist、tab 和 tabpanel 语义，支持左右方向键切换并显示清晰 active 状态。26. 侧边导航 Sidebar Navigation
把主要导航长期放在页面左侧或右侧，适合入口较多、层级较深的系统。
适合：后台、文档、设置页、复杂工具、个人内容管理。
为 Punk 的内容后台设计侧边导航，
左侧固定侧边栏包含仪表盘、文章、项目、媒体、设置五个入口；
当前页面高亮，点击后切换主内容区。
27. 超级菜单 Mega Menu
点击主导航后展开一个面积较大的多列菜单，可以同时展示分类、子页面和精选内容。
适合：内容很多的网站、产品矩阵、资源中心、复杂作品分类。
为 Punk 的资源中心添加 Mega Menu，
鼠标悬停或点击"资源"导航项后展开多列菜单：教程、工具、模板、精选资源四列；
每列包含标题和 4-5 个链接，整体宽度对齐内容容器。28. 底部导航 Bottom Navigation
在手机屏幕底部长期显示三到五个最重要的入口，适合需要频繁切换核心区域的移动产品。
适合：移动 Web App、Dashboard、内容工具、创作工具。
为 Punk 网站的移动端添加底部导航，
底部固定显示 Home、Work、About、Contact 四个入口；
图标加文字，当前页面高亮，与顶部导航功能互补。
29. 分页 Pagination
把长列表拆成多个固定页面，用户通过页码或上一页、下一页进行切换。
适合：博客归档、搜索结果、后台表格、作品列表、数据量较大的列表。
在 Punk 的文章列表添加分页，
每页显示 10 篇文章，包含上一页、页码、下一页；
页码超过 5 页时折叠中间页码，用省略号表示。30. 返回顶部 Back to Top
页面滚动到一定距离后，右下角出现返回顶部按钮，帮助用户快速回到页面开头。
适合：长文章、长作品页、文档、长列表。
为 Punk 的长页面添加返回顶部按钮，
页面滚动超过 400px 后右下角出现圆形按钮，点击平滑回到顶部；
使用 SVG 箭头图标，按钮带半透明背景。
第四章：常用组件 UI Components
组件是页面中的局部交互单元。它回答的是"点击、输入、展开、关闭和反馈应该如何发生"。
31. 模态框 Modal
一个覆盖在当前页面之上的对话框，背景被遮罩，用户需要先处理或关闭它才能回到页面。
适合：联系表单、确认操作、登录、快速预览、必须立即处理的任务。
为 Punk 的网站实现一个联系表单 Modal，
点击"联系我"按钮后弹出模态框，背景遮罩变暗；
包含姓名、邮箱、留言字段和提交按钮，支持 Esc 关闭和点击遮罩关闭；
焦点进入 Modal 内部，关闭后焦点回到触发按钮。32. 抽屉 Drawer
一个从屏幕左侧、右侧或底部滑出的面板，可以展示导航、筛选、设置或详情。
适合：移动导航、筛选、设置、详情预览、购物车、通知中心。
为 Punk 的作品集实现一个详情 Drawer，
点击项目卡片后从右侧滑出抽屉，展示项目完整信息；
抽屉宽度 400px，支持点击遮罩、关闭按钮和 Esc 三种关闭方式；
打开时主内容区禁止滚动。
33. 手风琴 Accordion
多组标题纵向排列，点击标题后展开或收起对应内容。
适合：FAQ、移动菜单、筛选器、课程目录、分组说明。
为 Punk 的 FAQ 实现手风琴组件，
多个问题纵向排列，点击标题展开答案，再次点击收起；
同一时间只允许展开一个面板，切换时平滑过渡；
使用按钮元素承载标题，保证键盘可操作。34. 气泡提示 Tooltip
鼠标悬停或键盘聚焦到图标时，旁边出现一小块简短说明。它只适合补充短信息。
适合：图标解释、术语补充、按钮名称、图表数据说明。
为 Punk 网站的图标按钮添加 Tooltip，
鼠标悬停或键盘聚焦时显示简短说明文字；
Tooltip 出现在按钮上方或右侧，浅色背景深色文字，2 秒后自动隐藏。
35. 轻提示 Toast
完成操作后在页面角落短暂出现的状态消息，不会像 Modal 一样中断用户。
适合：保存、复制、发布、删除、网络状态和轻量操作反馈。
为 Punk 网站添加 Toast 通知组件，
复制链接、保存成功、操作失败时在右下角出现轻提示；
自动 3 秒消失，支持手动关闭，同一时间最多显示 3 条；
成功用绿色、失败用红色区分。36. 轮播图 Carousel
在有限空间中轮流展示多个项目，通常带有左右箭头、圆点指示和当前序号。
适合：精选项目、客户评价、产品截图、活动 Banner。
为 Punk 的作品集首页添加 Carousel，
轮播展示 3 个精选项目，包含左右箭头、圆点指示器和自动播放；
自动播放 5 秒切换一次，鼠标悬停时暂停；
支持触摸滑动切换，图片保持 16:9 比例。
37. 图片灯箱 Lightbox
点击缩略图后，在遮罩层上放大显示原图，并支持关闭、切换和查看标题。
适合：摄影、AI 作品、插画、项目截图、视觉作品集。
为 Punk 的 AI 作品集实现 Lightbox，
点击缩略图后在遮罩上放大显示原图，背景变暗；
支持左右切换、Esc 关闭和键盘方向键浏览；
图片加载时显示轻量加载状态。38. 表单 Form
由输入框、标签、选择器、复选框和提交按钮组成，用来完成联系、订阅、登录或设置等任务。
适合：联系、订阅、登录、搜索、预约、设置。
为 Punk 设计一个 Newsletter 订阅表单，
包含邮箱输入框和订阅按钮，支持空值校验和邮箱格式校验；
提交成功后显示成功 Toast，错误时在输入框下方显示错误提示；
使用 label 关联输入框，保证无障碍访问。
39. 命令面板 Command Palette
按下快捷键后弹出的快速搜索与操作面板，用户可以通过键盘跳转页面或执行命令。
适合：开发者工具、文档站、复杂个人网站、Dashboard、效率工具。
为 Punk 的个人网站添加 Command Palette，
按 Cmd+K 打开，支持搜索页面标题、项目名称和常用操作；
结果列表用键盘上下键选择，回车执行，Esc 关闭；
输入为空时显示常用操作列表。40. 悬浮操作按钮 Floating Action Button
固定在界面角落的主要操作按钮，不随内容滚走，通常代表新增、创建或快速联系。
适合：Dashboard、移动工具、创作应用、快速联系、主要新增操作。
为 Punk 的移动端网站添加悬浮操作按钮，
固定在右下角，点击展开"联系我"和"返回顶部"两个快捷操作；
默认状态为圆形加号图标，展开后变成两个小按钮；
展开时遮罩半透明背景，点击空白处收起。
个人点评
这篇是 Adrian Punk 的《Vibe Coding 视觉词典》上篇，一句话概括它的价值：它把"高级、简洁、有设计感"这类模糊审美词，翻译成了 AI 能直接执行的结构化术语。
很多人在 Vibe Coding 时遇到的问题是"我说不清楚我要什么"。这篇词典给了一条很实用的路：不描述感觉，直接说结构——"用 Bento Grid 布局，首屏是 Hero Section，导航用 Sticky Navbar，FAQ 用 Accordion"。AI 对这些词的理解是确定性的，而对"高级感"的理解是随机的。这跟之前转载过的"非设计背景如何用 Codex 做高级感网站"正好互补：那篇讲的是流程（先写 DESIGN.md 再写代码），这篇提供的是词汇表（DESIGN.md 里具体该写什么）。
几个我觉得特别值得注意的点：
1. 每个词条都配了"可直接复制给 AI 的提示词"，这是全文最实操的部分。 概念和场景说明只是帮你建立认知，最后那一段 prompt 才是可以直接进工作流的。这种"词典+prompt 库"的形态，其实和内容原子化是一个思路：把知识拆成可复用的小单元。
2. 40 个词条的归类方式本身就有方法论。 布局（怎么排）→ 结构（什么顺序）→ 导航（怎么移动）→ 组件（怎么交互），这个四层拆解覆盖了一个网页的完整信息架构。以后让 AI 做页面，按这四层逐层给指令，比一次性丢一句"做个好看的高级网站"可靠得多。
3. 对 Agent 工作流也有启发。 我现在做 HyperFrames、个人站的页面时，其实也在用类似思路，但没有这么系统地整理过。这类"视觉术语库"完全可以沉淀成 Agent 可调用的 skill 或参考文档，让 AI 在生成页面时自动带上正确的结构词汇。
两个小补充：
- 这是"上篇"，覆盖了布局/结构/导航/组件四层共 40 个词条。按照 Punk 的规划，下篇大概率会讲视觉风格（色彩、字体、间距、动效）——那部分对"设计感"的提升可能更直接，值得关注。
- 词典里每个词条的"适合场景"写得很好，但作者没有给"如何组合使用"的例子。实际工作中很少只用一种布局或组件，如果能有一套"从需求到布局组合"的决策路径（比如：个人作品集 → Bento Grid + Sticky Navbar + Lightbox），实用性会再上一个台阶。
总的来说，这是 Vibe Coding 实践者值得收藏的一份参考，特别是经常让 AI 做页面但苦于"说不清需求"的人。建议配合你自己的 DESIGN.md 工作流使用：把词典当作词库，从里面挑合适的结构词汇填进你的设计文档。
转载声明：本文原载于 X（Twitter），作者 Adrian Punk（@AdrianPunk115）。原文链接：https://x.com/AdrianPunk115/status/2084538166577602899