Hi, this is Kunyu Xu.
Design Engineer · AI · E-commerce
Building across the full e-commerce SaaS stack — from frontend engineering to AI-assisted delivery, with a design-engineering lens.
Background & Direction
Frontend engineering at ThoughtWorks on e-commerce SaaS, currently exploring and contributing to a cross-team AI Playbook.
Tech Stack
My background is in architecture and UX — coming into frontend engineering, that turned out to shape how I see problems more than I expected. I tend to look at systems from the flow down rather than the feature up: noticing where chains break before they become visible, and wanting to fix things upstream rather than waiting for them to surface.
That perspective comes from a flow-mapping mindset — understanding where users get stuck is closer to the root of a problem than understanding what they 'want'.
Working at the intersection of engineering and experience, I've always felt that "can we ship it" and "is it worth shipping" matter equally. AI makes this more interesting — not just as a way to move faster, but as a reason to rethink how delivery itself works.
Now breaking these down into articles and demos — systematically validating where AI genuinely adds value across each layer of e-commerce SaaS.
Focus Areas
Work History
Software Developer
As a core frontend engineer, I've been hands-on across a micro-frontend purchase flow rebuild (Module Federation) and SPA purchase experience optimisation — plus performance tuning, config design for new-country rollouts, and micro-frontend redirect handling. A running thread through all of it: figuring out how to genuinely bring AI into the delivery rhythm. That's meant AI-assisted UI changes that ship faster, a Figma API-driven i18n automation pipeline, and introducing Figma MCP for UI component scaffolding — turning "AI speeds things up" from a talking point into something the team can actually reuse.
On the business side, I've had the chance to own a few UX-focused features end-to-end — from technical design and tracking through to production deployment. At the team level, I've been pushing to rethink how we handle production support with AI-assisted debugging, and I've been part of exploring and writing a cross-team AI Playbook. Shipping features is the baseline; I'm also interested in making how we work a bit better along the way.
Selected Projects & Experiments
● LIVE
CLAUDE CODE · SKILL · VISUALIZATION
You wrote a great article — most people won't click the link. A Claude Code `/viz` skill that detects article structure and generates mind maps, interactive HTML, and shareable image cards — each output links back to the source so every audience finds their entry point.
● LIVE
DESIGN ENGINEERING · FRAMER MOTION
A design engineering exercise — four-page B2B marketing site built from scratch. Features a custom physics bounce hook with velocity vectors and wall-reflection, responsive layout, and Framer Motion animations. Lighthouse: Performance 91 / Accessibility 96 / SEO 100.
◇ EXPERIMENT
DESIGN SYSTEM · EXPERIMENT
Design tokens don't just store values — they carry meaning. An experimental tool for analyzing the visual signals that token combinations transmit: mapping the semantics of color, radius, and weight to surface conflicts before a component is built.
● LIVE
AI AGENT · E-COMMERCE
Where filters fall short, agents begin. An AI shopping agent built with Claude API and tool calling — demonstrating how natural-language intent understanding replaces multi-level filter UX.
● LIVE
AI · GAME · E-COMMERCE
When AI has already decided, who presses confirm? Compete with AI on intent classification of real e-commerce support tickets — compare human, Claude, and GPT judgments in real time.
● LIVE
CLAUDE CODE · SKILL · VISUALIZATION
You wrote a great article — most people won't click the link. A Claude Code `/viz` skill that detects article structure and generates mind maps, interactive HTML, and shareable image cards — each output links back to the source so every audience finds their entry point.
● LIVE
DESIGN ENGINEERING · FRAMER MOTION
A design engineering exercise — four-page B2B marketing site built from scratch. Features a custom physics bounce hook with velocity vectors and wall-reflection, responsive layout, and Framer Motion animations. Lighthouse: Performance 91 / Accessibility 96 / SEO 100.
◇ EXPERIMENT
DESIGN SYSTEM · EXPERIMENT
Design tokens don't just store values — they carry meaning. An experimental tool for analyzing the visual signals that token combinations transmit: mapping the semantics of color, radius, and weight to surface conflicts before a component is built.
● LIVE
AI AGENT · E-COMMERCE
Where filters fall short, agents begin. An AI shopping agent built with Claude API and tool calling — demonstrating how natural-language intent understanding replaces multi-level filter UX.
● LIVE
AI · GAME · E-COMMERCE
When AI has already decided, who presses confirm? Compete with AI on intent classification of real e-commerce support tickets — compare human, Claude, and GPT judgments in real time.
● LIVE
CLAUDE CODE · SKILL · VISUALIZATION
You wrote a great article — most people won't click the link. A Claude Code `/viz` skill that detects article structure and generates mind maps, interactive HTML, and shareable image cards — each output links back to the source so every audience finds their entry point.
Featured Articles & Notes
Nine token profiles, one HTML structure — each presenting a completely different product personality. They all seemed valid, until I asked: what if this weren't a landing page? Move Playful into a data dashboard, drop AI Gradient into a payment flow — the wrongness is immediate.
The functionality works, but the interface is lacking. We get AI to optimize it, but after a dozen rounds of revisions, it just gets messier — many people have experienced this process. This article documents my shift in understanding from "the prompt wasn't written well enough" to "there's no design system at all," and how design tokens transform this from something mystical into an actionable definition.
Scroll restoration after a redirect isn't a scroll problem — it's a timing problem. State must survive the jump, the element must appear in the DOM, and it must be fully painted — in that order, at the right moment in the browser rendering pipeline.
Not low-ranking — completely invisible to Google. A micro-frontend SEO post-mortem and a four-layer diagnostic framework: link discovery, accessibility, content rendering, semantic understanding. Fix the wrong layer and nothing changes.