● LIVE
CLAUDE CODE · SKILL · VISUALIZATION
Readable & Shareable
你写了好文章，但大多数人不会点开链接。Claude Code `/viz` skill：自动识别文章结构，生成思维导图、交互 HTML、图片卡片等可分享产出，每种形式都链回原文，让不同受众找到自己的入口。
嗨👋 欢迎来到 「许昆瑜」 的个人网页
Design Engineer · AI · E-commerce
深入工程，在电商 SaaS 探索 AI 与交付的边界
在电商 SaaS 全链路做工程与体验的交付，用 AI 放大判断力，用数据校验直觉。
关于
背景与方向
现在在做
在 ThoughtWorks 做电商 SaaS 全链路前端工程，现参与跨团队 AI Playbook 的探索与撰写。
技术栈
- React
- TypeScript
- Next.js
- Tailwind CSS
- Node.js
- GraphQL
- Claude API
- Vertex AI
- ECharts
- MicroFrontend
- Mixpanel
- Azure
有建筑学和 UX 的背景，转到前端之后发现这些经历带来了一种特别的视角——习惯从整体动线往下看，而不是从单个功能往上建。这让我更容易在需求还没清晰的时候就注意到链路里的断点，比起等问题暴露，更想在上游就把它找出来。
这个视角来自动线思维——理解用户在哪里卡住，比理解他们「想要什么」更接近问题的根。
在工程和体验的交叉点工作，一直觉得「能不能交付」和「值不值得交付」同样重要。AI 的出现让这件事变得更有意思——不只是把开发提速，更像是一个重新审视交付方式本身的机会。
现在把这些拆成文章和 demo，系统验证 AI 在电商 SaaS 每一层的真实介入价值。
探索方向
- 电商 SaaS 全链路从 Discovery 到 Checkout 逐层拆解与实验
- AI Agent 工程化Claude API / tool calling 真实落地
- Design Engineering在工程与体验的交叉点做交付
经历
工作经历
ThoughtWorks
2022.12 – 至今软件开发工程师
作为项目前端主力成员，深度参与了微前端购买流程重构（Module Federation）与 SPA 购买体验优化，技术上做过性能调优、新国家 rollout 的 config 配置、微前端跳转重定位这些前端专项工作。一直在探索怎么把 AI 真正用进交付节奏里——AI 辅助 UI 需求快速变更上线、Figma API 驱动的 i18n 自动化方案、Figma MCP 生成 UI 组件框架，一步一步把「AI 加速开发」从概念变成团队可复用的实践。
业务侧有机会以 feature owner 身份完整主导过几个用户体验向的小功能，从技术方案到埋点设计、再到生产部署全程跟完。团队层面在推动生产 support 流程的梳理与 AI 辅助排障的落地，也参与了跨团队 AI Playbook 的探索和撰写——交付功能是基线，也想让团队整体的工作方式变得更好一点。
项目
精选项目与实验
查看 Demo →
● LIVE
DESIGN ENGINEERING · FRAMER MOTION
SSB Website
从零搭建的 B2B 营销站设计工程练习。四页完整实现，含自定义物理弹跳动效 hook（速度向量 + 边界反射）、响应式布局与 Framer Motion 动画。Lighthouse 性能 91 / 无障碍 96 / SEO 100。
◇ EXPERIMENT
DESIGN SYSTEM · EXPERIMENT
Design Token Signals
设计令牌不只是存储数值，它们携带意义。一个用于分析 design token 组合所传达视觉信号的实验工具——映射颜色、圆角、字重的语义，在组件开发之前识别视觉冲突。
● LIVE
AI AGENT · E-COMMERCE
Brooch Shop
筛选器解决不了的问题，Agent 从这里开始。用 Claude API + tool calling 构建的 AI 导购 agent，演示自然语言意图理解如何替代传统多级筛选。
● LIVE
AI · GAME · E-COMMERCE
Human vs AI Judge
当 AI 已经做出判断，谁来按那个确认键？与 AI 同场竞技，对真实电商售后工单做意图分类，实时对比人类、Claude、GPT 三方判断差异。
● LIVE
CLAUDE CODE · SKILL · VISUALIZATION
Readable & Shareable
你写了好文章，但大多数人不会点开链接。Claude Code `/viz` skill：自动识别文章结构，生成思维导图、交互 HTML、图片卡片等可分享产出，每种形式都链回原文，让不同受众找到自己的入口。
● LIVE
DESIGN ENGINEERING · FRAMER MOTION
SSB Website
从零搭建的 B2B 营销站设计工程练习。四页完整实现，含自定义物理弹跳动效 hook（速度向量 + 边界反射）、响应式布局与 Framer Motion 动画。Lighthouse 性能 91 / 无障碍 96 / SEO 100。
◇ EXPERIMENT
DESIGN SYSTEM · EXPERIMENT
Design Token Signals
设计令牌不只是存储数值，它们携带意义。一个用于分析 design token 组合所传达视觉信号的实验工具——映射颜色、圆角、字重的语义，在组件开发之前识别视觉冲突。
● LIVE
AI AGENT · E-COMMERCE
Brooch Shop
筛选器解决不了的问题，Agent 从这里开始。用 Claude API + tool calling 构建的 AI 导购 agent，演示自然语言意图理解如何替代传统多级筛选。
● LIVE
AI · GAME · E-COMMERCE
Human vs AI Judge
当 AI 已经做出判断，谁来按那个确认键？与 AI 同场竞技，对真实电商售后工单做意图分类，实时对比人类、Claude、GPT 三方判断差异。
● LIVE
CLAUDE CODE · SKILL · VISUALIZATION
Readable & Shareable
你写了好文章，但大多数人不会点开链接。Claude Code `/viz` skill：自动识别文章结构，生成思维导图、交互 HTML、图片卡片等可分享产出，每种形式都链回原文，让不同受众找到自己的入口。
文章
精选文章与笔记
我以为 9 种 token 风格都能用——直到我换了一个 IA
做了一个 demo：同一套 HTML，9 种不同的 design token，每种呈现出完全不同的产品人格。看起来每套都能用——直到我追了一个问题：换一个 IA 还成立吗？把 Playful 放进数据 dashboard，把 AI Gradient 放进支付流程——感觉立刻不对了。
公众号阅读全文 →
你让 AI 改的不是 UI，是你从来没做过的那个决定
功能跑通了，界面差点意思，让 AI 优化，改了十几轮越来越乱——很多人都经历过这个过程。这篇文章记录了我从「prompt 写得不够好」到「原来根本没有设计系统」的认知转变，以及 design token 是怎么把这件事从玄学变成可以被执行的定义。
公众号阅读全文 →
双 RAF + MutationObserver：微前端跳转后的滚动复原完整方案
微前端跳转后滚动复原，不是一个 scrollTo 能解决的。状态要活过跳转、元素要出现在 DOM、还要等渲染真正完成——三件事都得在浏览器渲染管线的正确时机触发。「元素在 DOM 里」和「元素画好了」是两个不同的问题，用错 API 就会踩坑。
掘金阅读全文 →
你的页面对 Google 来说不存在 —— 一次微前端 SEO 链路排查
不是排名低，是页面对 Google 完全不存在。这篇记录了一次微前端项目的完整 SEO 排查过程，以及从中整理出的四层诊断框架：链接发现、可访问性、内容渲染、语义理解。断点找错了层，改再多也没用。
掘金阅读全文 →