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

Jun 2025 - Present

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

2023 - 2025

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

Jul 2020 - Dec 2021

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.

Application Focus

I am applying as a design engineer who can turn ambiguous product direction into intelligent, performance-sensitive, visually detailed interfaces. I care about the behavioural mechanics of UI: how states change, how users stay oriented, and how technical constraints shape the final experience.

Technical Range

Frontend

React 19
Next.js
TypeScript
Tailwind CSS
Shadcn/Radix
Motion

Visual Systems

WebGL
Three.js
Shaders
SVG
CSS masks/clipping
Dithering

Creative Tools

Adobe Photoshop
Adobe Illustrator
Blender

Architecture

Server/client boundaries
RSC
Performance
Workers
Caching
PWA

AI/Product

AI-assisted interfaces
OpenAI APIs
Embeddings
Whisper
Vercel AI SDK

Education

Imperial College London - studied Physics, built interactive educational web work and society systems.
Aldenham School - A levels in Maths, Further Maths, and Physics: A*A*A.

Hobbies

Photography
Film watching

Page 1 / 2

Selected Work

GAIB / AID / AID Alpha

Web3 product work

gaib.ai aid.gaib.ai

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

Real-time broadcast interface

arcleague.com katena.ai

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

Browser visual tool

tsl-dither.vercel.app GitHub

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

Fast Next.js product

as.manglekuo.com GitHub

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?

Spatial aviation tool

manglekuo.com/wheres-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.

Proof Points

Contributed production-facing GAIB/AID interfaces at meaningful deployed scale, including surfaces with analytics showing ~272K active users last calendar year and ~41K active users year-to-date.
Strong at interpreting ambiguous stakeholder intent, identifying what matters in a request, and proposing implementable interface solutions.
Comfortable with visual engineering problems across shaders, SVG, CSS, motion, responsive layout, and performance-sensitive frontend systems.
London-based and interested in close, practical collaboration with founders, product leaders, designers, and engineers.
Attended Cursor's “Build with Cursor” London event (Dec 2025) and shipped a working multi-repo agent manager on @cursor/sdk — actively engaged with the AI-tooling community as it evolves.

Selected Technical Details

Used CSS Grid/subgrid for tab/card transitions where cards collapse into capsule states while another expands, reducing layout shift and transition jitter — as built for AID and star.ai.
Built scroll-reactive navigation and CSS-mask visual effects, including rounded-area clipping and responsive desktop/mobile state changes — as built for guide.ai.
Chose between CSS, SVG, Canvas, Three.js, video, and preprocessed assets based on performance, device support, visual fidelity, and interaction needs.
Packed word letter-sets as 26-bit integers (UInt32 per word, base64-serialised for cross-boundary transfer), reducing letter-membership tests to a single bitwise AND.

Page 2 / 2