Mangle Kuo
(Hao-Tsun Kuo)
Design Engineer / Frontend Product Engineer
London-based design engineer and frontend product engineer combining frontend systems depth, interaction judgement, visual sensitivity, and the ability to turn vague product direction into production-facing interfaces. I work across React, TypeScript, Tailwind, Motion, Next.js, WebGL/Three.js, and AI-assisted product surfaces.
Experience
Design Engineer / Frontend Product Engineer
GAIB AI / Remote / London
- Designed and implemented production-facing GAIB and AID/sAID interfaces across landing pages, dashboards, onboarding, wallet-related flows, upgrade flows, responsive layouts, and loading/error states.
- Translated vague founder and stakeholder direction into testable prototypes, then refined them into stable React interfaces with clear hierarchy, interaction continuity, and production-ready responsive behaviour.
- Balanced Web3 constraints around client-side wallet state, transaction flows, external data fetching, and user trust, working alongside engineers handling heavier Web3 integration.
- Built and polished detailed interaction systems including tab/card transitions, scroll-reactive navigation, explanatory side panels, asset table views, CSS-mask visual effects, and reusable frontend components.
- Separately built Ketana / ARC League robot-combat broadcast surfaces as a venture project: binary UDP sensor packets parsed via a WebSocket bridge, driving a state-machine-backed match engine with animated HUD and WebGPU visual layers.
Technical Consultant
Quintex / Taipei / Remote
- Led website redesign and build work with Next.js, Sanity, Figma, and TypeScript, improving the company digital presence and sales material workflow.
- Used AI-assisted analysis and structured reporting to support exhibitor evaluation, business development, and international event preparation.
Software Project Manager
Leapsy Co (later merged into Foxconn Industrial Internet) / Taipei / Shenzhen
- Delivered AR/XR projects across iOS, Android, Unity, smart TV, Kotlin, Flutter, MediaPipe, and Lottie-heavy interface work.
- Improved communication and project tracking across design, engineering, and client teams, increasing delivery predictability for client-specific mixed-reality projects.
Selected Work
GAIB / AID / AID Alpha
Worked across GAIB landing pages, AID/sAID product surfaces, dashboards, onboarding, wallet-related flows, upgrade flows, responsive layouts, loading/error states, and asset table views.
Design engineering relevance: Shows product judgement under Web3 constraints: client-side wallet state, transaction clarity, external data refresh, responsive hierarchy, and stakeholder direction with limited specification.
Ketana / ARC League / Robot Combat
Built a real-time robot-combat broadcast system for ARC League with binary UDP sensor packets parsed through a WebSocket bridge, a state-machine-backed match engine, animated HUD, and WebGPU visual layers.
Design engineering relevance: Separate from the AID product work: more event-driven, data-heavy, and display-oriented, with live state, animation timing, and operator-facing reliability concerns.
Shader / Dithering Editor
Interactive browser tool at tsl-dither.vercel.app exploring colour, dithering, shader effects, SVG displacement, GPU/CPU trade-offs, and worker-friendly performance patterns — open source on GitHub.
Design engineering relevance: Shows the visual-system depth, performance sensitivity, and creative technical range needed for adaptive, intelligent web interfaces.
as.manglekuo.com
AI-powered discovery at as.manglekuo.com across multilingual RSS feeds: parallel feed ingestion, semantic cross-source deduplication (same story from multiple outlets merged via cosine similarity), and article embeddings compressed to 512 dimensions for fast in-browser vector matching — no database dependency. Source on GitHub.
Design engineering relevance: Demonstrates AI pipeline design decisions (embedding dimensions, deduplication strategy), PPR with edge middleware for locale, and maintainable React architecture at real product scale.
Where's My Flight?
Given an observer position and viewing cone (bearing arc + max elevation angle), computes which live flights are actually visible from that vantage point — returning bearing, elevation, altitude, projected path, and origin/destination per plane. Outputs both a human-readable and machine-readable report at manglekuo.com/wheres-my-flight, originally designed for a Siri shortcut that answers “what plane is overhead?”
Design engineering relevance: Spherical geometry implemented from scratch (bearing, elevation, wedge intersection, path projection); edge-runtime Next.js API; and data structured for AI consumption — a direct application of physics intuition to frontend product thinking.