企业官网建设流程全解析

最近很多朋友在问：想做一个有设计感的个人网站，但自己不是专业设计师，前端也只会一点基础，能不能用 Vibe Coding 的方式快速搞定？

我的答案是：能，但要讲究方法。Vibe Coding 不是让 AI 随便生成一个网页就完事，而是把“设计需求”清晰地描述给 AI，让 AI 帮你搭出结构、补全细节、迭代样式，最后再结合手工微调，做出真正能展示个人品牌、简历、作品的站点。

这篇文章我会从 Vibe Coding 的理念讲起，然后给出一套完整可落地的建站方案，包含设计规范、HTML/CSS 代码示例、部署流程和常见问题。无论你是零基础学生、想展示作品集的设计师，还是准备做个人品牌的独立开发者，都能照着一步步执行。

1. 什么是 Vibe Coding，为什么适合做个人网站

1.1 Vibe Coding 的基本概念

Vibe Coding 是一种“用自然语言驱动编程”的开发模式。你可以用自然语言描述自己想要的功能、交互、视觉风格，AI 代码生成工具会帮你生成对应的页面、组件和逻辑。

在个人网站场景下，Vibe Coding 的典型交互是这样的：

我想做一个个人网站首页，风格偏向简约、文艺，主色调是米白色， 配一个侧边栏展示头像和个人简介，顶部有导航栏，支持响应式布局。

AI 收到描述后，会生成一整套 HTML/CSS/JS 文件。你再根据实际效果继续提需求：

侧边栏改成右侧，字体换成衬线体，增加一个作品展示的网格区域。

整个过程类似“跟一个懂前端的设计师对话”，这就是 Vibe Coding 的核心体验。

1.2 它解决什么问题

• 降低前端门槛：不需要精通 CSS Flexbox、Grid，也能通过 AI 生成合理布局。
• 提高设计效率：AI 能根据“简约、高级、文艺、科技感”等关键词，快速给出视觉方向。
• 缩短迭代周期：改配色、改间距、加组件，靠对话就能完成，不用从头写代码。
• 利于学习：AI 生成的代码可以当教程看，边做边学前端基础。

1.3 需要避免的误区

Vibe Coding 不等于“无脑生成、直接上线”。你仍然需要掌握基本的网页结构、理解代码逻辑、能排查运行问题。特别是“设计感”这个抽象需求，AI 默认生成的结果往往偏模板化，需要反复调教和手工微调。

简单说：Vibe Coding 是加速器，不是完全替代品。这也是为什么很多人发现“AI 生成很快，但想要好看，还是得自己会一点审美和 CSS”。

2. 用 Vibe Coding 做个人网站的整体路径

做个人网站前，先梳理一条完整的技术路径，避免边做边乱。

2.1 站点类型与目标

先明确你的个人网站是哪种用途：

不同站点类型，设计重点差别很大。简历站重信息层级，作品集站重视觉留白，博客站重阅读体验。

2.2 技术选型方案

根据动手能力和需求复杂度，有三种主流方案：

方案 A：纯静态 HTML/CSS/JS

• 适合：单页简历、简单作品集。
• 优点：无需后端，部署简单，加载快。
• 缺点：改内容和加功能需要手动编辑文件。

方案 B：静态站点生成器（如 Astro、VitePress）

• 适合：技术博客、文档型站点。
• 优点：支持 Markdown 写文章、自动生成页面结构。
• 缺点：需要了解构建流程。

方案 C：低代码平台

• 适合：完全不想写代码、快速上线。
• 优点：可视化编辑，速度快。
• 缺点：定制能力受限，长期维护成本偏高。

如果目标是“有设计感的个人网站”，我最推荐方案 A 起步。它最简单、最可控，也最适合 Vibe Coding 分步生成和迭代。

3. 设计感从哪来：个人网站设计基础规范

很多人觉得“设计感”是玄学，其实它由几个具体因素决定：配色、字体、间距、布局、图片和微交互。做个人网站时，先定这几个设计基准，AI 生成的结果会更接近预期。

3.1 配色系统

不要全站都用高饱和颜色。推荐使用低饱和中性色作背景，用少量强调色作点缀。

个人常用的一套配色方案：

