我的个人网站 2.0：设计系统升级与移动端深度适配实战

一、为什么要做 2.0？

V1 版本上线后，我陆续收到了一些反馈，自己也发现了不少问题：

• 视觉风格偏通用模板：第一版的设计虽然干净，但缺乏辨识度。Tailwind 的原生风格太重，看起来像一个"快速搭建的 demo"而不是一个精心打磨的作品。
• 移动端适配不够彻底：V1 的移动端适配更多是"让布局不崩"，而不是"为手机重新设计"。卡片比例、交互模式、信息层级都没有针对小屏做专门的优化。
• 设计系统零散：颜色、字号、间距散落在各处，没有统一的 token 管理。改一个颜色要在十几个地方手动替换，效率极低且容易不一致。

所以我决定做一次大的升级——不是修修补补，而是从设计系统和移动端架构两个维度重新思考。

二、设计系统：从"能用"到"有审美"

2.1 引入专业设计 Skill

V2 最大的变化之一是使用了 Claude Code 的专业设计 Skill来指导视觉方向。不是让 AI 自由发挥，而是通过 design-taste-frontend、high-end-visual-design、brandkit 等 Skill 来建立一套有审美依据的设计语言。

这些 Skill 像是一个"随叫随到的设计顾问"——不是直接给你出图，而是帮你定义色彩系统、卡片风格、字体层级、动画节奏。你做产品知道"好的设计长什么样"，Skill 帮你把那个感觉翻译成具体的 CSS。

2.2 Design Tokens：统一的设计语言

V2 建立了一套完整的 CSS 自定义属性体系（css/design-tokens.css），覆盖了所有视觉维度：

• 字体层级：从 0.625rem 的 eyebrow 标签到 clamp(3rem, 8vw, 6rem) 的 Hero 大标题，定义了 10 级字号，PC 和移动端各一套。
• 色彩系统：品牌色（indigo → purple → cyan 渐变）、文字色（primary / secondary / tertiary 三级灰阶）、背景色、玻璃态颜色——全部通过 CSS 变量管理，改一处全局生效。
• 圆角尺度：从 8px 到 32px 四级圆角，卡片统一使用 32px 大圆角（移动端 24px），营造柔和、现代的感觉。
• 暗色模式：所有颜色变量在 .dark 类下有对应的暗色值，一键切换，无需额外样式。

Design Tokens 的核心价值不在于"好看"，而在于一致性。当所有颜色都从同一个变量池取，你永远不会出现"这个卡片比那个卡片颜色深一点"的问题。

2.3 双边框卡片系统（Double-Bezel Card）

V2 的卡片设计是整个视觉升级中最显著的差异点。V1 用的是 Tailwind 原生卡片（单层背景 + 阴影），V2 升级为双边框玻璃态卡片：

• 外层 card-outer：极浅的背景 + 微妙的边框，hover 时浮现柔光阴影
• 内层 card-inner：纯白/半透明背景 + 内高光 + 多层阴影，形成"玻璃悬浮"的质感
• 2px 间距：内外层之间的 2-3px 间隙产生一条极细的光线，让卡片有厚度感

这个设计让页面脱离了"扁平 UI"的观感，更接近现代 premium 产品的视觉语言（参考了 Linear、Vercel、Raycast 的设计风格）。

2.4 动效与微交互

V2 的动效系统也做了统一规划：

• 滚动入场动画（Scroll Reveal）：每个板块从下方 32px + 8px 模糊的状态滑入，配合 0.8s 的 premium 缓动曲线（cubic-bezier(0.32, 0.72, 0, 1)），节奏感统一。
• Hero 浮动光球：三个彩色模糊光球以不同相位循环浮动，给页面增加"呼吸感"而不喧宾夺主。
• 导航栏状态切换：滚动时 pill 阴影加深、active 链接渐变变色、汉堡菜单形变为 X——这些不是装饰，而是提供了清晰的交互反馈。
• 技能老虎机：PC 端竖排滚动、移动端横排滑动，技能关键词以 2 秒周期自动轮播，当前项放大 + 渐变色高亮。

三、移动端：不是缩小，是重新设计

V2 在移动端上投入的开发时间几乎和 PC 端相当。核心原则是：移动端不是把 PC 端缩小，而是为小屏重新设计信息层级和交互模式。

3.1 视口缩放系统：一套设计，全尺寸适配

这是整个移动端适配的底层架构。手机屏幕宽度从 320px 到 430px 不等，如果针对每个尺寸都做响应式布局，维护成本极高。我的方案是：

• 以 iPhone 14（430px）为设计基准：所有布局和字号都按 430px 宽度设计，在这个尺寸下展示效果最佳。
• 其他尺寸等比缩放：通过 CSS zoom 属性（而非 transform: scale()）对整个页面进行等比缩放。zoom 的关键优势是它同时缩放布局空间和视觉渲染，不会像 transform 那样在底部留下多余的空白。
• 动态缩放计算：JS 监听窗口大小和设备旋转，实时计算 zoom = 设备宽度 / 430，并同步更新 Hero 区域的最小高度以保证首屏填满。

这个方案让我只需要维护一套 430px 的布局代码，就能覆盖 iPhone SE 到 iPhone 15 Pro Max 的所有尺寸。这是"用工程思维解决设计问题"的典型案例。

3.2 Hero 区域：卡片融合布局

PC 端的 Hero 是左文字 + 右头像的水平布局，但手机上屏幕太窄，需要重新组织：

