Avatar

Xue Yan · UX Designer

Worn Many Hats
AI Builder
UI / UX Full Stack
Mystery Addict
100% Introvert
Deep in EdTech

Experience

7+ Years

Education

Tibet University

Location

Beijing, China

Status

Open to work

Phone

WeChat QR

Work Experience

Independent · Vibe Coding

2025.11 — Present
Design + Dev, solo end-to-end
Full-stackAI Products0 → 1
Featured Projects
  • Skipwork | AI Workflow & Performance Optimization Reduced single generation time from 3min to under 1min through model chaining and pipeline optimization, while maintaining stable output quality.
  • Convero | Multi-Agent Collaboration & Innovative Interaction Design Innovative multi-agent discussion tool addressing divergent answers across agents, with novel Agent Workflow and dialogue information architecture.
  • Energy Pattern Analysis | Content AI + AIGC Visual Design MBTI-inspired personality illustration mini program; independently completed product definition, AI image pipeline, and app launch.
  • Personal Site | Design & Development Integration Independently completed visual, motion, frontend & deployment with Vibe Coding; a full validation of the AI-assisted full-stack workflow.
Research & Direction
  • AI Output Controllability SPEC-driven approach covers routine iteration / fuzzy-idea implementation / stubborn bug debugging / version management; building component-index.md, tokens.css, and reference docs to enhance agent understanding of component libraries, systematically improving controllability of design and code output.
  • AI Product Delivery Model selection & combination, prompt engineering, token limit handling & performance tuning; full operational pipeline covering monitoring, user feedback, and server deployment.

Autohome + FLTRP Online

2025.05 — Present
Dual-line concurrent delivery
AI ExperienceComponent LibraryMini Program0 → 1
Autohome
  • Built 0→1 component libraries for C-end ad products and B-end merchant platform.
  • Responsible for AI holographic cabin interaction design — optimizing phone, Pad, and cabin linked experience.
  • Responsible for complex business product design across data platform, contract platform, and MCN platform.
FLTRP Online

ByteDance

2020.12 — 2022.07 / 2025.01 — 2025.02
Level 2-2 · Full-platform UI lead
B2B ToolsData DashboardsComponent Library
  • Contributed to B-end component library and design system standardization.
  • Led full-link UI design for in-school education products, covering resource library, in-class display, exams/homework, and learning analytics.
  • Led UI optimization for the smart learning device.
  • Improved exam anomaly handling efficiency by 42.01% through design optimization.

Beijing 17 Education & Technology

2023.03 — 2024.05
3× Outstanding Employee Award
Smart HardwareAIGCB2B Tools
  • Smart learning device design owner — regularly organized experience workshops, maintained experience issue pool and full-link experience maps.
  • Coordinated all interaction design for on-campus business lines: smart hardware, student tools, and teacher tools.
  • Received 3 consecutive outstanding employee awards during tenure.
  • Optimized learning flow experience: student self-correction rate increased from 12.75% to 37.13%.

CGTN (China Global Television Network)

2018.10 — 2020.12 / 2022.09 — 2023.03
2020 Project Design Lead
Official WebsiteData VizOffline ExhibitionsB2B Tools
  • Led the National Day 70th anniversary major website upgrade, covering multi-language and multi-device experience design.
  • Independently designed timesheet management system, Databox dashboard, Huangque system and other B-end products.
  • Led visual & experience design for the "Mars Exploration" offline exhibition; participated in the 73rd anniversary website project.

Selected Archive.

Company
Type
Industry
Knowledge Graph Redesign
重点项目

Knowledge Graph Redesign

Full-cycle UX redesign of the knowledge graph on a student learning pad. Drove self-correction rate from 12.75% → 37.13% and tripled knowledge graph conversion to 79.21% through data-driven interaction optimization.

Beijing 17 Education & Technology Smart Hardware Education
Exception Handling Upgrade
重点项目

Exception Handling Upgrade

Full-cycle UX redesign of the exam exception-handling flow for fclassroom (极课大数据 v1.7.8). Unified 5 anomaly types into a modular, scenario-driven interaction system, reducing user confusion and handling errors end-to-end.

ByteDance B-side Product Education
CGTN Autumn 2020 Website Redesign
重点项目

CGTN Autumn 2020 Website Redesign

Full-cycle redesign of CGTN's official website for the 2020 National Day, covering 11 content verticals (politics, economy, culture, tourism) across multi-language and multi-device. Led visual direction from data audit through 6 style concepts to final delivery.

CGTN C-side Product Media & News
SPEC in Vibe Coding

SPEC in Vibe Coding

A practical guide to Spec-Driven Development (OpenSpec) for Vibe Coding — covering 3 workflow modes and 7 commands to align intent between human and AI before execution, eliminating wasted tokens and misaligned output.

Independent · Vibe Coding Design Research AI & Product Design
AI-Generated UI: Eliminating Hallucinations, Improving Controllability

AI-Generated UI: Eliminating Hallucinations, Improving Controllability

