Project
Style Draft
项目风格稿
早期客户项目案例 · 2018—2022 · 记录不同行业的视觉设计实践
AI 驱动 · SaaS 产品设计 / Design System Lead
专注 To B SaaS 复杂业务体验设计，主导 Design System 与代码组件库从 0 到 1（200+ 组件），将 AI 工具全程融入需求拆解、交互方案、组件文档与 React Demo，推动产品从设计走向可上线交付。
AI Product Design
运用 ChatGPT / Claude / Cursor 全程 AI 辅助，从需求拆解、信息架构到 React 上线，构建可配置化的多资源场地智能预约与管理平台。
零业务逻辑纯布局层组件，双轴模式（timeX / timeY）+ 4大业务场景 Demo，Render Props 架构，可直接发布为 npm 包，覆盖市面绝大多数调度视图需求。
为 Pisell SaaS 平台设计的 AI 运营中枢，整合预约/支付/客户/会员等 7 大模块，内置 AI Copilot · 亮暗双主题 · 可交互 Demo，全程 Vibe Coding 交付。
澳洲室内儿童游乐场 Pisell 预约系统 Demo，VIP 生日包房 + 标准场票务管理，基于 ChessboardLayout 组件，全程 AI 辅助开发与上线。
月视图资源预约日历，支持多楼层房间管理、预约状态可视化、拖拽移动、深浅色主题切换，全程 AI 辅助设计与 React 实现。
Project
Style Draft
早期客户项目案例 · 2018—2022 · 记录不同行业的视觉设计实践
In-depth
Investigations
设计工程化
2020年起
设计系统是技术组件、可重复设计组件、工作流程、设计指南、使用规则和模式的集合。
从本质上讲，它们是一个平台，汇集企业可以用来创建产品的所有资源。
UI development
2020年起
“Design Token 是一些集中存储的 UI 元素信息，比如颜色、字体、间隔、动画等等。他们可以根据需要被转换为不同平台的代码，比如 Android、iOS 或 Web。”
组件化
2018年起
早在 Web 时代我们就有了 Components 的概念，输入框、按钮、文字、链接、下拉菜单… 从网页开始出现，这些元素就已经被大家所认知、牢记。无论页面的设计如何变化，它们基本上都是由这些组件所组成的。
