一个高质量 Prompt 通常包括以下几个部分：1.任务描述：明确告诉模型要做什么2.背景信息：提供必要上下文3.约束条件：长度、风格、格式等4.示例（Few-shot）：提供参考答案5.输出格式：明确返回结构生图模型：Gemini Nano banana生图Prompt:1.给参考示例让LLM给出对应通用prompt公式：[视觉风格] + [逻辑架构] + [核心模块内容] + [交互连接] + [排版细节]，示例：[风格]：扁平化 2.5D 插画，科技霓虹感，深蓝/墨黑色背景。参考 OpenClaw 视觉语言。[架构]：垂直信息流布局，逻辑分明。[内容拆解]：- 顶部：大标题 [请输入标题]，加粗发光效果。- 模块 1：[名称 1] + [对应图标/插画] + [简短描述]。- 模块 2：[名称 2] + [对应图标/插画] + [简短描述]。- (依此类推...)[连接]：使用发光的霓虹箭头或流光线条连接各个模块，展示数据/逻辑流向。[视觉规范]：磨砂玻璃质感边框，马卡龙霓虹配色（蓝、紫、黄、绿），高对比度，适配移动端（9:16 或 3:4）。

AI Agent技能Skills设计（前端视角·牛客精简版）一、核心概念：Agent & Skill•Agent：带大脑（LLM）、能调工具、可做决策的程序，类比前端应用层Controller•Skill：Agent可调用的结构化能力单元，类比前端函数/API/组件/Hook的结合体，是AI原生的能力载体二、Skill核心结构（4要素）要素含义前端类比name技能唯一标识函数名description能力+使用场景描述JSDoc注释inputSchema输入参数定义TypeScript类型handler实际执行逻辑函数体/API请求逻辑三、Skill核心调用机制（AI自主决策）用户输入→Agent交给LLM→LLM判断是否需要Skill→选择并构造参数→调用Skill→返回结果→LLM整理输出✅ 核心区别：前端是人工写判断调用，AI是LLM自动决策调用从前端视角来看，Skill是Agent可调用的结构化能力单元，类比前端的函数、API与Hook结合体，核心包含名称、描述、输入定义和执行逻辑四大要素，其关键是由LLM自主决策调用，而非人工手动触发，设计上要遵循描述优先、输入清晰、单一职责和可组合性原则，还需按定义能力边界、撰写AI可理解描述、设计输入Schema、实现执行逻辑的步骤工程化落地，同时能清晰区分Skill与MCP的核心差异——Skill是应用层的能力定义，MCP是基础设施层的能力传输协议，二者协作可为Agent提供可执行的能力，而前端开发者可基于Skill打造AI Copilot、智能业务工具，或是构建AI应用的后端能力层，实现从手动调用API到AI自主决策调用的开发模式升级，也能借助Skill更好地衔接前端UI交互与AI的自动化执行能力。

LLM Agent 系统的核心瓶颈是上下文管理，其核心痛点包括 Token 限制导致的上下文溢出、多轮对话漂移、工具调用引发的上下文爆炸与污染、记忆检索不精准、记忆冲突及长任务无法持续等问题。解决方案以 “记忆分层、上下文压缩、智能检索” 为核心，通过滑动窗口保留近期对话、上下文总结压缩冗余信息、RAG 实现精准记忆召回、分层记忆架构区分短期 / 长期 / 任务记忆，搭配上下文排序与工具输出压缩等技术，构建以 Context Manager 为核心的生产级架构，同时通过 Prompt Budget 规划、定期总结等最佳实践，在有限 Token 内为 LLM 提供最有价值的上下文，支撑 Agent 稳定高效运行。一、核心痛点1.Token上限限制，长对话+工具数据易致上下文溢出2.多轮对话漂移，Agent偏离初始任务目标3.上下文污染/爆炸，工具返回大量冗余原始数据4.记忆检索不精准，易召回无关/遗漏关键信息5.记忆无一致性机制，用户信息易出现冲突6.长周期任务无法持续推进二、核心解决原则记忆分层、上下文压缩、智能检索，用最少Token为LLM提供高价值上下文。三、核心解决方案1.滑动窗口：保留最近N轮对话，基础兜底方案2.上下文压缩：LLM定期总结对话历史，精简Token3.RAG记忆检索：按需向量检索，仅传入相关长期记忆4.分层记忆架构：短期（近期对话）+长期（用户信息）+情景（任务总结）5.上下文排序：按相关性×新鲜度×重要性打分，仅取Top K高价值内容6.工具输出压缩：原始数据经压缩后，仅传入核心要点四、生产级核心架构以Context Manager为核心统筹，形成闭环：输入层（用户查询/工具结果/历史/记忆）→核心管理层（五大解决方案模块）→记忆层（分层架构）→输出层（Prompt Builder按Token预算拼Prompt入LLM）→反馈层（LLM输出反向更新记忆）五、生产落地最佳实践1.提前规划各组件Token预算，避免溢出2.工具输出、记忆使用必须做压缩/检索，杜绝原始/全量数据3.每10-20轮对话定期总结，更新情景记忆4.所有上下文必经排序筛选，保留高价值内容六、未来发展方向Context OS、知识图谱式Graph Memory、自适应上下文、支撑长周期任务的Long-Term Agents七、核心结论LLM Agent的核心瓶颈是上下文管理，而非模型本身；管理本质是平衡信息完整性与Token经济性，生产落地关键是以Context Manager为核心，组合各类技术形成标准化处理流程。

