把 Spline 場景變成 300KB 的網頁 Hero
不用 iframe、不背 2MB runtime、沒有角落徽章：我的 Spline 星空如何變成 48 幀共 337KB 的圖片序列——包含途中鏡像文字的翻車紀錄。
查看內容
KARENYA LIN — PORTFOLIO
7 年 UIUX Lead — 從 3D 動畫到產品設計
B2B SaaS 產品設計 · AI 協作 · 3D 動態
Karenya LinOgloba · UIUX Lead（現職）
RECENTLY
最近在做什麼
近期文章與精選作品，記錄從問題到實作的過程。
最近更新
你想找哪一種能力？
先逛最近作品，或選一個方向優先看。
主題標籤可左右滑動
6 項內容
想找特定內容？搜尋
Apple 式逐格 Hero 的 React 工程細節
首頁 48 幀 hero 的每一個技巧與它存在的理由：跨步預載、最近幀繪製、觀察器把關的 rAF、純 CSS 的 reduced-motion，以及開場序曲的交接契約。
查看內容- PROJECT PREVIEW作品圖片／影片待補
Codex 與 Claude Code 多 Session 協作：分工、Review Loop 與交接流程
我如何讓多個 AI Session 協作製作作品集，安排檔案分工、AGENTS.md／CLAUDE.md、skills、Review Loop 與單一整合交接，附可套用的 brief 和檢查清單。
查看內容 從 Sitemap 到正式產品：我的 AI 協作官網工作流程
用 Ogloba 官網實例，說明我如何串起 Figma、Next.js、動畫、多語系 SEO 與無障礙決策，再依需求選擇 React 或 WordPress 落地方式。
查看內容- PROJECT PREVIEW作品圖片／影片待補
從 AI 指令到交付流程：我的規劃、實作、QA 與交接方法
我如何把一長串 AI 指令，整理成依風險確認、分層規則、明確審查範圍，以及能跨 Session 延續的規劃、實作、QA 與交接流程。
查看內容 
專案版本發布品牌素材下載平台與 Partner ID 驗證：用 ReactJS、Next.js 建立 Brand Center
我以 UIUX Lead 的角度分享，如何用 ReactJS 與 Next.js 建立公司和客戶共用的品牌素材下載平台，整合 Logo、圖像資源、使用規範與 Partner 公開 ID 驗證，再透過 GitHub 和 Vercel 交付。
查看內容