前端AI试水报告，有哪些可以优化？

前端使用AI试水报告 背景 听朋友说目前工作有相当部分前端代码是使用AI完成的，主要工具有：Trae、Qoder。 常用AI名词解释 专用词语 名词 通俗解释 LLM（大语言模型） 一个巨大的“文字接龙”机器——根据上文猜下一个字应该是什么。因为参数够多、数据够大，突然变聪明了，所以叫“大”模型。 Prompt（提示词） 给LLM的指令/问题 Context（上下文） 背景信息，与Prompt区分。你给AI的背景资料。比如“根据这份文档回答”，文档内容就是上下文。 Memory（记忆） 将之前对话信息作为上下文，实现追问能力 Agent（智能体） 一个“跑腿的”程序。大模型自己不能上网、不能读本地文件，Agent替它干这些活。你感觉在和AI聊天，其实中间有个Agent在帮你查资料、运行代码。 RAG（检索增强生成） 让AI去你本地找资料。比如问“上个月的销售数据”，它会先去数据库或文档里搜，再回答。 Web Search（联网搜索） 让AI去网上搜信息。 Function Calling（函数调用） 一种约定，让AI知道它可以调用哪些外部功能（如查天气、发邮件）。这样AI就能在需要时自动调用工具。 MCP（模型上下文协议） 为了让Agent能方便地调用各种工具，大家统一了一个接口标准。就像所有电器都用统一的三孔插座，MCP就是那个“插座协议”。 Skill（技能） 把一组指令、规则、示例打包成一个文件夹，AI加载后就会按这个套路干活。相当于给AI配了一本“工作手册”。 一句话串起来： LLM负责思考，Agent负责行动，MCP让行动有标准接口，Skill是给Agent的操作手册。 从LLM到Agent，再到MCP 为了更深入地理解AI开发，我们需要厘清几个关键名词。这些词经常被混用，但理解它们的区别对高效使用AI至关重要。 LLM (大语言模型) 本质：一个巨大的“文字接龙”机器。它的核心能力是根据上文，预测下一个最可能出现的字/词。 为什么叫“大”：当模型参数量、训练数据量突破某个临界点后，它开始展现出令人惊喜的“智能”涌现，为了与之前的小规模“智障”模型区分，人们称其为“大”模型。 Prompt (提示词) & Context (上下文) 为了让LLM做有用的事，我们把它变成“一问一答”的形式。每次问的问题就是Prompt。 如果问题需要背景信息，比如“根据这份财报，分析公司业绩”，财报内容就是Context（上下文）。 Memory (记忆) 我们想让AI能“连续对话”。所以，每次对话会把之前的信息都作为新对话的上下文。这个“对话历史”就是Memory。通过它，我们才实现了多轮追问。 Agent (智能体) & RAG (检索增强生成) LLM不能上网，也不能访问你的本地文件。所以，我们写了一个程序，替它去“上网搜索”或“读取文件”，然后把结果交给LLM处理。这个能替LLM执行动作的程序就叫Agent。 让AI搜索“本地信息”的过程，叫RAG；搜索“联网信息”就叫Web Search。 MCP (模型上下文协议) 为了让Agent能灵活地调用各种外部工具（搜索、文件读写、执行脚本等），我们需要一个统一的“接头暗号”。这个标准化的协议就是 MCP。它让工具和Agent之间的通信变得像插拔USB一样方便。 用一个流程总结： LLM <--Function Call--> Agent <--MCP--> 工具集（搜索、文件读取、脚本执行） 演进过程 起点：模型 → 出现智能 → 大语言模型(LLM) LLM本质：只能做文字接龙（不断输出下一个字） ↓ 人为分成两个角色（一问一答）→ 有点用了，但不能追问 ↓ 给每次对话起名字 → Prompt(提示词) ↓ 区分背景信息 → Context(上下文) ↓ 把之前信息作为上下文 → Memory(记忆) ↓ 现在：可以不断追问的"牛马" Agent架构 Agent交互方式： CLI：Claude Code / CodeX IDE：Trae / Cursor 桌面助手：OpenClaw 核心组件： 组件 说明 Web Search 联网搜索 RAG 检索增强生成（本地搜索） Function Calling LLM与Agent的固定沟通方式 MCP 模型上下文协议（工具与Agent的约定） Skill 将常用操作固化为脚本，放在SKILL.md中 SubAgent 子Agent，处理独立任务，上下文不保留在主Agent中 示例流程： 需求：提取a.pdf内容，翻译成中文，保存为markdown文件 1. Agent接收需求 2. 调用PDF读取工具提取内容 3. 调用翻译服务 4. 调用文件保存工具 5. 返回结果给用户 Skills（技能） Skills 技能封装了指令、脚本及相关资源，用于为智能体提供可复用、面向特定场景的专业能力。可以理解为一个AI提示词包。 技能资源 资源 链接 说明 Anthropic官方Skills https://github.com/anthropics/skills 定义了官方skill的写法 Frontend Design Skill https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md 前端设计技能示例 技能合集 https://github.com/ComposioHQ/awesome-claude-skills 成百上千的skill 技能市场 https://skillsmp.com/ 定期从GitHub找skill Trae官方推荐 https://docs.trae.cn/ide/top-10-recommended-skills-for-development-scenarios 开发场景十大热门Skill Skills效果对比 使用Trae Builder模式，同样的提示词，使用技能的成品要漂亮很多： 普通提示词：“给我做一个todo2.html，样式你自己设计。” → 生成的东西能用，但很丑。 加技能：“给我做一个todo2.html，样式你自己设计。使用 frontend-design 技能。” → 生成的页面好看很多，配色、动画、交互都上了一个档次。 安装方式 Trae/Qoder：直接在项目根目录新建 .trae/skills 或 .qoder/skills 文件夹，将技能文件夹放入其中 Trae：通过设置手动添加 💡 Tip：GitHub打不开可以用 Watt Toolkit 加速器，Windows应用商店直接下载，安装后启动，加速服务中勾选GitHub即可。 自定义技能示例：周大师 Trae可以通过设置手动创建写周报的技能： // 技能名称 周大师 // 描述 将零散工作记录/聊天摘录/任务清单自动整理成结构清晰、可直接发送的中文周报（含本周成果、进展、数据指标、问题风险、下周计划、需要支持）。适用于每周例行汇报、项目同步、绩效留痕。 // 指令 # 周报生成技能 ## 描述 将零散工作记录/聊天摘录/任务清单自动整理成结构清晰、可直接发送的中文周报（含本周成果、进展、数据指标、问题风险、下周计划、需要支持）。适用于每周例行汇报、项目同步、绩效留痕。 ## 指令 ### 周报生成器（Weekly Report Generator） #### 你的任务 当用户调用 `\weekly-report` 或用户明显在"写日报/写周报/整理本周工作"时，你要把用户提供的零散信息整理为**可直接发送**的周报或日报。 你必须做到： - **以结果为中心**：优先表达产出/影响/数据，而不是过程堆叠。 - **不编造**：用户没提供的数据/结论，一律标注"待补充/暂无数据"，不要猜。 - **少提问**：默认先产出一版可用周报；最多只在末尾追加「待补充信息（不超过3条）」。 - **可复用**：输出结构固定、信息密度高、便于复制粘贴。 ### 输入处理规则（你需要自动理解） 用户输入可能包含： - 纯文本流水账（想到啥写啥） - 任务清单（Todo / Done） - 多项目混在一起 - 带标签的片段（如【完成】、【问题】、【下周】） - 截图/会议纪要摘录/聊天复制（语气口语化、重复、杂乱） ### 你要做： 1. **去重与合并**：同一件事多次提及只保留一次，合并细节。 2. **归类**：自动分到「本周完成｜进行中/问题风险/下周计划/需要支持」。 3. **补全表达**：把口语改成职场可发送表述；每条尽量包含"动作+对象+结果/影响+数据（如有）"。 4. **多项目分组**：若明显多个项目，按项目分组；否则按事项分组。 5. **日期范围**：若用户未给日期范围，标题用"本周（日期待补充）"，并在末尾列入待补充项。 ### 参数解析（来自 $ARGUMENTS 或用户文本） 支持以下可选参数（用户不可变也要能工作）： - 日期范围：如 `2026.01.12-2026.01.18` 或 `1/12-1/18` - 受众： - leader：领导版（更短、更聚焦结果与风险） - team：团队同步版（适中、便于协作） - self：自用复盘版（更细、含反思/沉淀） - 风格： - compact：极简（每节 2-4 条） - standard：默认（每节 3-7 条） - detailed：更细（允许按项目拆分、查里程碑） - 格式： - md：Markdown（默认） - email：邮件正文（含称呼/结尾） 若参数冲突或缺失：以"可用优先"，不要停下来追问。 ## 输出规范（默认：Markdown） ### 周报标题 - **周报 | {日期范围或"本周（日期待补充）"} | {角色/项目（如用户提供）}** ### 正文结构（按顺序输出） 1. **一句话总结**（1句，20~40字，概括本周最重要的成果/进展） 2. **本周完成**（3~7条，优先写"可验证成果"） 3. **进行中**（1~4条，写清当前状态 + 下一步） 4. **数据与指标**（如有）（可选：把用户给的数据集中到这里；没有就省略） 5. **问题与风险**（1~3条，每条必须包含：现状/影响/应对动作/需要支持（如有）） 6. **下周计划**（3~7条，每条尽量写"交付物 + 截止时间/优先级"） 7. **需要支持**（0~3条，能明确"找谁/要什么/什么时候"） 8. **待补充信息**（最多3条，只有在确实缺关键字段时才出现） AI工具实践案例 Kimi OK Computer 网址：https://www.kimi.com/ （微信注册） 功能：对话框转为操作系统，还有智能体集群。 案例：生成数据分析网站 提示词： 请帮我构建一个数据分析网站 主题为「1995-2025年黄金价格走势分析」。 需求如下： 从公开金融数据源（如Yahoo Finance）获取1995-2025年黄金价格数据。 使用Python分析黄金的价格变化、年化收益率、最大回撤、夏普比率等指标。 使用可视化图表（折线图、热力图、对比图）展示数据。 分析黄金与通胀率、S&P500之间的相关性。 页面整体设计采用蓝白色调，风格简洁、现代、对齐合理，不要使用过多彩色块。 最终输出一个前端网页（HTML+CSS+JS）展示结果并生成一个CSV原始数据文件供下载。 生成结果：https://su5at5qx6lfpm.ok.kimi.link/ 千问 Qwen3.5 网址：https://chat.qwen.ai/ （注册后登录） 测试案例：逻辑陷阱问题 问：我想去洗车，洗车店距离我家50米，你说我应该开车过去还是走过去？ Qwen3.5回答正确（识别逻辑陷阱），而腾讯元宝的DeepSeek回答走过去。 trae 使用经验与个人思考 模型很重要，有时ai总是不理解你的意思，换一个好模型可能一下就解决了；取消 auto后，你就能可以选内置的其他模型 用好询问模式，确定后在执行。qoder 的ask模式比执行花费积分少； 如果不知道某个页面需要什么样子，可以后端接口给ai，ai会根据接口帮你生成合适的页面，ai有行业知识，比如你给电商(或erp)的接口，对方就知道你要什么样的效果； trae 近期排队厉害，同样一个模型（如kimi），builder 模式排队，换成solo模式可能不排队； Solo模式与 /plan：当需求较大时，先用 /plan 让AI做一个详细计划。确认计划无误后再让AI执行。这能避免AI“偷懒”或只完成部分功能。对于大型项目，最好指导它“一个页面一个页面”地做。 Skill与规则：可以创建个人或项目级别的规则。例如：“项目中已经自动引入ref，无需你手动从Vue中引入ref”。这能确保AI生成的代码风格一致，且符合项目规范。 AI的角色定位： 对于后端或全栈开发者：AI是绝佳的“前端助手”，能快速生成可用的管理后台、原型页面。 对于专业前端工程师：AI生成的代码可能存在风格不一致、未使用项目组件库、长期维护性差等问题。前端架构、组件库选型、代码的可维护性，依然需要你自己把控。 AI目前扮演的是“高效实习生”的角色，而非替代者。 模型选择与成本：Qoder提供了多种模型，如Kimi、Auto等。不同模型的效果和“积分消耗”不同。比如朋友用Kimi模型时积分消耗较低，而Auto模式消耗较快。根据任务选择合适的模型，可以优化成本。