还记得2026年03月21日暑期第一家面的是团子第一次面试有点紧张反转链表都写了很久（所以多练、多背吖！！！）不出意外挂了有点可惜但也还好，面的是北京的岗位大概率不能去

1. 豆包中文对话：复用日常交互，处理复杂中文逻辑与情感沟通，主打自然流畅对话。2. Trae智能编码：聚焦前端场景，辅助代码生成、调试，适配日常开发提效。3. Gemini 生图&改代码：负责视觉创作，快速生成/编辑图片，兼顾辅助代码优化。4. Coze 搭智能体Agent：构建专属智能体，定制任务流程（如客服、助手），实现标准化智能交互。5. OpenClaw数字员工：落地实战场景，打造自动化数字员工，覆盖办公、业务等全流程自动化。

1. LLM 应用开发：学习大模型调用、Prompt 工程，快速落地对话、内容生成等场景，上手快、就业广。2. AI Agent 开发：掌握智能体规划、工具调用与多 Agent 协作，是下一代 AI 交互的核心方向。3. AI 产品经理/运营：结合业务理解 AI 能力，负责需求设计与落地，适合非技术背景入门。4. RAG 技术实践：学习检索增强生成，解决大模型幻觉与知识更新问题，企业落地需求旺盛。前端转 AI Agent 应用开发：路线与优势一、为什么前端转 Agent 有天然优势？• 技术栈复用：熟悉的 JavaScript/TypeScript 可直接用于 Agent 框架（如 LangChain.js、LlamaIndex TS），学习曲线平缓。• 交互思维契合：前端擅长用户体验与流程编排，和 Agent 的任务拆解、工具调用逻辑高度匹配。• 全栈能力延伸：能快速打通「前端界面 + Agent 逻辑 + 后端服务」，打造完整 AI 应用。

