WEB DESIGNER · BUILDER

用设计说话，
用代码实现。

关注视觉语言与交互体验，
在设计与工程之间找到那个刚刚好的位置。

查看作品 关于我 →
01设计
→
02构建
→
03上线
WHY DESIGN-FIRST

细节，决定气质

随手出稿 vs 系统驱动——最终呈现的质感，不在一个档次。

随手出稿
/* hero.css */
background: #2a2a2a;
color: #333;
padding: 12px;
/* footer — 又换了一套 */
background: #1d1d1d;
color: rgb(45,45,45);
padding: 14px;
  • × 每个页面配色随机发散
  • × 字号字重靠感觉，改版重排
  • × 动效粗糙或根本没有
  • × 换工具 / 换需求，全盘重来
设计系统驱动
/* token 驱动 */
--bg: #0a0b0e;
--text-1: #ebecef;
--sp-5: 24px;
/* 全页面复用同一套 */
.hero { background: var(--bg); }
.footer { background: var(--bg); }
  • ✓ 色板、字阶、间距全部命名
  • ✓ 跨页面风格高度一致
  • ✓ 动效分级，有据可依
  • ✓ 修一处 token，全站跟着变
THREE CAPABILITIES

设计到实现，全程覆盖

从界面系统到动效落地，从 Figma 到代码——一个人完成完整链路。

Components
Variants
Auto Layout
Tokens
Design System · v2.4
01 / 03

UI 设计

Figma 组件系统、设计规范、视觉稿——从原子组件到完整页面，系统性交付。

motion · interaction
02 / 03

交互 · 动效

滚动叙事、微动效、WebGL 特效——把交互体验做到有质感、有节奏、有层次。

/* 设计 → 代码，100% 还原 */
.hero {
  background: var(--bg);
  animation: reveal 1s;
}
/* 响应式 · 无障碍 */
✓ mobile-first
✓ prefers-reduced-motion
03 / 03

前端实现

HTML / CSS / JS · React · Next.js——设计稿到生产代码，逐帧还原，响应式全覆盖。

DESIGN PROCESS · THREE PHASES

发现 → 设计 → 实现

每一步都有交付物，每一步都给你审阅点。

A
PHASE A
发现

深入理解产品目标与用户诉求，分析品牌调性，锁定设计方向与交互档位。

// deliverables
  • · 调性关键词 × 5
  • · 竞品参考 + 色彩方向
  • · 交互档位建议（L1 / L2 / L3）
B
PHASE B
设计

产出设计规范与视觉稿，确立色板、字阶、间距、组件系统，经你确认后交付。

// DESIGN.md · 9 sections
  • · Color · Type · Component
  • · Layout · Motion · Depth
  • · Do's / Don'ts · Responsive
C
PHASE C
实现

严格按设计规范落代码，动效逐帧还原，响应式全覆盖，无障碍达标。

// quality checklist
  • ✓ 零硬编码色值
  • ✓ 全组件状态覆盖
  • ✓ 响应式 + reduced-motion
BLOG · JOURNAL

折腾记录

设计过程、技术探索，还有这个网站是怎么做出来的。

建站日志 2026 · DAY 01

用 Next.js + Cloudflare Workers 搭一个个人网站

从零开始，选框架、配部署、踩坑记录。Next.js 16 + opennextjs-cloudflare，推送即上线。记录了所有让人抓狂的配置细节和最终解决方案。

阅读全文
WebGL 2026 · DAY 02

GradientBlinds：一个 GLSL Shader 的解剖

用 OGL + GLSL 实现动态百叶窗背景——旋转变换、镜像渐变、鼠标光斑，以及让我调试一小时的预处理器 Bug。

阅读全文
即将发布

下一篇，敬请期待

设计系统、动效思路、或者又踩了什么新坑——写好了就发。

TOOLS & SKILLS

工具箱

从设计到代码，每一个环节都有对应的武器。拖拽旋转，悬停暂停。

01 / 06

Figma · 组件系统

原子化组件、Auto Layout、变体管理——设计系统从无到有，规模可延展。

Design SystemComponents
02 / 06

视觉设计

色彩、排版、品牌调性——从 moodboard 到视觉稿，暗黑科技到温暖克制，全档位覆盖。

BrandingTypography
03 / 06

交互 · 动效

GSAP · CSS Animation · ScrollTrigger——每个动效都经过精心设计，不多也不少。

GSAPMotionL2 / L3
04 / 06

前端开发

HTML · CSS · JavaScript——语义化结构，零框架也能做出高质感页面。

HTML/CSSJavaScript
05 / 06

WebGL · 3D

OGL · GLSL Shader · Three.js——把视觉效果推进到另一个维度，同时保持 60fps。

OGLGLSLWebGL
06 / 06

React · Next.js

组件化开发、App Router、TypeScript——从本地开发到 Cloudflare Workers 部署，全链路。

ReactNext.jsTypeScript
PORTFOLIO · WORKS

做过的东西

ABOUT ME

Kevin

网页设计师，在设计与工程之间游走。专注视觉语言与交互体验，从 Figma 到代码，把每个细节做到位。

写封邮件
CONTACT · LET'S BUILD

一起做点
有意思的东西。

接受设计委托、合作探讨和各种有趣的项目。

dollazivan@gmail.com
也可以在 GitHub 上找到我
写封邮件 GitHub →