A structured methodology for reducing hallucinations in AI-generated UI by establishing a design system document layer — covering component index, design tokens, reference specs, and HTML previews — modeled on Claude Design and Figma Make Kit patterns.

Independent · Vibe Coding Design Research AI & Product Design
Thoughts on New Interaction Paradigms

Thoughts on New Interaction Paradigms

A personal research piece exploring how AI is reshaping human-computer interaction — from tool-use to tacit collaboration. Covers Vibe Coding workflow evolution, SPEC methodology, and multimodal interaction universality, proposing 5 new interaction principles.

Independent · Vibe Coding Design Research AI & Product Design
Skipwork — AI Travel Itinerary

Skipwork — AI Travel Itinerary

Solo vibe-coded an AI travel itinerary generator from 0 to launch in 5 phases. Built with Next.js + TypeScript, powered by Gemini and DeepSeek, generating structured day-by-day travel guides. Shipped a complete product independently using Claude Code as the primary development tool.

Independent · Vibe Coding C-side Product Travel
Wrong Answer Notebook Scenario Redesign

Wrong Answer Notebook Scenario Redesign

Full-cycle redesign of the wrong answer notebook feature for 极课大数据's B-side learning tool. Restructured the experience around 4 key scenarios — high-frequency mistakes, bookmarks, smart recommendations, and all errors — with optimized detail pages and answer correction flows.

ByteDance B-side Product Education
Answer Card Usability Improvement

Answer Card Usability Improvement

UX research and redesign of the answer card component for 一起教育科技's smart hardware product. Investigated usability needs across teachers, students, and parents, and proposed design solutions covering shape language, scoring display, correction flows, and question number rules.

Beijing 17 Education & Technology Smart Hardware Education
Regional Education Data Dashboard

Regional Education Data Dashboard

0-to-1 design of a large-screen data visualization dashboard for 极课大数据's regional education bureaus. Structured key information zones — user data, teaching insights, resources, and academic performance — into a real-time command center serving district-level education management decisions.

ByteDance B-side Product Education
Cloud Platform Academic Evaluation S1 Optimization

Cloud Platform Academic Evaluation S1 Optimization

B-side data analytics platform redesign for 极课大数据's cloud academic evaluation system. Unified chart interaction patterns and information hierarchy across the data center module, establishing a reusable component methodology for academic performance analysis serving regional education bureaus.

ByteDance B-side Product Education
AI Learning — Process Analysis

AI Learning — Process Analysis

B-side data analytics feature design for ByteDance's AI learning platform (v1.2.6). Shifted academic reporting beyond answer results to in-process behavioral data — covering question-type time distribution, answer-process analysis, and report visual unification through a componentized design approach.

ByteDance B-side Product Education
CGTN English Channel APP Experience Upgrade

CGTN English Channel APP Experience Upgrade

Full-cycle UX redesign of CGTN's English channel mobile app and web experience for 2023. Shifted product focus to mobile-first as CGTN pivoted its matrix toward mobile devices, redesigning news display, breaking news, specials, and content personalization following the principle of 'returning content to individuality, improving KOL attributes'.

CGTN C-side Product Media & News
Hello! Mars — Science & Art Exhibition

Hello! Mars — Science & Art Exhibition

Full visual and experience design for CGTN's 'Hello! Mars' science & art offline exhibition, timed to China's Tianwen-1 Mars mission. Covered exhibition concept, interactive game design, app UI, and commercial integration — bridging space exploration content with public engagement and brand storytelling.

CGTN Visual & Offline Media & News
CGTN KPI Timesheet Management System

CGTN KPI Timesheet Management System

End-to-end UX redesign of CGTN's internal B-side KPI timesheet management tool. Streamlined task logging, KPI tracking, and team workload visibility for editorial and production teams.

CGTN B-side Product Media & News
DATABOX — CGTN Operations Dashboard

DATABOX — CGTN Operations Dashboard

0-to-1 UX/UI design of DATABOX, CGTN's internal data visualization platform. Gave management a macro view of website and app operations, helped editors benchmark team productivity, and enabled individual journalists to track their news performance.

CGTN B-side Product Media & News
Ziroom House-Showing Flow Redesign

Ziroom House-Showing Flow Redesign

End-to-end UX research and redesign of Ziroom's house-showing appointment flow. Mapped the full journey from apartment search through online booking to offline viewing, identifying 8 critical pain points across manager coordination, multi-apartment scheduling, and in-app house comparison.

Freelance C-side Product Real Estate
Park Lane 2024 Visual Merchandising Design

Park Lane 2024 Visual Merchandising Design

Full-cycle visual merchandising design proposal for Park Lane mall (Vanke Emerald Park community retail, Beijing). Covered 4 key zones — lawn inflatable, sunken plaza lighting, staircase, and atrium — under a children-first 'World of Flowers' theme, from on-site research through production specs and cost estimates.

Freelance Visual & Offline Commercial Retail