Vibe Coding 视觉词典-AI 做网页（上篇）

Vibe Coding 视觉词典-AI 做网页（上篇）布局 · 页面结构 · 导航 · 常用组件写在前面很多人让 AI 做网页时，只会说：“帮我做一个高级、简洁、有设计感的网站。”问题在于，“高级”“简洁”"有设计感"都不是明确的网页结构。AI 不知道内容应该怎么排，也不知道用户应该怎么浏览和操作。一个完整网页可以先拆成四层：页面布局 Layout：页面上的内容怎么排。页面结构 Page Structure：用户先看到什么，接着看到什么。导航 Navigation：用户如何移动、跳转和切换。组件 UI Components：用户如何点击、展开、输入和获得反馈。下面所有示例都以 Punk 的个人网站为例。每个词条只保留三部分：概念说明 · 适用场景 · 可直接复制给 AI 的提示词。目录第一章 · 页面布局 Layout第二章 · 页面结构 Page Structure第三章 · 导航与切换 Navigation第四章 · 常用组件 UI Components第一章 · 页面布局 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让一组元素沿一个主要方向排列，最适合处理一行或一列中的对齐、间距和顺序。它常出现在导航栏、按钮组和卡片内部。适合：顶部导航、工具栏、按钮组、标签、头像与文字组合、卡片内部。