3D 交互式个人作品集

类型

个人作品集 / 在线简历

目标用户

招聘方、潜在合作方、对 AI 建站实验感兴趣的访问者

主要目标

让访问者在 60 秒内理解候选人的定位、能力和项目证据

当前版本

V0

模型

尚未生成，计划使用 DeepSeek-V4-Flash

技术栈

Astro（静态输出） · 原生 HTML / CSS / JS · 无运行时框架、无 3D 依赖

过去面试甲方网站运营或推广岗位时，我曾被问到自己的建站流程和供应商管理标准。虽然具体设计开发通常由第三方完成，但甲方对接人仍需要掌握需求、验收和上线标准，不能完全跟随供应商的节奏。

这个案例的目的，是把那套原本只存在于经验里的判断，变成一份可以被别人逐条检查的记录：需求怎么写、验收标准怎么定、模型产出怎么审、哪些结论还不成立。

访问者需要快速理解的内容

• 我是谁
• 我的职业定位
• 我的核心能力
• 每项能力有哪些真实项目证据
• 怎样查看完整项目、简历或联系我

核心能力入口

• Technical SEO 技术 SEO 索引卫生、站点结构、抓取与收录问题的诊断和治理。 证据：企业多站点 SEO 治理 →
• Growth Engineering 增长工程 把流量口径接到询盘和收入上，而不是停在排名截图。 证据：B2B 询盘四层诊断 →
• AI Collaboration AI 协作 用 Agent 工作流做真实交付，并为结果建立可检查的证据链。 证据：和 AI Agent 一起搭站 →
• Automation 自动化 把重复的选题、抓取、校验和发布环节交给可回放的脚本与 CI。 证据：AI 求职自动化系统 →
• B2B Website Operations B2B 网站运营 甲方视角的建站需求管理、供应商验收和上线复盘。 证据：B2B SEO 交付 SOP →

核心原则：标签只是入口，项目证据才是内容。

下列判定针对当前已上线的 V0 骨架，不是对最终作品集的验收。每引入一个新版本（尤其是 3D 增强层），已通过项必须重新验证。

共 11 条：5 条通过，0 条未通过，6 条待验证。

• 待验证 访问者在 10 秒内能够理解职业定位 需要真人计时测试（≥3 名不了解背景的访问者），当前无数据。
• 待验证 60 秒内能够找到核心能力及对应项目 同上，需要真人任务测试记录完成时间与失败点。
• 通过 每个能力标签至少链接到一个真实案例或证据 V0 骨架 tests/ui/website-lab.spec.ts 对 5 条能力证据链接逐条发起请求，全部返回 200。
• 待验证 不加载 3D 资源时，核心内容仍可阅读 当前根本没有 3D 资源，这一条要等真正引入 3D 后才谈得上通过。
• 通过 手机端不依赖 Hover V0 骨架 展开由 details/summary 承载，样式层没有任何靠 :hover 才显示的内容（hover 只改颜色）；已在关闭 JavaScript 和纯键盘两种条件下测试可展开。
• 通过 支持键盘操作 V0 骨架 自动化测试：summary 获得焦点后按 Enter 可展开，复制按钮可聚焦；未做完整读屏走查。
• 通过 支持减弱动画 V0 骨架 自动化测试在 prefers-reduced-motion: reduce 下断言复制按钮 transition-property 为 none。
• 待验证 下载简历、查看项目或联系方式入口清晰 V0 已给出简历页与项目页入口；「清晰」需要真人测试佐证。
• 待验证 3D 和动画不得阻塞首屏核心信息 尚无 3D 与动画，不构成通过。
• 通过 关键内容使用真实 HTML 文本，不全部绘制到 Canvas 中 V0 骨架 自动化测试断言 demo 页 canvas 元素数为 0，正文文本可被选择器取到。引入 3D 后必须重新验证。
• 待验证 页面不存在明显的横向溢出、布局抖动和失效链接 横向溢出已在 390px 与 1280px 两个断点自动化测试通过，站内链接由 check:links 与上面的证据链接请求覆盖；但布局抖动（CLS）完全没有测量，因此整条不判通过。

提示词本身不是价值所在——旁边必须写清它解决什么、还剩什么限制、哪些不能直接复用。

1. V0：项目 Brief 与验收标准

   通过

   2026-08-03

   本轮目标： 在让任何模型生成之前，先把目标用户、要回答的问题、能力入口和验收标准写死，作为后续所有版本的对照基线。

   发现的问题

   • 先前的想法只有「做一个 3D 作品集」，没有可判定的完成标准——这种需求交给模型必然拿回一个好看但无法验收的页面。
   • 能力标签如果只是词汇（SEO、Python、AI），招聘方无法验证，页面就只是自我描述。

   作出的决定

   • 先产出 Brief 与 11 条验收标准，再进入生成环节。
   • 每个能力标签必须绑定一条站内已发布的证据链接，没有证据的能力不进入标签列表。

   修改原因： 验收标准是这次实验唯一的对照基准。没有它，后面每一版都只能靠「看着不错」来判断。

   验收结果： 待验证 Brief 本身已完成；它是否「好用」要等 V1 生成后才知道——如果模型产出仍无法用这 11 条逐条判定，说明标准写得不够可测。

   已知限制

   • 验收标准里的时间类指标（10 秒 / 60 秒）目前只是设计意图，没有任何真人测试数据支撑。

   桌面端截图 / 移动端截图：尚无截图

   V0：项目 Brief（尚未作为提示词提交给模型）

   复制提示词

   使用模型

   尚未使用模型

   附带材料

   无（纯文本提示词）

   人工修改

   有

   角色：资深网页设计师 + 前端工程师。
   任务：为一名 B2B 外贸独立站 SEO / 网站运营从业者设计一个个人作品集首页。
   
   目标用户：
   - 招聘方（网站运营、SEO、增长相关岗位）
   - 潜在合作方
   - 对 AI 建站实验感兴趣的访问者
   
   主要目标：让访问者在 60 秒内理解「他是谁、能做什么、凭什么相信」。
   
   必须回答的五个问题：
   1. 我是谁
   2. 我的职业定位
   3. 我的核心能力
   4. 每项能力有哪些真实项目证据
   5. 怎样查看完整项目、简历或联系我
   
   核心能力入口（每个都必须链接到一条真实证据，不得虚构）：
   Technical SEO / Growth Engineering / AI Collaboration / Automation / B2B Website Operations
   
   核心原则：标签只是入口，项目证据才是内容。
   
   硬性约束：
   - 关键内容必须是真实 HTML 文本，不允许只绘制在 Canvas 里
   - 移动端不得依赖 hover 才能获取信息
   - 必须支持键盘操作与 prefers-reduced-motion
   - 3D 与动画不得阻塞首屏核心信息，且必须提供静态降级
   - 不使用 Emoji 作为界面图标

   它解决什么问题

   把「做个 3D 作品集」这种无法验收的需求，压成一份有目标用户、有必答问题、有硬性约束的可判定输入。

   仍然存在什么限制

   它只是需求，不包含视觉方向和技术选型；模型仍可能给出结构正确但视觉平庸的结果。

   哪些要求不能直接复用

   能力清单和证据链接是我自己的真实内容，直接复用会变成虚构他人经历；换人使用必须整段替换。

   模型结果是否经过人工验证

   尚未提交给任何模型，因此没有产出可供人工验证。

2. V1：模型一次生成（下一步）

   尚未生成

   本轮目标： 把 V0 的 Brief 与验收标准作为一次性提示词交给模型，取得未经人工修改的首版产出。