一、RAG 是什么？（面试必问）RAG = 检索增强生成（Retrieval-Augmented Generation）一句话：先从外部知识库检索相关信息，再把信息喂给大模型生成答案。作用：• 解决大模型不知道新知识、幻觉的问题• 不用重新训练模型，成本低、安全可控RAG 核心流程（背这 4 步）1. 文档切分（Chunk）2. 向量化（Embedding）3. 存入向量库4. 用户提问 → 检索相关片段 → 给 LLM 生成答案RAG 常见类型（面试高频）1. 朴素 RAG最简单：切分→向量→检索→生成。适合简单问答。2. 高级 RAG（优化版）◦ 召回前：查询优化、重写◦ 召回中：多路召回、混合检索（关键词+向量）◦ 召回后：重排序（Rerank）3. RAG + 知识库管理带文档更新、去重、过滤、元数据过滤。4. 模块化 RAG可插拔：不同场景用不同检索策略。二、Agent 底层原理（面试官最爱深挖）一句话：Agent = LLM 做大脑 + 工具调用 + 记忆 + 反思 + 规划核心 5 组件（背这个）1. 大脑（LLM）负责思考、决策、理解任务。2. 记忆（Memory）◦ 短期记忆：上下文◦ 长期记忆：向量库/数据库3. 工具（Tools）搜索、代码解释器、API、函数调用（FC）。4. 规划（Planning）拆解任务、多步推理、自主决定怎么做。5. 反思（Reflection）检查结果对不对，错了就修正。标准执行流程（面试直接说）1. 理解用户目标2. 思考：我要做什么？需要哪些工具？3. 调用工具获取信息4. 继续推理，直到完成目标5. 输出最终结果三、多 Agent 是什么？多 Agent = 多个智能体分工协作完成复杂任务。特点• 每个 Agent 有专属角色• 互相通信、分工、协作• 能处理复杂、多步骤、跨领域任务常见架构1. 集中式有一个“主管 Agent”分配任务。2. 分布式无中心，Agent 之间互相沟通。3. 分层式上层决策，下层执行。典型应用• 代码开发团队（产品、前端、后端、测试）• 内容创作团队• 企业自动化流程四、面试高频三连问（标准答案）1. RAG 和 Fine-tuning 区别？◦ RAG：外挂知识库，不改模型，安全、实时、成本低。◦ 微调：改模型权重，适合固定风格/专业领域，成本高。2. Agent 和普通 LLM 区别？◦ LLM：你问啥它答啥，被动。◦ Agent：有目标、会思考、会用工具、自主完成任务。3. Agent 和工作流区别？◦ 工作流：固定步骤，按流程跑。◦ Agent：动态思考，自主决策下一步。如果你要，我可以直接帮你整理成：「AI 前端面试 10 分钟速背版」你拿去背，面试基本稳过。

Agent 与工作流的底层逻辑Agent 是具备自主感知、决策、规划、执行能力的智能体，能够在给定目标下，自主调用工具、拆解任务、反思优化，最终完成复杂任务。Agent～LLM+记忆存储+规划+工具调用• Agent 与工作流的区别*   Agent：是自主智能体。具备感知、决策、执行的闭环能力，能自主拆解目标并动态规划步骤。*   工作流 (Workflow)：是预设流程。步骤由开发者预先定义（如节点跳转、条件分支），执行路径相对固定。*   核心差异：Agent 强调自主性与动态性，工作流强调规范性与确定性。

1. 前端爱问的 LLM 上下文管理• FC 与 MCP 的核心区别*   FC (Function Call)：本质是模型调用工具。模型根据用户需求，主动决定何时调用、调用哪个工具，并接收工具返回的结果进行后续回答。*   MCP (Model Context Protocol)：本质是工具连接模型。它是一套更底层的协议规范，用于统一不同工具的接入标准，让模型能够标准化地访问和操作外部工具生态。*   一句话总结：FC 是模型的能力，MCP 是实现该能力的协议标准。• 上下文过长解决方案1. 截断策略 (Truncation)：保留最新关键信息，舍弃早期次要信息。2. 摘要压缩 (Summarization)：用摘要算法对历史对话/长文档进行浓缩，保留核心语义。3. 向量检索 (RAG)：将内容向量化，仅检索与当前问题最相关的 Top-K 片段注入上下文。4. 滑动窗口 (Sliding Window)：模型内部维护固定大小的窗口，随着新 token 加入，最旧的 token 被丢弃。

前端AI冲击下HireCount很多公司少的可怜面试实习公司时，在选择面试时间，选下午但面试还没面，可能前面找到合适的面试人了就取消这批次，调期调到人怀疑自己所以面试尽量选早上，大家心情都挺好🙂

1. 帮我梳理职业方向 & 岗位匹配把我的专业、经历、技能丢给AI，快速分析我适合什么岗位、优势在哪、短板在哪，不瞎投。2. 写/润色简历，去掉AI感，更像真人从空白到成型简历，AI帮我提炼项目亮点、优化措辞、改成HR爱看的版本，专业又自然。3. 模拟面试，当场练当场改让AI当面试官，问前端/技术/通用面真题，我答完立刻给反馈：哪里好、哪里漏、怎么说得更专业。4. 做笔试题 & 算法题思路遇到不会的题，AI帮我讲思路、写框架、解释原理，不是直接抄答案，是真的学会。5. 写面试自我介绍、离职原因、亮点话术帮我打磨一套不尴尬、不踩雷、很真诚的口播稿，面试不慌、不卡壳。6. 做行业/岗位研究，看清前景帮我查岗位要求、技术栈、发展路线，判断值不值得去、要不要补技能。7. 整理学习计划 & 技术笔记按求职节奏做学习清单，从基础到面试重点，跟着学不迷路。8. 情绪稳定 + 压力疏导求职焦虑、被拒emo、选择困难时，AI帮我理性分析、稳住心态，继续冲。一句话总结（适合当标题/结尾）找工作不是拼努力，是拼效率。AI不替我找工作，但帮我把时间花在最值钱的地方：准备、表达、上场。