:root { --bg-primary: #faf9f7; --bg-secondary: #f2f0ec; --text-primary: #1f2328; --text-secondary: #57606a; --accent: #d4a373; --border: #e5e1db; }

这套颜色适合偏文艺、简约的个人品牌站。做开发者风时，把强调色换成蓝、绿、紫等科技感强的颜色即可。

3.2 字体与排版

中文字体推荐系统字体栈，保证跨平台显示稳定：

body { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }

标题字体可以用稍重一点的字重，正文保持 16–18px，行高 1.7–1.8。阅读体验是设计感的重要基础，字太小、行距太紧，页面再花哨也显得廉价。

3.3 间距与留白

页面内元素之间避免挤在一起。推荐用 8 的倍数作为间距单位：

• 区块上下间距：80px–120px
• 卡片内边距：24px–40px
• 文字间距：12px–16px

3.4 布局结构

个人网站最常见的布局是：

• 顶部导航：Logo + 菜单
• Hero 区：一句话介绍 + 行动按钮
• 作品/文章区：卡片网格
• 关于我：头像 + 简介
• 底部：社交链接 + 版权

先按这个结构写需求，AI 生成的结果通常会比较完整。

4. 完整实战：Vibe Coding 打造有设计感的个人网站

下面我用一个实际案例，演示如何从需求描述到最终上线。假设站点类型是“作品集 + 个人简介”风格，目标用户是设计师/开发者。

4.1 创建项目结构

新建一个文件夹portfolio-site，结构如下：

portfolio-site/ ├── index.html ├── css/ │ └── style.css └── js/ └── main.js

这是最基础的静态站点结构。后续要加作品详情页，再创建works.html等页面即可。

4.2 编写需求描述并生成首页结构

打开 AI 编程工具（Cline、Codex、Trae、通义灵码等），输入以下需求描述：

请生成一个个人作品集网站的首页 index.html，要求： 1. 顶部导航栏，包含“首页、作品、关于、联系”四个菜单项； 2. Hero 区：左侧显示名字和简短介绍，右侧放一张头像占位图； 3. 下方是作品展示区，使用网格布局，至少 4 张作品卡片； 4. 底部是个人信息和社交链接； 5. 语义化标签，结构清晰； 6. 页面样式写在 css/style.css 中。

AI 生成的 HTML 结构可能不完全符合预期，我会先运行预览，再逐步补充视觉要求。

4.3 手工优化 HTML 结构

无论 AI 生成多完整，建议你手动检查一遍标签语义。下面是一个基础版index.html示例：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>个人作品集 - My Portfolio</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <header class="site-header"> <div class="container header-inner"> <a href="#" class="logo">MyLogo</a> <nav class="main-nav"> <a href="#works">作品</a> <a href="#about">关于</a> <a href="#contact">联系</a> </nav> </div> </header> <section class="hero container"> <div class="hero-text"> <h1>你好，我是小林</h1> <p>一名关注用户体验的独立设计师与前端开发者。</p> <a href="#works" class="btn-primary">查看作品</a> </div> <div class="hero-avatar"> <img src="https://placehold.co/400x400" alt="头像占位图" /> </div> </section> <section id="works" class="works container"> <h2>精选作品</h2> <div class="works-grid"> <article class="work-card"> <img src="https://placehold.co/600x400" alt="作品 1" /> <h3>品牌设计案例</h3> <p>一个咖啡品牌的完整视觉识别系统。</p> </article> <article class="work-card"> <img src="https://placehold.co/600x400" alt="作品 2" /> <h3>数据可视化平台</h3> <p>面向运营团队的数据分析工具界面设计。</p> </article> <article class="work-card"> <img src="https://placehold.co/600x400" alt="作品 3" /> <h3>个人博客 UI</h3> <p>以阅读体验为核心的博客界面设计。</p> </article> <article class="work-card"> <img src="https://placehold.co/600x400" alt="作品 4" /> <h3>移动端应用</h3> <p>一款习惯打卡 App 的交互设计。</p> </article> </div> </section> <section id="about" class="about container"> <div class="about-wrapper"> <img src="https://placehold.co/300x300" alt="个人照片" /> <div class="about-content"> <h2>关于我</h2> <p>我拥有 3 年数字产品设计经验，喜欢研究界面美学与前端实现之间的平衡。</p> <p>目前服务过的客户覆盖教育、电商、SaaS 等领域。</p> </div> </div> </section> <footer id="contact" class="site-footer"> <div class="container footer-inner"> <p>© 2025 Xiaolin. All rights reserved.</p> <div class="social-links"> <a href="#">GitHub</a> <a href="#">微博</a> <a href="#">邮箱</a> </div> </div> </footer> <script src="js/main.js"></script> </body> </html>

这个结构里要注意：

• nav用header包裹，语义清晰。
• Hero 区分为文本区和头像占位图，方便后续替换真实头像。
• 作品区使用article标签，每一张卡片是独立内容块。
• 锚点href="#works"配合id，实现页面内平滑跳转。

4.4 编写有设计感的 CSS

设计感主要体现在 CSS 上。接下来写一份基础样式，覆盖配色、排版、间距和响应式布局：

/* 文件路径：portfolio-site/css/style.css */ :root { --bg-primary: #faf9f7; --bg-secondary: #f2f0ec; --text-primary: #1f2328; --text-secondary: #57606a; --accent: #d4a373; --border: #e5e1db; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.7; } .container { max-width: 1140px; margin: 0 auto; padding: 0 20px; } /* 顶部导航 */ .site-header { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .logo { font-size: 22px; font-weight: 700; color: var(--text-primary); text-decoration: none; } .main-nav a { margin-left: 28px; color: var(--text-secondary); text-decoration: none; font-size: 15px; transition: color 0.2s ease; } .main-nav a:hover { color: var(--accent); } /* Hero 区域 */ .hero { display: flex; align-items: center; justify-content: space-between; min-height: 60vh; padding-top: 60px; padding-bottom: 60px; gap: 40px; } .hero-text h1 { font-size: 44px; line-height: 1.3; margin-bottom: 16px; } .hero-text p { font-size: 18px; color: var(--text-secondary); max-width: 480px; margin-bottom: 28px; } .btn-primary { display: inline-block; background: var(--accent); color: #fff; padding: 12px 28px; border-radius: 6px; text-decoration: none; transition: opacity 0.2s ease; } .btn-primary:hover { opacity: 0.85; } .hero-avatar img { width: 280px; height: 280px; border-radius: 50%; object-fit: cover; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); } /* 作品区 */ .works { padding-bottom: 80px; } .works h2, .about h2 { font-size: 32px; margin-bottom: 32px; position: relative; } .works h2::after, .about h2::after { content: ""; display: block; width: 48px; height: 3px; background: var(--accent); margin-top: 8px; } .works-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .work-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 16px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .work-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06); } .work-card img { width: 100%; height: 240px; object-fit: cover; border-radius: 6px; margin-bottom: 14px; } .work-card h3 { font-size: 18px; margin-bottom: 6px; } .work-card p { color: var(--text-secondary); font-size: 14px; } /* 关于我 */ .about { background: var(--bg-secondary); padding-top: 80px; padding-bottom: 80px; } .about-wrapper { display: flex; align-items: center; gap: 48px; } .about-wrapper img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; } .about-content p { color: var(--text-secondary); margin-top: 12px; max-width: 560px; } /* 底部 */ .site-footer { border-top: 1px solid var(--border); padding: 28px 0; } .footer-inner { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--text-secondary); } .social-links a { margin-left: 16px; color: var(--text-secondary); text-decoration: none; } .social-links a:hover { color: var(--accent); } /* 响应式 */ @media (max-width: 768px) { .hero { flex-direction: column; text-align: center; } .hero-text p { margin-left: auto; margin-right: auto; } .works-grid { grid-template-columns: 1fr; } .about-wrapper { flex-direction: column; text-align: center; } .footer-inner { flex-direction: column; gap: 12px; } }

这份 CSS 已经把设计感的主要组成部分都覆盖了：

• sticky顶部导航配合毛玻璃效果，让页面滚动时导航仍清晰可见。
• Hero 区大标题 + 简短描述 + 行动按钮，是个人网站最常见的首屏结构。
• 作品卡片使用Grid布局，悬停时轻微上浮并出现阴影，增强交互反馈。
• 强调色统一，下划线装饰用短横线，增加细节感。

4.5 增加 JS 交互

设计感不只是视觉，也包括交互细节。下面给页面加两个实用功能：导航栏滚动阴影、卡片淡入动画。

// 文件路径：portfolio-site/js/main.js // 1. 导航栏滚动时增加阴影 const header = document.querySelector('.site-header'); window.addEventListener('scroll', () => { if (window.scrollY > 10) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } }); // 2. 卡片淡入动画 const cards = document.querySelectorAll('.work-card'); const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add('visible'); observer.unobserve(entry.target); } }); }, { threshold: 0.2 }); cards.forEach((card) => observer.observe(card));

对应补充 CSS：

.site-header.scrolled { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .work-card { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease; } .work-card.visible { opacity: 1; transform: translateY(0); }

这里用到了IntersectionObserver，它会在元素进入可视区域时触发动画，性能比滚动监听事件更好。没有这个动画其实页面也能用，但加上后整个站点的质感会有明显提升。

4.6 本地预览与验证

在项目根目录运行：

cd portfolio-site npx serve .

或使用 VS Code 的 Live Server 插件，右键index.html选择 “Open with Live Server”。

浏览器访问http://localhost:3000，检查以下内容：

• 导航是否吸顶。
• 点击“查看作品”是否平滑滚动到作品区。
• 作品卡片是否在滚动时淡入。
• 缩小浏览器宽度，移动端布局是否正常。

4.7 部署到线上

静态站点推荐部署到 Vercel 或 Netlify。以 Vercel 为例：

1. 将portfolio-site推送到 GitHub 仓库。
2. 登录 Vercel，点击 “Add New Project”。
3. 导入仓库，框架选择Other。
4. 点击 Deploy，等待完成即可获得线上地址。

自定义域名可以在 Vercel 的Domains设置中添加。绑定域名前记得把 DNS 解析到 Vercel 分配的记录。

5. 常见问题与排查思路

Vibe Coding 建站过程中，最容易遇到下面几类问题。

额外提醒：在线占位图服务建议在测试阶段使用，正式上线前必须换成真实图片，并做好图片压缩，避免页面加载变慢。

6. 最佳实践与工程建议

6.1 把需求描述写具体

AI 生成质量高度依赖你的提示词。描述时尽量包含：

• 页面结构（顶部导航、Hero、作品区、关于、footer）。
• 视觉风格（简约、文艺、科技感、高级感）。
• 配色倾向（暖色、冷色、低饱和、黑白灰）。
• 响应式要求（桌面端、平板、手机）。
• 特殊交互（平滑滚动、悬停动画、滚动显现）。

6.2 美术与排版细节优先

“设计感”通常来自细节。项目落地前重点检查：

• 标题层级是否清晰，h1、h2、h3 是否乱用。
• 中英文混排时是否有合适间距。
• 卡片圆角是否统一。
• 阴影是否自然，不要过重。
• 强调色在全站是否一致。

6.3 图片与资源管理

个人网站最容易出现的问题是图片体积过大。建议：

• 使用 WebP 或压缩后的 JPG。
• 图片宽度控制在容器宽度的 2 倍以内。
• 头像、作品图单独建images目录管理。
• 不要从网上随意外链大图，防止失效或拖慢加载。

6.4 代码与版本管理

即便是一个小网站，也建议：

• 用 Git 管理项目，方便回滚。
• 每次大改动前 commit 一次。
• 把node_modules、本地缓存目录加入.gitignore。

6.5 上线前的内容核对

发布前检查：

• 个人信息是否有错误。
• 社交链接是否可访问。
• 联系方式是否有误。
• 版权年份是否正确。
• 不同浏览器、设备下页面是否正常。

6.6 Vibe Coding 的进阶用法

如果还想继续扩展，可以继续用自然语言驱动 AI 完成这些任务：

• 把作品卡片改成可点击跳转到详情页。
• 增加博客文章列表，接一个 Markdown 渲染方案。
• 增加暗色模式。
• 给页面添加 SEO 基础标签和 Open Graph 信息。

例如在index.html的<head>中加入基础 SEO：

<meta name="description" content="个人作品集，展示设计案例、前端开发经验与个人简介。" /> <meta property="og:title" content="个人作品集 - My Portfolio" /> <meta property="og:description" content="展示设计案例、前端开发经验与个人简介。" /> <meta property="og:type" content="website" />

这些内容对搜索引擎和分享链接展示都有实际帮助。

7. 总结与学习路线

通过一次完整的 Vibe Coding 建站，你可以掌握这几条关键能力：

• 把模糊的“设计感”拆解成配色、字体、间距、布局、交互等具体要素。
• 用自然语言驱动 AI 生成页面结构，再手工优化 HTML/CSS。
• 理解响应式布局和常用 CSS 技巧。
• 使用 IntersectionObserver 实现滚动动画。
• 将静态站点部署到公网并绑定自定义域名。

如果你的目标是继续精进，下一步建议按这个顺序学习：

1. 巩固 HTML 语义化标签和 CSS 选择器。
2. 掌握 Flexbox 和 Grid 布局，这是页面排版的基础。
3. 了解响应式设计原理，先保证移动端体验。
4. 学习 JavaScript 事件与 DOM 操作，为交互打基础。
5. 尝试静态站点生成器，把博客发布流程自动化。

Vibe Coding 降低了网站启动的门槛，但真正做出有设计感的个人网站，依然需要你理解“为什么这样设计、为什么这样写”。你可以把 AI 生成的代码当作脚手架，持续修改和打磨，慢慢形成自己的审美判断力和前端手感。希望这篇教程能帮你迈出第一步，动手做一个真正属于自己的个人网站。