Mangle Kuo

(Hao-Tsun Kuo)

Design Engineer / Frontend Product Engineer

  • manglekuo.com
  • manglekuo@gmail.com
  • github.com/ghcpuman902
  • linkedin.com/in/htkuo

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.aiaid.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.comkatena.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.appGitHub

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.comGitHub

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.

More components and experiments on manglekuo.com — try the Puzzle Solver, SVG burned text, and FFT visualizer.

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

Made by Mangle Kuo. All rights reserved.

© 2025