AY

袁艺 Alan Yuan

@LikeDreamwalker

Frontend / Full-Stack Developer
Hebei Normal University of Science & Technology
Bachelor of Computer Science
Beijing or Remote
Frontend / Full-Stack Developer(Aug 2025 - Present)
PPLAUD.AI
Leading full-stack architecture and development of Plaud Executive Agent, independently delivering 3D knowledge canvas, intelligent email, and rich text editor
Frontend / Full-Stack Developer(May 2024 - Jul 2025)
HPC-AI Tech
Lead Video Ocean's technical architecture and solution design, guiding the team in business and feature development
Frontend Developer(May 2021 - May 2024)
DiDi GlobalUser Growth (UT)
Frontend Owner for Car Owner Commercial, designing technical solutions and implementing feature development
Frontend Developer Intern(Nov 2020 - Mar 2021)
Worktile
Supported PingCode and Worktile feature development
Plaud Executive Agent
Aug 2025 - Mar 2026
Next.jsReactThree.jsPlate.jsCloudflare WorkersD1AWS Lambda
PPLAUD.AI
PLAUD.AI's exploration in AI memory management. The hardware collects information in the real world, PEA manages knowledge in the virtual world.
Visualizing knowledge networks in 3D space (Mind Palace), connecting users to AI Agent via email. Full-stack delivery from database to rendering service.
Mirrorlake
Next.jsReactshadcn/uiVS Code ExtensionPythonTool CallingFluid Compute
Modern color analysis and recommendation capabilities. Includes two products: Mirrorlake Color Agent and Mirrorlake Color Highlighter.
Three-Tier Architecture
Implementation-first approach. Architecture divided into three layers: Next.js client, hybrid backend (Next.js and Python servers), and inference engine (DeepSeek).
The client provides rapid user interaction and basic color conversion, the hybrid backend delivers advanced color analysis and recommendations, while the inference engine focuses on understanding user needs through Tool Calling. This reduces the inference engine's workload in Agent products, lowering operational costs and improving efficiency.
Unified Deployment
Designed architecture based on Vercel Fluid Compute, implementing aggregation of Python and Next.js backends within a Next.js project for hybrid computation and color analysis output.
Embedded Webview
Embedded Webview within the extension, implementing synchronized interaction with Mirrorlake Color Agent through PostMessage.
Video Ocean
Jun 2024 - Jul 2025
Next.jsReactshadcn/uiMaterial UInext-intlMDXFluid Compute
HPC-AI Tech
Consumer AIGC product. Aggregates and enables flexible configuration of various generation components, providing capabilities for video, image generation and editing, plus an LLM business.
Built with RSC and Next.js for hybrid rendering and streaming. Leverages Fluid Compute and Next.js backend for service capabilities.
Designed and implemented Video Ocean's technical architecture, leading and guiding the team in requirement design and development, providing recommendations for product operations and iteration.
Next.js and Full-Stack Architecture
Hybrid Rendering
Designed overall architecture based on RSC, with extreme component decomposition to maximize rendering efficiency. Limited client component context to avoid abuse and unnecessary consumption of client runtime resources (like zustand store, early approach). Reduced SSR hydration pressure and cached key data for basic PWA support.
Backend and Edge Services
Deployed frontend service (Next.js), backend services, and inference services in the same cluster for internal network access. For security and performance, only Next.js serves as the sole API gateway through Server Actions and Route Handlers, combined with hybrid rendering to minimize unnecessary data transfer. Implemented features like OAuth through frontend capabilities, with third-party edge services handling resource caching, transcoding, and storage.
AI Generates Everything
Atomic Generation Components
Decomposed complex AIGC input parameters, designed atomic input components based on model/modality dimensions, enabling arbitrary input parameter configuration and combinations, with aggregated generation components for rapid reuse.
Feature List Approach
Video Ocean's early technical approach, also common among most AIGC products. Designed input components from a feature perspective (like text-to-video, image-to-video), enabling arbitrary input component configuration by feature dimension, with configuration-based rapid development and deployment of corresponding features.
DiDi Car Owner Service: Commercial
Mar 2022 - May 2024
MPXVue 2.x
DiDi Global
Encompassed four business directions with over ten frontend products. Initially focused on marketing and operational channel exploration for DiDi Global's car manufacturing division, later pivoted to providing commercialization capabilities for driver business while balancing directional budget revenue. Implemented targeted performance optimizations to improve business conversion efficiency, maintaining 90th percentile performance at 1.6 seconds.
One key characteristic of commercialization is that all sub-business processes are highly aligned. By abstracting the business core, we can significantly reuse existing business logic, reduce development costs, and thereby improve overall business profitability.