≡
文档编号 PRD-YM-2026-V2.0 · 密级 内部公开

YOLO MORTAL

Product Requirement Specification

"You only live once"

产品地址
zlion.pages.dev
版本
V2.0 定稿
起草
产品团队
日期
2026-07-01
↓ 向下滚动
00 // DOCUMENT CONTROL

文档控制

修订记录

版本日期修订人修订说明
V1.02026-06-03产品团队初始版本，基于旧版 iamzlion 三平台生态撰写，覆盖 Instagram / Twitter / GitHub 三个社交平台的个人主页整合方案
V2.02026-07-01产品团队根据 zlion.pages.dev 线上实际内容重新编写，聚焦本站点本身的功能、交互与技术架构，剥离旧版三平台整合思路

审批记录

角色姓名签名日期意见
起草产品团队——2026-07-01——
审核————————
批准————————

术语说明

术语全称 / 含义
SPASingle Page Application，单页面应用，整个站点在单一 HTML 文档内通过 JS 动态渲染内容
CSRClient-Side Rendering，客户端渲染，首屏 HTML 仅含挂载点，内容由 JS bundle 生成
YMYOLO MORTAL，本站品牌标识
FCP / LCP / CLSGoogle Core Web Vitals 三项核心性能指标：首次内容绘制 / 最大内容绘制 / 累积布局偏移
HMRHot Module Replacement，热模块替换，开发环境下代码修改即时生效无需刷新
01 // PRODUCT OVERVIEW

产品概述

1.1 产品定位

YOLO MORTAL（域名 zlion.pages.dev）是创作者周磊的个人数字品牌站，以「You only live once」为核心理念，在单一页面上通过五个模块展示个人身份、思想、愿景、技能与社交连接。产品本质是一张高度视觉化的数字名片，同时承担作品集、思想录和社交枢纽三重职能。差异化在于将暗色赛博朋克美学与个人叙事的完整性结合，而非单纯的模板展示。

品牌标识
YOLO MORTAL（主品牌）/ iamzlion（文档 title）
Slogan
You only live once
创作者
周磊
产品类型
单页面应用（SPA），CSR 渲染
设计语言
暗色底色 + 霓虹渐变赛博风格
内容规模
5 个内容模块 + 1 个首屏 Landing + 2 个浮动功能入口

1.2 目标用户

站点面向四类来访人群，不同人群的关注重心与进入路径存在差异。产品需要在首屏即建立足够的视觉冲击力，确保任意入口的访客都能在 5 秒内形成品牌认知。

用户类型来访场景核心关注
潜在合作者 / 招聘方通过简历、推荐或搜索进入评估创造力与技能广度：作品质量、技能覆盖面、审美水准
创意同行设计社区、技术论坛跳转寻找灵感或协作机会：作品集内容、联系方式
社区关注者从 seethefuture 社区跳转而来了解创作者背景、跳转社区入口
普通访客社交媒体链接或搜索引擎进入视觉冲击力、品牌第一印象

1.3 产品形态

渲染方式：纯客户端渲染（CSR），首屏 HTML 仅含一个 <div id="root"> 挂载点。所有内容由 JavaScript bundle 动态生成。

页面结构：单页长滚动 + 模块切换（hash 路由：/#about, /#strive, /#dream, /#work, /#imagine）。

内容组织：首屏为品牌进入页，五个主模块以覆盖式导航切换，每次仅渲染当前模块以优化运行时内存。五个模块的命名采用中英双轨：ABOUT（关于）、STRIVE（奋斗）、DREAM（愿景）、WORK（作品）、IMAGINE（想象），构成从「认识我」到「连接我」的完整叙事链路。

设计意图
模块命名刻意避开常见的 About / Blog / Portfolio 等模板化词汇，选用 STRIVE、DREAM、IMAGINE 等带有行动感与哲学意味的词，与品牌核心理念「You only live once」形成呼应。这一命名策略也是站点区别于普通个人主页模板的差异化点之一。
02 // INFORMATION ARCHITECTURE

