手把手教你用 AI 做一个个人作品集网站 ✍ Gloria🕐 2026-04-28📦 14.6 KB 🟢 已读 𝕏 文章列表 本文是一份保姆级教程,指导读者如何利用 AI(如 CodeX、Claude Code)从零开始构建个人作品集网站。文章强调在 AI 时代,作品集比传统简历更能展示个人能力。作者详细介绍了准备素材、寻找设计风格、生成 Demo、代码上传至 GitHub、部署到 Vercel/Cloudflare 以及购买域名的全过程,并指出这是通过作品重新认识自我、展示个人生命力的过程。 AI个人作品集网站建设教程VercelGitHub部署Prompt前端职场发展 # 手把手教你用 AI 做一个个人作品集网站 **作者**: Gloria **日期**: 2026-04-28T14:32:38.000Z **来源**: [https://x.com/changloria0816/status/2049134699172466845](https://x.com/changloria0816/status/2049134699172466845) ---  上周看到金尘马老师 @jinchenma_ai 的一篇文章,大意是:传统简历在 AI 时代越来越不够用了。 我是比较认同的,因为现在不是你把经历写成一页 PDF,别人就能真正理解你。尤其对于想做产品、运营、AI、设计、内容、增长、项目管理的人来说,很多能力是很难被一份传统简历完整表达的。 所以我这次想写一篇更详细的教程,手把手讲一下: 如何从 0 到 1 做出一个属于自己的个人作品集网站 这篇不讲复杂代码,重点讲普通人怎么整理素材、怎么找风格、怎么借助 AI 工具做出第一版 Demo,最后部署上线。  ## 01 先准备你的基础素材 在正式开始做网站之前,第一步不是打开 AI,也不是写 prompt,而是先整理自己。你需要先建一个文件夹,比如放在桌面,命名为: 个人作品集 然后在里面准备这些内容: 1. 基本信息 包括: - 姓名 / 英文名 - 联系方式 - 邮箱 - 微信 / X / LinkedIn / GitHub - 个人照片或头像 - 你目前的身份,比如学生、实习生、AI 产品方向、内容创作者等 这些信息不需要一开始就写得特别完美,但一定要先有,这个是最基础的信息。 2. 经历汇总 你可以先把所有经历粗略列出来,包括: - 项目经历 - 实习经历 - 比赛经历 - 黑客松经历 - 内容创作经历 - 社群 / 助理 / 协作经历 - 你做过的 Demo、网页、产品、账号、活动 这一步的重点不是写得多漂亮,而是先把素材全部倒出来。因为 AI 后面能不能帮你做出一个好看的作品集,本质上取决于你喂给它的素材够不够具体。 如果你只是想做求职作品集,前两类素材已经够用;但如果你希望网站更像你本人,而不是简历网页版,可以再准备一份人生支点清单。 3. 人生支点清单 有很多人问我说不知道网站里面要放哪些内容,我可以给大家提供一个我的思路,除了上面两点的基本信息和经历汇总外,我还准备了一份“人生支点清单”。首先你要清楚,个人作品集不是单单代表你的简历,因为简历只能告诉别人,我做过什么。但其实我更想表达的是: 我是一个什么样的人。 所以我这次选了一个主页面有很多漂浮物体的风格。我想用这些物体表达一个概念: 我们人生也是有很多支点构成的  这些支点可以是我的能力,也可以是我的热爱,比如: - AI:我相信 AI 会重塑普通人的创造方式。 - 产品:我喜欢把混乱的需求变成清晰的解决方案。 - 黑客松:我享受在高压环境下快速做出 Demo。 - 内容创作:我用写作整理自己,也连接更多机会。 - 音乐:它让我保留感性和表达欲。 - 壁球:它让我保持身体里的冲劲和生命力。 每一个支点背后都代表我人生的一个面貌。别人点进去,不只是看到一段经历,而是看到: 这个人为什么有生命力。 这也是我觉得个人作品集和传统简历最大的区别。所以大家可以准备 5 到 8 个支点,每个支点用一句话解释它为什么重要,这也是你个人的核心。 4. 可视化素材 选定好5-8个支点后,每个支点最好准备 1 到 3 个素材,比如: - 项目截图 - 活动照片 - 黑客松 Demo - 推特账号截图 - 网站截图 - 海报 - 证书 - 笔记 - 演讲照片 - 协作文档截图 作品集不是纯文字,视觉素材越真实,越容易让别人相信你真的做过这些事。 5. 气质 Slogan 准备好上面4点内容后,还需要最后一步,给你自己写一个气质Slogan。不要写传统简历里那种,本人认真负责,学习能力强。可以换成更有个人气质的话,比如:我的人生由许多热爱支撑,我在不同的支点之间成长,也相信生命力来自持续创造。或者更短一点:在 AI 时代,用作品表达自己。再短一点:Build myself in public. 这就是前期准备,也是你构建整个个人网站的基础。我建议大家在这部分多花些时间,多挖掘挖掘自己的素材,我前期素材准备了2-3个小时,是整个作品集里最花时间的部分。 ## 02 选定你的网站风格 很多人用 AI 做网页,最容易犯的错误是直接说:帮我做一个个人网站。这样 AI 很容易做出那种模板感很重、很土、很像简历搬家的页面。 我的建议是:不要让 AI 凭空设计,先给它一个明确的视觉参考。 1. 去 Mobbin 找灵感 我自己会推荐 Mobbin。https://mobbin.com/ 上面有很多成熟产品、设计师作品、外企快消风格、移动端和网页端设计案例。你可以先去找你喜欢的页面风格,比如: - 极简高级风 - 外企品牌风 - 设计师作品集风 - 科技感产品页 - iOS 风格 - 卡片式布局 - 互动感强的个人主页 先不要急着做,先选一个你真正看的顺眼、喜欢的方向。  2. 把参考素材存下来 Mobbin上的素材一般都需要开Pro会员才能下载,这里给大家找到一个免费的插件,在 GitHub 上,辅助保存页面参考:https://github.com/A2coffee/Mobbin-Viewer  下载好插件一步一步按照提示来就可以把Mobbin上的素材下载下来了。下载好后把你喜欢的页面截图、配色、布局、素材都保存到“个人作品集”文件夹里。后面你就可以直接告诉 AI: 「这是我喜欢的网页风格,请参考这个视觉方向帮我做个人作品集」 这样出来的效果会比一句“帮我做个网站”好很多,不会跑偏。 ## 03 用 CodeX / Computer Use 做第一版 Demo 我这次主要用的是 CodeX。大家也可以用Claude Code等,功能都差不多,听说近期推出的 Kimi K2.6 / Agent 相关能力也蛮强。 Codex 这类 AI 编程助手可以读取项目文件、修改代码、运行命令;部分桌面端/浏览器环境还可以辅助查看页面和操作界面。我用的mac,所以CodeX 的 Computer Use 能力可以辅助我操作电脑、读取素材、修改代码、迭代页面,比较方便。 更准确地说,CodeX 可以在授权范围内辅助操作: 它可以辅助操作,但涉及登录、授权、支付、隐私信息时,最好自己盯着并手动确认。 ## 04 给 AI 的第一段指令怎么写 当你已经准备好素材和参考风格后,可以直接对 CodeX 说: 「我想为我的个人作品集进行 Vibe Coding,我已经在桌面建立了一个叫“个人作品集”的文件夹,里面包含我的个人信息、经历素材、图片素材和网页风格参考。请你先读取这些内容,帮我设计一个个人作品集网站的第一版 Demo。我希望整体风格参考文件夹里的截图,页面不要太像传统简历,而是更像一个有个人叙事感的作品集。 网站需要包含: 1. 首页介绍 2. 我的核心标签 3. 项目经历 4. 实习 / 协作经历 5. 人生支点模块 6. 联系方式 请先帮我生成第一版结构和页面,不用追求完美,先做出可运行 Demo。」 这段指令的核心是:先让 AI 做出来,而不是一开始就追求完美。 ## 05 第一版 Demo 出来后,继续迭代 当你把素材、照片、风格参考全部交给 CodeX 后,它通常可以帮你做出第一版 Demo。但第一版一定不会完美,一般来说审美肯定达不到你的要求,你需要继续让它改,比如: - 首页太空了,帮我增加一点层次感。 - 这个字体不够高级,换一版更适合作品集的。 - 这里不像我本人,语气太 AI 了,帮我改得更自然。 - 项目经历这里太像简历了,帮我改成作品展示。 - 人生支点的小球能不能做得更有互动感? - 移动端适配一下。 - 帮我检查一下部署前有没有 bug。 AI 做网站最重要的不是一次性出神作,而是你要不断告诉它: 哪里不像你,哪里不够好,哪里需要更具体。 ## 06 把代码放到 GitHub 当 Demo 基本成型后,下一步是把代码放到 GitHub。 这里你需要提前做两件事: 1. 注册 GitHub 账号 2. 在浏览器里登录好 GitHub 然后你可以直接告诉 CodeX: 「我已经在Chrome上登录好了 GitHub,请帮我把这个个人作品集项目初始化为 Git 仓库,并推送到我的 GitHub,仓库名可以叫 personal-portfolio-site。」 如果你用的是 CodeX,它通常可以帮你完成初始化、提交、连接远程仓库这些步骤。所以大家也不需要说我不会这些Git命令怎么办,你直接告诉CodeX,他能直接帮你完成。 你唯一只要知道: GitHub 是放代码的地方,对新手来说,先把代码放到 GitHub,再连接 Vercel/Cloudflare,是最省心的一条路径。  ## 07 部署到 Cloudflare 或 Vercel 代码放到 GitHub 之后,就可以部署上线了。你可以选择 Cloudflare Pages,也可以选择 Vercel。 方案一:Cloudflare Pages 同样的,你需要先注册并登录 Cloudflare。然后告诉 CodeX: 「我已经在Chrome上登录 Cloudflare,你帮我连接下,请帮我把 GitHub 上的 personal-portfolio-site 仓库连接到 Cloudflare Pages,并完成部署。」 所以 Cloudflare Pages 的逻辑大概是: GitHub 放代码,Cloudflare 负责把网站部署上线。 方案二:Vercel 如果你只是想快速上线,我觉得 Vercel 也很适合。可以用Github链接到Vercel,你可以告诉 CodeX: 「请帮我把这个个人作品集项目部署到 Vercel,我已经登录好了 Vercel 和 GitHub。」 Vercel 对前端项目非常友好,速度也很快,适合先把 Demo 跑起来。对于新手小白来说,我更推荐部署到Vercel上,而且部署速度很快,操作简单,完全免费。 如果急着上线,我比较推荐先部署到Vercel上,把链接挂出去,后面有时间了再买域名移过来。 ## 08 买自己的域名 当你的网站已经可以通过 Cloudflare 或 Vercel 访问后,下一步就是买一个自己的域名。我一开始想在 Cloudflare Registrar 里买,因为价格确实比较合适,而且比较稳定。但如果你没有 Visa 或 Mastercard,可能会比较麻烦。 今天下午我是在 Spaceship 上买的域名,价格也还行,很多域名一年大概 10 刀以内,而且支持支付宝支付,对国内用户比较方便。不过我下午在用支付宝购买的时候,很卡,成功付款后一直没有返回到Spaceship,所以没买成功。跟客服反馈这个情况后,让我在购买的时候不要切换IP,并且付款成功要多等待下,重定向到Spaceship后才算够买成功。在这里要感谢@BTCUFO,20多年的老域名玩家了,帮我查询还有哪些域名能用,大家如果要买域名或者不清楚的地方可以找他。 买个人作品集域名推荐买2年起买,3年也可以,但没必要。因为还不确定未来个人品牌要不要变,也不确定之后会不会想买更短或更偏AI的域名。 买好域名后,你可以继续让 CodeX 帮你绑定。我是这样跟CodeX说的: 「我现在已经在 Spaceship 上买好了域名,并且已经在 Google Chrome 里登录了 Spaceship 和 Vercel,这个域名是 gloriaqian.com,你的任务是把 Vercel 上的 Personal Portfolio Site 绑定到 gloriaqian.com。请你根据页面提示一步步操作。如果涉及支付、隐私、授权确认,停下来让我手动确认。」 这段话里最后一句很重要, 因为绑定域名涉及账号、DNS、授权等操作,最好不要完全放手。你可以让 AI 帮你看页面、找按钮、解释步骤,但关键确认最好自己点。 ## 09 最后的完整流程总结 如果把整个流程压缩成最简单的版本,其实就是: 第一步:列出你的网站内容 先整理: - 个人信息 - 项目经历 - 实习经历 - 职业标签 - 人生支点 - 图片素材 - 风格参考 第二步:让 AI 做第一个 Demo 不要一开始就追求完美,先让它做出来。 第三步:把代码发到 GitHub GitHub 负责存放代码,提前注册、登录好账号,再让 CodeX 帮你连接。 第四步:部署到 Vercel 或 Cloudflare Vercel 适合快速上线,如果是新手小白推荐用Vercel,Cloudflare Pages 也很适合静态网站托管。 第五步:买域名并绑定 可以买 Cloudflare Registrar,也可以买 Spaceship,如果你需要支付宝支付,Spaceship 会更方便一点。 第六步:持续迭代 网站上线不是结束。 你后面可以不断更新: - 新项目 - 新文章 - 新经历 - 新照片 - 新 Demo - 新的职业方向 个人作品集不是一次性完成的东西,它更像一个长期生长的你,所以我希望大家能不断耕耘,不断成长! 最后我想说,个人作品集最重要的不是技术,而是你是否真的开始认真整理自己。AI 可以帮你写代码,帮你做页面,帮你部署网站。 但它不能替你决定: 你是谁。你想被别人记住什么。你希望别人通过什么作品认识你。 所以,做个人作品集的过程,其实也是一次重新认识自己的过程。传统简历只能告诉别人你过去做过什么。但一个好的个人作品集,可以告诉别人: 你是谁,你正在成为什么样的人,以及你未来可能创造什么。 ## 相关链接 - [Gloria](https://x.com/changloria0816) - [@changloria0816](https://x.com/changloria0816) - [1.1K](https://x.com/changloria0816/status/2049134699172466845/analytics) - [@jinchenma_ai](https://x.com/@jinchenma_ai) - [https://mobbin.com/](https://mobbin.com/) - [https://github.com/A2coffee/Mobbin-Viewer](https://github.com/A2coffee/Mobbin-Viewer) - [@BTCUFO](https://x.com/@BTCUFO) - [gloriaqian.com](https://gloriaqian.com/) - [gloriaqian.com](https://gloriaqian.com/) - [Upgrade to Premium](https://x.com/i/premium_sign_up) - [10:32 PM · Apr 28, 2026](https://x.com/changloria0816/status/2049134699172466845) - [1,101 Views](https://x.com/changloria0816/status/2049134699172466845/analytics) - [View quotes](https://x.com/changloria0816/status/2049134699172466845/quotes) --- *导出时间: 2026/4/28 23:32:14*
1 10分钟上线网站:Vercel保姆级教程,含部署失败排坑指南 本文是建站系列的第四篇,提供了详细的 Vercel 部署教程。文章介绍了 Vercel 的免费额度与商业模式,涵盖了注册流程、单文件及 Fork 模板项目的部署步骤。重点讲解了如何配置框架预设和环境变量,并提供了利用 AI 辅助排查部署失败问题的方法。最后,针对国内访问 Vercel 不稳定的问题,作者给出了绑定自定义域名等解决方案。 技术 › 前端 ✍ Modengsir AI🕐 2026-07-09 Vercel建站前端部署DevOps教程Next.js网站建设GitHub排坑
不 不会写一行代码,我用Codex给自己做了个网站,全程0元 | 建站系列【1】 本文是建站系列教程的第一篇,主要介绍如何在不编写任何代码的情况下,利用AI Codex、GitHub和Vercel搭建一个免费的个人网站。作者详细拆解了从生成代码、保存文件到部署上线的全流程,并提示了新手易错点(如文件命名)及国内访问的注意事项。 技术 › Codex ✍ Modengsir AI🕐 2026-07-07 建站教程低代码个人网站GitHubVercel零基础前端部署免费资源AI辅助编程
一 一文超详细讲透GitHub:从注册、搜索到部署与协作的全流程指南 这是一篇面向 AI 编程爱好者的 GitHub“保姆级”教程。文章从开源概念与 Git/GitHub 区别讲起,详细涵盖账号注册、双重认证(2FA)、仓库创建、高效搜索技巧、仓库结构解析、Issue 提交流程以及本地 Git 操作。作者重点介绍了如何利用 AI 编程工具(如 Cursor)简化 Git 命令,并讲解了 Fork 与 Pull Request 的开源协作机制,最后分享了项目部署至 GitHub Pages 和 Vercel 的方法。 技术 › DevOps ✍ 老王霸 AI Lab🕐 2026-07-02 GitHub教程Git开源版本控制DevOps部署VercelCursor工具与效率
零 零基础建站完全指南(收官):决策地图与避坑清单 本篇为零基础建站系列的收官总结,并未介绍新工具,而是通过一张决策地图梳理了从练手到正规运营的三种建站方案(纯免费、免费+域名、国内正规),详细对比了成本与优劣。文章重点讲解了如何从海外免费路线平滑升级至国内正规备案路线,并汇总了代码、部署、域名及备案环节的全流程避坑清单,旨在为初学者提供一份完整的建站速查手册。 技术 › 工具与效率 ✍ Modengsir AI🕐 2026-07-13 建站指南VercelGitHubICP备案Cloudflare腾讯云DevOps独立开发教程AI辅助
去 去AI味全网最全指南:从识别、改写到工具实测 本文提供了消除AI写作痕迹的系统性指南,指出AI味的根源在于素材编造、思考伪装和风格默认。文章通过22种高频特征清单、5步自检流程及排版规范,详细讲解了如何保留真实判断与风格。同时评测了中英文去AI味工具,强调“声音校准”和“反代入式表达”是关键。 技术 › LLM ✍ 诺鸭船长3🕐 2026-06-24 Prompt写作PromptEngineeringSkillHumanizer技巧工具教程效率AI
G GitHub 超详细入门指南 本文是一篇 GitHub 的保姆级教程,旨在帮助 AI 编程爱好者掌握 GitHub 的核心功能。文章详细讲解了 Git 与 GitHub 的区别、账号注册与双重认证设置、仓库的创建与搜索技巧、Issue 工单系统的使用,以及如何利用 Agent 辅助进行本地 Git 操作和项目部署。此外,还介绍了 Fork、Pull Request 等开源协作机制,并列举了通义千问、飞书等知名开源项目作为学习范例。 技术 › 工具与效率 ✍ 老王霸 AI Lab🕐 2026-06-15 GitHubGit教程开源AgentDevOps版本控制部署CopilotCursor
土 土豆哥一人公司手册:30分钟全球部署指南 文章介绍了如何利用 Cloudflare Workers 和 Pages,在 30 分钟内、零成本完成一个产品等待列表的全栈部署。涵盖了从安装 Wrangler 工具、创建 D1 数据库、编写后端 API 到前端页面构建的全过程。该方案无需维护服务器,支持自动 HTTPS 和全球分发,非常适合一人公司快速验证产品想法。 技术 › DevOps ✍ mousepotato🕐 2026-05-27 CloudflareServerless全栈开发一人公司WorkerPagesD1部署前端教程
2 2026年真正学习AI的7个开源仓库 这是一份2026年AI学习资源清单,包含7个精选的GitHub开源仓库。内容覆盖从初学者指南到高级LLM路线图,包括微软的GenAI课程、从零构建ChatGPT的PyTorch教程、Karpathy的nanoGPT训练、OpenAI与Anthropic的实战Cookbook以及AI Agents构建指南。所有资源均免费,旨在帮助学习者掌握Prompt、RAG、微调及Agent等核心技术。 技术 › LLM ✍ self.dll🕐 2026-05-06 AILLM学习资源GitHubOpenAIClaudeAgent教程开源模型训练
H Hermes WebUI 终极指南:在浏览器中掌控你的 AI 终端 本文介绍了专为 Hermes Agent 打造的 WebUI 可视化控制台。该工具采用 Python 原生后端与 Vanilla JS 前端,旨在提供零框架、零构建的秒级启动体验。文章详细阐述了其核心功能,包括流式输出、思维链可视化、内嵌文件浏览器及安全护栏,并提供了原生与 Docker 两种部署方案及常见问题排错指南。 技术 › Hermes ✍ Mulight 沐光🕐 2026-04-29 AIAgentWebUI可视化部署指南Hermes前端DevOps工具教程
内 内置全网最全 Codex 做 PPT 手把手教程 本文介绍了使用 Codex 制作 PPT 的教程,适合小白用户,提供了多种业务场景的提示词,并建议搭配 Codex plugins、MCP 和 skills 提升效果。 技术 › Codex ✍ Tom Huang🕐 2026-07-23 PPTCodex教程AI业务场景插件MCP技能
一 一杯咖啡的时间学会 Obsidian:2026 年保姆级教程 这是一篇面向新手的 Obsidian 入门教程。文章介绍了 Obsidian 作为本地 Markdown 笔记软件的优势,包括易于搜索、双向链接、AI 友好及数据自主性。教程详细讲解了软件下载、库创建、界面布局(左中右三栏)、文件管理、工作区保存、文档属性(YAML)及基础 Markdown 写法,帮助用户快速搭建个人知识库。 技术 › 工具与效率 ✍ 苏乐🕐 2026-07-23 Obsidian笔记管理Markdown教程知识管理个人效率工具AI入门指南
8 8个AI生成PPT的Skill项目整理 文章分享了8个AI生成PPT的Skill项目,包括原生可编辑的PPTX、HTML预览转PPTX、杂志风模板等,涵盖多种风格和功能,适合用于制作演示文稿。 技术 › Skill ✍ AI奶爸🕐 2026-07-22 AIPPTSkill模板演示文稿GitHub