不懂设计不懂代码，用豆包工作搓个人网站/简历（保姆级教程）

大家好，我是梧桉，这是更新的第412篇文章！

点击名片，一起拆爆款、建认知、破焦虑

梧桉AI · 实操教程

用豆包工作从 0 到 1 做个人网站：分享我踩过的坑！

没学过设计和代码，也能先做出自己的第一版

最近没更新，在做了一件想了很久、但一直没有动手的事：做个人网页（含知识库）。

第一版出来有点成就感满满。它没有特别复杂的动态特效，也没有很强的科技感，整体偏出版物风格，但对一个不懂代码、也没有专业学过设计的人来说，能把它真的做出来，已经很满足了。

在25年2月就找会代码的朋友咨询过做网站，教程和提示词类的，开发成本

服务器域名全部

算下来大概需要10张左右，对于当时的我来说太贵了。

现在有 AI 帮我写代码，终于可以先做出一个能用的版本，所以想把这两天的过程写下来，也把中间踩过的坑告诉你。下边是目前网页效果截图

上下滑动查看完整网页

PART 01

01 为什么一定要做个人站

我已经有一个开源知识库，里面放了不少以前写过的内容和做过的案例。内容多了以后，问题也跟着出来了：路径有点绕，入口也比较分散，很多人想教程却因为太多放弃了。

后来觉得，知识库像一个资料仓库，东西都在里面，但第一次来的人不知道从哪里开始看。个人网页更像一个入口，先让别人知道我是谁，再把他带到具体教程里。

所以想做一个用自己域名的个人网站。打开以后，别人能很快知道我是谁、做过什么、擅长什么，也能找到知识库教程和我。每个赛道有配套的视频效果，支持跳转对应公众号文章，配套的系统提示词，更容易翻阅练习。

PART 02

02 个人网页到底能用来干什么

做之前我也在想，个人网页除了放一个自我介绍，还能干什么？这两天真正做下来，我觉得至少有三个用途。

第一，集中展示作品。以前做过的文章、视频、项目案例和教程，都可以挑一部分放到网页里。别人不用翻聊天记录，也不用到几个平台分别搜索，打开以后先看代表作就可以了。

第二，方便联系。如果有人刚好通过一篇文章认识我，或者想找我合作，他可以从网页继续了解我，也能在固定位置找到公众号、知识库和其他方式。

第三，做一份更特别的简历。大多数人的简历都是一两页纯文字 PDF，教育背景、工作经历、技能清单密密麻麻。项目介绍本来就不多，如果是设计、运营、自媒体、产品这些方向，还需要放截图、作品和过程，单靠 PDF 很难讲完整。

如果换成一个设计感比较好的个人网站，项目背景、过程、结果、图片、视频和链接都能放进去。设计专业的同学可以做作品集，做运营的可以放案例，做产品的可以整理项目经历，网页本身也能顺便展示你的审美和专业程度。

PART 03

03 踩过的那些坑

说完用途，再说说这次花钱买来的教训。整体不算什么大问题，但每一个都能让我多花时间，也多消耗一些 Token。

坑一：没有提前准备模板。我一开始只有一个模糊想法：想做一个个人网页，但没有想清楚风格、布局和模块。第一版出来以后，我才发现这里不喜欢、那里也不对，改完首页又去改作品区，配色也跟着换了几次。因为约束和参考都没有，所以他的初步效果是这样的。

如果一开始就找两三个喜欢的网站，把首屏、导航、作品展示和联系方式分别截下来，告诉 AI 具体喜欢哪里，沟通会省很多。

如果是动态效果的，要录屏提供视频参考效果，关于各种动态特效这块网上也有很多大佬教的，找素材找灵感这一块比较费时间。所以在没有确定好自己想要的大概样式，先别进入VibeCoding，节省是错成本哈哈，这是我消耗了几个亿Token的血泪史。

模板不是非要一模一样，和可以混合搭配，喜欢这个网站的首页，再参考另一个网站的作品区，拼起来也可以。

可以让AI统一帮我们找出来可以模板参考的设计网站。但我已经都找过了，给大家节省时间，往下看：

国外：pinterest、figma、dribbble 国内：站酷、优设

坑二：同时用了两个 AI，花了两份钱。这次我一边用 Codex，一边用豆包工作。一是想做对比，二是觉得豆包更容易上手，而且和飞书知识库的内容同步个人网页更方便。

但两边都测的结果，就是两边都要消耗token。Codex 这边我用了费用比较高的模型，来回改代码挺费钱；

豆包工作那边又重新走了一遍。现在回头看，如果前面的需求更清楚，有一些钱本来可以省下来。直接用豆包工作最省钱，跟飞书生态结合同步信息更完善。大家更容易上手时间哈，关键是真的省钱。

坑三：让 AI 自己从知识库里决定放什么。我一开始把知识库交给 AI，让它自己解析、自己生成主页内容。听起来挺省事，但 AI 能读到资料，不代表它知道哪些内容对首页最重要。

它可能把我想重点展示的作品放到角落里，也可能用很长的篇幅介绍一些我并不想突出的内容。网站给谁看、要展示什么、哪些内容优先，这些都需要我自己先说清楚。