信息架构

2.1 页面结构

站点采用首屏 + 五模块的扁平结构。首屏 Landing 作为品牌入口，五个内容模块按「认知 → 哲学 → 愿景 → 实践 → 连接」的叙事逻辑排列，用户通过全屏菜单覆盖层在模块间切换。

#模块标题核心内容
—LandingYOLO MORTAL品牌首屏，含标语与"长按进入"交互入口
01ABOUT关于 / 简介个人介绍、照片墙（24 张）、精选视频内容
02STRIVE奋斗 / 哲学创作哲学、近期文章列表（5 篇）、博客引流
03DREAM愿景 / 梦想愿景卡片（3 张）、前沿科技探索（8 领域）
04WORK作品 / 实践作品集（9 件），含筛选标签、24 项技能标签
05IMAGINE想象 / 创意联系信息、Creative Lab 入口、社区引流

2.2 导航系统

顶栏：左侧品牌标识（YOLO MORTAL），右侧汉堡菜单按钮。滚动时保持固定（sticky），背景为半透明毛玻璃效果（backdrop-blur），确保用户在任何滚动位置都能快速呼出菜单。

菜单面板：点击汉堡按钮展开全屏覆盖层，左侧为五个模块入口（编号 + 中英文标题），右侧为关闭按钮。面板底部为 INSTAGRAM / TWITTER / GITHUB 社交链接（当前为占位符 #，V2.0 计划更新为真实链接）。

导航行为：点击模块入口后关闭菜单面板，页面切换至对应模块内容。URL hash 同步更新（如 /#work），支持浏览器前进/后退按钮。模块切换时仅渲染当前模块，其余模块从 DOM 中卸载以控制内存占用。

