Digital Product Builder

把体验、代码与叙事 压缩成一个精密界面

我专注于个人品牌网站、内容产品与前端界面系统,偏爱克制但有深度的视觉表达。 这里记录我如何把想法打磨成真实、可交付、可持续演进的作品。

Selected Work

不是堆砌功能,而是构建有判断力的界面系统。

我更看重页面之间的节奏、信息层级和长期维护的可塑性,所以项目展示也按系统视角来组织。

Case Study / 01

个人品牌主页重构

以“软件感”为核心,重做首页、内容页与导航系统,让个人站从简历式展示升级为持续输出平台。

层叠背景系统:基础渐变、动态光团、网格与噪点叠加
统一按钮、卡片、文章模块与导航交互
为移动端重写信息顺序,保留同样的氛围感与节奏
System

设计令牌优先

所有颜色、圆角、阴影与节奏都集中在一处,后续扩页时不会散乱。

Interaction

鼠标追踪光斑

卡片随指针浮现柔和光域,让静态页面拥有接近桌面软件的反馈质感。

Content

内容页不再只是正文容器

通过目录、侧边摘要与引文卡片,把阅读体验也做成一个完整产品。

Responsive

移动端重新编排而非简单缩小

导航折叠、模块堆叠、字体自适应,确保手机和桌面都保留同样的高级感。

Workflow

我通常如何推进一个个人网站。

从策略、视觉、组件到内容结构,每一步都对应清晰产出,而不是临时拼装。

01 / Structure

先建立页面骨架

首页负责表达定位,内容页负责承载深度,两者共用统一导航、页脚和视觉语法。

02 / System

再固化设计语言

颜色、卡片、按钮、间距、阴影全部组件化,后续新增页面可以直接沿用。

03 / Narrative

最后打磨内容叙事

把项目、文章、个人介绍串成连续体验,让网站更像产品,而不是信息清单。

Writing

近期内容

内容页模板已经准备好,可以继续扩展为文章、案例拆解、项目日志或周报体系。

April 2026 Design System

如何把个人网站做出产品质感

从版式、层级到动效,拆解一个两页网站如何建立完整的视觉人格。

阅读文章
March 2026 Frontend

纯 HTML 也能建立可维护的页面系统

不依赖框架,同样可以通过样式令牌和共享结构让代码清晰、稳定、可扩展。

查看模板
Archive Coming Soon

内容库正在扩展

后续可以继续添加分类页、标签页、项目详情页,沿用当前这套视觉系统。

打开内容页