PART 04

04 推荐的准备流程：四步走

踩完这些坑以后，我把顺序重新理了一遍。如果你也想做个人网页/作品集/网页简历，建议先准备，再生成。前面慢一点，后面会少很多返工。

第一步：明确需求

不要一上来就对 AI 说“帮我做一个个人网页”。先问豆包：

PROMPT

我要做一个个人网页。我的身份是【填写身份】，目前有【填写已有内容】。请帮我分析这个网页的主要作用、受众群体、首页应该有哪些模块，以及我需要提前准备哪些素材。如果信息不够，请继续向我提问。先不要写代码。

这一步主要是把用途、受众和准备清单列出来。你也可以顺便回答几个问题：我想展示什么？谁会来看？希望访客看完以后做什么？

第二步：填充框架

豆包给出框架以后，先把自我介绍、代表作品、项目结果、图片、联系方式这些内容填进去。暂时没有的地方可以标记“待补充”，但首页最重要的内容，最好由自己来决定。

然后继续问它：

PROMPT

根据前面的需求，帮我列出个人网页需要的模块。按照首屏、自我介绍、代表作品、能力或服务、联系方式、页脚的顺序排列，每个模块写清楚需要放什么文字、图片和链接。先整理框架，暂时不要生成网页。

MEDIA 08 · 图片素材

豆包输出的网站内容框架

发布时在公众号编辑器插入对应视频/动图素材。

第三步：辅助设计

内容准备好以后，再让豆包做设计。同时去网上找两三个自己喜欢的个人网站，把截图发给它。

不要只说“我要高级一点”“要有设计感”。这类话太宽了，AI 很难准确理解。你可以直接这样问：

PROMPT

这是我喜欢的几个网站参考。请提取它们的版式、配色、字体感觉和作品展示方式，再结合我的内容给出 2—3 个设计方向。先用文字描述，等我确认以后再生成页面。

第四步：先做一个能用的版本

需求明确、内容齐全、参考图也准备好以后，再让 AI 开始写代码。第一版不用把所有功能都加上，先保证电脑和手机都能打开，文字清楚，图片正常，按钮能点。

我的第一版比较静态，没有花里胡哨的效果，但作品和联系方式都能正常展示。对我来说，先有一个自己的网页，比一开始就追求特别复杂的效果更重要。

其中关于网页上的文字需要修改的，可以直接让豆包工作罗列出来所有模块，然后按照模块对应的修改好，再发给他重新生成网页。

PART 05

05 我的第一版：不完美，但我很满意

现在这个网页还有很多可以调整的地方。颜色怎么配、模块怎么排、手机端浏览不卡顿，很多问题都是遇到以后再去问 AI，然后一点点试出来的。

它没有特别炫的特效，也没有很强的科技感，但已经能正常打开，能放我的作品，也能让第一次认识我的人找到我。对一个从零开始摸索的人来说，这个结果已经够用了。

以前我觉得做个人网站要找设计、写代码、买服务，门槛挺高。现在 AI 能帮我处理很多代码工作，我只需要先把内容和想法说清楚，再一点点调整，这件事终于变得可以自己试一试。

第一版不需要完美。先把入口做出来，用起来以后，你自然会知道下一步该改哪里。

PART 06

06 不止是个人网页：这套方法还能用来做什么

做完以后，我又想到一些延伸用法。品牌或者产品可以做一个展示页，把产品介绍、使用场景和联系方式放在一起；学生和求职者可以做在线简历和作品集；做产品的同学可以把项目经历、复盘过程和成果整理成个人成果页。

如果公司里没有统一的复盘汇报模板，也可以做一个个人汇报页。把截图、过程、结果和链接放进去，开会的时候直接打开，信息会比一页页 PPT 更集中。

这些页面不一定都要公开。求职、提案或者内部汇报时单独使用，也完全可以。网页只是一个容器，关键还是你选择放什么，以及希望别人看完以后记住什么。

PART 07

这篇文章写得有点长，因为确实想把这两天摸索出来的东西分享给大家。这个网页还有瑕疵，很多地方都是从零开始，一边学习一边实测一边复盘。还需要继续打磨一下，后期完成后再分享大家。

关于设计好之后如何发布的问题，要相信豆包工作，他可以引领你去哪里买域名，部署服务器，怎么同步到自己域名，完全可以靠他完成，你只需要配合他即可。

但这次做完以后，我对个人网站这件事的看法变了。以前觉得它要花很多钱，也觉得离自己很远；现在至少可以先做一个第一版，把自己的作品和入口放在网上，再慢慢改。

如果你也想做个人网页，先不要急着让 AI 写代码。先把“我是谁、给谁看、展示什么”这三个问题写下来，再找几张真正喜欢的网页参考。这个准备过程会多花一点时间，但能帮你少走一些弯路，也少浪费一些 Token。

人生路道阻且长，行则必达。大家制作过程中有问题可以一起交流，祝大家流量大爆。你还想看我拆解什么类型的 AI 视频玩法，也可以告诉我。