所有作品
案例 06
React / SCSS Production UI — eGift Animation & IDME
Supported production UI implementation for B2C eGift animation and B2B IDME-related UI using ReactJS, SCSS, JSX, Git workflows, branch-based development, and pull request support.
ReactJSSCSSJSXB2C AnimationB2B IDMEGitPRCodebase Collaboration
- Bridged the gap between Figma and production
- Improved quality and speed of UI implementation
- Product type
- Production UI implementation (eGift animation, B2B IDME)
- Platform
- Web
- Timeline
- 2021–2025 · multiple implementation releases
- Role
- UIUX design, frontend layout support, UI testing
- Team
- Designer, frontend engineers
- Tools
- ReactJS, SCSS, Git, SourceTree
為什麼這個專案存在
Moving closer to production by supporting UI implementation directly in the codebase. Some projects were hand-coded before AI-assisted workflows; later work also included AI-assisted UI implementation.
我負責的部分
- UIUX Designer
- Frontend Layout Support
- React/SCSS Implementation
- Production UI Collaboration
- UI Testing
- Bug Reporting
困難之處
- Translating design details into production UI
- Maintaining visual quality after implementation
- Understanding an existing codebase
- Working with Git, branches, and pull requests
- Getting animation and interaction details right
- Collaborating with engineers without replacing engineering ownership
如何完成
- 1Cloned from Bitbucket / GitHub
- 2Reviewed code structure
- 3Created branches for UI updates
- 4Adjusted ReactJS, SCSS, JSX, components, variables, and color library
- 5Used AI-assisted workflows when appropriate
- 6Submitted and supported pull requests
- 7Tested and reported bugs
背後的思考
Treated implementation as an extension of design quality — matching intended interaction, spacing, hierarchy, and behavior.
精選視覺
抽象示意圖——原創 mockup，非客戶截圖。
改變了什麼
- Bridged the gap between Figma and production
- Improved quality and speed of UI implementation
我的收穫
Shaped my positioning as a designer who can think, design, prototype, and work directly with codebase-ready product UI.