● LIVE
AI · GAME · E-COMMERCE
Human vs AI Judge
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.
Hi, this is Kunyu Xu.
Design Engineer · AI · E-commerce
Engineering at the E-commerce SaaS × AI frontier
Building across the full e-commerce SaaS stack — from frontend engineering to AI-assisted delivery, with a design-engineering lens.
About
Background & Direction
Currently
Frontend engineering at ThoughtWorks on e-commerce SaaS, currently exploring and contributing to a cross-team AI Playbook.
Tech Stack
- React
- TypeScript
- Next.js
- Tailwind CSS
- Node.js
- GraphQL
- Claude API
- Vertex AI
- ECharts
- MicroFrontend
- Mixpanel
- Azure
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
- E-commerce SaaS Full StackLayer-by-layer breakdown from Discovery to Checkout
- AI Agent EngineeringReal-world Claude API / tool calling implementation
- Design EngineeringDelivering at the intersection of engineering and experience
Experience
Work History
ThoughtWorks
Dec 2022 – PresentSoftware 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.
Projects
Selected Projects & Experiments
Live Demo →
◆ HACKATHON ★ TOP 10
UX DESIGN · E-COMMERCE · MOBILE
EaseBuy
Top 10 in UXcel × UX Pilot Design Competition. A minimalist mobile e-commerce app covering the full shopping journey across 11 screens — generous whitespace, card-based IA, transparent checkout. Full flow from wireframe to hi-fi with AI assistance.
◆ HACKATHON
AI AGENT · GITLAB HACKATHON
Spec-Driven Scenario Updater
GitLab AI Hackathon submission. Targeting the "spec gap" — the distortion that accumulates as business logic is translated across product, design, and engineering. A single spec source drives AI to auto-generate code, tests, and docs.
● LIVE
AI AGENT · E-COMMERCE
Brooch Shop
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
CHECKOUT · STRIPE
Prompt Shop
End-to-end e-commerce checkout playground with Stripe integration — covering the full flow from product listing to payment confirmation.
● LIVE
AI · GAME · E-COMMERCE
Human vs AI Judge
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.
◆ HACKATHON ★ TOP 10
UX DESIGN · E-COMMERCE · MOBILE
EaseBuy
Top 10 in UXcel × UX Pilot Design Competition. A minimalist mobile e-commerce app covering the full shopping journey across 11 screens — generous whitespace, card-based IA, transparent checkout. Full flow from wireframe to hi-fi with AI assistance.
◆ HACKATHON
AI AGENT · GITLAB HACKATHON
Spec-Driven Scenario Updater
GitLab AI Hackathon submission. Targeting the "spec gap" — the distortion that accumulates as business logic is translated across product, design, and engineering. A single spec source drives AI to auto-generate code, tests, and docs.
● LIVE
AI AGENT · E-COMMERCE
Brooch Shop
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
CHECKOUT · STRIPE
Prompt Shop
End-to-end e-commerce checkout playground with Stripe integration — covering the full flow from product listing to payment confirmation.
● LIVE
AI · GAME · E-COMMERCE
Human vs AI Judge
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.
Writing
Featured Articles & Notes
Double RAF + MutationObserver: Scroll Restoration After Micro-Frontend Redirects
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.
Juejin (CN)Read full article →
AI Pair Programming Retrospective: There's a Layer Beneath the Business Logic
AI wrote code that ran — but kept missing one element. After a few loops I realized: I'd never given it the layer beneath the business logic. A reflection on what context actually means in AI pair programming.
WeChat (CN)Read full article →
"Easy to Browse" vs "Easy to Find" — IA Trade-offs in E-commerce Storefronts
Browsing a boutique feels effortless — shopping the same item online feels overwhelming. This piece unpacks the IA trade-off between "enjoyable to browse" and "easy to find" in e-commerce storefronts.
WeChat (CN)Read full article →
Your Page Doesn't Exist to Google — A Micro-Frontend SEO Post-mortem
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.
Juejin (CN)Read full article →
The Cyber Textile Factory: Four Generations of AI Agent Workflow Design
A textile factory metaphor to explain four generations of AI Agent workflow design — from structured execution to planning, memory, and safety guardrails. The more capable the system, the more precise the constraints need to be.
Juejin (CN)Read full article →
When a System Goes Headless, Does AI Take Over More Easily?
Headless architecture exposes capabilities without prescribing UI. AI agents — which don't need UI — turn out to be its ideal consumers. But API governance costs don't disappear; they just shift.
Juejin (CN)Read full article →