这是更新的第 412 篇文章！
梧桉 AI · 实操教程
用豆包工作从 0 到 1 做个人网站：分享踩坑经验与实操流程
无需设计与代码基础，利用 AI 工具即可快速构建个人品牌入口。
近期完成了一项酝酿已久的任务：搭建个人网页（含知识库）。尽管第一版页面没有复杂的动态特效或强烈的科技感，整体偏向出版物风格，但对于非专业出身者而言，能够独立落地实施已颇具成就感。
早在 2025 年 2 月曾咨询过专业技术人员，当时开发成本（含服务器、域名等）预估约需千元以上，门槛较高。如今借助 AI 辅助编写代码，已能低成本产出可用版本。以下是当前网页效果预览：
上下滑动查看完整网页演示
PART 01 为什么一定要做个人站
现有的开源知识库虽然内容丰富，但存在路径曲折、入口分散的问题，导致新用户难以快速定位核心教程。个人网页则充当了高效的“流量入口”：先建立人物画像，再引导至具体内容。
通过独立域名的个人网站，访客可快速获取作者身份、擅长领域及代表作信息。网站支持跳转公众号文章、展示配套视频效果及系统提示词，大幅提升了内容查阅与练习的便捷性。
PART 02 个人网页的核心用途
除基础的自我介绍外，个人网页在实际应用中主要承载三大功能：
1. 作品集中展示
整合过往文章、视频、项目案例及教程，避免用户在多平台间切换搜索，实现“一站式”查看代表作。
2. 高效连接通道
为潜在合作伙伴提供深入了解的窗口，并在固定位置聚合公众号、知识库及其他联系方式，降低沟通成本。
3. 立体化简历呈现
相比传统 PDF 简历，个人网站能更生动地展示项目背景、过程复盘、成果数据及多媒体素材。无论是设计类的作品集、运营类的案例库，还是产品类的项目经历，网页本身即是审美与专业度的直接体现。
PART 03 实战中踩过的三个“坑”
本次建站过程虽无重大技术障碍，但以下三点教训导致了额外的时间消耗与 Token 浪费：
坑一：缺乏前期模板规划
初期仅凭模糊想法动工，未明确风格、布局与模块，导致首版完成后反复修改配色与结构。若事先收集 2-3 个参考网站（截屏首屏、导航、作品区等），并明确告知 AI 具体偏好，沟通效率将显著提升。对于动态特效，建议提前录屏作为参考素材。在样式未定型前，切勿急于进入 VibeCoding 阶段。
推荐设计灵感来源：
国外：Pinterest、Figma、Dribbble
国内：站酷、优设
模板无需完全照搬，可混合搭配不同网站的优秀模块。
坑二：多模型并行测试
同时使用 Codex 与豆包工作进行对比测试，导致双倍 Token 消耗。实测表明，直接使用豆包工作不仅成本更低，且与飞书生态结合更紧密，信息同步更完善，更适合新手快速上手。
坑三：过度依赖 AI 决策内容
将知识库全权交给 AI 解析生成主页，往往导致重点内容被边缘化。AI 无法自主判断哪些内容对首页最关键。网站的目标受众、核心展示内容及优先级，必须由人工预先界定。
PART 04 推荐的标准化四步流程
基于上述经验，梳理出一套“先准备，后生成”的高效流程，可大幅减少返工：
第一步：明确需求
避免直接要求 AI“写代码”，应先通过 Prompt 让 AI 协助分析需求清单。
PROMPT 示例：
我要做一个个人网页。我的身份是【填写身份】，目前有【填写已有内容】。请帮我分析这个网页的主要作用、受众群体、首页应该有哪些模块，以及我需要提前准备哪些素材。如果信息不够，请继续向我提问。先不要写代码。
此步骤旨在厘清用途、受众及素材准备清单。
第二步：填充框架
在 AI 输出的框架基础上，人工填充自我介绍、代表作、项目成果等核心内容。暂无素材处可标记“待补充”，确保首页关键信息由人主导。
PROMPT 示例：
根据前面的需求，帮我列出个人网页需要的模块。按照首屏、自我介绍、代表作品、能力或服务、联系方式、页脚的顺序排列，每个模块写清楚需要放什么文字、图片和链接。先整理框架，暂时不要生成网页。
MEDIA 08 · 图片素材：豆包输出的网站内容框架示意
第三步：辅助设计
内容就绪后，提供 2-3 个喜欢的网站截图给 AI，要求其提取版式、配色及字体风格，并结合自身内容输出 2-3 个设计方向。避免使用“高级感”等模糊词汇，需提供具体视觉参考。
PROMPT 示例：
这是我喜欢的几个网站参考。请提取它们的版式、配色、字体感觉和作品展示方式，再结合我的内容给出 2—3 个设计方向。先用文字描述，等我确认以后再生成页面。
第四步：构建可用版本
需求、内容与参考图完备后，再指令 AI 编写代码。首版目标应聚焦于“可用性”：确保多端兼容、文字清晰、图片加载正常及按钮有效，无需追求复杂特效。
若需调整文案，可让 AI 罗列所有模块内容，人工修正后再重新生成，以确保信息准确。
PART 05 第一版复盘：不完美但足够好用
当前版本在配色细节、模块排序及移动端适配上仍有优化空间，这些问题均在实测中通过迭代解决。虽然没有炫酷特效，但作为一个从零开始的探索成果，它已成功实现了作品展示与个人连接的核心功能。
AI 极大地降低了技术门槛，使用者只需专注于内容策划与逻辑梳理。记住：第一版无需完美，先上线再迭代。
PART 06 方法论延伸：不止于个人网页
这套"AI 建站”方法论同样适用于多种场景：
- 品牌/产品页：整合产品介绍、应用场景与联系渠道。
- 在线简历/作品集：适合学生与求职者动态展示能力。
- 项目复盘页：替代传统 PPT，集中展示截图、过程与结果，提升内部汇报效率。
网页本质是信息的容器，关键在于内容的筛选与呈现逻辑，既可用于公开传播，也可作为私有化提案工具。
PART 07 写在最后
关于部署发布（购买域名、服务器配置及同步），豆包工作均可提供全流程指引，用户只需配合操作即可。此次实践彻底改变了对个人网站的认知：它不再昂贵且遥不可及。
若你也想尝试，请记住核心原则：先厘清“我是谁、给谁看、展示什么”，准备好视觉参考，再让 AI 介入执行。充分的准备能帮你少走弯路，节省宝贵的 Token 资源。
人生路道阻且长，行则必达。欢迎交流制作过程中的问题，共同探索更多 AI 应用场景。
#豆包工作 #豆包电脑端 #个人网站 #AI 设计