AI Demo
这里不是功能堆砌式 Demo，而是一组围绕 AI 产品形态设计的前端作品样本。目标是让面试官更快判断我是否具备把 Agent、Knowledge Chat、Workflow Builder 这类复杂 AI 能力，转译成产品级交互、稳定状态系统与可持续迭代前端架构的能力。
展示目标
产品化交付能力
强调 AI 前端的核心不是单点页面，而是端到端交互链路、状态编排与可演进设计。
推荐体验
Agent → Knowledge → Workflow
先看执行体验，再看 RAG 产品，再看可视化流程搭建，理解路径更清晰。
核心标签
AI Agent 全栈工程师
以前端为核心，具备 AI 产品思维与全栈延伸能力，能把模型能力转成可交付的 AI 产品。
为什么这个作品集值得看
相比常规在线简历，这里更强调可验证的产品表达和工程能力，让面试官不只看到“会什么”，还能看到“怎么做、做到什么程度”。
不是静态展示，而是架构化表达
每个 Demo 都对应一种明确的 AI 产品形态，能直观看到我在信息架构、状态分层、组件抽象和复杂交互组织上的判断力。
不是套壳 AI，而是完整产品体验
我关注的不只是调用模型，而是 Step Flow、引用回答、检索解释、产物承载、错误状态和反馈闭环这些真实产品体验细节。
不是一次性 Demo，而是可继续扩展
这些页面都按可迭代产品方式组织，便于继续扩展模型接入、真实后端、配置面板、权限系统和数据分析链路。
推荐体验路径
建议按下面顺序浏览，能更快理解这个在线简历里 AI Demo 的主线。
先看 Agent Simulator
优先看 Timeline、产物面板、流式步骤和多状态执行过程，能最快体现 AI Agent 产品交互能力。
再看 Knowledge Chat
重点看引用来源、RAG Trace、反馈日志和配置切换，体现我对知识库产品与可解释性的理解。
最后看 Workflow Builder
从可视化编排角度补齐 Workflow 体验，展示复杂节点编辑器、流程执行与低代码交互能力。
不同角色怎么快速看
我把这个作品集按不同评审视角拆成了几条阅读路径，方便 HR、前端面试官和 AI 方向面试官在更短时间内抓到最有价值的信号。
给 HR / 招聘负责人
快速判断我是否具备 AI Agent 全栈的定位和作品完整度。
重点看什么
重点看页面是否成体系、表达是否产品化，以及 Demo 是否能直接体现业务价值与岗位匹配度。
建议浏览路径
先看 Agent，再扫一遍 Knowledge 和 Workflow，最后回到完整简历页看经历与项目沉淀。
给前端面试官
快速判断复杂交互、状态组织、组件设计和可视化编辑器能力。
重点看什么
重点看 Timeline、Artifact Panel、RAG 配置区、Workflow 节点编排以及响应式和细节一致性。
建议浏览路径
先看 Workflow 的节点交互，再看 Agent 的状态流与产物承载，最后看 Knowledge 的右侧信息架构。
给 AI 产品 / AI 工程面试官
快速判断我是否理解 Agent、RAG、Workflow 这三类 AI 产品形态。
重点看什么
重点看引用回答、Retrieval Trace、Tool Use、Step Flow、Artifact 生成和 AI 工作流编排表达。
建议浏览路径
先看 Agent 执行流，再看 Knowledge 的 RAG explainability，最后看 Workflow 的编排与运行链路。
代表性 Demo
每个模块都对应一种 AI 产品能力，不只是技术演示，而是面向产品落地的前端实现。
AI Agent Simulator
适合先看执行流与 AI 产品体验设计
模拟 AI Agent 执行任务（类似 AutoGPT / LangChain），Step Flow 任务拆解与执行。
业务价值
强调 Agent 产品里的步骤流、工具调用、产物生成、最终回答和多状态反馈体验。
能证明什么
说明我具备把复杂 AI 执行过程拆成清晰前端交互的能力，能做出更像真实产品而不是 demo 拼凑的界面。
Streaming UI · 任务执行 Timeline · 工具调用可视化 · ReAct Agent UI
AI Knowledge Chat
适合看 RAG 产品化与可解释性体验
企业知识库 AI 对话，支持引用来源与语义检索（类似 ChatGPT + 知识库引用）。
业务价值
覆盖知识库问答里的来源引用、RAG 配置、检索 trace、反馈闭环与文档浏览能力。
能证明什么
说明我理解知识库产品不只是聊天框，还包括可解释性、运营反馈、配置可视化和检索链路呈现。
Streaming Chat · 引用高亮 · 知识来源展示 · 语义搜索结果
AI Workflow Builder
适合看可视化编辑器与流程编排能力
类似 Langflow / Dify 的可视化工作流编辑器，拖拽节点构建 AI 应用流程。
业务价值
体现 AI 工作流平台中的节点编排、配置交互、执行结果展示与复杂状态同步能力。
能证明什么
说明我不仅会做页面，还能落地复杂编辑器、流程图交互和 AI 编排型产品前端架构。
节点类型：Prompt Node、LLM Node、Knowledge Node、Tool Node、Output Node
节点拖拽 · DAG 流程 · 状态管理 · 实时执行状态 · Vue Flow / React Flow