Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/673https://channel.meo-ai.com/posts/673Fri, 10 Jul 2026 02:21:02 GMT<span class="post-title-source">《W键在前端：技术与产品的协同进化》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96" title="#前端工程化">#前端工程化</a> <a href="/search/result?q=%23Electron" title="#Electron">#Electron</a> <a href="/search/result?q=%23Vite" title="#Vite">#Vite</a> <a href="/search/result?q=%23%E4%BB%A3%E7%A0%81%E9%87%8D%E6%9E%84" title="#代码重构">#代码重构</a> <a href="/search/result?q=%23Monorepo" title="#Monorepo">#Monorepo</a> <a href="/search/result?q=%23TailwindCSS" title="#TailwindCSS">#TailwindCSS</a> <a href="/search/result?q=%23ShadcnUI" title="#ShadcnUI">#ShadcnUI</a> <a href="/search/result?q=%23ReactRouter" title="#ReactRouter">#ReactRouter</a> <a href="/search/result?q=%23%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96" title="#性能优化">#性能优化</a> <a href="/search/result?q=%23Medal" title="#Medal">#Medal</a><br /><br />总结：<br /><br />文章要点：<br />1. **从"巨兽组件"说起**：作者用一张拥有30+ props的TextInput截图开场，生动展示了"反模式"组件的恐怖——职责混乱、默认值泛滥、DOM和自定义props杂糅，改一行代码要检查十个角落，开发体验堪比噩梦<br />2. **宏观手术刀**：不硬啃旧组件，而是先换"土壤"——迁移Monorepo+PNPM解决版本混乱，引入Vite+HMR让Electron本地开发告别"停启地狱"，CEO亲自下场当普罗米修斯点火<br />3. **Marie Kondo式删代码**：统一导入路径（包名+清晰路径+文件后缀），减少barrel文件，让AI能精准识别"死代码"。结果疯狂删代码：单PR删除上万行，团队享受"五杀"快感，还提炼出跨平台通用包（utils/hooks/types）<br />4. **生产环境统一Vite**：干掉Rollup，用Glob Imports做代码分割，配合路由级动态加载，i18n文件懒加载，最终渲染包从巨大体积瘦身到2.7MB，构建速度快到QA都惊呼"嗖嗖嗖"<br />5. **组件层"换血"**：用Tailwind+Shadcn/Radix UI（后迁Base UI）替代Grommet和Styled Components，给旧组件挂ESLint"红牌"禁止令，同时写迁移指南。React Router v5→v7的大升级也顺势完成，现在搭个新页面只需一天<br /><br />URL：<a href="https://medal.tv/blog/posts/w-key-in-frontend-synergizing-technology-and-product" target="_blank" rel="noopener" title="https://medal.tv/blog/posts/w-key-in-frontend-synergizing-technology-and-product">https://medal.tv/blog/posts/w-key-in-frontend-synergizing-technology-and-product</a><a class="tgme_widget_message_link_preview" href="https://medal.tv/blog/posts/w-key-in-frontend-synergizing-technology-and-product" target="_blank" rel="noopener" title="Front End Engineer Rick Zhang shares how Medal's frontend team broke the deadlock between legacy code and new features by rebuilding their developer experience from the ground up. Through a monorepo migration, a full move to Vite and Rolldown, aggressive…"> <div class="link_preview_site_name accent_color">medal.tv</div> <img class="link_preview_image" alt="W-Key in Frontend: Synergizing Technology and Product | Medal" src="/static/https://cdn4.telesco.pe/file/Ja8jh4CR_X5n1ZweFyHbHOk07dDOJlt1YEjJr4IwK-miJoQ7-XP0mn5MVL75muvn92MqXGqIxlsw4__v1RrBmkGaW8nTgADE7YHhACPnMF_so3dlhW2tahrRFuskkx13d_iaE5pDMKgqjqKN6wHyIOmJgbF8a2t-8iPwY393mvUegrIa2IfULNQdyMvXR04Om6MLAElsPSfQME303_B9Q8EsXJx6w40grYF_2XwFkrr94ZK6LZq52EfP3D-BbQ0vl2stbCn-tTACUzoGdP1-C8bU6xtWAb0lLCnGGbaDxIRCCM6sC73HUl48vh4DLQSLPBDMSOSHZpEjqDhNmr3-TQ.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">W-Key in Frontend: Synergizing Technology and Product | Medal</div> <div class="link_preview_description">Front End Engineer Rick Zhang shares how Medal's frontend team broke the deadlock between legacy code and new features by rebuilding their developer experience from the ground up. Through a monorepo migration, a full move to Vite and Rolldown, aggressive…</div> </a>https://channel.meo-ai.com/posts/611https://channel.meo-ai.com/posts/611Sun, 26 Apr 2026 02:32:10 GMT<span class="post-title-source">《用 React、GSAP 和 AI 打造 Maxima Therapy 网站》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23React" title="#React">#React</a> <a href="/search/result?q=%23GSAP" title="#GSAP">#GSAP</a> <a href="/search/result?q=%23TailwindCSS" title="#TailwindCSS">#TailwindCSS</a> <a href="/search/result?q=%23ReactRouter" title="#ReactRouter">#ReactRouter</a> <a href="/search/result?q=%23AI%E8%BE%85%E5%8A%A9%E5%BC%80%E5%8F%91" title="#AI辅助开发">#AI辅助开发</a> <a href="/search/result?q=%23%E5%88%9B%E6%84%8F%E7%BC%96%E7%A8%8B" title="#创意编程">#创意编程</a> <a href="/search/result?q=%23Lottie" title="#Lottie">#Lottie</a> <a href="/search/result?q=%23MatterJS" title="#MatterJS">#MatterJS</a> <a href="/search/result?q=%23ScrollTrigger" title="#ScrollTrigger">#ScrollTrigger</a><br /><br />总结：<br /><br />本文是 Codrops 上的一篇案例复盘，记录了团队为神经多样性支持机构 Maxima Therapy 打造高互动、高插画风格网站的全过程。文章详细介绍了技术栈选型（Sanity + React Router + GSAP + TailwindCSS）、多个核心交互模块的实现思路（可拖拽轮播、SVG 水波纹、物理绳索、形状变形、贴纸动效），以及 AI（Claude Code）在实际开发中的辅助作用与局限。对于想在前端项目中融合创意动画与 AI 提效的开发者来说，这是一份非常接地气的实战参考。<br /><br />文章要点：<br /><br />- 技术栈选型很务实：团队选了 React Router（而非 Next.js）做静态生成，搭配 Sanity 做 CMS、Cloudflare Pages 托管，理由是配置更轻量；GSAP + Lenis 负责动画和滚动平滑，TailwindCSS 负责样式，TypeScript 做类型检查<br />- 首页轮播的交互设计很巧妙：把四个节目板块拆成四个旋转的 <code>&lt;div&gt;</code>，只有当前可见的板块才响应交互；切换时触发路由变化，但轮播组件通过布局隔离避免了不必要的重渲染<br />- SVG 水波纹效果用 AI 辅助生成：Claude Code 帮忙把原始 SVG 路径转换成带 50 个控制点的系统，再结合 GSAP 实现鼠标触发的涟漪动画——AI 在创意编码这类"繁琐但规则明确"的任务上表现不错<br />- Lottie 动画与 Canvas 背景混合：通过离屏 Canvas 绘制固定图案，再用 Lottie 的 Canvas 渲染模式做遮罩，最后用 <code>globalCompositeOperation</code> 合成，实现了滚动联动的背景效果<br />- 物理引擎让页面更有生命力：招聘页用 Matter.js 模拟"supports"单词被两根绳索悬挂的物理效果，绳索由复合体堆叠而成，SVG 文字根据物理模拟结果实时位移<br />- AI 是"得力助手"但不是"万能替身"：Claude Code 在 SVG 优化、Sanity 数据模型扩展、TypeScript 类型生成上帮了大忙，但也会出现结果不一致、擅自改动数据获取模式、甚至"幻觉"出不存在 SVG 路径的情况；团队建议把 AI 用在范围明确的小任务上<br />- ScrollTrigger 让滚动交互管理很轻松：配合 <code>useGSAP</code> hook 自动清理，避免了手动写 Intersection Observer 的繁琐，实现了文字显现、图片揭示、SVG 播放等丰富的滚动动效<br /><br />文章URL：<br /><br /><a href="https://tympanus.net/codrops/2026/04/06/building-the-maxima-therapy-website-react-gsap-and-dabbling-with-ai/" target="_blank" rel="noopener" title="https://tympanus.net/codrops/2026/04/06/building-the-maxima-therapy-website-react-gsap-and-dabbling-with-ai/">https://tympanus.net/codrops/2026/04/06/building-the-maxima-therapy-website-react-gsap-and-dabbling-with-ai/</a><a class="tgme_widget_message_link_preview" href="https://tympanus.net/codrops/2026/04/06/building-the-maxima-therapy-website-react-gsap-and-dabbling-with-ai" target="_blank" rel="noopener" title="A behind-the-scenes look at how we built Maxima Therapy with playful interactions, creative code, and a little AI help along the way."> <i class="link_preview_right_image" style="background-image:url('https://cdn4.telesco.pe/file/OSLXxNQNQbCaKK_WYdjWo3UjgGf4WWi3p-5CfnCy7GI0o1FD73UMf9jQ3VWXSWcUdyMHnJO_OS1yqITy3da1RJOSYIfQeJHrE6s9r50gAZYdWU1RVeDMYUZy3V-4xggyDG3xw0ZDyRc-rU-yTqMHXQju_1RpODiVwM4uPHC5UYZ7fRVe51cLHGS_UH_u5-Lmdp4TjI9aOuW5PvsNcDVn8gkUNq0mL5RLs85sd178uwfxO0OxFDzorvwEhCjaalLaBc54dgfJYl0BDM295uXUHJbzySWOEq0uDax3ceCIeW9lT5dkvmRZqDW8t7uITM8aQVPG1I1CpLMlaaguNK3UdQ.jpg')"></i> <div class="link_preview_site_name accent_color">Codrops</div> <div class="link_preview_title">Building the Maxima Therapy Website: React, GSAP, and Dabbling with AI | Codrops</div> <div class="link_preview_description">A behind-the-scenes look at how we built Maxima Therapy with playful interactions, creative code, and a little AI help along the way.</div> </a>