flowchart LR L["Landing
首屏入口"] -->|长按进入| Menu["全屏菜单覆盖层"] Menu -->|点击| A["01 ABOUT"] Menu -->|点击| S["02 STRIVE"] Menu -->|点击| D["03 DREAM"] Menu -->|点击| W["04 WORK"] Menu -->|点击| I["05 IMAGINE"] A -.->|hash路由| S S -.->|hash路由| D D -.->|hash路由| W W -.->|hash路由| I I -.->|hash路由| A Menu -->|底部链接| Social["社交链接
IG / TW / GH"] I -->|按钮| Community["seethefuture
社区"] S -->|按钮| Blog["个人博客"]
图 2-1 // 站点导航与模块切换流程

顶栏导航原型

zlion.pages.dev/#about
YOLO MORTAL

全屏菜单覆盖层原型

zlion.pages.dev/#（菜单展开状态）
01ABOUT 关于
02STRIVE 奋斗
03DREAM 愿景
04WORK 作品
05IMAGINE 想象
✕
INSTAGRAMTWITTERGITHUB
03 // MODULE REQUIREMENTS

模块需求

本章逐一描述首屏 Landing 及五个内容模块的功能需求。每个功能点包含业务逻辑、交互逻辑、规则约束及验收标准，并附带对应原型以指导实现。功能编号格式为 FR-[模块缩写]-[序号]，优先级分 P0（必须）与 P1（应该）两档。

功能总览

#编号模块功能优先级
1FR-LD-001首屏 Landing品牌首屏展示P0
2FR-LD-002首屏 Landing背景动效（双层 Canvas）P0
3FR-AB-001关于 ABOUT创作者简介P0
4FR-AB-002关于 ABOUT照片墙（24 张）P0
5FR-AB-003关于 ABOUT灵感收藏（4 篇视频卡片）P1
6FR-ST-001奋斗 STRIVE创作哲学文本P0
7FR-ST-002奋斗 STRIVE近期文章列表（5 篇）P0
8FR-ST-003奋斗 STRIVE博客引流入口P1
9FR-DR-001愿景 DREAM愿景卡片（3 张）P0
10FR-DR-002愿景 DREAM前沿科技探索（8 领域）P1
11FR-WK-001作品 WORK作品集网格（9 件）P0
12FR-WK-002作品 WORK分类筛选（ALL/IMAGES/VIDEOS/WRITINGS）P1
13FR-WK-003作品 WORK核心技能标签云（24 项）P1
14FR-IM-001想象 IMAGINE联系信息（4 个入口）P0
15FR-IM-002想象 IMAGINECreative Lab 入口P1
16FR-IM-003想象 IMAGINE社区引流（seethefuture）P1

3.1 首屏 Landing

FR-LD-001 品牌首屏 P0
业务逻辑展示品牌名「YOLO MORTAL」（大号标题，Space Grotesk Bold，全大写，字间距 -0.05em）、标语「You only live once」、创作者头像及「长按进入」交互入口。作为用户第一视觉锚点，建立品牌调性。
交互逻辑用户长按「长按进入」区域 → 触发模块切换动画 → 页面平滑过渡至 ABOUT 模块。移动端使用 touchstart / touchend 检测长按手势（≥500ms），桌面端兼容 mousedown 长按。
边界处理长按过程中显示进度环反馈；用户中途松手则取消跳转，进度环归零。
标题清晰，文字无裁切，移动端字号适配正常。"长按进入"区域可交互，引导用户进入内容区。
FR-LD-002 背景动效 P0
业务逻辑首屏区域包含双层 Canvas 背景：底层为粒子点阵（contrast/brightness 滤镜），上层为 Three.js 渲染的动态几何/光线效果（mix-blend-mode: screen），营造霓虹科技感氛围。
性能约束动效帧率稳定（≥30fps），不影响页面交互响应。移动端降级为简化版本（仅保留底层粒子层，关闭 Three.js 层）。
降级策略不支持 WebGL 的设备直接显示纯色背景 + CSS 渐变。
桌面端双层动效流畅运行，移动端单层粒子动效无卡顿，低端设备静态降级正常。

首屏原型

zlion.pages.dev/
YOLO MORTAL
You only live once
⬡ 长按进入

3.2 关于 (ABOUT)

FR-AB-001 创作者简介 P0
业务逻辑展示「Hello, I'm ZLION」欢迎语、个人照片、简介文本，附带 Discord 社区链接 (https://discord.gg/rhT5ReGrY)。
交互逻辑Discord 链接以新标签页打开。个人照片可悬停放大（scale 1.05）。
规则约束简介文本支持中英文混排，自动换行。欢迎语使用展示字体，与正文形成视觉层级。
文本信息准确，Discord 链接可正常跳转。
FR-AB-002 照片墙 P0
业务逻辑以网格布局展示 24 张摄影作品，来源涵盖手机摄影（IMG_ 前缀）、DJI 无人机航拍（dji_fly_ 前缀）、视频截图（Videoshot / lv_0_ 前缀）、外部导入（mmexport 前缀）。时间跨度为 2023 年 9 月至 2026 年 2 月。
交互逻辑图片采用懒加载策略（IntersectionObserver），进入视口时再加载。悬停显示拍摄来源标签。
规则约束网格列数响应式：桌面 4 列、平板 3 列、移动 2 列。图片宽高比统一为 1:1（object-fit: cover）。
边界处理图片加载失败时显示占位灰块 + 错误图标。V2.0 计划增加灯箱预览功能。
所有图片正确加载，无破损。网格布局在桌面和移动端均无溢出。图片加载采用懒加载策略。
FR-AB-003 灵感收藏 P1
业务逻辑展示 4 篇精选视频内容卡片，每张含封面缩略图、「点击播放」按钮、分类标签和内容摘要。四个主题覆盖哲学、社会学、经济学与历史学：
内容清单
  • Philosophy：感觉意识是如何产生的？
  • Sociology：为什么中国人比美国人更"爱国"？
  • Economy：姓社 vs 姓资：辩论高端局
  • History：美元如何偷袭黄金，制霸全球？
卡片内容完整展示，视频播放链接可访问。

ABOUT 模块原型

zlion.pages.dev/#about

Hello, I'm ZLION

创作者简介文本 · Discord 社区链接

📷
📷
📷
📷
📷
📷
📷
📷

// 照片墙共 24 张，此处展示前 8 张

▶ Philosophy
感觉意识是如何产生的？
▶ History
美元如何偷袭黄金

3.3 奋斗 (STRIVE)

FR-ST-001 创作哲学 P0
业务逻辑展示两段核心文本，传达创作者的设计理念与生活哲学。
文案一
「在数字时代的洪流中，我们不断追求卓越。每一次代码的敲击，每一帧影像的剪辑，都是对自我极限的挑战。」
文案二
「克制、简洁、富有氛围感。这不仅是设计的准则，更是生活的哲学。」
交互逻辑文本以 Framer Motion 入场动画依次淡入（stagger 0.3s），增强叙事节奏感。
文案排版美观，与其他模块风格统一。入场动画流畅，不影响文本可读性。
FR-ST-002 近期文章 P0
业务逻辑以编号列表展示 5 篇文章卡片，每张含编号、日期、标题、摘要和分类标签。文章列表与 WORK 模块共享数据源，但呈现形式不同（STRIVE 以列表形式，WORK 以卡片网格形式）。
内容清单
#标题日期分类
01克制的艺术2026.01.15极简主义哲学
02超越网格2026.03.10打破常规设计系统
03硅魂2026.03.15AI 与人类意识
04混沌建筑师2026.03.20去中心化系统
05极简主义宣言2026.03.25数字噪音时代的生活指南
卡片内容、日期、标题、标签均准确。列表编号连续无缺失。
FR-ST-003 博客引流 P1
业务逻辑页面底部展示博客宣传区（PERSONAL BLOG），含引导文案和「Explore Blog」按钮，链接至 https://jsxy0.pages.dev/。上方文章区另有「Visit My Blog」快捷入口。两个入口指向同一博客站点，但分别位于页面的内容区和底部 CTA 区，覆盖不同阅读深度的用户。
交互逻辑两个入口均在新标签页打开。
两个入口均正确链接至博客站点。

STRIVE 模块原型

zlion.pages.dev/#strive

CREATIVE PHILOSOPHY

「克制、简洁、富有氛围感……」

RECENT ARTICLES

012026.01.15克制的艺术极简主义
022026.03.10超越网格设计系统
032026.03.15硅魂AI 意识
042026.03.20混沌建筑师Web3
052026.03.25极简主义宣言生活指南

3.4 愿景 (DREAM)

FR-DR-001 愿景卡片 P0
业务逻辑展示 3 张愿景卡片，分别对应创作者的三个维度愿景，每张附带「Explore」外链。
VISION
构建一个充满美感与逻辑的数字世界
FUTURE
探索 AI 与人类创意的共生可能
IMPACT
用作品触动人心，用技术改变生活
交互逻辑卡片悬停时上浮（translateY -8px）+ 边框发光。「Explore」链接以新标签页打开，当前指向 http://2017.makemepulse.com/ 作为视觉参考。
卡片布局整齐，标题与描述文案准确，外链可访问。
FR-DR-002 前沿科技 P1
业务逻辑展示 8 个前沿科技领域的探索卡片，每个含图标、标题和简述。每张卡片附带外部参考链接，指向该领域的代表性创意工作室或项目站点。
领域参考链接
Generative AIcircletimestudio.com
Web3 & Decentralizationatelierdaruma.com
Spatial Computingresn.co.nz
Quantum Logicinnerspacevr.com
Neural Interfacespebblestudios.co.uk
Bio-Digital Integration1618digital.com
Autonomous Systemsyordstudio.com
Sustainable Techrooom.com
8 个卡片齐全，图标与标题匹配，外链有效。

DREAM 模块原型

zlion.pages.dev/#dream
VISION
构建美感与逻辑的数字世界
FUTURE
AI 与人类创意的共生
IMPACT
用作品触动人心
🤖
Generative AI
⛓️
Web3
🥽
Spatial Comp.
⚛️
Quantum Logic
🧠
Neural Interface
🧬
Bio-Digital
🚀
Autonomous
🌱
Sustainable

3.5 作品 (WORK)

FR-WK-001 作品集网格 P0
业务逻辑以卡片网格展示 9 件作品，每件含缩略图、标题、日期/时长、描述和分类标签。作品类型涵盖视觉设计、动态设计、摄影、AI 哲学、Web3 等多个领域。
内容清单
#标题日期/时长分类
01赛博朋克夜曲—视觉设计 / 创意合成
02虚空回响02:45动态设计 / 实验性
03克制的艺术2026.01.15思考 / 项目回顾
04数字碎片—生成艺术 / 抽象
05霓虹脉冲01:30 / 2026.02短片 / 摄影
06超越网格2026.03.10创意笔记 / 设计策略
07硅魂2026.03.15AI 哲学 / 未来
08混沌建筑师2026.03.20Web3 / 社会学
09极简主义宣言2026.03.25生活方式 / 设计
交互逻辑卡片悬停时缩略图缩放放大（scale 1.08）+ 卡片边框发光。V2.0 计划增加灯箱预览。
9 件作品均正确渲染，图片加载完整，标签分类准确。
FR-WK-002 分类筛选 P1
业务逻辑提供四个筛选标签：ALL / IMAGES / VIDEOS / WRITINGS。点击后动态过滤作品列表，当前选中标签高亮显示。
交互逻辑点击标签 → 作品列表以 Framer Motion 布局动画重新排列（Layout Animation），被过滤的卡片淡出消失，剩余卡片平滑过渡到新位置。当前选中标签以霓虹蓝边框 + 背景高亮标识。
规则约束「ALL」为默认选中状态，重置全部显示。筛选逻辑通过作品的 type 字段判断：image / video / writing。
筛选切换流畅，过滤结果准确。"ALL"重置全部显示。
FR-WK-003 核心技能 P1
业务逻辑展示 24 项技能标签云，覆盖创意、技术、策略三大类。标签以 flex-wrap 布局排列，无固定顺序。
技能清单Photography · Video Editing · Motion Design · Color Grading · Writing & Copy · Visual Composition · AI Prompt Engineering · UI/UX Design · Frontend Development · 3D Modeling · Creative Direction · Brand Strategy · Digital Marketing · Sound Design · Data Visualization · Interaction Design · AR/VR Development · Cybersecurity · Cloud Architecture · Blockchain Development · Game Design · Machine Learning · Product Management · Agile Methodology
24 项技能全部可见，标签排列整齐，移动端不换行错位。

WORK 模块原型

zlion.pages.dev/#work
ALLIMAGESVIDEOSWRITINGS
赛博朋克夜曲
虚空回响
克制的艺术
数字碎片
霓虹脉冲
超越网格
硅魂
混沌建筑师
极简主义宣言

CORE SKILLS · 24

PhotographyVideo EditingMotion DesignColor GradingAI Prompt Eng.UI/UX DesignFrontend Dev3D ModelingCreative DirectionBrand Strategy+14 more

3.6 想象 (IMAGINE)

FR-IM-001 联系信息 P0
业务逻辑展示联系区域（Connect / Collaborate），包含 4 个社交/通讯入口。
渠道地址类型
Email3531908677@qq.commailto 链接
Instagraminstagram.com/z3531908677外链
Twittertwitter.com/z3531908677外链
GitHubgithub.com/3531908677外链
交互逻辑所有链接在新标签页打开。Email 点击唤起邮件客户端。
移动端适配触控区域 ≥ 44×44px，确保移动端可点击性。
四个链接均可正确跳转。移动端触控区域足够大。
FR-IM-002 Creative Lab P1
业务逻辑展示创意实验室入口卡片，标题「Creative Lab」，描述「这里是灵感的实验室。我们打破常规，在代码与艺术的交汇处，探索未知的视觉维度。」附带 Experimental Zone 标签和外链（https://lab.hakim.se/core/01/）。
卡片渲染完整，外链有效。
FR-IM-003 社区引流 P1
业务逻辑展示「SEE THE FUTURE」宣传区，引导文案：「这是我创建的数字艺术与前沿科技社区。在这里，我们共同探讨未来的可能性，分享灵感，连接创意。欢迎加入我们，一起预见未来。」附带「Visit Community」按钮链接至 https://yjwl.netlify.app。
链接正确跳转至 seethefuture 社区。

IMAGINE 模块原型

zlion.pages.dev/#imagine

CONNECT / COLLABORATE

✉ Email
📷 Instagram
🐦 Twitter
⌨ GitHub
CREATIVE LAB · Experimental Zone

这里是灵感的实验室。在代码与艺术的交汇处，探索未知的视觉维度。

SEE THE FUTURE

数字艺术与前沿科技社区

Visit Community →
04 // GLOBAL INTERACTION

全局交互

除模块内部交互外，站点在全局层面提供两个常驻浮动按钮和一套多层背景动效系统。这些元素贯穿所有模块，确保品牌氛围的一致性。

4.1 浮动按钮

两个浮动按钮分别固定在屏幕左下角和右下角，在所有模块中保持可见，提供背景音乐控制和 AI 对话入口。

按钮位置样式功能
音乐播放器 左下角
position: fixed		 圆形，紫-粉红渐变（violet → fuchsia），内含唱片图标 全局背景音乐播放/暂停控制
AI Chat 右下角
position: fixed		 圆形，蓝-紫渐变（neon-blue → neon-purple），内含消息气泡图标，hover 显示「AI Chat」标签 唤起 AI 对话面板
zlion.pages.dev/#（任意模块 · 浮动按钮全局可见）
🎵
💬

4.2 背景动效

背景动效是站点视觉氛围的核心载体，由四个叠加层组成，从底层到顶层依次为：径向渐变背景、粒子层、Three.js 层、鼠标交互层。多层 Canvas 叠加营造深度感和动态氛围。

层级技术定位样式参数效果
径向渐变CSS divposition: fixedradial-gradient 叠加增强暗色场景深度感
粒子层Canvas 2Dposition: fixedopacity: 0.2, filter: contrast(1.2) brightness(0.8)底层粒子点阵，覆盖全视口
Three.js 层Three.js (WebGL)position: fixedmix-blend-mode: screen, opacity: 0.6动态光线/几何效果
鼠标交互层Canvas 2Dposition: fixed, z-index: 9999mix-blend-mode: screen响应鼠标移动的粒子拖尾/光晕
性能说明
多层 Canvas 叠加对 GPU 有一定负载。移动端应考虑降级为单层（仅粒子层）或降低粒子密度。当前页面在桌面端 Chrome 渲染正常，低端设备可能出现掉帧。V1.1 迭代计划中包含移动端动效降级方案。
graph TB subgraph BG["背景动效层级（从底到顶）"] direction TB L1["① 径向渐变层
CSS · radial-gradient"] L2["② 粒子层
Canvas 2D · opacity 0.2"] L3["③ Three.js 层
WebGL · mix-blend-mode: screen"] L4["④ 鼠标交互层
Canvas 2D · z-index 9999"] end L1 --> L2 --> L3 --> L4 L4 -.->|鼠标移动事件| Mouse["mousemove / touchmove"] L3 -.->|WebGL 降级| Fallback["不支持 WebGL → 静态背景"]
图 4-1 // 背景动效层级结构与降级策略
05 // TECHNICAL ARCHITECTURE

技术架构

站点基于 React 19 + Vite 6 构建，采用纯客户端渲染（CSR）模式，部署于 Cloudflare Pages。整个应用打包为单一 JS bundle + 单一 CSS 文件，通过 hash 路由实现模块切换。

前端框架 React 19.x 组件化 UI 构建，状态管理
构建工具 Vite 6.x 开发服务器、打包优化、HMR
样式方案 Tailwind CSS 4.x 原子化 CSS，自定义 Design Tokens
动画引擎 Framer Motion — 声明式组件动画、手势交互
3D / 动效 Three.js r183 WebGL 动态背景渲染
Canvas 特效 原生 Canvas 2D — 粒子系统、鼠标交互拖尾
字体 Google Fonts — Inter + Space Grotesk，CDN 分发
路由 Hash 路由 内置 模块间切换，/#about 等 5 个路由点
托管 Cloudflare Pages — 全球 CDN、自动 HTTPS、Git 集成 CI/CD
构建产物 index-Dbi5ZFoC.js +CSS 单 JS bundle + 单 CSS 文件（index-Dh1_tn-0.css）
flowchart TB subgraph Dev["开发环境"] VS["VS Code / IDE"] --> Vite["Vite Dev Server
HMR 热更新"] end subgraph Build["构建产物"] Vite --> Bundle["index-Dbi5ZFoC.js
index-Dh1_tn-0.css"] end subgraph Deploy["部署 · Cloudflare Pages"] Git["Git Push"] --> CI["自动 CI/CD"] CI --> CDN["全球 CDN
自动 HTTPS"] end Bundle --> Deploy subgraph Runtime["运行时 · 浏览器"] HTML["index.html
div#root"] --> JS["JS Bundle 执行"] JS --> CSR["CSR 客户端渲染"] CSR --> M1["ABOUT"] CSR --> M2["STRIVE"] CSR --> M3["DREAM"] CSR --> M4["WORK"] CSR --> M5["IMAGINE"] end CDN --> Runtime
图 5-1 // 从开发到运行时的完整技术链路
06 // DESIGN SPECIFICATION

设计规范

站点采用暗色底色 + 霓虹渐变的赛博朋克设计语言。以下设计 Token 是全站视觉一致性的基础，所有组件、模块的样式均基于此规范派生。

色彩系统

主背景色
#000000 · 纯黑
霓虹蓝
#00F2FF · 标题/链接/边框
霓虹紫
#BC13FE · 渐变辅助/装饰
基础文本色
#FFFFFF · 正文/标题
次级文本色
#6B7280 / #9CA3AF

字体系统

用途字体字重/样式说明
展示字体Space GroteskBold, 全大写, tracking: -0.05em用于大标题、品牌名、模块标题
正文字体InterRegular / Medium, 多字重用于正文段落、列表、表单

视觉效果

设计元素规范值
发光效果box-shadow: 0 0 15px ~ 30px rgba(0,242,255,0.3 ~ 0.5)
圆角14px（大卡片）/ 8px（小元素）/ full（圆形按钮）
毛玻璃backdrop-blur + 半透明背景，用于导航栏和菜单面板
渐变方向neon-blue → neon-purple（按钮 / 边框 / 分隔线）
动效时长Spring 入场：0.6 ~ 1s；渐变流动：5s；旋转：20s
07 // NON-FUNCTIONAL REQUIREMENTS

非功能性需求

7.1 性能指标

当前站点为纯 CSR 渲染，首屏加载依赖 JS bundle 执行和字体加载，Core Web Vitals 指标有优化空间。以下为当前实测值（估算）与目标值对比。

指标当前实测（估算）目标值度量工具
首次内容绘制 FCP~3.0s（CSR + 字体加载）< 2.0sLighthouse
最大内容绘制 LCP~3.5s< 2.5sLighthouse
累积布局偏移 CLS< 0.1< 0.05Lighthouse
JS Bundle (gzip)—< 300 KBVite build
图片加载直接加载原图WebP + 懒加载 + srcsetDevTools
字体加载Google Fonts CDN（当前 ERR_TIMEOUT）自托管字体子集 / 国内 CDNNetwork
图 7-1 // Core Web Vitals 当前值与目标值对比

7.2 SEO 与可访问性

当前问题

站点为纯 CSR 渲染，搜索引擎无法抓取页面内容。如有 SEO 需求，需引入 SSG/SSR 或预渲染服务（V3.0 迭代计划）。

图片缺少 alt 文本（部分有占位 alt，如文件名），不符合 WCAG 标准。V1.1 计划补充。

菜单面板为固定定位覆盖层，键盘导航和屏幕阅读器支持需验证。

7.3 安全

HTTPS
全站 HTTPS（Cloudflare Pages 默认提供）
用户数据
无用户登录系统，不存储用户数据
XSS 防护
外链皆为硬编码 URL，未使用用户输入拼接，不存在 XSS 注入点

7.4 兼容性

平台支持范围
桌面端浏览器Chrome / Firefox / Safari / Edge 最新两个大版本
移动端浏览器iOS Safari / Android Chrome 最新版
最低分辨率320px 宽度（移动端竖屏）
WebGL 降级不支持 WebGL 的设备降级显示静态背景
08 // ITERATION PLAN

迭代规划

站点迭代分为四个阶段，从已完成的 V1.0 基础搭建，到近期的性能优化，再到中期的功能完善，最终远景实现 SSG 迁移和多语言支持。

V1.0已完成
五模块 SPA 搭建：Landing + ABOUT + STRIVE + DREAM + WORK + IMAGINE。暗色霓虹主题。24 张照片墙、9 件作品集、8 项前沿科技卡片、4 篇灵感收藏、24 项技能标签。多层次 Canvas 背景动效。
V1.1近期· 1-2 周
图片转 WebP + 懒加载。字体自托管（解决 Google Fonts 超时报错）。补充图片 alt 文本。模块切换动效优化。菜单面板关闭按钮触控区域增大。
V2.0中期· 3-4 周
作品灯箱预览。INSTAGRAM / TWITTER / GITHUB 社交链接更新。ABOUT 和 STRIVE 模块内容更新（补充近期活动和文章）。DREAM 模块外链更新为自有内容而非外部参考。
V3.0远景· 6-8 周
SSG 迁移（Astro / Next.js）。多语言支持（中英切换）。内容管理后台接入。性能达到 Lighthouse ≥ 90。
09 // APPENDIX

附录

附录 A · 外链清单

以下为站点中涉及的全部外部链接，按编号索引，便于维护和检查。

#链接所在位置
1discord.gg/rhT5ReGrYABOUT — 创作者简介
2jsxy0.pages.devSTRIVE — 博客引流（多处）
3yjwl.netlify.appIMAGINE — 社区引流
43531908677@qq.comIMAGINE — 邮箱联系
5instagram.com/z3531908677IMAGINE / 菜单 — Instagram
6twitter.com/z3531908677IMAGINE / 菜单 — Twitter
7github.com/3531908677IMAGINE / 菜单 — GitHub
82017.makemepulse.comDREAM — VISION / FUTURE / IMPACT
9circletimestudio.comDREAM — Generative AI
10atelierdaruma.comDREAM — Web3
11resn.co.nzDREAM — Spatial Computing
12innerspacevr.comDREAM — Quantum Logic
13pebblestudios.co.ukDREAM — Neural Interfaces
141618digital.comDREAM — Bio-Digital
15yordstudio.comDREAM — Autonomous Systems
16rooom.comDREAM — Sustainable Tech
17lab.hakim.se/core/01IMAGINE — Creative Lab

附录 B · 内容清单

以下为各模块的内容资产统计，标注当前状态以便内容管理。

模块内容类型数量状态
ABOUT照片墙图片24 张线上已有
ABOUT精选视频卡片4 篇线上已有
STRIVE文章列表卡片5 篇线上已有（与 WORK 共享）
DREAM愿景卡片3 张线上已有
DREAM前沿科技卡片8 张线上已有
WORK作品集卡片9 件线上已有
WORK技能标签24 项线上已有
IMAGINE联系入口4 个线上已有
IMAGINE社区引流卡片2 个线上已有
YOLO MORTAL
© 2026 YOLO MORTAL · 产品需求规格说明书 V2.0 · zlion.pages.dev
本文档为正式版本，用于指导开发、设计与测试工作。如需更新，请在修订记录中登记。