• 头像 + 姓名 + 状态栏融合进一张卡片：竖版头像（9:16 比例）+ 渐变色边框光环 + 姓名/英文名/到岗状态全部收纳在同一个 card-outer 内，信息密度高但不拥挤。
• 标签水平排列优化："27届"和"华南理工大学（985）本硕"独占一行，其余标签换行，避免在小屏上出现参差不齐的折行。
• CTA 按钮全宽堆叠：两个 CTA 按钮各占 100% 宽度、纵向排列，方便拇指点击。

3.3 实习经历：从轮播到手风琴

这是 V2 移动端最大的交互模式变更。PC 端实习经历使用横向轮播（carousel），用户左右滑动切换卡片。但在手机上：

• 横向滑动不符合手机浏览习惯：用户刷手机是上下滑动的，横向滑动需要改变手势，体验割裂。而且四段经历在轮播中不可见，用户不知道后面还有什么。
• 改为纵向手风琴（Accordion）：四张卡片纵向排列，默认全部折叠只显示标题栏。点击任意卡片展开查看详细内容，支持同时展开多张。每张卡片右侧有圆形箭头按钮，展开时旋转 180°。
• 折叠态视觉优化：折叠时内容区域 max-height: 0 且 padding 归零，确保不露出子卡片的边框，视觉干净。
• 子卡片内容保留完整：背景/动作/成果的结构、数据标签、配图全部保留，和 PC 端信息量完全一致。

3.4 工作技能：老虎机 → 横向滚动

PC 端的技能卡片中间有一个竖排"老虎机"（slot machine），3 个技能关键词纵向排列、居中高亮、自动轮播。手机上竖排太占空间，改为：

• 横向滚动条：技能关键词水平排列，一次显示 3 个，中间项高亮放大，左右两边的半透明缩小。自动 2 秒轮播。
• 边缘渐变遮罩：使用 CSS mask-image 在左右两侧做渐变淡出效果，暗示用户"还可以滑动"。
• 描述文字内嵌：PC 端点击卡片展开详情，手机上直接在每个技能卡片下方展示描述文字，省去点击交互。

3.5 导航与浏览体验

• 汉堡菜单：PC 端的顶部导航栏在移动端收缩为汉堡图标，点击展开全屏覆盖式菜单（玻璃态模糊背景），6 个链接 + 主题切换以交错延迟动画入场。
• 导航精确定位：使用 getBoundingClientRect() 计算滚动目标位置，确保在 zoom 缩放后不同尺寸设备上的跳转定位一致。
• 侧边导航隐藏：移动端隐藏 PC 端的侧边圆点导航（太小不易点击），仅保留顶部进度条。
• Section 高度自适应：PC 端每个 section 占满一屏（min-height: 100dvh），移动端取消全屏高度，改为内容驱动高度，让用户自然下滑浏览。

3.6 字号与排版

• 移动端独立字号层级：全局字号比 PC 端整体缩小一档（如 PC h1 32px → 移动 20px），保证小屏上标题不占满整行、正文不拥挤。
• 行高优化：中文字符在手机上阅读容易显得拥挤，全局正文行高提升到 1.7。
• 文字两端对齐：技能描述等较长文本段落在移动端使用 text-align: justify，提升阅读整齐度。

四、暗色模式：不只是反转颜色

暗色模式不是简单地把白底变黑底。V2 的暗色模式做了以下专门设计：

• 所有颜色变量双份定义：亮色和暗色的 token 分别定义在 :root 和 .dark 下，切换只改 class，不涉及任何硬编码颜色。
• 玻璃态适配：暗色模式下玻璃背景的透明度和模糊值重新调整，卡片阴影从浅色投影改为深色发光，文字灰度从 slate-700 调整到 slate-300。
• 渐变色彩适配：品牌渐变色从 indigo-purple-cyan 调整为更亮的 indigo-300 → purple-300 → cyan-300，在暗色背景下保持视觉冲击力。

五、内容体系：不只是简历

V2 新增了「产品思考」博客板块，包含三篇深度文章，覆盖竞品调研方法论、用户共情方法论、Vibe Coding 实践。这让网站从"一张简历"升级为"一个产品经理的作品集 + 知识库"。

博客使用了独立的排版系统（.prose），支持标题层级、引用块、列表、加粗等富文本样式，阅读体验对标 Medium/Substack 等专业写作平台。

六、Vibe Coding 方法论 2.0

从 V1 到 V2 的实践让我对 Vibe Coding 有了更深的理解。以下是升级版方法论：

1. 先有设计方向，再写代码。不要上来就"帮我做一个好看的网站"。先用设计 Skill 或参考图定调——色彩、风格、氛围。有了方向，AI 的产出才有据可依。
2. Design Tokens 是地基。在写任何组件之前，先把颜色、字号、间距等基础变量定义好。这是"一次投入、全项目受益"的事。
3. 移动端是独立产品，不是附属品。不要用 @media 修修补补。为手机重新设计信息层级和交互模式，该改布局就改布局，该换组件就换组件。
4. 用工程手段解决适配问题。视口缩放系统是一个例子：用 50 行 JS 和 zoom 属性，替代了几百行的响应式 CSS。
5. 一个对话只改一个模块。改完立刻 commit。Vibe Coding 的节奏太快，没有好的版本管理习惯会非常痛苦。
6. AI 是你的高级开发，不是你的产品经理。判断力、审美、信息架构决策——这些是你的事。AI 帮你执行，但方向你来定。

这个网站会持续迭代。V3 已经在计划中：SEO 优化、加载性能提升、更多博客内容。Vibe Coding 让我可以像一个"一个人的全栈团队"一样工作——而这，正是产品经理最性感的超能力。