Hello! I’m Yifei Xue
A Product Designer and Design Engineer currently working at
Baidu MEUX.
Product Designer，Design System Builder，Design Engineer.
Previously @ ByteDance · Kuaishou · Baidu.
关于我 · More About Me
作为设计师
职业经历
拥有产品与体验设计背景，曾在字节跳动、快手与百度等团队参与核心产品设计实践。
项目产出
过去四年主导或深度参与 12 个设计项目与 4 套设计系统构建。欢迎通过本网站的项目内容进一步了解我的实践与方法。
作为工程师
设计工程化
熟悉前端框架与基础工程能力，能使用 Next.js、React 进行开发，掌握 Git/GitHub 项目管理及基于 Vercel、Netlify 的部署流程。
AI Code
借助 AI 驱动的 IDE（如 Cursor、Bolt.new），加速原型构建与功能落地。
作为我自己
关于网站
我的个人网站是一个持续打磨的设计实验室。
关于创造
我对创造充满热情，不局限于设计，也包括故事、剧本与软件工具的构想。
对我而言，创造力是人生意义的一部分，即使曾在现实中受挫，我始终努力守护它。
Design Projects
01
*Baidu 2023-Now
2023 年 6 月起加入百度 MEUX 体验设计团队，负责内容生态方向的设计工作。
我的职责涵盖百家号相关业务、百度 App 的 AI 发布器设计，以及百家号 Web 端设计系统的建设与维护。
*Kuaishou 2022-2023
2022 年加入快手 KID 设计中心，隶属设计中台与设计系统方向。
设计系统是我快手职业生涯中主要负责的项目，并深度参与设计效能工具的设计与落地。
*ByteDance 2019-2021
2020 年以校招生身份加入字节跳动，任职于飞书业务线，开启了我的产品设计职业生涯。
在这一阶段我经历了高强度的设计实战与快速成长，负责多个 0-1 项目从构思到落地的全流程设计工作。
Design Playground
02
出于兴趣构建的一系列组件与 UI 项目，基于代码实现并部署在 Vercel。用于探索不同设计模式、视觉与交互实现方式。
Trash
Interaction
点击图片触发删除交互，带有细腻的 CSS 动画反馈。
Next.js
Components
3D Glass
Button
玻璃质感按钮，融合 3D 变换效果与拟物风格。
CSS
Components
Fireworks
BG
烟花绽放般的背景动画，适用于节日或庆典场景。
Next.js
Tailwind
…
Number
Input
动态验证码输入框，兼顾快捷性与交互反馈。
Next.js
Tailwind
…
Text
Effect
带有粒子消散动画的文字视觉特效。
CSS
Components
Text
Shimmer
模拟文字流式的闪烁加载效果。
CSS
Components
Scroll
Area
可滚动容器组件，支持溢出区域的遮罩与滑动指示。
Next.js
Tailwind
…
Sroll
Splosion
滚动触发下的标签爆炸动画，增强页面动感。
CSS
Components
Wait
List
结合数据库数据的等待队列模块，适用于预约或注册场景。
CSS
Database
Popover
V0
基于 V0 构建的 shadcn/ui 组件。
Next.js
Shadcn/ui
More…
更多代码组件已托管在 GitHub。
-
目前正在优化 Vercel 在中国大陆的网络可达性，未配置 VPN 时可能存在访问不稳定的问题。
-
我已启用 Cloudflare 全球 CDN 加速以提升加载体验。
Writings & Thoughts
03
一些关于设计方法、系统构建与工具实践的思考沉淀，也包括我在项目之外对创作与体验的长期观察。
Designing Keyboard Shortcuts in Lark
2021 / Q1
《飞书快捷键设计》
快捷键作为一种高效的人机交互方式，承载着对用户行为路径与认知模型的深入理解。一个良好的快捷键体系，应在符合平台规范的同时，兼顾易学性、可发现性与任务流的顺畅衔接。
Talking About Design Engineers
2025 / Q1
《聊聊设计工程师》
学习代码是我这两年一直在坚持的事情，特别是在做设计系统相关的事情，其实是一件非常工程化的事情。但放眼国内很少见到设计工程或设计工程师岗位。但在国外确实一个非常常见的岗位…
On Naming CSS Variables
2023 / Q4
《聊聊 CSS 变量命名》
在设计系统的建设过程中，我负责定义大量 Design Token，其中最具挑战性的部分，是如何为 CSS 变量建立一套清晰、可扩展的命名体系。这个过程不仅涉及命名规范的探索，还包括与研发同学就命名结构、作用域、语义映射等方面的深入讨论。
Talking About Focus States
2022 / Q3
《聊聊聚焦状态设计》
在构建设计系统的过程中，我注意到一个被普遍忽视的问题：国内许多设计系统在组件规范中并未覆盖焦点状态的设计。以按钮、输入框、选择器等基础组件为例，常见的交互状态往往只包含默认态、悬浮态与激活态，而忽略了焦点态…
Talking About Figma MCP & Next.js
2025 / Q2
《聊聊 Figma MCP + Next.js》
本文章将讨论如何利⽤ Figma MCP（Model Context Protocol）打通设计与开发⼯作流，实现从 Figma 设计稿⼀键⽣成代码，并将其集成到 Next.js 项⽬中…