Vibe Coding 交互实践
“告别现成组件的僵化，将交互直觉1:1编译为真实体验。本项目全程无开发人员介入，我依托AI辅助编程，直接重构底层的动效与渲染逻辑。跨越设计工具的物理限制，实现了从视觉推演到满帧代码的独立全栈交付。”
专业输出
UX/UI 设计
Vibe Coding
Saas设计
Web官网设计
项目成果
独立完成 0-1 研发与上线
滚 动 探 索
从零到一的 VibeCoding 实践
“跳出传统交互设计师的 Figma 画布，我决定零基础从头学习 Framer，并引入 AI 作为结对编程的伙伴（Vibe Coding）。不妥协于现成组件，用代码还原脑海中100%的交互直觉。”
首页的“动态名片”
“不再局限于单向的展示，我为 3D 形象设计了四种设计相关软件的趣味状态。利用 Framer 强大的原生动效引擎，精细打磨状态流转间的缓动曲线，将视觉特效转化为极其丝滑的真实网页互动。
真人帅照
3D风格化
用PS美颜
用Figma协作
用AE变换
用AI扁平
藏在代码里的交互直觉
用 Vibe Coding 击穿组件封装，将物理直觉转化为代码参数
眼神跟随
“单纯线性运动过于生硬。我将 3D 图片拆分，通过 VibeCoding 调整跟随效果。微调阻尼参数后，眼球的流转终于有了真实的肉体惯性与生命力。”
意图识别与防抖
“特效不应成为打扰用户的噪音。我加入了微秒级的判定延迟，让系统精准过滤掉鼠标的「无意滑过」，只响应用户的「刻意停留」。用极其微小的参数，守住交互容错率的底线。”
+
+
重构渲染层级的“硬核攻坚”
“首页核心的‘笔触刮开’特效，曾因遮罩与顶部 3D 人物的 Z 轴重叠引发过严重的掉帧灾难。为了不向性能妥协，我果断放弃组件捷径，利用 Vibe Coding 从零手写 Canvas 遮罩。通过引导 AI 重新拆解渲染层级，精准控制 Context2D 的擦除轨迹与羽化边缘，最终在保证极致视觉效果的同时，将系统开销降到了最低。”
笔触刮开标签
利用 VibeCoding 从零手写效果组件
融入直觉的跳转机制
传统的‘点击跳转’会打断用户的浏览惯性。为了让体验更连贯，我用‘滑动蓄力’代替了生硬的按钮。当阅读到底部继续下拉时，这种惯性会自然转化为转场动效，让项目切换顺滑流畅。
当用户阅读至底部继续下拉时，系统会顺应这种物理惯性，将其转化为视觉上的蓄力动效。一旦蓄满，即刻无缝转场。通过 Vibe Coding，我接管了底层的滚动事件监听（Scroll Event），精准映射了下拉偏移量与阻尼反馈。
页面1
页面2
复杂交互通过进一步的组件嵌套实现
终点亦是起点
“这次零基础的 Framer 建站之旅，不仅交付了一个完全自定义的作品集，更跑通了属于我的 VibeCoding 工作流。”
“我深刻意识到，Vibe Coding 绝非简单的复制粘贴，而是设计师对逻辑的极致拆解。当我能将‘视觉感受’精准翻译成‘技术伪代码’，设计的边界就被彻底打破了。不再受限于组件的桎梏，只要敢于想象，皆可造物。”
