Case study / 0101
Kraftsman
面向欧美市场的 $400+ 高端厨电项目。我负责工业极简视觉、响应式页面与 Shopify / GSAP 前端落地。
- 角色
- Web UI 设计 / Shopify 前端
- 平台
- D2C Shopify 网站
- 时间
- 2025.05 - 2025.11
- 本人职责
- 视觉方向与 Web UI
- Shopify Liquid / HTML / CSS / GSAP 开发
- 响应式适配与性能优化
Design to build
从视觉方向到可运行的 Shopify 体验
这不是把设计稿交给开发后结束的项目。视觉、交互和前端实现被放在同一条工作流中持续校准。
视觉方向
先确定页面节奏、排版层级与品牌氛围，再进入界面细化。
交互叙事
把核心内容组织成滚动触发的连续体验，明确每一段动效的叙事目的。
AI 辅助开发
在设计判断明确后，借助 AI Agent 推进 Liquid、HTML、CSS 与 GSAP 实现。
响应式收尾
围绕移动端、加载成本与设备差异调整动效强度和页面表现。
Motion evidence
让滚动成为品牌叙事的一部分
桌面端与移动端录屏将在脱敏并通过发布门禁后补入。当前页面只保留证据位置，不使用演示素材替代真实结果。
录屏将在脱敏并通过发布门禁后替换此占位。
录屏待导入16:10
录屏待导入9:16
Vibe Coding
AI 进入实现环节，设计判断仍由我负责
我先定义视觉方向、交互规则和响应式边界，再借助 AI Agent 加速代码探索、GSAP 实现与问题排查，最后由我审查视觉还原、交互手感和上线质量。
这套方式让设计不止停在 Figma，也能直接参与 Shopify 主题与创意前端的落地。