虽然0面试，但今天沉下心啃完了半本技术书，把AI+GIS的知识点梳理成了清晰笔记，还坚持跑完3公里、认真做了三餐🍚。没有焦虑内耗，只在踏实积累，这样稳步向前的自己，真的超棒！✨

https://bytedance.larkoffice.com/docx/JkaBd5xaAo5XQXx9DRdcT9UVnwd?from=from_copylink结合字节官方技术求职攻略核心方向，给你整理字节前端实习面试必须总结的内容，清晰、好背、直接用，要准备什么字节前端实习面试·必总结清单1. 简历与项目总结• 项目：做了什么、难点、解决方案、收获• 技术栈：JS/TS、Vue/React、工程化、AI相关• 突出：可量化成果、独立负责模块2. 前端核心基础总结• JS：闭包、this、原型链、异步、Promise• 浏览器：渲染、缓存、跨域、性能• CSS：布局、适配、BFC、优先级3. 框架总结（Vue/React）• 响应式/ Hooks原理• 生命周期、状态管理• 虚拟DOM、diff、常见优化4. 工程化与实战总结• Webpack/Vite构建、打包优化• 代码规范、Git、部署流程• 性能优化：首屏、卡顿、打包体积5. 手写算法&代码总结• 防抖节流、深拷贝、Promise• 数组/字符串高频题• 简单算法：遍历、递归、排序6. 业务与AI结合总结• 前端+AI应用场景• 大模型调用、流式输出、智能组件• 如何把AI落地到页面7. 面试表达总结• 自我介绍：1分钟版本• 项目讲法：STAR法则• 反问环节：准备3个问题

一、JS 基础（必问）1. 变量提升、作用域、闭包原理与场景2. this 指向规则（普通函数/箭头函数/构造函数/绑定）3. 原型与原型链、继承实现4. 异步：Promise、async/await、宏任务微任务5. 防抖节流原理、手写与应用二、浏览器 & 网络（高频）1. 从输入 URL 到页面展示全过程2. 浏览器渲染流程、重排重绘优化3. HTTP/HTTPS、HTTP2、HTTPS 握手流程4. 缓存策略：强缓存 / 协商缓存5. 跨域原因与解决方案三、Vue / React（二选一必深问）Vue1. 响应式原理（数据劫持 + 发布订阅）2. 虚拟 DOM、diff 算法3. computed / watch 区别4. 生命周期执行顺序5. Vue3 组合式 API 优势React1. Hooks 规则、useState/useEffect 原理2. 类组件 vs 函数组件3. Fiber 架构、调和流程4. 状态提升、Context、Redux 流程四、工程化 & 性能优化（大厂最爱）1. Webpack 构建流程、loader/plugin 区别2. 常见优化：代码分割、tree shaking、懒加载3. 前端性能指标：LCP、FCP、FP 等4. 首屏优化方案5. 移动端适配、兼容性处理五、手写代码（高频现场题）1. 手写 Promise2. 手写防抖 / 节流3. 手写深拷贝4. 手写 call/apply/bind5. 数组去重、flat 扁平化六、场景题 & 逻辑题1. 如何定位线上卡顿/白屏问题2. 大量列表渲染优化（虚拟列表）3. 如何设计一个弹窗组件4. 前端监控与错误捕获

虽然今天没有面试，但我按时作息、坚持运动半小时，状态在线；认真学习AI知识，复盘并总结前端内容还主动输出分享。没有焦虑内耗，只专注沉淀自己，每一步都走得踏实又有力量。慢慢积累，静静发光，开心又充实的一天，为自己点赞！坚持，前行！