**AI 做的作品集网站,上线前要完成的不只是点一次 Publish。**招聘方或客户拿到链接后,应该能在手机上看清你做过什么、你负责哪一部分,以及怎样联系你。页面再漂亮,作品打不开、介绍是编的,或者访客被登录页挡住,都还不适合发出去。
这篇以个人作品集为例,按“整理作品 → 发布 → 手机验收 → 检查权限 → 更新”的顺序操作。平台步骤依据 2026 年 11 月 4 日官方文档核对,不假设你已经买了域名或服务器。
第一版建议先选三件最能说明能力的作品,这是便于动手的编辑建议,不是作品集数量标准。每件作品准备一张封面、一段说明和一个可访问的详情或演示入口,比一次堆进几十张图更容易检查。
| 页面位置 | 先准备什么 | 验收时看什么 |
|---|---|---|
| 首页介绍 | 姓名或公开昵称、方向、一句话介绍 | 不认识你的人能否判断你的工作方向 |
| 作品卡片 | 名称、封面、简短描述 | 能否看出每件作品解决什么问题 |
| 作品详情 | 背景、自己的职责、过程、结果 | 能否分清个人贡献与团队成果 |
| 联系区域 | 愿意公开的邮箱或联系入口 | 点击后能否完成预期操作 |
没有真实业务数据就写清设计目标、完成范围和当前状态。练习项目、概念提案、AI 辅助作品都可以说明来源,别让工具补上虚构客户、获奖经历或增长数字。
客户内部截图、未发布方案和带有他人联系方式的材料,先确认可以对外展示。不能公开的部分做成不含敏感内容的案例摘要;不要先上传全部原稿,指望发布时再找出每一处遗漏。
只让 AI “做一个高级作品集”,容易得到漂亮但空泛的页面。可以把整理好的内容附在下面这段要求后,再按自己的情况修改:
请根据我提供的真实资料制作个人作品集,包含介绍、三件作品和联系方式。缺少的信息标记为待补充,不编造客户、成果数字或推荐语。
每件作品展示我的职责、过程和结果;练习项目明确标注。以手机单列阅读为优先,宽屏再调整布局。不要把正文做成只能放大才能读的图片。
联系入口使用我提供的真实地址。暂不增加登录、支付、数据库和未接通的表单。图片说明应表达作品信息,不只写文件名。
生成后请列出待替换内容、按钮实际去向、适合公开的发布方式,以及哪些功能只是演示。
生成后仍要自己核对。尤其检查模板里残留的示例头像、联系方式和“查看项目”按钮,不能因为它们排版整齐就当作内容已经完成。
有信息作用的图片应提供能传达其含义的替代文字,见 W3C 图片说明指南。作品的重要结论也保留为正文,让图片加载失败或使用屏幕阅读器的访客仍能理解。
作品集只有图文、案例和普通链接时,可以先用建站工具自带发布或静态托管,无需为了这一版先购买 VPS。功能怎么选,可对照AI 建站是否需要服务器。
以 v0 项目为例,首次正式发布可以按这条路径操作:
- 在项目对应的对话顶部选择 Publish。
- 核对项目名称;按本次展示对象选择访问范围。
- 确认平台提供的域名或已连接的域名,再开始发布。
- 等生产部署完成,复制准备持续对外提供的生产地址。
v0 官方部署文档区分预览部署和生产部署,后续发布会更新稳定的生产地址。不要把编辑器、聊天分享地址和某次预览链接混在简历中。
纯展示作品集不需要额外添加商城或支付。平台出现不理解的服务连接提示时,先查清项目是否被生成了多余功能;接入 GitHub 的项目还可能需要通过仓库检查,等待发布完成再验收。
只有 HTML 文件的读者,可以按网页文件发布成链接的步骤操作,本篇继续检查作品集本身。
用自己的手机通过移动网络打开正式链接,从介绍进入一件作品,再返回并找到联系方式。这样能检查真实链接和操作路径,而不只是在编辑器里看一张缩略图。
| 检查项 | 具体怎么试 | 发现问题后让 AI 改什么 |
|---|---|---|
| 正文和导航 | 竖屏阅读,不先放大 | 修复溢出、过小文字、遮住内容的导航 |
| 作品图片 | 滚动到每张图,检查裁切 | 保留关键内容,适配容器,不拉伸原图 |
| 详情入口 | 点开作品,再返回列表 | 修正空链接、失效地址和错误跳转 |
| 联系方式 | 点一次邮箱或联系按钮 | 核对真实收件地址和页面提示 |
| 首次加载 | 用移动网络首次打开 | 检查是否加载了过大的原图或多余媒体 |
可以给 AI 明确反馈:“手机上作品二的封面裁掉了图表标题,请调整展示方式”,比“手机端不好看”更容易定位。电脑缩窄窗口可辅助检查,仍应在实际手机上走完流程。
网页上看起来缩小的图片,不代表下载文件已经变小。让工具检查图片尺寸和加载方式,保留本地原图,发布适合网页展示的版本;web.dev 响应式图片指南说明了适配屏幕和按需要加载图片的思路。这里没有一组适用于所有作品的固定文件大小,也不承诺某个打开速度。
准备放进简历的公开作品集,用未登录建站工具的浏览器再打开一次。首页之外,作品详情、演示链接和简历下载也要分别试;首页公开,不代表嵌入的云文档也已授权给访客。
如果网站跳到平台登录页,先检查是否复制了预览地址,以及生产地址是否被访问保护覆盖。以 Vercel 为例,可在项目的 Settings → Deployment Protection 检查配置;官方说明区分保护方法与保护范围,具体可用选项还受方案影响。
公开展示只放已确认可公开的内容。内部评审可以保留实际的访问限制,并向评审者说明进入方式;不要为了方便查看,就公开整份客户资料。只把按钮藏起来,也不能当成文件已受保护。
分享前还要看用途是否符合方案条件。Vercel 的 Hobby 说明限定个人、非商业使用,接单或企业业务展示应先确认适用方案,不能因为标题写着“个人作品集”就默认符合。
正式发给别人之前,做一次小更新:修改一句真实介绍或替换一张作品封面,在原项目发布,然后重新打开已记录的对外地址,确认新内容出现、旧入口仍能访问。
v0 的项目说明指出,同一个 Project 可以关联多个对话,发布会更新共享的生产网址。因此修改前核对当前项目,别误以为新开对话就一定是独立网站。常规更新在原项目完成,避免每次都生成一套新网址。
自己保留源文件、原始素材、正式地址、修改记录和账号恢复方式。费用与续费安排可以接着看AI 个人网站预算指南。
当陌生访客能在手机上打开链接、看懂一件作品、联系到你,而你也能独立更新这一版内容时,再把地址放进简历或社交资料。第一版先交付一个信息真实、入口可用的作品集,新增作品和复杂功能可以以后逐步补上。
