一、成果路演点评与基础问题优化
演示了AI搜索类开发成果，核心问题集中在前端样式丑陋、搜索仅单轮执行、API使用不规范 ，以下是问题对应的零基础可落地的优化方案，也是入门AI开发的基础要求。
（一）成果1的问题&优化
- 核心问题
- 搜索API返回结果以JSON格式展示，无可视化样式，页面丑陋；
- 未自定义提示词，搜索仅执行单轮，无法获取足够信息。
- 实操优化步骤
- 样式优化：将JSON格式的搜索结果解析为链接卡片样式（超链接形式），而非直接展示原始代码；
- 轮次优化：修改代码中的提示词，添加「至少执行3轮搜索」的指令，让AI自动判断信息是否足够。
- 避坑指南
- 不要直接复用他人提示词，需根据需求添加自定义指令（如轮次、结果格式）；
- 搜索接口若为写死状态，无需重复调用，一轮搜集即可满足基础需求。
（二）成果2的问题&优化
- 核心问题
- 用Trae生成的前端页面样式丑陋，搜索仅单轮执行；
- 担心API Key泄露，不敢用真实数据调试；
- lab生成的前端代码下载繁琐（仅支持单文件下载）。
- 实操优化步骤
- 样式优化：用lab工具重新生成前端页面，再手动调试后端逻辑（前端逻辑比后端更易修改）；
- 数据调试：使用模拟假数据替代真实数据，避免暴露公司/个人的API Key；
- 代码下载：将lab生成的代码上传至GitHub，再从GitHub整体拉取代码（解决单文件下载问题）；
- 轮次优化：同成果1，修改提示词增加搜索轮次，解决单轮结束问题。
- 避坑指南
- 用Trae仅做功能验证，不做前端样式开发（Trae不擅长页面美化）；
- lab为产品经理工具，无法生成最终可交付原型，仅用于获取前端开发启发；
- 海外工具绑信用卡后需及时取消自动扣款，避免无故扣费。
二、核心开发工具&AI模型零基础使用要点
（一）核心AI模型
|------------|------------------------|--------------------------------|
| 模型名称 | 基础使用场景 | 入门注意事项 |
| Gemini | 搜索结果生成、前端代码辅助编写 | 效果优于部分国内模型，可直接用白嫖版做功能验证 |
| Qwen（通义千问） | 海外版可替代Gemini，适合搜索/文本生成 | 与Gemini使用逻辑一致，零基础无需做技术区分，选其一即可 |
（二）核心开发工具
- Trae（国内版/国际版）
- 基础场景：快速实现AI搜索的功能原型（验证搜索、结果返回逻辑）；
- 入门使用：优先用国际版白嫖版，无需开通Pro，满足基础开发需求；
- 避坑：国内版有限量限制，仅做简单测试；Trae不擅长前端美化，仅做功能验证，不做最终页面开发。
- lab
- 基础场景：生成前端页面初稿，解决"不会写前端代码、页面丑"的问题；
- 入门使用：输入提示词（如"生成AI搜索结果页面，带历史记录、流式输出"），lab会引导逐步完善需求（如是否加交互、是否加历史记录）；
- 避坑：lab生成的代码仅为"启发式"，无法直接交付，需手动调试样式和逻辑。
- Git/GitHub
- 基础场景：解决lab单文件下载问题，整体管理前端代码；
- 零基础入门操作：将lab生成的代码上传至个人GitHub仓库，再从仓库整体拉取代码到本地，无需手动下载单文件；
- 避坑：无需深入学习Git命令，用GitHub网页版的「上传文件」功能即可满足基础需求。
- DI-flow/Deep Research
- 基础场景：前端交互样式参考，解决"页面丑、交互逻辑不清晰"的问题；
- 入门使用：直接参考两款工具的页面布局（如中间为结果展示区、右侧为进度区、带历史记录/回放功能），仿造布局修改自己的demo。
（三）API使用核心避坑（重点）
- 绝对不要将真实API Key直接写在调试代码中，避免泄露后被恶意使用；
- 调试阶段一律使用模拟假数据，完全复现页面交互和数据展示逻辑，待最终上线再替换真实API Key；
- 若使用公司统一的API Key，严禁在公共平台（如直播、共享文档）展示，全程用模拟数据演示。
三、前端交互样式优化
讲解了AI生成前端页面的优化技巧，仅需遵循固定规则，就能让AI生成的页面样式美观、交互流畅，是核心实操点。
核心原则
让AI生成纯HTML代码（无需JS脚本、无需复杂框架），仅保留核心展示和基础交互，优先保证「样式美观、渲染正常」。
（一）基础HTML渲染规则
- 仅保留body内容
- AI生成的HTML代码会包含<html>``<head>等头部标签，直接删除头部标签，只保留 <body> 和内部内容；
- 原因：头部标签可能与原有页面冲突，导致渲染失败，仅保留body内容可保证兼容性。
- 样式采用「内联式」
- 要求AI将CSS样式直接写在HTML标签内部 （如<div style="color: #333; font-size: 14px;">），而非单独写CSS文件；
- 零基础好处：浏览器渲染时会"从上到下"加载，先渲染样式再渲染文字，不会出现"样式错乱、文字裸奔"的情况；且无需学习CSS文件引入。
- 严格禁止3类内容
- 禁止添加代码注释：注释会导致AI渲染卡壳，页面无法正常显示；
- 禁止引入JS脚本：零基础无需做复杂交互，JS脚本会增加渲染风险，且纯HTML已满足基础展示；
- 禁止使用borderlive样式：AI生成的该样式会让页面出现丑陋的左侧边栏，直接要求AI"禁止使用borderlive"。
- 颜色规范
- 直接要求AI"禁止使用蓝色、紫色"，这两种颜色会让页面显得杂乱，零基础按此要求可快速保证页面配色整洁。
（二）动态加载效果制作
- 核心需求：让页面出现"等待中"的动态加载状态，提升用户体验；
- 实操步骤：直接向AI输入提示词「生成AI搜索页面的动态加载样式，仅用HTML内联样式，显示"等待中"文字，无JS，无注释」，AI会直接生成可复用的代码，复制粘贴即可使用；
- 避坑：动态加载的小bug无需纠结，优先保证核心功能，后续再优化。
（三）基础表单交互制作（收集用户信息）
讲解了如何用纯HTML制作简单表单，实现「用户输入信息-提交-提取参数」的基础交互，可直接按以下步骤实现，无需学习后端逻辑：
- AI提示词：「生成一个简单的信息收集表单，仅用HTML内联样式，包含用户名输入框、优先级选择框、提交按钮，无JS，无注释，样式整洁」；
- 核心代码 ：AI会生成<form>（表单）、<label>（标签）、<input>（输入框）、<button>（按钮）等基础标签，直接复制使用即可；
- 参数提取逻辑（通俗解释）
- 表单提交后，用户输入的内容会以JSON格式返回，只需在代码中添加「参数提取器」（直接让AI生成），即可提取用户名、优先级等信息；
- 若用户输入内容包含{}（JSON格式），则走"参数提取分支"；若未包含，则让用户重新填写，避免信息不全。
- 避坑 ：AI生成的表单代码可能有多余空行，直接删除空行即可解决渲染问题。
（四）优化小技巧
- 让AI生成的页面按"分栏布局" 设计（如中间结果区、右侧进度区），直接参考DI-flow的布局，提示词中加入"参考DI-flow布局"；
- 增加历史记录/回放功能：直接要求AI"在页面底部添加历史记录模块，展示过往搜索结果，仅用HTML内联样式"，AI会自动生成；
- 流式输出优化：若页面出现文字"一次性加载完"的问题，要求AI"实现流式输出效果，文字逐行显示，仅用HTML内联样式"。
四、Deep Research项目拆解与提示词编写技巧
Deep Research是基于Lang chain 开发的AI研究项目，核心用到了agent（智能体）/subagent（子智能体） 技术，重点拆解了该项目的时序图 和提示词编写 ，这是AI开发入门「提示词工程」的核心内容，提示词是AI开发的核心，比代码更重要。
（一）项目核心框架
- Deep Research的核心是「智能体分层工作」：主智能体负责统筹，子智能体负责具体任务（如澄清问题、生成研究简报、搜索信息）；
- 时序图：展示智能体的工作顺序，只需参考时序图理解"AI先做什么、后做什么"，即可优化自己的项目逻辑；
- 核心功能：先向用户澄清问题（确认信息是否足够），再执行搜索/研究，最后生成研究简报，避免因信息不全导致结果质量差。
（二）提示词编写核心技巧
提示词的核心是"让AI明确规则、减少不可控性"，同时要节省TOKEN（计费单位），以下技巧均为零基础可直接套用的固定规则。
- KV CACHE原则：变化内容放底部
- 术语解释：KV CACHE是AI的缓存机制，若提示词前面的内容发生变化，缓存会失效，导致每次请求都重新计费，增加成本；
- 实操规则 ：将固定不变的内容 （如AI的工作规则、要求）放在提示词最前面 ，将变化的内容 （如用户问题、日期、参数）放在提示词最后面；
- 例子：用户问题、日期是变化的，直接放在提示词末尾，避免因日期变化导致缓存失效。
- 澄清提示词编写要点
- 澄清提示词的核心：明确"什么时候需要澄清、什么时候不需要、怎么澄清"，直接向AI明确规则，避免AI自主判断出错；
- 必写内容：
① 若用户问题有缩写/未知术语，要求用户澄清；
② 澄清问题时最多提4个，保持简洁，避免信息冗余；
③ 用项目编号列出澄清问题，结构清晰；
④ 不询问不必要的信息，避免浪费时间；
- 输出格式：要求AI以JSON格式响应，明确"需要澄清"/"不需要澄清"的标识，方便代码提取参数。
- 提示词"去冗余"
- AI本身具备基础的逻辑判断能力，无需写废话（如"保持结构良好""使用结构化格式"），直接写"用JSON格式输出"即可；
- 避免写重复要求，如"保持简洁""少打字"只需写一句，重复要求会浪费TOKEN且可能让AI混乱。
（三）提示词避坑指南（重点）
- 不要将用户信息、动态参数放在提示词开头，违反KV CACHE原则，增加计费成本；
- 不要让AI"自主判断"，必须明确所有规则（如澄清的次数、输出的格式、搜索的轮次），否则AI会生成不可控的结果；
- 不要写过长的提示词，核心规则控制在5条以内，零基础先保证"规则明确"，再逐步优化细节。
五、通用项目拆解方法
解答了"如何拆解别人的优秀开发项目"的问题，可借助AI工具+开源提示词 快速拆解，核心是"AI先拆解，再人工二次分析学习"。
（一）核心工具（入门）
以下工具均为代码/项目拆解的常用工具，仅需掌握"上传项目+调用提示词"的基础操作：
- Claudecode/Cursor/Codex：代码拆解工具，支持直接上传项目代码，调用提示词后AI会自动分析；
- GitHub：下载优秀开源项目的代码，为拆解做准备；
- 飞书文档：整理拆解后的项目信息，方便后续学习。
（二）实操步骤
- 下载开源提示词：将「项目拆解提示词」开源在GitHub，直接下载并保存到上述工具中；
- 获取项目代码：从GitHub下载想要拆解的优秀AI开发项目（如Deep Research、DI-flow）的代码；
- AI自动拆解 ：将代码上传至Claudecode/Cursor，调用保存的拆解提示词，AI会自动生成项目框架、核心逻辑、提示词、工具集成等拆解报告；
- 人工二次分析 ：重点学习拆解报告中的前端交互布局、提示词编写、智能体工作逻辑，将其借鉴到自己的项目中。
（三）核心学习建议
- 听课+实操结合：不实操，等于白学，每学一个知识点，立即动手修改自己的demo，哪怕只是改一个提示词、调一个样式；
- 优先仿造，再创新：入门阶段不要追求"原创"，直接仿造DI-flow、Deep Research的优秀布局和逻辑，仿造的过程中自然会理解开发思路；
- 利用碎片化时间：上班/下班听回放，周末集中实操，核心是"持续积累"，而非一次性学完。
六、课后作业与实操要求
核心目标是优化基础demo、学习项目拆解。
作业：拆解一个优秀的AI开发项目
- 核心要求
- 从GitHub下载一个AI搜索/研究类项目（如Deep Research）；
- 用开源提示词，借助Claudecode/Cursor完成项目拆解；
- 整理拆解报告，重点分析前端交互布局、提示词编写、智能体逻辑；
- 借鉴拆解结果，尝试修改自己的demo，融入优秀的设计思路。
通用要求
- 无需追求"完美"，优先保证核心功能正常、样式整洁，小bug可后续优化；
- 严格保护API Key，全程用模拟假数据调试，不暴露真实密钥；
七、附录
（一）必备专业术语解释
|----------------|---------------------------------------------------|
| 术语 | 通俗解释 |
| JSON | AI接口返回的通用数据格式，表现为{}包裹的代码，入门阶段需将其转为可视化的链接/卡片 |
| API/API Key | 接口/接口密钥，相当于AI工具的"登录密码"，泄露后会被恶意使用，需严格保护 |
| TOKEN | AI工具的计费单位，提示词/代码越长，消耗的TOKEN越多，成本越高 |
| Lang chain | AI开发的常用框架，用于实现智能体（agent）的分层工作，入门阶段无需学习框架本身，只需参考逻辑 |
| agent/subagent | 智能体/子智能体，相当于AI的"工作人员"，主智能体统筹，子智能体做具体任务 |
| 内联样式 | 将CSS样式直接写在HTML标签内部，零基础最易上手的样式写法 |
| KV CACHE | AI的缓存机制，固定内容放前面可节省TOKEN，减少计费成本 |
（二）常见问题及解决方法
- 问题1：搜索结果仅执行单轮，无法多轮搜索？
- 解决：修改代码中的提示词，添加「至少执行X轮搜索」的明确指令；
- 问题2：AI生成的前端页面渲染失败、样式错乱？
- 解决：删除头部标签，仅保留body内容；删除代码注释和空行；样式改为内联式；
- 问题3：lab生成的代码只能单文件下载，管理麻烦？
- 解决：将单文件代码上传至GitHub仓库，再从仓库整体拉取；
- 问题4：担心API Key泄露，不敢调试？
- 解决：全程使用模拟假数据，复现所有逻辑，上线前再替换真实API Key；
- 问题5：提示词编写后，AI生成的结果不可控？
- 解决：在提示词中明确所有规则（如输出格式、搜索轮次、澄清要求），不要让AI自主判断。
（三）工具/模型资源提示
- Trae/Gemini/Qwen/lab：均为海外工具，可直接通过官网注册，优先使用白嫖版/免费版，无需开通付费会员；
- GitHub：官网注册个人账号，网页版即可完成代码上传/拉取，无需学习Git命令；
- Claudecode/Cursor：官网下载安装，支持中文界面，零基础可直接看新手引导；
- 开源提示词：项目拆解提示词已开源在GitHub，直接搜索关键词即可下载。