[{"data":1,"prerenderedAt":3425},["ShallowReactive",2],{"article-/topics/ai/illustration-brand-visual-consistency-system":3,"related-ai":375,"content-query-t5I5sQ4UTY":3151},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":12,"image":18,"imageQuery":19,"pexelsPhotoId":20,"pexelsUrl":21,"featured":6,"readingTime":22,"body":23,"_type":369,"_id":370,"_source":371,"_file":372,"_stem":373,"_extension":374},"/topics/ai/illustration-brand-visual-consistency-system","ai",false,"","插图与品牌视觉统一：避免素材越做越多、品牌越看越散的系统方法","插图和品牌视觉统一并不是选一套好看的风格这么简单，而是要把场景、色彩、构图和语义表达变成可复用规则。本文从品牌资产、提示词约束和设计评审出发，讲清视觉统一系统的搭建方法。","2026-04-28","HTMLPAGE 团队",[13,14,15,16,17],"Brand Visual","Illustration System","Design Ops","Visual Consistency","AI Workflow","/images/topics/ai/illustration-brand-visual-consistency-system.jpg","brand illustration design system moodboard on laptop",7598019,"https://www.pexels.com/photo/pictures-of-brand-strategy-and-design-7598019/",12,{"type":24,"children":25,"toc":358},"root",[26,34,54,59,66,71,76,99,104,109,114,137,142,148,153,158,191,196,202,207,212,235,240,246,251,274,279,284,312,317,322,327],{"type":27,"tag":28,"props":29,"children":30},"element","p",{},[31],{"type":32,"value":33},"text","很多团队在补插图和品牌视觉时，最开始的问题似乎都只是“图不够用”。但做到后面会发现，更大的问题其实是：",{"type":27,"tag":35,"props":36,"children":37},"ul",{},[38,44,49],{"type":27,"tag":39,"props":40,"children":41},"li",{},[42],{"type":32,"value":43},"这张图单看不差",{"type":27,"tag":39,"props":45,"children":46},{},[47],{"type":32,"value":48},"那张图也不难看",{"type":27,"tag":39,"props":50,"children":51},{},[52],{"type":32,"value":53},"放到同一个产品里却像来自三个品牌",{"type":27,"tag":28,"props":55,"children":56},{},[57],{"type":32,"value":58},"插图与品牌视觉统一真正要解决的，不是单张图的质量，而是整套视觉资产在不同页面、不同团队和不同生产方式下仍然保持可识别性。",{"type":27,"tag":60,"props":61,"children":63},"h2",{"id":62},"先定义品牌视觉的稳定骨架而不是直接收集参考图",[64],{"type":32,"value":65},"先定义品牌视觉的稳定骨架，而不是直接收集参考图",{"type":27,"tag":28,"props":67,"children":68},{},[69],{"type":32,"value":70},"视觉统一最常见的误区，是一上来就建灵感板，然后从“喜欢哪些图”开始讨论。",{"type":27,"tag":28,"props":72,"children":73},{},[74],{"type":32,"value":75},"更稳的顺序通常是先定义稳定骨架：",{"type":27,"tag":35,"props":77,"children":78},{},[79,84,89,94],{"type":27,"tag":39,"props":80,"children":81},{},[82],{"type":32,"value":83},"品牌要传达什么气质",{"type":27,"tag":39,"props":85,"children":86},{},[87],{"type":32,"value":88},"主要场景是官网、产品内页还是营销活动",{"type":27,"tag":39,"props":90,"children":91},{},[92],{"type":32,"value":93},"插图承担解释、装饰还是强调情绪",{"type":27,"tag":39,"props":95,"children":96},{},[97],{"type":32,"value":98},"哪些元素必须稳定，哪些允许变化",{"type":27,"tag":28,"props":100,"children":101},{},[102],{"type":32,"value":103},"如果这一层没有先定下来，素材再多，也很难形成长期一致性。",{"type":27,"tag":60,"props":105,"children":107},{"id":106},"插图系统至少要统一四类约束",[108],{"type":32,"value":106},{"type":27,"tag":28,"props":110,"children":111},{},[112],{"type":32,"value":113},"真正能让团队减少跑偏的，通常不是一句“扁平一点”或“现代一点”，而是更具体的四类约束：",{"type":27,"tag":35,"props":115,"children":116},{},[117,122,127,132],{"type":27,"tag":39,"props":118,"children":119},{},[120],{"type":32,"value":121},"色彩：主色、辅色、中性色比例",{"type":27,"tag":39,"props":123,"children":124},{},[125],{"type":32,"value":126},"造型：线条粗细、圆角倾向、几何程度",{"type":27,"tag":39,"props":128,"children":129},{},[130],{"type":32,"value":131},"构图：主体居中还是偏移，留白密度如何",{"type":27,"tag":39,"props":133,"children":134},{},[135],{"type":32,"value":136},"语义：人物是否出现，物件是否拟物，抽象程度多高",{"type":27,"tag":28,"props":138,"children":139},{},[140],{"type":32,"value":141},"当这些约束被写成团队共识后，外包、内部设计师和 AI 生成素材才更容易对齐。",{"type":27,"tag":60,"props":143,"children":145},{"id":144},"ai-生成素材的关键不是多试而是先把边界说清楚",[146],{"type":32,"value":147},"AI 生成素材的关键不是多试，而是先把边界说清楚",{"type":27,"tag":28,"props":149,"children":150},{},[151],{"type":32,"value":152},"AI 工具很适合做插图探索，但如果缺少约束，最容易造成“单张很好，整组不统一”。",{"type":27,"tag":28,"props":154,"children":155},{},[156],{"type":32,"value":157},"一个更实用的做法，是先把约束写成结构化 brief：",{"type":27,"tag":35,"props":159,"children":160},{},[161,166,171,176,181,186],{"type":27,"tag":39,"props":162,"children":163},{},[164],{"type":32,"value":165},"品牌关键词",{"type":27,"tag":39,"props":167,"children":168},{},[169],{"type":32,"value":170},"禁用风格",{"type":27,"tag":39,"props":172,"children":173},{},[174],{"type":32,"value":175},"颜色范围",{"type":27,"tag":39,"props":177,"children":178},{},[179],{"type":32,"value":180},"主体比例",{"type":27,"tag":39,"props":182,"children":183},{},[184],{"type":32,"value":185},"背景复杂度",{"type":27,"tag":39,"props":187,"children":188},{},[189],{"type":32,"value":190},"输出用途",{"type":27,"tag":28,"props":192,"children":193},{},[194],{"type":32,"value":195},"这样 AI 更像在一个受控品牌系统里扩展素材，而不是每次重开一次美术方向。",{"type":27,"tag":60,"props":197,"children":199},{"id":198},"评审标准要围绕系统一致性不是单张审美",[200],{"type":32,"value":201},"评审标准要围绕“系统一致性”，不是单张审美",{"type":27,"tag":28,"props":203,"children":204},{},[205],{"type":32,"value":206},"视觉评审如果只问“这张图好不好看”，团队很容易每次都陷入个人偏好。",{"type":27,"tag":28,"props":208,"children":209},{},[210],{"type":32,"value":211},"更可执行的评审问题应该是：",{"type":27,"tag":35,"props":213,"children":214},{},[215,220,225,230],{"type":27,"tag":39,"props":216,"children":217},{},[218],{"type":32,"value":219},"是否保留了品牌的核心识别特征",{"type":27,"tag":39,"props":221,"children":222},{},[223],{"type":32,"value":224},"与已上线素材放在一起是否仍然像同一套系统",{"type":27,"tag":39,"props":226,"children":227},{},[228],{"type":32,"value":229},"是否适配当前页面的信息密度和用户任务",{"type":27,"tag":39,"props":231,"children":232},{},[233],{"type":32,"value":234},"是否会让插图抢走本该属于内容和 CTA 的注意力",{"type":27,"tag":28,"props":236,"children":237},{},[238],{"type":32,"value":239},"这样讨论的焦点会从审美拉回品牌与产品目标。",{"type":27,"tag":60,"props":241,"children":243},{"id":242},"一个常见失败案例素材库越来越大但品牌识别度反而下降",[244],{"type":32,"value":245},"一个常见失败案例：素材库越来越大，但品牌识别度反而下降",{"type":27,"tag":28,"props":247,"children":248},{},[249],{"type":32,"value":250},"这类情况常见于高频内容团队。表面看是素材效率提升，实际上问题通常是：",{"type":27,"tag":35,"props":252,"children":253},{},[254,259,264,269],{"type":27,"tag":39,"props":255,"children":256},{},[257],{"type":32,"value":258},"没有品牌视觉骨架",{"type":27,"tag":39,"props":260,"children":261},{},[262],{"type":32,"value":263},"没有稳定禁用项",{"type":27,"tag":39,"props":265,"children":266},{},[267],{"type":32,"value":268},"AI 生成和人工创作不共用一套标准",{"type":27,"tag":39,"props":270,"children":271},{},[272],{"type":32,"value":273},"评审只看单张效果，不看系统关系",{"type":27,"tag":28,"props":275,"children":276},{},[277],{"type":32,"value":278},"结果就是素材越丰富，风格越分裂。",{"type":27,"tag":60,"props":280,"children":282},{"id":281},"一份可直接复用的检查清单",[283],{"type":32,"value":281},{"type":27,"tag":35,"props":285,"children":286},{},[287,292,297,302,307],{"type":27,"tag":39,"props":288,"children":289},{},[290],{"type":32,"value":291},"是否先定义了品牌视觉的稳定骨架和使用场景",{"type":27,"tag":39,"props":293,"children":294},{},[295],{"type":32,"value":296},"色彩、造型、构图、语义四类约束是否明确",{"type":27,"tag":39,"props":298,"children":299},{},[300],{"type":32,"value":301},"AI 和人工素材生产是否共用同一套 brief 与禁用项",{"type":27,"tag":39,"props":303,"children":304},{},[305],{"type":32,"value":306},"评审标准是否围绕系统一致性而不是单张审美",{"type":27,"tag":39,"props":308,"children":309},{},[310],{"type":32,"value":311},"素材库是否按场景和风格标签持续维护，而不是只堆文件",{"type":27,"tag":60,"props":313,"children":315},{"id":314},"总结",[316],{"type":32,"value":314},{"type":27,"tag":28,"props":318,"children":319},{},[320],{"type":32,"value":321},"插图与品牌视觉统一的核心，不是追求“每一张都特别出彩”，而是让所有视觉资产在长期迭代里仍然保持同一个品牌声音。只要先把骨架、约束和评审规则建好，插图系统就会越用越稳，而不是越做越散。",{"type":27,"tag":28,"props":323,"children":324},{},[325],{"type":32,"value":326},"进一步阅读：",{"type":27,"tag":35,"props":328,"children":329},{},[330,340,349],{"type":27,"tag":39,"props":331,"children":332},{},[333],{"type":27,"tag":334,"props":335,"children":337},"a",{"href":336},"/topics/design/design-system-documentation-best-practices",[338],{"type":32,"value":339},"设计系统文档化最佳实践",{"type":27,"tag":39,"props":341,"children":342},{},[343],{"type":27,"tag":334,"props":344,"children":346},{"href":345},"/topics/design/ai-assisted-design-tools-practice",[347],{"type":32,"value":348},"AI 辅助设计工具实践",{"type":27,"tag":39,"props":350,"children":351},{},[352],{"type":27,"tag":334,"props":353,"children":355},{"href":354},"/topics/design/design-development-collaboration-workflow",[356],{"type":32,"value":357},"设计与开发协作流程",{"title":7,"searchDepth":359,"depth":359,"links":360},3,[361,363,364,365,366,367,368],{"id":62,"depth":362,"text":65},2,{"id":106,"depth":362,"text":106},{"id":144,"depth":362,"text":147},{"id":198,"depth":362,"text":201},{"id":242,"depth":362,"text":245},{"id":281,"depth":362,"text":281},{"id":314,"depth":362,"text":314},"markdown","content:topics:ai:illustration-brand-visual-consistency-system.md","content","topics/ai/illustration-brand-visual-consistency-system.md","topics/ai/illustration-brand-visual-consistency-system","md",[376,1537,2487],{"_path":377,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":378,"description":379,"date":380,"topic":5,"author":11,"tags":381,"image":387,"imageAlt":388,"pexelsPhotoId":389,"pexelsUrl":390,"readingTime":22,"body":391,"_type":369,"_id":1534,"_source":371,"_file":1535,"_stem":1536,"_extension":374},"/topics/ai/cursor-keyboard-shortcuts-cheatsheet","Cursor 快捷键速查表（macOS/Windows）：从“会用”到“能提效”的 10 个工作流","把 Cursor 常用快捷键按任务分组（查代码、改代码、多文件、对话、审查与回滚），给出可直接照抄的工作流与最小回归清单，避免“快捷键背了也没变快”。","2026-03-02",[382,383,384,385,386],"Cursor","快捷键","AI IDE","VS Code","开发效率","/images/topics/ai/cursor-keyboard-shortcuts-cheatsheet.jpg","彩色机械键盘与鼠标的工作台面",34563105,"https://www.pexels.com/photo/colorful-mechanical-keyboard-and-mouse-setup-34563105/",{"type":24,"children":392,"toc":1508},[393,398,416,421,450,455,491,495,501,506,539,544,567,570,576,581,806,815,818,824,831,850,858,879,884,890,905,936,941,954,960,979,997,1005,1010,1016,1021,1042,1050,1056,1061,1084,1089,1095,1108,1114,1132,1150,1156,1167,1185,1191,1202,1208,1213,1256,1259,1265,1273,1326,1329,1335,1341,1346,1351,1374,1392,1397,1422,1425,1431,1437,1442,1448,1453,1459,1464,1467,1473],{"type":27,"tag":28,"props":394,"children":395},{},[396],{"type":32,"value":397},"如果你在搜“Cursor 快捷键”，你大概率不是想背一张表，而是想解决这类问题：",{"type":27,"tag":35,"props":399,"children":400},{},[401,406,411],{"type":27,"tag":39,"props":402,"children":403},{},[404],{"type":32,"value":405},"为什么我用了 AI，还是很慢？（对话来回太多、改动不可控）",{"type":27,"tag":39,"props":407,"children":408},{},[409],{"type":32,"value":410},"为什么它“看起来懂了”，却改错文件/改出回归？（上下文与范围没锁住）",{"type":27,"tag":39,"props":412,"children":413},{},[414],{"type":32,"value":415},"多文件改动怎么做得安全？（验收、回滚、最小回归集）",{"type":27,"tag":28,"props":417,"children":418},{},[419],{"type":32,"value":420},"这篇文章给你两份东西：",{"type":27,"tag":422,"props":423,"children":424},"ol",{},[425,438],{"type":27,"tag":39,"props":426,"children":427},{},[428,430,436],{"type":32,"value":429},"一张",{"type":27,"tag":431,"props":432,"children":433},"strong",{},[434],{"type":32,"value":435},"按任务分组",{"type":32,"value":437},"的快捷键表（不是按功能堆在一起）",{"type":27,"tag":39,"props":439,"children":440},{},[441,443,448],{"type":32,"value":442},"一套“从需求到落地”的",{"type":27,"tag":431,"props":444,"children":445},{},[446],{"type":32,"value":447},"最小闭环工作流",{"type":32,"value":449},"（每一步都有快捷键）",{"type":27,"tag":28,"props":451,"children":452},{},[453],{"type":32,"value":454},"想看系统玩法：",{"type":27,"tag":35,"props":456,"children":457},{},[458,469,480],{"type":27,"tag":39,"props":459,"children":460},{},[461,463],{"type":32,"value":462},"入门教程看：",{"type":27,"tag":334,"props":464,"children":466},{"href":465},"/topics/ai/cursor-tutorial",[467],{"type":32,"value":468},"Cursor 使用教程（2026）",{"type":27,"tag":39,"props":470,"children":471},{},[472,474],{"type":32,"value":473},"进阶玩法看：",{"type":27,"tag":334,"props":475,"children":477},{"href":476},"/topics/ai/cursor-editor-guide",[478],{"type":32,"value":479},"Cursor 编辑器深度玩法",{"type":27,"tag":39,"props":481,"children":482},{},[483,485],{"type":32,"value":484},"规则与忽略看：",{"type":27,"tag":334,"props":486,"children":488},{"href":487},"/topics/ai/cursor-rules-cursorrules",[489],{"type":32,"value":490},"Cursor Rules 与 .cursorrules",{"type":27,"tag":492,"props":493,"children":494},"hr",{},[],{"type":27,"tag":60,"props":496,"children":498},{"id":497},"先给结论提效不是按得快而是闭环更短",[499],{"type":32,"value":500},"先给结论：提效不是“按得快”，而是“闭环更短”",{"type":27,"tag":28,"props":502,"children":503},{},[504],{"type":32,"value":505},"你可以把 Cursor 的快捷键理解为 3 条流水线：",{"type":27,"tag":35,"props":507,"children":508},{},[509,519,529],{"type":27,"tag":39,"props":510,"children":511},{},[512,517],{"type":27,"tag":431,"props":513,"children":514},{},[515],{"type":32,"value":516},"改一小段",{"type":32,"value":518},"（内联编辑）：把改动限制在一个函数/一段样式",{"type":27,"tag":39,"props":520,"children":521},{},[522,527],{"type":27,"tag":431,"props":523,"children":524},{},[525],{"type":32,"value":526},"改一组文件",{"type":32,"value":528},"（Composer）：把改动限制在一组明确文件，并要求输出 diff + 验收点",{"type":27,"tag":39,"props":530,"children":531},{},[532,537],{"type":27,"tag":431,"props":533,"children":534},{},[535],{"type":32,"value":536},"聊清楚再动手",{"type":32,"value":538},"（侧边对话）：先对齐目标、范围、验收、回滚",{"type":27,"tag":28,"props":540,"children":541},{},[542],{"type":32,"value":543},"当你觉得“它乱改/改太大”时，往往不是快捷键没记住，而是缺了两件事：",{"type":27,"tag":35,"props":545,"children":546},{},[547,557],{"type":27,"tag":39,"props":548,"children":549},{},[550,552],{"type":32,"value":551},"没有在动手前锁定",{"type":27,"tag":431,"props":553,"children":554},{},[555],{"type":32,"value":556},"范围",{"type":27,"tag":39,"props":558,"children":559},{},[560,562],{"type":32,"value":561},"没有在接受改动前准备",{"type":27,"tag":431,"props":563,"children":564},{},[565],{"type":32,"value":566},"验收/回滚",{"type":27,"tag":492,"props":568,"children":569},{},[],{"type":27,"tag":60,"props":571,"children":573},{"id":572},"快捷键速查表按任务分组",[574],{"type":32,"value":575},"快捷键速查表（按任务分组）",{"type":27,"tag":28,"props":577,"children":578},{},[579],{"type":32,"value":580},"说明：下表按“你正在做什么”组织，而不是按“功能名字”组织。不同版本快捷键可能略有差异，但核心逻辑一致。",{"type":27,"tag":582,"props":583,"children":584},"table",{},[585,614],{"type":27,"tag":586,"props":587,"children":588},"thead",{},[589],{"type":27,"tag":590,"props":591,"children":592},"tr",{},[593,599,604,609],{"type":27,"tag":594,"props":595,"children":596},"th",{},[597],{"type":32,"value":598},"任务",{"type":27,"tag":594,"props":600,"children":601},{},[602],{"type":32,"value":603},"macOS",{"type":27,"tag":594,"props":605,"children":606},{},[607],{"type":32,"value":608},"Windows",{"type":27,"tag":594,"props":610,"children":611},{},[612],{"type":32,"value":613},"你该在什么时候用",{"type":27,"tag":615,"props":616,"children":617},"tbody",{},[618,651,682,713,744,775],{"type":27,"tag":590,"props":619,"children":620},{},[621,627,637,646],{"type":27,"tag":622,"props":623,"children":624},"td",{},[625],{"type":32,"value":626},"改一小段（最安全）",{"type":27,"tag":622,"props":628,"children":629},{},[630],{"type":27,"tag":631,"props":632,"children":634},"code",{"className":633},[],[635],{"type":32,"value":636},"Cmd + K",{"type":27,"tag":622,"props":638,"children":639},{},[640],{"type":27,"tag":631,"props":641,"children":643},{"className":642},[],[644],{"type":32,"value":645},"Ctrl + K",{"type":27,"tag":622,"props":647,"children":648},{},[649],{"type":32,"value":650},"只想改一个函数/一段 CSS，不想动别的",{"type":27,"tag":590,"props":652,"children":653},{},[654,659,668,677],{"type":27,"tag":622,"props":655,"children":656},{},[657],{"type":32,"value":658},"打开 AI 对话（先对齐再动手）",{"type":27,"tag":622,"props":660,"children":661},{},[662],{"type":27,"tag":631,"props":663,"children":665},{"className":664},[],[666],{"type":32,"value":667},"Cmd + L",{"type":27,"tag":622,"props":669,"children":670},{},[671],{"type":27,"tag":631,"props":672,"children":674},{"className":673},[],[675],{"type":32,"value":676},"Ctrl + L",{"type":27,"tag":622,"props":678,"children":679},{},[680],{"type":32,"value":681},"需要澄清目标、制定步骤、给验收点",{"type":27,"tag":590,"props":683,"children":684},{},[685,690,699,708],{"type":27,"tag":622,"props":686,"children":687},{},[688],{"type":32,"value":689},"多文件编辑（有组织地改一组文件）",{"type":27,"tag":622,"props":691,"children":692},{},[693],{"type":27,"tag":631,"props":694,"children":696},{"className":695},[],[697],{"type":32,"value":698},"Cmd + I",{"type":27,"tag":622,"props":700,"children":701},{},[702],{"type":27,"tag":631,"props":703,"children":705},{"className":704},[],[706],{"type":32,"value":707},"Ctrl + I",{"type":27,"tag":622,"props":709,"children":710},{},[711],{"type":32,"value":712},"改动涉及多个文件：组件+样式+测试",{"type":27,"tag":590,"props":714,"children":715},{},[716,721,730,739],{"type":27,"tag":622,"props":717,"children":718},{},[719],{"type":32,"value":720},"把选中代码加入对话上下文",{"type":27,"tag":622,"props":722,"children":723},{},[724],{"type":27,"tag":631,"props":725,"children":727},{"className":726},[],[728],{"type":32,"value":729},"Cmd + Shift + L",{"type":27,"tag":622,"props":731,"children":732},{},[733],{"type":27,"tag":631,"props":734,"children":736},{"className":735},[],[737],{"type":32,"value":738},"Ctrl + Shift + L",{"type":27,"tag":622,"props":740,"children":741},{},[742],{"type":32,"value":743},"让 AI 只看你选的片段（降低噪音）",{"type":27,"tag":590,"props":745,"children":746},{},[747,752,761,770],{"type":27,"tag":622,"props":748,"children":749},{},[750],{"type":32,"value":751},"接受当前建议",{"type":27,"tag":622,"props":753,"children":754},{},[755],{"type":27,"tag":631,"props":756,"children":758},{"className":757},[],[759],{"type":32,"value":760},"Cmd + Y",{"type":27,"tag":622,"props":762,"children":763},{},[764],{"type":27,"tag":631,"props":765,"children":767},{"className":766},[],[768],{"type":32,"value":769},"Ctrl + Y",{"type":27,"tag":622,"props":771,"children":772},{},[773],{"type":32,"value":774},"你已经准备好验收/回滚，并确认改动范围",{"type":27,"tag":590,"props":776,"children":777},{},[778,783,792,801],{"type":27,"tag":622,"props":779,"children":780},{},[781],{"type":32,"value":782},"拒绝当前建议",{"type":27,"tag":622,"props":784,"children":785},{},[786],{"type":27,"tag":631,"props":787,"children":789},{"className":788},[],[790],{"type":32,"value":791},"Cmd + N",{"type":27,"tag":622,"props":793,"children":794},{},[795],{"type":27,"tag":631,"props":796,"children":798},{"className":797},[],[799],{"type":32,"value":800},"Ctrl + N",{"type":27,"tag":622,"props":802,"children":803},{},[804],{"type":32,"value":805},"改得太大、改错方向，立刻收手",{"type":27,"tag":807,"props":808,"children":809},"blockquote",{},[810],{"type":27,"tag":28,"props":811,"children":812},{},[813],{"type":32,"value":814},"小技巧：把“改一小段”当默认路径。只有当你能清晰写出“会改哪几类文件、怎么验收”时再进入多文件。",{"type":27,"tag":492,"props":816,"children":817},{},[],{"type":27,"tag":60,"props":819,"children":821},{"id":820},"_10-个可直接照抄的提效工作流每个都能闭环",[822],{"type":32,"value":823},"10 个可直接照抄的提效工作流（每个都能闭环）",{"type":27,"tag":825,"props":826,"children":828},"h3",{"id":827},"工作流-1需求计划小步改新手最稳",[829],{"type":32,"value":830},"工作流 1：需求→计划→小步改（新手最稳）",{"type":27,"tag":422,"props":832,"children":833},{},[834,845],{"type":27,"tag":39,"props":835,"children":836},{},[837,843],{"type":27,"tag":631,"props":838,"children":840},{"className":839},[],[841],{"type":32,"value":842},"Cmd/Ctrl + L",{"type":32,"value":844}," 打开对话",{"type":27,"tag":39,"props":846,"children":847},{},[848],{"type":32,"value":849},"先发这段（可复制）：",{"type":27,"tag":807,"props":851,"children":852},{},[853],{"type":27,"tag":28,"props":854,"children":855},{},[856],{"type":32,"value":857},"目标：……\n范围：只修改以下文件/模块：……\n非目标：……（明确不做）\n验收：……（可测试/可手动检查）\n输出格式：先给计划，再逐步执行；每一步写出 diff 摘要。",{"type":27,"tag":422,"props":859,"children":860},{"start":359},[861,866],{"type":27,"tag":39,"props":862,"children":863},{},[864],{"type":32,"value":865},"让 AI 先给“计划（3~6 步）”，你确认后再执行",{"type":27,"tag":39,"props":867,"children":868},{},[869,871,877],{"type":32,"value":870},"任何一步涉及改代码：优先回到编辑区，选中片段用 ",{"type":27,"tag":631,"props":872,"children":874},{"className":873},[],[875],{"type":32,"value":876},"Cmd/Ctrl + K",{"type":32,"value":878}," 小步改",{"type":27,"tag":28,"props":880,"children":881},{},[882],{"type":32,"value":883},"为什么有效：你把“想法”变成了“可执行约束”，这就是 GEO（面向 AI/模型的可理解结构）。",{"type":27,"tag":825,"props":885,"children":887},{"id":886},"工作流-2只改一个函数高频低风险",[888],{"type":32,"value":889},"工作流 2：只改一个函数（高频、低风险）",{"type":27,"tag":35,"props":891,"children":892},{},[893],{"type":27,"tag":39,"props":894,"children":895},{},[896,898,903],{"type":32,"value":897},"选中函数 → ",{"type":27,"tag":631,"props":899,"children":901},{"className":900},[],[902],{"type":32,"value":876},{"type":32,"value":904}," → 输入指令：",{"type":27,"tag":807,"props":906,"children":907},{},[908,913],{"type":27,"tag":28,"props":909,"children":910},{},[911],{"type":32,"value":912},"把这段改成更可读：",{"type":27,"tag":35,"props":914,"children":915},{},[916,921,926,931],{"type":27,"tag":39,"props":917,"children":918},{},[919],{"type":32,"value":920},"用 async/await",{"type":27,"tag":39,"props":922,"children":923},{},[924],{"type":32,"value":925},"错误处理不要吞掉",{"type":27,"tag":39,"props":927,"children":928},{},[929],{"type":32,"value":930},"添加类型（若可推断）",{"type":27,"tag":39,"props":932,"children":933},{},[934],{"type":32,"value":935},"不要改函数签名",{"type":27,"tag":28,"props":937,"children":938},{},[939],{"type":32,"value":940},"验收方式（强制）：",{"type":27,"tag":35,"props":942,"children":943},{},[944,949],{"type":27,"tag":39,"props":945,"children":946},{},[947],{"type":32,"value":948},"输出前后函数行为一致（输入/输出）",{"type":27,"tag":39,"props":950,"children":951},{},[952],{"type":32,"value":953},"失败分支有可观测日志（不要悄悄 return null）",{"type":27,"tag":825,"props":955,"children":957},{"id":956},"工作流-3多文件改动先定文件清单",[958],{"type":32,"value":959},"工作流 3：多文件改动（先定“文件清单”）",{"type":27,"tag":422,"props":961,"children":962},{},[963,974],{"type":27,"tag":39,"props":964,"children":965},{},[966,972],{"type":27,"tag":631,"props":967,"children":969},{"className":968},[],[970],{"type":32,"value":971},"Cmd/Ctrl + I",{"type":32,"value":973}," 进入多文件",{"type":27,"tag":39,"props":975,"children":976},{},[977],{"type":32,"value":978},"先让 AI 输出：",{"type":27,"tag":35,"props":980,"children":981},{},[982,987,992],{"type":27,"tag":39,"props":983,"children":984},{},[985],{"type":32,"value":986},"预计会改哪些文件（最多 5 个）",{"type":27,"tag":39,"props":988,"children":989},{},[990],{"type":32,"value":991},"每个文件改什么",{"type":27,"tag":39,"props":993,"children":994},{},[995],{"type":32,"value":996},"每一步怎么验收",{"type":27,"tag":422,"props":998,"children":999},{"start":359},[1000],{"type":27,"tag":39,"props":1001,"children":1002},{},[1003],{"type":32,"value":1004},"你确认文件清单后再开始生成改动",{"type":27,"tag":28,"props":1006,"children":1007},{},[1008],{"type":32,"value":1009},"关键点：多文件最容易翻车的是“它把你没想到的文件也改了”。所以文件清单是第一道闸门。",{"type":27,"tag":825,"props":1011,"children":1013},{"id":1012},"工作流-4把上下文噪音砍掉防跑偏",[1014],{"type":32,"value":1015},"工作流 4：把“上下文噪音”砍掉（防跑偏）",{"type":27,"tag":28,"props":1017,"children":1018},{},[1019],{"type":32,"value":1020},"当你怀疑它在胡说/乱改时：",{"type":27,"tag":35,"props":1022,"children":1023},{},[1024,1037],{"type":27,"tag":39,"props":1025,"children":1026},{},[1027,1029,1035],{"type":32,"value":1028},"只选择关键代码片段 → ",{"type":27,"tag":631,"props":1030,"children":1032},{"className":1031},[],[1033],{"type":32,"value":1034},"Cmd/Ctrl + Shift + L",{"type":32,"value":1036}," 加入对话",{"type":27,"tag":39,"props":1038,"children":1039},{},[1040],{"type":32,"value":1041},"然后在对话里要求：",{"type":27,"tag":807,"props":1043,"children":1044},{},[1045],{"type":27,"tag":28,"props":1046,"children":1047},{},[1048],{"type":32,"value":1049},"只基于我提供的代码片段回答，不要假设其它文件存在。",{"type":27,"tag":825,"props":1051,"children":1053},{"id":1052},"工作流-5生成变更说明让-code-review-变快",[1054],{"type":32,"value":1055},"工作流 5：生成变更说明（让 code review 变快）",{"type":27,"tag":28,"props":1057,"children":1058},{},[1059],{"type":32,"value":1060},"改完后在对话里让它输出：",{"type":27,"tag":35,"props":1062,"children":1063},{},[1064,1069,1074,1079],{"type":27,"tag":39,"props":1065,"children":1066},{},[1067],{"type":32,"value":1068},"改动摘要（3~7 条）",{"type":27,"tag":39,"props":1070,"children":1071},{},[1072],{"type":32,"value":1073},"风险点（依赖/边界条件）",{"type":27,"tag":39,"props":1075,"children":1076},{},[1077],{"type":32,"value":1078},"回滚方式",{"type":27,"tag":39,"props":1080,"children":1081},{},[1082],{"type":32,"value":1083},"验收步骤",{"type":27,"tag":28,"props":1085,"children":1086},{},[1087],{"type":32,"value":1088},"这套结构能直接贴进 PR 描述。",{"type":27,"tag":825,"props":1090,"children":1092},{"id":1091},"工作流-6写最小回归集不写回归-等事故",[1093],{"type":32,"value":1094},"工作流 6：写“最小回归集”（不写回归 = 等事故）",{"type":27,"tag":28,"props":1096,"children":1097},{},[1098,1100,1106],{"type":32,"value":1099},"每次改动都至少做 10 条最小回归（见下文清单）。你可以把它写在 ",{"type":27,"tag":631,"props":1101,"children":1103},{"className":1102},[],[1104],{"type":32,"value":1105},"README",{"type":32,"value":1107}," 或团队 wiki。",{"type":27,"tag":825,"props":1109,"children":1111},{"id":1110},"工作流-7把接受建议变成最后一步",[1112],{"type":32,"value":1113},"工作流 7：把“接受建议”变成最后一步",{"type":27,"tag":28,"props":1115,"children":1116},{},[1117,1123,1125,1130],{"type":27,"tag":631,"props":1118,"children":1120},{"className":1119},[],[1121],{"type":32,"value":1122},"Cmd/Ctrl + Y",{"type":32,"value":1124}," 应该是",{"type":27,"tag":431,"props":1126,"children":1127},{},[1128],{"type":32,"value":1129},"最后一步",{"type":32,"value":1131},"：",{"type":27,"tag":35,"props":1133,"children":1134},{},[1135,1140,1145],{"type":27,"tag":39,"props":1136,"children":1137},{},[1138],{"type":32,"value":1139},"你已经看过 diff",{"type":27,"tag":39,"props":1141,"children":1142},{},[1143],{"type":32,"value":1144},"你能说清楚“怎么验收”",{"type":27,"tag":39,"props":1146,"children":1147},{},[1148],{"type":32,"value":1149},"你知道“怎么回滚”",{"type":27,"tag":825,"props":1151,"children":1153},{"id":1152},"工作流-8拒绝建议不是失败是风控动作",[1154],{"type":32,"value":1155},"工作流 8：拒绝建议不是失败，是风控动作",{"type":27,"tag":28,"props":1157,"children":1158},{},[1159,1165],{"type":27,"tag":631,"props":1160,"children":1162},{"className":1161},[],[1163],{"type":32,"value":1164},"Cmd/Ctrl + N",{"type":32,"value":1166}," 的使用时机：",{"type":27,"tag":35,"props":1168,"children":1169},{},[1170,1175,1180],{"type":27,"tag":39,"props":1171,"children":1172},{},[1173],{"type":32,"value":1174},"它开始改你没提过的东西（范围漂移）",{"type":27,"tag":39,"props":1176,"children":1177},{},[1178],{"type":32,"value":1179},"它改了 10 个文件但你只想改 1 个",{"type":27,"tag":39,"props":1181,"children":1182},{},[1183],{"type":32,"value":1184},"它为了“更优雅”引入新依赖/新抽象",{"type":27,"tag":825,"props":1186,"children":1188},{"id":1187},"工作流-9重复任务做成模板提示词不是一次性",[1189],{"type":32,"value":1190},"工作流 9：重复任务做成模板（提示词不是一次性）",{"type":27,"tag":28,"props":1192,"children":1193},{},[1194,1196,1200],{"type":32,"value":1195},"把高频任务（比如“写组件+样式+验收”）固化成模板，放进 Rules（见：",{"type":27,"tag":334,"props":1197,"children":1198},{"href":487},[1199],{"type":32,"value":490},{"type":32,"value":1201},"）。",{"type":27,"tag":825,"props":1203,"children":1205},{"id":1204},"工作流-10把快捷键表做成你自己的任务表",[1206],{"type":32,"value":1207},"工作流 10：把“快捷键表”做成你自己的任务表",{"type":27,"tag":28,"props":1209,"children":1210},{},[1211],{"type":32,"value":1212},"你不需要记住所有快捷键，只需要记住：",{"type":27,"tag":35,"props":1214,"children":1215},{},[1216,1226,1236,1246],{"type":27,"tag":39,"props":1217,"children":1218},{},[1219,1221],{"type":32,"value":1220},"小步改：",{"type":27,"tag":631,"props":1222,"children":1224},{"className":1223},[],[1225],{"type":32,"value":876},{"type":27,"tag":39,"props":1227,"children":1228},{},[1229,1231],{"type":32,"value":1230},"先对齐：",{"type":27,"tag":631,"props":1232,"children":1234},{"className":1233},[],[1235],{"type":32,"value":842},{"type":27,"tag":39,"props":1237,"children":1238},{},[1239,1241],{"type":32,"value":1240},"多文件：",{"type":27,"tag":631,"props":1242,"children":1244},{"className":1243},[],[1245],{"type":32,"value":971},{"type":27,"tag":39,"props":1247,"children":1248},{},[1249,1251],{"type":32,"value":1250},"上下文聚焦：",{"type":27,"tag":631,"props":1252,"children":1254},{"className":1253},[],[1255],{"type":32,"value":1034},{"type":27,"tag":492,"props":1257,"children":1258},{},[],{"type":27,"tag":60,"props":1260,"children":1262},{"id":1261},"必交付物-1最小回归任务清单10-条通用",[1263],{"type":32,"value":1264},"必交付物 1：最小回归任务清单（10 条，通用）",{"type":27,"tag":807,"props":1266,"children":1267},{},[1268],{"type":27,"tag":28,"props":1269,"children":1270},{},[1271],{"type":32,"value":1272},"这份清单的意义：让每次 AI 改动都能“被验证”。否则你只是把不可控变成了更快的不可控。",{"type":27,"tag":422,"props":1274,"children":1275},{},[1276,1281,1286,1291,1296,1301,1306,1311,1316,1321],{"type":27,"tag":39,"props":1277,"children":1278},{},[1279],{"type":32,"value":1280},"关键路径能跑通（手动点击/请求一次）",{"type":27,"tag":39,"props":1282,"children":1283},{},[1284],{"type":32,"value":1285},"错误路径能触发（模拟一次失败输入）",{"type":27,"tag":39,"props":1287,"children":1288},{},[1289],{"type":32,"value":1290},"控制台无新增错误（至少关注 1 次真实操作）",{"type":27,"tag":39,"props":1292,"children":1293},{},[1294],{"type":32,"value":1295},"关键 UI 未错位（移动端/桌面端各看一眼）",{"type":27,"tag":39,"props":1297,"children":1298},{},[1299],{"type":32,"value":1300},"刷新后状态正确（尤其是表单/列表）",{"type":27,"tag":39,"props":1302,"children":1303},{},[1304],{"type":32,"value":1305},"路由跳转没断（从入口到目标页）",{"type":27,"tag":39,"props":1307,"children":1308},{},[1309],{"type":32,"value":1310},"相关接口未改变契约（字段名/类型）",{"type":27,"tag":39,"props":1312,"children":1313},{},[1314],{"type":32,"value":1315},"性能没有明显退化（首屏、交互卡顿）",{"type":27,"tag":39,"props":1317,"children":1318},{},[1319],{"type":32,"value":1320},"回滚方案可执行（知道回滚哪几个文件/commit）",{"type":27,"tag":39,"props":1322,"children":1323},{},[1324],{"type":32,"value":1325},"写下“这次改动解决了什么、风险是什么”（可贴 PR）",{"type":27,"tag":492,"props":1327,"children":1328},{},[],{"type":27,"tag":60,"props":1330,"children":1332},{"id":1331},"必交付物-2失败案例复盘真实会发生",[1333],{"type":32,"value":1334},"必交付物 2：失败案例复盘（真实会发生）",{"type":27,"tag":825,"props":1336,"children":1338},{"id":1337},"现象快捷键用得很熟但交付还是慢",[1339],{"type":32,"value":1340},"现象：快捷键用得很熟，但交付还是慢",{"type":27,"tag":28,"props":1342,"children":1343},{},[1344],{"type":32,"value":1345},"典型原因：你把 Cursor 当成“更聪明的搜索框”，不断对话，直到它给出你想要的答案。",{"type":27,"tag":28,"props":1347,"children":1348},{},[1349],{"type":32,"value":1350},"复现路径：",{"type":27,"tag":35,"props":1352,"children":1353},{},[1354,1359,1364,1369],{"type":27,"tag":39,"props":1355,"children":1356},{},[1357],{"type":32,"value":1358},"你直接说“把页面做得更好看、更高级”",{"type":27,"tag":39,"props":1360,"children":1361},{},[1362],{"type":32,"value":1363},"AI 开始大改样式、抽象组件、甚至引入新依赖",{"type":27,"tag":39,"props":1365,"children":1366},{},[1367],{"type":32,"value":1368},"你为了省事按了“接受建议”",{"type":27,"tag":39,"props":1370,"children":1371},{},[1372],{"type":32,"value":1373},"最后发现：设计没统一、移动端崩、甚至埋了性能问题",{"type":27,"tag":28,"props":1375,"children":1376},{},[1377,1379,1383,1385,1390],{"type":32,"value":1378},"根因：缺少",{"type":27,"tag":431,"props":1380,"children":1381},{},[1382],{"type":32,"value":556},{"type":32,"value":1384},"与",{"type":27,"tag":431,"props":1386,"children":1387},{},[1388],{"type":32,"value":1389},"验收",{"type":32,"value":1391},"。",{"type":27,"tag":28,"props":1393,"children":1394},{},[1395],{"type":32,"value":1396},"修复方式（可照抄）：",{"type":27,"tag":35,"props":1398,"children":1399},{},[1400,1405,1417],{"type":27,"tag":39,"props":1401,"children":1402},{},[1403],{"type":32,"value":1404},"把需求拆成 3 个可验证目标：例如“按钮样式统一”“首屏 CTA 更明显”“移动端间距不挤”",{"type":27,"tag":39,"props":1406,"children":1407},{},[1408,1410,1415],{"type":32,"value":1409},"每个目标只用 ",{"type":27,"tag":631,"props":1411,"children":1413},{"className":1412},[],[1414],{"type":32,"value":876},{"type":32,"value":1416}," 改一个局部",{"type":27,"tag":39,"props":1418,"children":1419},{},[1420],{"type":32,"value":1421},"每次接受建议前跑一遍“最小回归集”",{"type":27,"tag":492,"props":1423,"children":1424},{},[],{"type":27,"tag":60,"props":1426,"children":1428},{"id":1427},"faq高频问题",[1429],{"type":32,"value":1430},"FAQ（高频问题）",{"type":27,"tag":825,"props":1432,"children":1434},{"id":1433},"q1我应该先记快捷键还是先学工作流",[1435],{"type":32,"value":1436},"Q1：我应该先记快捷键还是先学工作流？",{"type":27,"tag":28,"props":1438,"children":1439},{},[1440],{"type":32,"value":1441},"先学工作流。快捷键只是把工作流的步骤变短。",{"type":27,"tag":825,"props":1443,"children":1445},{"id":1444},"q2为什么我一用多文件就容易翻车",[1446],{"type":32,"value":1447},"Q2：为什么我一用多文件就容易翻车？",{"type":27,"tag":28,"props":1449,"children":1450},{},[1451],{"type":32,"value":1452},"因为多文件意味着范围更大、依赖更多、验收更难。先锁定“文件清单 + 每步验收”，再让它动手。",{"type":27,"tag":825,"props":1454,"children":1456},{"id":1455},"q3有没有万能提示词",[1457],{"type":32,"value":1458},"Q3：有没有“万能提示词”？",{"type":27,"tag":28,"props":1460,"children":1461},{},[1462],{"type":32,"value":1463},"没有，但有“万能结构”：目标、范围、非目标、验收、输出格式。",{"type":27,"tag":492,"props":1465,"children":1466},{},[],{"type":27,"tag":60,"props":1468,"children":1470},{"id":1469},"延伸阅读建议按顺序",[1471],{"type":32,"value":1472},"延伸阅读（建议按顺序）",{"type":27,"tag":35,"props":1474,"children":1475},{},[1476,1483,1490,1497],{"type":27,"tag":39,"props":1477,"children":1478},{},[1479],{"type":27,"tag":334,"props":1480,"children":1481},{"href":465},[1482],{"type":32,"value":468},{"type":27,"tag":39,"props":1484,"children":1485},{},[1486],{"type":27,"tag":334,"props":1487,"children":1488},{"href":476},[1489],{"type":32,"value":479},{"type":27,"tag":39,"props":1491,"children":1492},{},[1493],{"type":27,"tag":334,"props":1494,"children":1495},{"href":487},[1496],{"type":32,"value":490},{"type":27,"tag":39,"props":1498,"children":1499},{},[1500,1502],{"type":32,"value":1501},"如果你更关心“网页制作落地”：看这篇 ",{"type":27,"tag":334,"props":1503,"children":1505},{"href":1504},"/topics/practical-tips/htmlpage-quick-landing-page",[1506],{"type":32,"value":1507},"3 分钟用 HTMLPAGE 做落地页",{"title":7,"searchDepth":359,"depth":359,"links":1509},[1510,1511,1512,1524,1525,1528,1533],{"id":497,"depth":362,"text":500},{"id":572,"depth":362,"text":575},{"id":820,"depth":362,"text":823,"children":1513},[1514,1515,1516,1517,1518,1519,1520,1521,1522,1523],{"id":827,"depth":359,"text":830},{"id":886,"depth":359,"text":889},{"id":956,"depth":359,"text":959},{"id":1012,"depth":359,"text":1015},{"id":1052,"depth":359,"text":1055},{"id":1091,"depth":359,"text":1094},{"id":1110,"depth":359,"text":1113},{"id":1152,"depth":359,"text":1155},{"id":1187,"depth":359,"text":1190},{"id":1204,"depth":359,"text":1207},{"id":1261,"depth":362,"text":1264},{"id":1331,"depth":362,"text":1334,"children":1526},[1527],{"id":1337,"depth":359,"text":1340},{"id":1427,"depth":362,"text":1430,"children":1529},[1530,1531,1532],{"id":1433,"depth":359,"text":1436},{"id":1444,"depth":359,"text":1447},{"id":1455,"depth":359,"text":1458},{"id":1469,"depth":362,"text":1472},"content:topics:ai:cursor-keyboard-shortcuts-cheatsheet.md","topics/ai/cursor-keyboard-shortcuts-cheatsheet.md","topics/ai/cursor-keyboard-shortcuts-cheatsheet",{"_path":1538,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1539,"description":1540,"date":1541,"topic":5,"author":11,"tags":1542,"image":1546,"imageAlt":1547,"pexelsPhotoId":1548,"pexelsUrl":1549,"readingTime":1550,"body":1551,"_type":369,"_id":2484,"_source":371,"_file":2485,"_stem":2486,"_extension":374},"/topics/ai/cursor-vs-copilot-vscode-workflow","Cursor vs GitHub Copilot vs VS Code：怎么选、怎么搭配、怎么把风险关在笼子里","用“任务类型×风险×验收成本”的选择矩阵解释 Cursor/Copilot/VS Code 的差异，并给出一套可落地的协作工作流（范围闸门、最小回归集、回滚策略）。","2026-03-01",[382,1543,385,1544,1545],"GitHub Copilot","AI 编程","工作流","/images/topics/ai/cursor-vs-copilot-vscode-workflow.jpg","团队在电脑前进行协作讨论",1181371,"https://www.pexels.com/photo/man-wearing-blue-dress-shirt-1181371/",15,{"type":24,"children":1552,"toc":2462},[1553,1558,1563,1581,1586,1604,1607,1613,1618,1649,1654,1657,1663,1671,1875,1883,1896,1899,1905,1911,1924,1929,1942,1948,1953,1986,1992,1997,2015,2018,2024,2029,2035,2040,2073,2079,2092,2097,2110,2116,2128,2134,2139,2152,2157,2160,2166,2171,2292,2295,2301,2311,2320,2338,2347,2355,2364,2382,2385,2391,2397,2402,2408,2413,2416,2421],{"type":27,"tag":28,"props":1554,"children":1555},{},[1556],{"type":32,"value":1557},"“Cursor 和 Copilot 到底有什么区别？”",{"type":27,"tag":28,"props":1559,"children":1560},{},[1561],{"type":32,"value":1562},"这个问题问得越早越好，因为你一旦把工具选错，后面所有痛苦都不是“提示词不够好”，而是：",{"type":27,"tag":35,"props":1564,"children":1565},{},[1566,1571,1576],{"type":27,"tag":39,"props":1567,"children":1568},{},[1569],{"type":32,"value":1570},"改动不可控（范围漂移、改错文件）",{"type":27,"tag":39,"props":1572,"children":1573},{},[1574],{"type":32,"value":1575},"验收成本爆炸（不知道要测什么）",{"type":27,"tag":39,"props":1577,"children":1578},{},[1579],{"type":32,"value":1580},"团队协作崩盘（没有闸门、没有回滚）",{"type":27,"tag":28,"props":1582,"children":1583},{},[1584],{"type":32,"value":1585},"这篇文章用一张选择矩阵 + 一套可执行工作流，帮你做到两件事：",{"type":27,"tag":422,"props":1587,"children":1588},{},[1589,1594],{"type":27,"tag":39,"props":1590,"children":1591},{},[1592],{"type":32,"value":1593},"知道什么时候用 Cursor、什么时候用 Copilot、什么时候“纯 VS Code 更快”",{"type":27,"tag":39,"props":1595,"children":1596},{},[1597,1599],{"type":32,"value":1598},"就算用 AI，也能把风险关在笼子里：",{"type":27,"tag":431,"props":1600,"children":1601},{},[1602],{"type":32,"value":1603},"可审查、可验证、可回滚",{"type":27,"tag":492,"props":1605,"children":1606},{},[],{"type":27,"tag":60,"props":1608,"children":1610},{"id":1609},"结论先说三者不是互斥而是分工",[1611],{"type":32,"value":1612},"结论先说：三者不是互斥，而是分工",{"type":27,"tag":28,"props":1614,"children":1615},{},[1616],{"type":32,"value":1617},"你可以把它们看成三层能力：",{"type":27,"tag":35,"props":1619,"children":1620},{},[1621,1630,1640],{"type":27,"tag":39,"props":1622,"children":1623},{},[1624,1628],{"type":27,"tag":431,"props":1625,"children":1626},{},[1627],{"type":32,"value":385},{"type":32,"value":1629},"：编辑器与生态（调试、插件、任务、终端、语言服务）",{"type":27,"tag":39,"props":1631,"children":1632},{},[1633,1638],{"type":27,"tag":431,"props":1634,"children":1635},{},[1636],{"type":32,"value":1637},"Copilot",{"type":32,"value":1639},"：代码补全与局部建议（“我正在写这一行/这一段”）",{"type":27,"tag":39,"props":1641,"children":1642},{},[1643,1647],{"type":27,"tag":431,"props":1644,"children":1645},{},[1646],{"type":32,"value":382},{"type":32,"value":1648},"：以项目为单位的 AI 协作（对话、索引、多文件编辑、规则）",{"type":27,"tag":28,"props":1650,"children":1651},{},[1652],{"type":32,"value":1653},"最常见的误区是：把“局部补全能力”当作“能做架构与多文件落地”。",{"type":27,"tag":492,"props":1655,"children":1656},{},[],{"type":27,"tag":60,"props":1658,"children":1660},{"id":1659},"选择矩阵按任务类型选工具不是按偏好",[1661],{"type":32,"value":1662},"选择矩阵：按任务类型选工具（不是按偏好）",{"type":27,"tag":807,"props":1664,"children":1665},{},[1666],{"type":27,"tag":28,"props":1667,"children":1668},{},[1669],{"type":32,"value":1670},"你只要把自己的任务放进表格，就能得到推荐路径。",{"type":27,"tag":582,"props":1672,"children":1673},{},[1674,1706],{"type":27,"tag":586,"props":1675,"children":1676},{},[1677],{"type":27,"tag":590,"props":1678,"children":1679},{},[1680,1685,1691,1696,1701],{"type":27,"tag":594,"props":1681,"children":1682},{},[1683],{"type":32,"value":1684},"任务类型",{"type":27,"tag":594,"props":1686,"children":1688},{"align":1687},"right",[1689],{"type":32,"value":1690},"风险",{"type":27,"tag":594,"props":1692,"children":1693},{"align":1687},[1694],{"type":32,"value":1695},"验收成本",{"type":27,"tag":594,"props":1697,"children":1698},{},[1699],{"type":32,"value":1700},"更推荐",{"type":27,"tag":594,"props":1702,"children":1703},{},[1704],{"type":32,"value":1705},"为什么",{"type":27,"tag":615,"props":1707,"children":1708},{},[1709,1736,1769,1795,1822,1849],{"type":27,"tag":590,"props":1710,"children":1711},{},[1712,1717,1722,1726,1731],{"type":27,"tag":622,"props":1713,"children":1714},{},[1715],{"type":32,"value":1716},"写一段代码/补一个 if",{"type":27,"tag":622,"props":1718,"children":1719},{"align":1687},[1720],{"type":32,"value":1721},"低",{"type":27,"tag":622,"props":1723,"children":1724},{"align":1687},[1725],{"type":32,"value":1721},{"type":27,"tag":622,"props":1727,"children":1728},{},[1729],{"type":32,"value":1730},"Copilot / Cursor 内联编辑",{"type":27,"tag":622,"props":1732,"children":1733},{},[1734],{"type":32,"value":1735},"局部建议足够，成本最低",{"type":27,"tag":590,"props":1737,"children":1738},{},[1739,1744,1749,1753,1764],{"type":27,"tag":622,"props":1740,"children":1741},{},[1742],{"type":32,"value":1743},"重构一个函数",{"type":27,"tag":622,"props":1745,"children":1746},{"align":1687},[1747],{"type":32,"value":1748},"中",{"type":27,"tag":622,"props":1750,"children":1751},{"align":1687},[1752],{"type":32,"value":1748},{"type":27,"tag":622,"props":1754,"children":1755},{},[1756,1758],{"type":32,"value":1757},"Cursor ",{"type":27,"tag":631,"props":1759,"children":1761},{"className":1760},[],[1762],{"type":32,"value":1763},"内联编辑",{"type":27,"tag":622,"props":1765,"children":1766},{},[1767],{"type":32,"value":1768},"需要解释、需要约束输出",{"type":27,"tag":590,"props":1770,"children":1771},{},[1772,1777,1781,1785,1790],{"type":27,"tag":622,"props":1773,"children":1774},{},[1775],{"type":32,"value":1776},"改一个组件 + 样式",{"type":27,"tag":622,"props":1778,"children":1779},{"align":1687},[1780],{"type":32,"value":1748},{"type":27,"tag":622,"props":1782,"children":1783},{"align":1687},[1784],{"type":32,"value":1748},{"type":27,"tag":622,"props":1786,"children":1787},{},[1788],{"type":32,"value":1789},"Cursor（小范围多文件）",{"type":27,"tag":622,"props":1791,"children":1792},{},[1793],{"type":32,"value":1794},"需要同时改模板与样式",{"type":27,"tag":590,"props":1796,"children":1797},{},[1798,1803,1808,1812,1817],{"type":27,"tag":622,"props":1799,"children":1800},{},[1801],{"type":32,"value":1802},"改 3~5 个文件（组件+api+测试）",{"type":27,"tag":622,"props":1804,"children":1805},{"align":1687},[1806],{"type":32,"value":1807},"高",{"type":27,"tag":622,"props":1809,"children":1810},{"align":1687},[1811],{"type":32,"value":1807},{"type":27,"tag":622,"props":1813,"children":1814},{},[1815],{"type":32,"value":1816},"Cursor Composer + 闸门",{"type":27,"tag":622,"props":1818,"children":1819},{},[1820],{"type":32,"value":1821},"需要计划、验收、回滚",{"type":27,"tag":590,"props":1823,"children":1824},{},[1825,1830,1835,1839,1844],{"type":27,"tag":622,"props":1826,"children":1827},{},[1828],{"type":32,"value":1829},"重写一段架构/引入新依赖",{"type":27,"tag":622,"props":1831,"children":1832},{"align":1687},[1833],{"type":32,"value":1834},"很高",{"type":27,"tag":622,"props":1836,"children":1837},{"align":1687},[1838],{"type":32,"value":1834},{"type":27,"tag":622,"props":1840,"children":1841},{},[1842],{"type":32,"value":1843},"先人脑设计 + VS Code 实现",{"type":27,"tag":622,"props":1845,"children":1846},{},[1847],{"type":32,"value":1848},"AI 易发散，最好先设计再执行",{"type":27,"tag":590,"props":1850,"children":1851},{},[1852,1857,1861,1865,1870],{"type":27,"tag":622,"props":1853,"children":1854},{},[1855],{"type":32,"value":1856},"排查线上问题/性能抖动",{"type":27,"tag":622,"props":1858,"children":1859},{"align":1687},[1860],{"type":32,"value":1807},{"type":27,"tag":622,"props":1862,"children":1863},{"align":1687},[1864],{"type":32,"value":1834},{"type":27,"tag":622,"props":1866,"children":1867},{},[1868],{"type":32,"value":1869},"VS Code + 工具链优先，AI 辅助归纳",{"type":27,"tag":622,"props":1871,"children":1872},{},[1873],{"type":32,"value":1874},"需要证据，不要“猜”",{"type":27,"tag":28,"props":1876,"children":1877},{},[1878],{"type":27,"tag":431,"props":1879,"children":1880},{},[1881],{"type":32,"value":1882},"一句话规则：",{"type":27,"tag":35,"props":1884,"children":1885},{},[1886,1891],{"type":27,"tag":39,"props":1887,"children":1888},{},[1889],{"type":32,"value":1890},"当你的改动可以用“10 条最小回归集”覆盖时，用 Cursor。",{"type":27,"tag":39,"props":1892,"children":1893},{},[1894],{"type":32,"value":1895},"当你的改动无法验证时，先别让 AI 动手。",{"type":27,"tag":492,"props":1897,"children":1898},{},[],{"type":27,"tag":60,"props":1900,"children":1902},{"id":1901},"差异拆解到底差在哪里",[1903],{"type":32,"value":1904},"差异拆解：到底差在哪里？",{"type":27,"tag":825,"props":1906,"children":1908},{"id":1907},"_1-上下文来源补全-vs-项目索引",[1909],{"type":32,"value":1910},"1) 上下文来源：补全 vs 项目索引",{"type":27,"tag":35,"props":1912,"children":1913},{},[1914,1919],{"type":27,"tag":39,"props":1915,"children":1916},{},[1917],{"type":32,"value":1918},"Copilot 更擅长：你正在写的这几行、当前文件的局部上下文",{"type":27,"tag":39,"props":1920,"children":1921},{},[1922],{"type":32,"value":1923},"Cursor 更擅长：项目级索引 + 多文件关联理解",{"type":27,"tag":28,"props":1925,"children":1926},{},[1927],{"type":32,"value":1928},"因此：",{"type":27,"tag":35,"props":1930,"children":1931},{},[1932,1937],{"type":27,"tag":39,"props":1933,"children":1934},{},[1935],{"type":32,"value":1936},"写代码片段：Copilot 速度更快",{"type":27,"tag":39,"props":1938,"children":1939},{},[1940],{"type":32,"value":1941},"改一坨工程：Cursor 更有胜算（但更需要闸门）",{"type":27,"tag":825,"props":1943,"children":1945},{"id":1944},"_2-交互方式你能不能控制范围",[1946],{"type":32,"value":1947},"2) 交互方式：你能不能控制范围",{"type":27,"tag":28,"props":1949,"children":1950},{},[1951],{"type":32,"value":1952},"范围控制的三个层级：",{"type":27,"tag":422,"props":1954,"children":1955},{},[1956,1966,1976],{"type":27,"tag":39,"props":1957,"children":1958},{},[1959,1961],{"type":32,"value":1960},"内联编辑（选中一段）→ ",{"type":27,"tag":431,"props":1962,"children":1963},{},[1964],{"type":32,"value":1965},"最强范围控制",{"type":27,"tag":39,"props":1967,"children":1968},{},[1969,1971],{"type":32,"value":1970},"Composer 多文件（先列文件清单）→ ",{"type":27,"tag":431,"props":1972,"children":1973},{},[1974],{"type":32,"value":1975},"可控但要闸门",{"type":27,"tag":39,"props":1977,"children":1978},{},[1979,1981],{"type":32,"value":1980},"大对话（泛目标）→ ",{"type":27,"tag":431,"props":1982,"children":1983},{},[1984],{"type":32,"value":1985},"最容易跑偏",{"type":27,"tag":825,"props":1987,"children":1989},{"id":1988},"_3-输出形态建议-vs-可审查的变更",[1990],{"type":32,"value":1991},"3) 输出形态：建议 vs 可审查的变更",{"type":27,"tag":28,"props":1993,"children":1994},{},[1995],{"type":32,"value":1996},"最好的 AI 输出不是“给我一段代码”，而是：",{"type":27,"tag":35,"props":1998,"children":1999},{},[2000,2005,2010],{"type":27,"tag":39,"props":2001,"children":2002},{},[2003],{"type":32,"value":2004},"改动摘要（做了什么）",{"type":27,"tag":39,"props":2006,"children":2007},{},[2008],{"type":32,"value":2009},"diff 级别的可审查变更",{"type":27,"tag":39,"props":2011,"children":2012},{},[2013],{"type":32,"value":2014},"验收步骤与回滚方案",{"type":27,"tag":492,"props":2016,"children":2017},{},[],{"type":27,"tag":60,"props":2019,"children":2021},{"id":2020},"一套可落地的团队工作流把风险关住",[2022],{"type":32,"value":2023},"一套可落地的团队工作流（把风险关住）",{"type":27,"tag":28,"props":2025,"children":2026},{},[2027],{"type":32,"value":2028},"下面这套流程，你可以直接写进团队规范：",{"type":27,"tag":825,"props":2030,"children":2032},{"id":2031},"step-1先写任务单geo-友好结构",[2033],{"type":32,"value":2034},"Step 1：先写任务单（GEO 友好结构）",{"type":27,"tag":28,"props":2036,"children":2037},{},[2038],{"type":32,"value":2039},"模板：",{"type":27,"tag":35,"props":2041,"children":2042},{},[2043,2048,2053,2058,2063,2068],{"type":27,"tag":39,"props":2044,"children":2045},{},[2046],{"type":32,"value":2047},"目标：……",{"type":27,"tag":39,"props":2049,"children":2050},{},[2051],{"type":32,"value":2052},"背景：……",{"type":27,"tag":39,"props":2054,"children":2055},{},[2056],{"type":32,"value":2057},"范围：只改这些文件/模块：……",{"type":27,"tag":39,"props":2059,"children":2060},{},[2061],{"type":32,"value":2062},"非目标：不做哪些事情：……",{"type":27,"tag":39,"props":2064,"children":2065},{},[2066],{"type":32,"value":2067},"验收：如何判断完成（可测试/可观察）：……",{"type":27,"tag":39,"props":2069,"children":2070},{},[2071],{"type":32,"value":2072},"回滚：如果失败怎么撤回：……",{"type":27,"tag":825,"props":2074,"children":2076},{"id":2075},"step-2用范围闸门限制-ai",[2077],{"type":32,"value":2078},"Step 2：用“范围闸门”限制 AI",{"type":27,"tag":35,"props":2080,"children":2081},{},[2082,2087],{"type":27,"tag":39,"props":2083,"children":2084},{},[2085],{"type":32,"value":2086},"单文件改动：优先 Cursor 内联编辑",{"type":27,"tag":39,"props":2088,"children":2089},{},[2090],{"type":32,"value":2091},"多文件改动：必须先让 AI 输出“文件清单（≤5）+ 每步验收”",{"type":27,"tag":28,"props":2093,"children":2094},{},[2095],{"type":32,"value":2096},"如果 AI 输出的文件清单超过 5 个：",{"type":27,"tag":35,"props":2098,"children":2099},{},[2100,2105],{"type":27,"tag":39,"props":2101,"children":2102},{},[2103],{"type":32,"value":2104},"不是它太强，是任务太大",{"type":27,"tag":39,"props":2106,"children":2107},{},[2108],{"type":32,"value":2109},"你需要拆任务，而不是继续推进",{"type":27,"tag":825,"props":2111,"children":2113},{"id":2112},"step-3最小回归集10-条",[2114],{"type":32,"value":2115},"Step 3：最小回归集（10 条）",{"type":27,"tag":28,"props":2117,"children":2118},{},[2119,2121,2126],{"type":32,"value":2120},"每次接受改动前必须跑（可参考：",{"type":27,"tag":334,"props":2122,"children":2123},{"href":377},[2124],{"type":32,"value":2125},"Cursor 快捷键速查表",{"type":32,"value":2127}," 里的清单）。",{"type":27,"tag":825,"props":2129,"children":2131},{"id":2130},"step-4回滚策略不用等事故才想",[2132],{"type":32,"value":2133},"Step 4：回滚策略（不用等事故才想）",{"type":27,"tag":28,"props":2135,"children":2136},{},[2137],{"type":32,"value":2138},"回滚最常见的两条路：",{"type":27,"tag":35,"props":2140,"children":2141},{},[2142,2147],{"type":27,"tag":39,"props":2143,"children":2144},{},[2145],{"type":32,"value":2146},"git 回滚 commit",{"type":27,"tag":39,"props":2148,"children":2149},{},[2150],{"type":32,"value":2151},"对关键文件保留前版本（至少能快速恢复）",{"type":27,"tag":28,"props":2153,"children":2154},{},[2155],{"type":32,"value":2156},"你需要做到：任何一轮 AI 改动都能在 5 分钟内撤回。",{"type":27,"tag":492,"props":2158,"children":2159},{},[],{"type":27,"tag":60,"props":2161,"children":2163},{"id":2162},"必交付物对比矩阵可复制",[2164],{"type":32,"value":2165},"必交付物：对比矩阵（可复制）",{"type":27,"tag":28,"props":2167,"children":2168},{},[2169],{"type":32,"value":2170},"下面这张表可以直接贴到你的团队 wiki：",{"type":27,"tag":582,"props":2172,"children":2173},{},[2174,2197],{"type":27,"tag":586,"props":2175,"children":2176},{},[2177],{"type":27,"tag":590,"props":2178,"children":2179},{},[2180,2185,2189,2193],{"type":27,"tag":594,"props":2181,"children":2182},{},[2183],{"type":32,"value":2184},"维度",{"type":27,"tag":594,"props":2186,"children":2187},{},[2188],{"type":32,"value":385},{"type":27,"tag":594,"props":2190,"children":2191},{},[2192],{"type":32,"value":1637},{"type":27,"tag":594,"props":2194,"children":2195},{},[2196],{"type":32,"value":382},{"type":27,"tag":615,"props":2198,"children":2199},{},[2200,2223,2246,2269],{"type":27,"tag":590,"props":2201,"children":2202},{},[2203,2208,2213,2218],{"type":27,"tag":622,"props":2204,"children":2205},{},[2206],{"type":32,"value":2207},"强项",{"type":27,"tag":622,"props":2209,"children":2210},{},[2211],{"type":32,"value":2212},"工具链、调试、生态",{"type":27,"tag":622,"props":2214,"children":2215},{},[2216],{"type":32,"value":2217},"补全与局部建议",{"type":27,"tag":622,"props":2219,"children":2220},{},[2221],{"type":32,"value":2222},"项目上下文、多文件落地",{"type":27,"tag":590,"props":2224,"children":2225},{},[2226,2231,2236,2241],{"type":27,"tag":622,"props":2227,"children":2228},{},[2229],{"type":32,"value":2230},"适合任务",{"type":27,"tag":622,"props":2232,"children":2233},{},[2234],{"type":32,"value":2235},"排查、调试、验证",{"type":27,"tag":622,"props":2237,"children":2238},{},[2239],{"type":32,"value":2240},"写一段、补一段",{"type":27,"tag":622,"props":2242,"children":2243},{},[2244],{"type":32,"value":2245},"改一段、改一组文件",{"type":27,"tag":590,"props":2247,"children":2248},{},[2249,2254,2259,2264],{"type":27,"tag":622,"props":2250,"children":2251},{},[2252],{"type":32,"value":2253},"最大风险",{"type":27,"tag":622,"props":2255,"children":2256},{},[2257],{"type":32,"value":2258},"无",{"type":27,"tag":622,"props":2260,"children":2261},{},[2262],{"type":32,"value":2263},"过度依赖建议",{"type":27,"tag":622,"props":2265,"children":2266},{},[2267],{"type":32,"value":2268},"范围漂移、多文件回归",{"type":27,"tag":590,"props":2270,"children":2271},{},[2272,2277,2282,2287],{"type":27,"tag":622,"props":2273,"children":2274},{},[2275],{"type":32,"value":2276},"必须搭配",{"type":27,"tag":622,"props":2278,"children":2279},{},[2280],{"type":32,"value":2281},"规范与检查",{"type":27,"tag":622,"props":2283,"children":2284},{},[2285],{"type":32,"value":2286},"代码评审",{"type":27,"tag":622,"props":2288,"children":2289},{},[2290],{"type":32,"value":2291},"闸门 + 最小回归集",{"type":27,"tag":492,"props":2293,"children":2294},{},[],{"type":27,"tag":60,"props":2296,"children":2298},{"id":2297},"失败案例多文件看似成功实际埋雷",[2299],{"type":32,"value":2300},"失败案例：多文件“看似成功”，实际埋雷",{"type":27,"tag":28,"props":2302,"children":2303},{},[2304,2309],{"type":27,"tag":431,"props":2305,"children":2306},{},[2307],{"type":32,"value":2308},"现象",{"type":32,"value":2310},"：AI 说“我已经把所有地方都改了”，你也接受了，结果上线后 404 或样式错位。",{"type":27,"tag":28,"props":2312,"children":2313},{},[2314,2319],{"type":27,"tag":431,"props":2315,"children":2316},{},[2317],{"type":32,"value":2318},"复现条件",{"type":32,"value":1131},{"type":27,"tag":35,"props":2321,"children":2322},{},[2323,2328,2333],{"type":27,"tag":39,"props":2324,"children":2325},{},[2326],{"type":32,"value":2327},"你给了一个大目标（例如“把所有按钮统一成主题色”）",{"type":27,"tag":39,"props":2329,"children":2330},{},[2331],{"type":32,"value":2332},"它改了组件、样式、甚至主题配置",{"type":27,"tag":39,"props":2334,"children":2335},{},[2336],{"type":32,"value":2337},"你没有按页面模块走一遍，直接合并",{"type":27,"tag":28,"props":2339,"children":2340},{},[2341,2346],{"type":27,"tag":431,"props":2342,"children":2343},{},[2344],{"type":32,"value":2345},"根因",{"type":32,"value":1131},{"type":27,"tag":35,"props":2348,"children":2349},{},[2350],{"type":27,"tag":39,"props":2351,"children":2352},{},[2353],{"type":32,"value":2354},"改动范围大，但验收仍按“小改动”的方式做（只看一处）",{"type":27,"tag":28,"props":2356,"children":2357},{},[2358,2363],{"type":27,"tag":431,"props":2359,"children":2360},{},[2361],{"type":32,"value":2362},"修复",{"type":32,"value":1131},{"type":27,"tag":35,"props":2365,"children":2366},{},[2367,2372,2377],{"type":27,"tag":39,"props":2368,"children":2369},{},[2370],{"type":32,"value":2371},"强制把任务拆成“模块级目标”：Hero、Feature、Pricing、Form",{"type":27,"tag":39,"props":2373,"children":2374},{},[2375],{"type":32,"value":2376},"每个模块改完就验收一次",{"type":27,"tag":39,"props":2378,"children":2379},{},[2380],{"type":32,"value":2381},"验收通过再进入下一个模块",{"type":27,"tag":492,"props":2383,"children":2384},{},[],{"type":27,"tag":60,"props":2386,"children":2388},{"id":2387},"faq",[2389],{"type":32,"value":2390},"FAQ",{"type":27,"tag":825,"props":2392,"children":2394},{"id":2393},"q1我已经用了-cursor为什么还要用-copilot",[2395],{"type":32,"value":2396},"Q1：我已经用了 Cursor，为什么还要用 Copilot？",{"type":27,"tag":28,"props":2398,"children":2399},{},[2400],{"type":32,"value":2401},"因为“补全”这种高频低风险任务，Copilot 的交互成本更低；Cursor 更适合需要解释与约束的改动。",{"type":27,"tag":825,"props":2403,"children":2405},{"id":2404},"q2什么时候应该完全不用-ai",[2406],{"type":32,"value":2407},"Q2：什么时候应该完全不用 AI？",{"type":27,"tag":28,"props":2409,"children":2410},{},[2411],{"type":32,"value":2412},"当你无法定义验收标准时。比如“更高级”“更好看”这种目标，先做信息结构与设计规则，再让 AI 帮你落地局部。",{"type":27,"tag":492,"props":2414,"children":2415},{},[],{"type":27,"tag":60,"props":2417,"children":2419},{"id":2418},"延伸阅读",[2420],{"type":32,"value":2418},{"type":27,"tag":35,"props":2422,"children":2423},{},[2424,2433,2442,2451],{"type":27,"tag":39,"props":2425,"children":2426},{},[2427,2429],{"type":32,"value":2428},"Cursor 入门：",{"type":27,"tag":334,"props":2430,"children":2431},{"href":465},[2432],{"type":32,"value":468},{"type":27,"tag":39,"props":2434,"children":2435},{},[2436,2438],{"type":32,"value":2437},"Cursor 进阶：",{"type":27,"tag":334,"props":2439,"children":2440},{"href":476},[2441],{"type":32,"value":479},{"type":27,"tag":39,"props":2443,"children":2444},{},[2445,2447],{"type":32,"value":2446},"规则配置：",{"type":27,"tag":334,"props":2448,"children":2449},{"href":487},[2450],{"type":32,"value":490},{"type":27,"tag":39,"props":2452,"children":2453},{},[2454,2456],{"type":32,"value":2455},"Copilot 实战：",{"type":27,"tag":334,"props":2457,"children":2459},{"href":2458},"/topics/ai/github-copilot-tips",[2460],{"type":32,"value":2461},"GitHub Copilot 实用技巧",{"title":7,"searchDepth":359,"depth":359,"links":2463},[2464,2465,2466,2471,2477,2478,2479,2483],{"id":1609,"depth":362,"text":1612},{"id":1659,"depth":362,"text":1662},{"id":1901,"depth":362,"text":1904,"children":2467},[2468,2469,2470],{"id":1907,"depth":359,"text":1910},{"id":1944,"depth":359,"text":1947},{"id":1988,"depth":359,"text":1991},{"id":2020,"depth":362,"text":2023,"children":2472},[2473,2474,2475,2476],{"id":2031,"depth":359,"text":2034},{"id":2075,"depth":359,"text":2078},{"id":2112,"depth":359,"text":2115},{"id":2130,"depth":359,"text":2133},{"id":2162,"depth":362,"text":2165},{"id":2297,"depth":362,"text":2300},{"id":2387,"depth":362,"text":2390,"children":2480},[2481,2482],{"id":2393,"depth":359,"text":2396},{"id":2404,"depth":359,"text":2407},{"id":2418,"depth":362,"text":2418},"content:topics:ai:cursor-vs-copilot-vscode-workflow.md","topics/ai/cursor-vs-copilot-vscode-workflow.md","topics/ai/cursor-vs-copilot-vscode-workflow",{"_path":2488,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":2489,"description":2490,"date":2491,"topic":5,"author":11,"tags":2492,"image":2497,"featured":2498,"readingTime":1550,"body":2499,"_type":369,"_id":3148,"_source":371,"_file":3149,"_stem":3150,"_extension":374},"/topics/ai/ai-debugging-troubleshooting-guide","AI 辅助调试与问题排查：让 AI 成为你的调试搭档","深入探讨如何利用 AI 工具提升调试效率，包括错误信息分析、日志解读、性能问题定位、复杂 bug 排查等实战场景，构建 AI 驱动的调试工作流。","2026-01-18",[2493,2494,2495,386,2496],"AI 调试","问题排查","Debug","错误处理","/images/topics/ai/ai-debugging-guide.jpg",true,{"type":24,"children":2500,"toc":3119},[2501,2507,2513,2518,2523,2528,2534,2540,2545,2553,2581,2589,2612,2618,2629,2638,2646,2654,2687,2695,2725,2738,2746,2751,2759,2767,2778,2784,2792,2803,2811,2820,2826,2832,2837,2846,2852,2857,2866,2872,2878,2887,2893,2902,2908,2919,2925,2931,2940,2946,2955,2961,2967,2975,2981,2990,2998,3006,3009,3015,3020,3039,3051,3054,3060,3065,3074,3079,3082,3088,3093,3111],{"type":27,"tag":60,"props":2502,"children":2504},{"id":2503},"ai-辅助调试与问题排查",[2505],{"type":32,"value":2506},"AI 辅助调试与问题排查",{"type":27,"tag":60,"props":2508,"children":2510},{"id":2509},"引言调试的痛与-ai-的解药",[2511],{"type":32,"value":2512},"引言：调试的痛与 AI 的解药",{"type":27,"tag":28,"props":2514,"children":2515},{},[2516],{"type":32,"value":2517},"调试是每个程序员的日常，也是最消耗时间和精力的工作之一。我们都有过这样的经历：盯着一个莫名其妙的错误信息，翻遍 Stack Overflow，尝试各种方案，几个小时后才发现是一个愚蠢的拼写错误。",{"type":27,"tag":28,"props":2519,"children":2520},{},[2521],{"type":32,"value":2522},"AI 工具的出现，正在改变调试的方式。不是替代你的思考，而是加速你的分析过程——帮你快速理解错误、缩小排查范围、验证假设。",{"type":27,"tag":28,"props":2524,"children":2525},{},[2526],{"type":32,"value":2527},"这篇文章分享我在实际项目中使用 AI 辅助调试的经验和方法论。",{"type":27,"tag":60,"props":2529,"children":2531},{"id":2530},"第一部分建立-ai-调试的思维模型",[2532],{"type":32,"value":2533},"第一部分：建立 AI 调试的思维模型",{"type":27,"tag":825,"props":2535,"children":2537},{"id":2536},"_11-ai-在调试中的角色",[2538],{"type":32,"value":2539},"1.1 AI 在调试中的角色",{"type":27,"tag":28,"props":2541,"children":2542},{},[2543],{"type":32,"value":2544},"把 AI 想象成一个经验丰富但不了解你项目的高级工程师。它：",{"type":27,"tag":28,"props":2546,"children":2547},{},[2548],{"type":27,"tag":431,"props":2549,"children":2550},{},[2551],{"type":32,"value":2552},"擅长的事情：",{"type":27,"tag":35,"props":2554,"children":2555},{},[2556,2561,2566,2571,2576],{"type":27,"tag":39,"props":2557,"children":2558},{},[2559],{"type":32,"value":2560},"解读错误信息的含义",{"type":27,"tag":39,"props":2562,"children":2563},{},[2564],{"type":32,"value":2565},"提供可能的原因列表",{"type":27,"tag":39,"props":2567,"children":2568},{},[2569],{"type":32,"value":2570},"给出排查方向建议",{"type":27,"tag":39,"props":2572,"children":2573},{},[2574],{"type":32,"value":2575},"解释复杂的技术概念",{"type":27,"tag":39,"props":2577,"children":2578},{},[2579],{"type":32,"value":2580},"生成调试代码片段",{"type":27,"tag":28,"props":2582,"children":2583},{},[2584],{"type":27,"tag":431,"props":2585,"children":2586},{},[2587],{"type":32,"value":2588},"不擅长的事情：",{"type":27,"tag":35,"props":2590,"children":2591},{},[2592,2597,2602,2607],{"type":27,"tag":39,"props":2593,"children":2594},{},[2595],{"type":32,"value":2596},"了解你的业务逻辑",{"type":27,"tag":39,"props":2598,"children":2599},{},[2600],{"type":32,"value":2601},"知道你的代码历史",{"type":27,"tag":39,"props":2603,"children":2604},{},[2605],{"type":32,"value":2606},"理解项目特定的约定",{"type":27,"tag":39,"props":2608,"children":2609},{},[2610],{"type":32,"value":2611},"做出架构级判断",{"type":27,"tag":825,"props":2613,"children":2615},{"id":2614},"_12-有效提问的结构",[2616],{"type":32,"value":2617},"1.2 有效提问的结构",{"type":27,"tag":2619,"props":2620,"children":2624},"pre",{"code":2621,"language":369,"meta":7,"className":2622},"## 高效的调试提问模板\n\n**问题描述**\n[简洁描述遇到的问题]\n\n**错误信息**\n",[2623],"language-markdown",[2625],{"type":27,"tag":631,"props":2626,"children":2627},{"__ignoreMap":7},[2628],{"type":32,"value":2621},{"type":27,"tag":28,"props":2630,"children":2631},{},[2632],{"type":27,"tag":2633,"props":2634,"children":2635},"span",{},[2636],{"type":32,"value":2637},"完整的错误信息，不要截断",{"type":27,"tag":2619,"props":2639,"children":2641},{"code":2640},"\n**相关代码**\n```javascript\n[精简但完整的相关代码]\n",[2642],{"type":27,"tag":631,"props":2643,"children":2644},{"__ignoreMap":7},[2645],{"type":32,"value":2640},{"type":27,"tag":28,"props":2647,"children":2648},{},[2649],{"type":27,"tag":431,"props":2650,"children":2651},{},[2652],{"type":32,"value":2653},"环境信息",{"type":27,"tag":35,"props":2655,"children":2656},{},[2657,2667,2677],{"type":27,"tag":39,"props":2658,"children":2659},{},[2660,2662],{"type":32,"value":2661},"运行环境：",{"type":27,"tag":2633,"props":2663,"children":2664},{},[2665],{"type":32,"value":2666},"Node 版本/浏览器版本",{"type":27,"tag":39,"props":2668,"children":2669},{},[2670,2672],{"type":32,"value":2671},"框架版本：",{"type":27,"tag":2633,"props":2673,"children":2674},{},[2675],{"type":32,"value":2676},"相关框架版本",{"type":27,"tag":39,"props":2678,"children":2679},{},[2680,2682],{"type":32,"value":2681},"操作系统：",{"type":27,"tag":2633,"props":2683,"children":2684},{},[2685],{"type":32,"value":2686},"如果相关",{"type":27,"tag":28,"props":2688,"children":2689},{},[2690],{"type":27,"tag":431,"props":2691,"children":2692},{},[2693],{"type":32,"value":2694},"已尝试的方案",{"type":27,"tag":35,"props":2696,"children":2697},{},[2698,2712],{"type":27,"tag":39,"props":2699,"children":2700},{},[2701,2706,2707],{"type":27,"tag":2633,"props":2702,"children":2703},{},[2704],{"type":32,"value":2705},"方案1",{"type":32,"value":1131},{"type":27,"tag":2633,"props":2708,"children":2709},{},[2710],{"type":32,"value":2711},"结果",{"type":27,"tag":39,"props":2713,"children":2714},{},[2715,2720,2721],{"type":27,"tag":2633,"props":2716,"children":2717},{},[2718],{"type":32,"value":2719},"方案2",{"type":32,"value":1131},{"type":27,"tag":2633,"props":2722,"children":2723},{},[2724],{"type":32,"value":2711},{"type":27,"tag":28,"props":2726,"children":2727},{},[2728,2733],{"type":27,"tag":431,"props":2729,"children":2730},{},[2731],{"type":32,"value":2732},"期望的结果",{"type":27,"tag":2633,"props":2734,"children":2735},{},[2736],{"type":32,"value":2737},"描述期望的行为",{"type":27,"tag":2619,"props":2739,"children":2741},{"code":2740},"\n### 1.3 分级调试策略\n\n",[2742],{"type":27,"tag":631,"props":2743,"children":2744},{"__ignoreMap":7},[2745],{"type":32,"value":2740},{"type":27,"tag":28,"props":2747,"children":2748},{},[2749],{"type":32,"value":2750},"┌───────────────────────────────────────────────────────────┐\n│ AI 辅助调试决策树 │\n├───────────────────────────────────────────────────────────┤\n│ │\n│ Level 1：简单错误（5分钟内解决） │\n│ ├── 语法错误、拼写错误 │\n│ ├── 方法：直接复制错误信息给 AI │\n│ └── 工具：Copilot Chat / ChatGPT │\n│ │\n│ Level 2：中等复杂度（30分钟内解决） │\n│ ├── 类型错误、逻辑错误、API 使用错误 │\n│ ├── 方法：提供错误信息 + 相关代码 + 上下文 │\n│ └── 工具：Cursor Chat / Claude │\n│ │\n│ Level 3：复杂问题（需要深入分析） │\n│ ├── 竞态条件、内存泄漏、性能问题 │\n│ ├── 方法：详细描述场景 + 提供多个文件 + 讨论 │\n│ └── 工具：Cursor Composer / 专门的 AI 会话 │\n│ │\n│ Level 4：架构级问题 │\n│ ├── 设计缺陷、技术债务 │\n│ ├── 方法：AI 辅助分析 + 人工判断 │\n│ └── 工具：与团队讨论 + AI 作为顾问 │\n│ │\n└───────────────────────────────────────────────────────────┘",{"type":27,"tag":2619,"props":2752,"children":2754},{"code":2753},"\n## 第二部分：错误信息分析\n\n### 2.1 前端错误分析\n\n**场景 1：React 错误边界触发**\n\n```typescript\n// 错误信息：\n// Error: Hydration failed because the initial UI does not match \n// what was rendered on the server.\n\n// 提问方式：\n/**\n * 我在 Next.js 14 App Router 项目中遇到这个错误：\n * \n * Error: Hydration failed because the initial UI does not match \n * what was rendered on the server.\n * \n * 相关代码：\n */\nfunction UserStatus() {\n const [isLoggedIn, setIsLoggedIn] = useState(false);\n \n useEffect(() => {\n setIsLoggedIn(localStorage.getItem('token') !== null);\n }, []);\n \n return \u003Cdiv>{isLoggedIn ? '已登录' : '未登录'}\u003C/div>;\n}\n\n// AI 会分析出：\n// 1. 服务端渲染时 localStorage 不可用，默认 false\n// 2. 客户端 hydration 时可能是 true\n// 3. 导致服务端和客户端渲染结果不一致\n\n// AI 建议的解决方案：\nfunction UserStatus() {\n const [isLoggedIn, setIsLoggedIn] = useState\u003Cboolean | null>(null);\n \n useEffect(() => {\n setIsLoggedIn(localStorage.getItem('token') !== null);\n }, []);\n \n // 初始状态显示加载中，避免 hydration 不匹配\n if (isLoggedIn === null) {\n return \u003Cdiv>加载中...\u003C/div>;\n }\n \n return \u003Cdiv>{isLoggedIn ? '已登录' : '未登录'}\u003C/div>;\n}\n",[2755],{"type":27,"tag":631,"props":2756,"children":2757},{"__ignoreMap":7},[2758],{"type":32,"value":2753},{"type":27,"tag":28,"props":2760,"children":2761},{},[2762],{"type":27,"tag":431,"props":2763,"children":2764},{},[2765],{"type":32,"value":2766},"场景 2：Vue 响应式警告",{"type":27,"tag":2619,"props":2768,"children":2773},{"code":2769,"language":2770,"meta":7,"className":2771},"// 警告信息：\n// [Vue warn]: Property \"xxx\" was accessed during render but is not \n// defined on instance.\n\n// 提问方式：\n/**\n * Vue 3 项目中出现这个警告：\n * [Vue warn]: Property \"userInfo\" was accessed during render \n * but is not defined on instance.\n * \n * 组件代码：\n */\n\u003Ctemplate>\n \u003Cdiv>{{ userInfo.name }}\u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nconst { data: userInfo } = await useFetch('/api/user');\n\u003C/script>\n\n// AI 分析：\n// 1. useFetch 是异步的，初始渲染时 userInfo 可能是 undefined\n// 2. 直接访问 userInfo.name 会报错\n\n// AI 建议：\n\u003Ctemplate>\n \u003Cdiv v-if=\"userInfo\">{{ userInfo.name }}\u003C/div>\n \u003Cdiv v-else>加载中...\u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nconst { data: userInfo, pending } = await useFetch('/api/user');\n\u003C/script>\n","typescript",[2772],"language-typescript",[2774],{"type":27,"tag":631,"props":2775,"children":2776},{"__ignoreMap":7},[2777],{"type":32,"value":2769},{"type":27,"tag":825,"props":2779,"children":2781},{"id":2780},"_22-后端错误分析",[2782],{"type":32,"value":2783},"2.2 后端错误分析",{"type":27,"tag":28,"props":2785,"children":2786},{},[2787],{"type":27,"tag":431,"props":2788,"children":2789},{},[2790],{"type":32,"value":2791},"场景 1：Node.js 内存问题",{"type":27,"tag":2619,"props":2793,"children":2798},{"code":2794,"language":2795,"meta":7,"className":2796},"// 错误信息：\n// FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - \n// JavaScript heap out of memory\n\n// 提问方式（包含上下文）：\n/**\n * Node.js 服务运行几小时后崩溃，错误信息：\n * FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - \n * JavaScript heap out of memory\n * \n * 服务功能：处理 CSV 文件上传，每次约 100MB\n * \n * 处理代码：\n */\nasync function processCSV(filePath) {\n const content = fs.readFileSync(filePath, 'utf-8');\n const rows = content.split('\\n');\n const results = [];\n \n for (const row of rows) {\n const processed = await processRow(row);\n results.push(processed);\n }\n \n return results;\n}\n\n// AI 分析会指出：\n// 1. 一次性读取整个文件到内存\n// 2. 所有处理结果累积在 results 数组\n// 3. 建议使用流式处理\n\n// AI 提供的优化方案：\nconst { createReadStream } = require('fs');\nconst { createInterface } = require('readline');\n\nasync function processCSVStream(filePath, onRow) {\n const fileStream = createReadStream(filePath);\n const rl = createInterface({\n input: fileStream,\n crlfDelay: Infinity\n });\n \n let count = 0;\n for await (const line of rl) {\n await onRow(line);\n count++;\n \n // 每处理 1000 行，给 GC 机会运行\n if (count % 1000 === 0) {\n await new Promise(r => setImmediate(r));\n }\n }\n}\n","javascript",[2797],"language-javascript",[2799],{"type":27,"tag":631,"props":2800,"children":2801},{"__ignoreMap":7},[2802],{"type":32,"value":2794},{"type":27,"tag":28,"props":2804,"children":2805},{},[2806],{"type":27,"tag":431,"props":2807,"children":2808},{},[2809],{"type":32,"value":2810},"场景 2：数据库连接问题",{"type":27,"tag":2619,"props":2812,"children":2815},{"code":2813,"language":2770,"meta":7,"className":2814},"// 错误信息：\n// Error: Connection pool exhausted - \n// max connections (10) already in use\n\n// 提问方式：\n/**\n * PostgreSQL 连接池耗尽错误，高并发时出现：\n * Error: Connection pool exhausted\n * \n * 当前配置：\n * - max connections: 10\n * - 并发请求: 约 100/秒\n * \n * 数据库调用代码：\n */\nasync function getUserData(userId: string) {\n const client = await pool.connect();\n try {\n const user = await client.query('SELECT * FROM users WHERE id = $1', [userId]);\n const orders = await client.query('SELECT * FROM orders WHERE user_id = $1', [userId]);\n const payments = await client.query('SELECT * FROM payments WHERE user_id = $1', [userId]);\n return { user: user.rows[0], orders: orders.rows, payments: payments.rows };\n } finally {\n client.release();\n }\n}\n\n// AI 会分析出多个可能原因并给出综合方案\n",[2772],[2816],{"type":27,"tag":631,"props":2817,"children":2818},{"__ignoreMap":7},[2819],{"type":32,"value":2813},{"type":27,"tag":60,"props":2821,"children":2823},{"id":2822},"第三部分日志分析与问题定位",[2824],{"type":32,"value":2825},"第三部分：日志分析与问题定位",{"type":27,"tag":825,"props":2827,"children":2829},{"id":2828},"_31-结构化日志分析",[2830],{"type":32,"value":2831},"3.1 结构化日志分析",{"type":27,"tag":28,"props":2833,"children":2834},{},[2835],{"type":32,"value":2836},"当面对大量日志时，让 AI 帮你快速定位问题：",{"type":27,"tag":2619,"props":2838,"children":2841},{"code":2839,"language":2795,"meta":7,"className":2840},"// 提问示例：\n/**\n * 分析以下日志，找出导致请求失败的原因：\n * \n * 日志片段：\n */\nconst logs = `\n2024-01-15 10:23:45.123 INFO [req-abc123] 收到请求 POST /api/order\n2024-01-15 10:23:45.125 DEBUG [req-abc123] 用户认证通过 userId=u001\n2024-01-15 10:23:45.130 DEBUG [req-abc123] 开始库存检查 productId=p001\n2024-01-15 10:23:45.145 DEBUG [req-abc123] 库存检查通过 available=50\n2024-01-15 10:23:45.150 DEBUG [req-abc123] 开始创建订单\n2024-01-15 10:23:45.200 DEBUG [req-abc123] 数据库连接获取成功\n2024-01-15 10:23:45.250 ERROR [req-abc123] 订单创建失败 error=\"deadlock detected\"\n2024-01-15 10:23:45.251 WARN [req-abc123] 事务回滚\n2024-01-15 10:23:45.255 INFO [req-abc123] 响应 500 耗时 132ms\n`;\n\n// AI 分析结果会包括：\n// 1. 问题定位：数据库死锁\n// 2. 可能原因：并发订单创建导致锁竞争\n// 3. 排查建议：检查事务隔离级别、锁顺序\n",[2797],[2842],{"type":27,"tag":631,"props":2843,"children":2844},{"__ignoreMap":7},[2845],{"type":32,"value":2839},{"type":27,"tag":825,"props":2847,"children":2849},{"id":2848},"_32-创建调试日志",[2850],{"type":32,"value":2851},"3.2 创建调试日志",{"type":27,"tag":28,"props":2853,"children":2854},{},[2855],{"type":32,"value":2856},"让 AI 帮你生成调试用的日志代码：",{"type":27,"tag":2619,"props":2858,"children":2861},{"code":2859,"language":2770,"meta":7,"className":2860},"// 请求：\n// \"为这个函数添加详细的调试日志，包括入参、关键步骤、耗时和结果\"\n\n// 原代码：\nasync function processOrder(order: Order): Promise\u003COrderResult> {\n const inventory = await checkInventory(order.items);\n const payment = await processPayment(order.userId, order.total);\n const result = await createOrder(order, payment.transactionId);\n return result;\n}\n\n// AI 生成的带日志版本：\nasync function processOrder(order: Order): Promise\u003COrderResult> {\n const requestId = generateRequestId();\n const startTime = performance.now();\n \n logger.info({\n requestId,\n event: 'order_processing_start',\n orderId: order.id,\n userId: order.userId,\n itemCount: order.items.length,\n total: order.total\n });\n \n try {\n // 库存检查\n const inventoryStart = performance.now();\n const inventory = await checkInventory(order.items);\n logger.debug({\n requestId,\n event: 'inventory_check_complete',\n duration: performance.now() - inventoryStart,\n available: inventory.allAvailable\n });\n \n // 支付处理\n const paymentStart = performance.now();\n const payment = await processPayment(order.userId, order.total);\n logger.debug({\n requestId,\n event: 'payment_complete',\n duration: performance.now() - paymentStart,\n transactionId: payment.transactionId\n });\n \n // 创建订单\n const createStart = performance.now();\n const result = await createOrder(order, payment.transactionId);\n logger.debug({\n requestId,\n event: 'order_created',\n duration: performance.now() - createStart,\n resultOrderId: result.orderId\n });\n \n logger.info({\n requestId,\n event: 'order_processing_complete',\n duration: performance.now() - startTime,\n success: true\n });\n \n return result;\n } catch (error) {\n logger.error({\n requestId,\n event: 'order_processing_failed',\n duration: performance.now() - startTime,\n error: error.message,\n stack: error.stack\n });\n throw error;\n }\n}\n",[2772],[2862],{"type":27,"tag":631,"props":2863,"children":2864},{"__ignoreMap":7},[2865],{"type":32,"value":2859},{"type":27,"tag":60,"props":2867,"children":2869},{"id":2868},"第四部分性能问题排查",[2870],{"type":32,"value":2871},"第四部分：性能问题排查",{"type":27,"tag":825,"props":2873,"children":2875},{"id":2874},"_41-前端性能分析",[2876],{"type":32,"value":2877},"4.1 前端性能分析",{"type":27,"tag":2619,"props":2879,"children":2882},{"code":2880,"language":2770,"meta":7,"className":2881},"// 场景：页面加载慢，需要分析原因\n\n// 提问方式：\n/**\n * 页面首屏加载需要 5 秒，以下是 Performance API 数据，\n * 请分析性能瓶颈：\n */\nconst performanceData = {\n // Navigation Timing\n dns: 50, // DNS 查询\n tcp: 100, // TCP 连接\n ttfb: 800, // 首字节时间\n download: 200, // 文档下载\n domParsing: 300, // DOM 解析\n domContentLoaded: 1500,\n load: 5000,\n \n // Resource Timing (主要资源)\n resources: [\n { name: 'main.js', size: '2.5MB', duration: 1200 },\n { name: 'vendor.js', size: '1.8MB', duration: 900 },\n { name: 'styles.css', size: '500KB', duration: 300 },\n { name: 'hero-image.jpg', size: '3MB', duration: 1500 },\n ],\n \n // Long Tasks\n longTasks: [\n { startTime: 1600, duration: 800, name: 'script-evaluation' },\n { startTime: 2500, duration: 400, name: 'layout' }\n ]\n};\n\n// AI 会分析出：\n// 1. JS bundle 过大（4.3MB），需要代码分割\n// 2. 图片未优化（3MB 的 hero 图片）\n// 3. 存在长任务阻塞主线程\n// 并给出具体优化建议\n",[2772],[2883],{"type":27,"tag":631,"props":2884,"children":2885},{"__ignoreMap":7},[2886],{"type":32,"value":2880},{"type":27,"tag":825,"props":2888,"children":2890},{"id":2889},"_42-内存泄漏排查",[2891],{"type":32,"value":2892},"4.2 内存泄漏排查",{"type":27,"tag":2619,"props":2894,"children":2897},{"code":2895,"language":2770,"meta":7,"className":2896},"// 场景：应用运行一段时间后变卡\n\n// 提问方式：\n/**\n * React 应用运行一段时间后内存持续增长，以下是 Heap Snapshot 对比：\n * \n * 初始状态：50MB\n * 运行 1 小时后：150MB\n * 运行 2 小时后：280MB\n * \n * Retained objects 增长最快的：\n * - (closure) - 增长 50MB\n * - HTMLDivElement - 增长 30MB\n * - Array - 增长 20MB\n * \n * 可疑代码：\n */\nfunction DataDashboard() {\n const [data, setData] = useState([]);\n const chartRef = useRef(null);\n \n useEffect(() => {\n // 每秒刷新数据\n const interval = setInterval(async () => {\n const newData = await fetchLatestData();\n setData(prev => [...prev, ...newData]); // 数据不断累积\n }, 1000);\n \n // 初始化图表\n const chart = new Chart(chartRef.current, {\n // 配置...\n });\n \n // 没有 cleanup！\n }, []);\n \n return \u003Ccanvas ref={chartRef} />;\n}\n\n// AI 会指出：\n// 1. interval 没有清理\n// 2. Chart 实例没有销毁\n// 3. data 无限增长\n// 并提供修复代码\n",[2772],[2898],{"type":27,"tag":631,"props":2899,"children":2900},{"__ignoreMap":7},[2901],{"type":32,"value":2895},{"type":27,"tag":825,"props":2903,"children":2905},{"id":2904},"_43-数据库查询优化",[2906],{"type":32,"value":2907},"4.3 数据库查询优化",{"type":27,"tag":2619,"props":2909,"children":2914},{"code":2910,"language":2911,"meta":7,"className":2912},"-- 场景：查询很慢，让 AI 分析执行计划\n\n-- 提问方式：\n-- 以下查询在数据量大时很慢（orders 表 1000 万行），\n-- 执行计划如下，请分析并优化：\n\nEXPLAIN ANALYZE\nSELECT o.*, u.name, u.email\nFROM orders o\nJOIN users u ON o.user_id = u.id\nWHERE o.status = 'pending'\n AND o.created_at > '2024-01-01'\nORDER BY o.created_at DESC\nLIMIT 20;\n\n-- 执行计划：\n/*\nSort (cost=156847.23..157847.23 rows=400000 width=250)\n Sort Key: o.created_at DESC\n -> Hash Join (cost=1500.00..89847.23 rows=400000 width=250)\n Hash Cond: (o.user_id = u.id)\n -> Seq Scan on orders o (cost=0.00..85000.00 rows=400000)\n Filter: ((status = 'pending') AND (created_at > '2024-01-01'))\n -> Hash (cost=1000.00..1000.00 rows=50000 width=100)\n -> Seq Scan on users u (cost=0.00..1000.00 rows=50000)\nPlanning Time: 0.5 ms\nExecution Time: 3500 ms\n*/\n\n-- AI 会分析出问题并建议：\n-- 1. orders 表全表扫描 - 需要复合索引\n-- 2. 建议创建索引：\nCREATE INDEX idx_orders_status_created ON orders(status, created_at DESC);\n\n-- 3. 如果 status 选择性不高，考虑部分索引：\nCREATE INDEX idx_orders_pending ON orders(created_at DESC) \nWHERE status = 'pending';\n","sql",[2913],"language-sql",[2915],{"type":27,"tag":631,"props":2916,"children":2917},{"__ignoreMap":7},[2918],{"type":32,"value":2910},{"type":27,"tag":60,"props":2920,"children":2922},{"id":2921},"第五部分复杂-bug-排查",[2923],{"type":32,"value":2924},"第五部分：复杂 Bug 排查",{"type":27,"tag":825,"props":2926,"children":2928},{"id":2927},"_51-竞态条件",[2929],{"type":32,"value":2930},"5.1 竞态条件",{"type":27,"tag":2619,"props":2932,"children":2935},{"code":2933,"language":2770,"meta":7,"className":2934},"// 场景：偶发的数据不一致问题\n\n// 提问方式：\n/**\n * 用户反馈偶尔看到错误的账户余额，但刷新后正常。\n * 怀疑是竞态条件，以下是相关代码：\n */\nasync function updateBalance(userId: string, amount: number) {\n // 读取当前余额\n const user = await db.users.findOne({ id: userId });\n const newBalance = user.balance + amount;\n \n // 更新余额\n await db.users.update({ id: userId }, { balance: newBalance });\n \n // 记录交易\n await db.transactions.create({\n userId,\n amount,\n balanceAfter: newBalance,\n createdAt: new Date()\n });\n \n return newBalance;\n}\n\n// 并发调用场景：\n// 用户同时发起两笔交易：+100 和 -50\n// 期望结果：原余额 1000 → 1050\n// 实际可能：原余额 1000 → 1100 或 950\n\n// AI 会分析竞态条件并提供解决方案：\nasync function updateBalanceAtomic(userId: string, amount: number) {\n // 方案 1：使用数据库原子操作\n const result = await db.users.findOneAndUpdate(\n { id: userId },\n { $inc: { balance: amount } },\n { returnDocument: 'after' }\n );\n \n await db.transactions.create({\n userId,\n amount,\n balanceAfter: result.balance,\n createdAt: new Date()\n });\n \n return result.balance;\n}\n\n// 方案 2：使用乐观锁\nasync function updateBalanceOptimistic(userId: string, amount: number) {\n const maxRetries = 3;\n \n for (let i = 0; i \u003C maxRetries; i++) {\n const user = await db.users.findOne({ id: userId });\n const newBalance = user.balance + amount;\n \n const updated = await db.users.updateOne(\n { id: userId, version: user.version },\n { balance: newBalance, version: user.version + 1 }\n );\n \n if (updated.modifiedCount === 1) {\n await db.transactions.create({...});\n return newBalance;\n }\n \n // 版本冲突，重试\n await sleep(10 * (i + 1));\n }\n \n throw new Error('Update failed after retries');\n}\n",[2772],[2936],{"type":27,"tag":631,"props":2937,"children":2938},{"__ignoreMap":7},[2939],{"type":32,"value":2933},{"type":27,"tag":825,"props":2941,"children":2943},{"id":2942},"_52-分布式系统问题",[2944],{"type":32,"value":2945},"5.2 分布式系统问题",{"type":27,"tag":2619,"props":2947,"children":2950},{"code":2948,"language":2770,"meta":7,"className":2949},"// 场景：微服务间的数据不一致\n\n// 提问方式：\n/**\n * 订单服务和库存服务偶尔出现数据不一致：\n * - 订单显示已创建\n * - 库存未扣减\n * \n * 当前流程：\n */\n// Order Service\nasync function createOrder(orderData) {\n // 1. 调用库存服务扣减库存\n await inventoryService.deduct(orderData.items);\n \n // 2. 创建订单\n const order = await orderRepository.create(orderData);\n \n // 3. 发送订单创建事件\n await eventBus.publish('order.created', order);\n \n return order;\n}\n\n// 问题分析：如果步骤 2 或 3 失败，库存已经扣减但订单未创建\n\n// AI 会建议使用 Saga 模式或事务发件箱模式\n",[2772],[2951],{"type":27,"tag":631,"props":2952,"children":2953},{"__ignoreMap":7},[2954],{"type":32,"value":2948},{"type":27,"tag":60,"props":2956,"children":2958},{"id":2957},"第六部分ai-调试工作流",[2959],{"type":32,"value":2960},"第六部分：AI 调试工作流",{"type":27,"tag":825,"props":2962,"children":2964},{"id":2963},"_61-我的调试流程",[2965],{"type":32,"value":2966},"6.1 我的调试流程",{"type":27,"tag":2619,"props":2968,"children":2970},{"code":2969},"┌────────────────────────────────────────────────────────────┐\n│ AI 辅助调试工作流 │\n├────────────────────────────────────────────────────────────┤\n│ │\n│ Step 1: 问题收集 │\n│ ├── 复制完整错误信息 │\n│ ├── 截图相关日志 │\n│ └── 记录复现步骤 │\n│ │\n│ Step 2: 快速分析 │\n│ ├── 将错误信息发给 AI │\n│ ├── 获取可能原因列表 │\n│ └── 评估哪些最可能 │\n│ │\n│ Step 3: 深入调查 │\n│ ├── 根据 AI 建议添加日志/断点 │\n│ ├── 收集更多信息 │\n│ └── 再次询问 AI（带新信息） │\n│ │\n│ Step 4: 验证修复 │\n│ ├── AI 生成修复代码 │\n│ ├── 人工审查确认 │\n│ └── 测试验证 │\n│ │\n│ Step 5: 预防措施 │\n│ ├── AI 建议类似问题的预防方法 │\n│ ├── 添加相关测试用例 │\n│ └── 更新文档/知识库 │\n│ │\n└────────────────────────────────────────────────────────────┘\n",[2971],{"type":27,"tag":631,"props":2972,"children":2973},{"__ignoreMap":7},[2974],{"type":32,"value":2969},{"type":27,"tag":825,"props":2976,"children":2978},{"id":2977},"_62-调试对话模板",[2979],{"type":32,"value":2980},"6.2 调试对话模板",{"type":27,"tag":2619,"props":2982,"children":2985},{"code":2983,"language":369,"meta":7,"className":2984},"## 第一轮：问题描述\n\n我遇到了一个问题：[简述问题]\n\n错误信息：\n",[2623],[2986],{"type":27,"tag":631,"props":2987,"children":2988},{"__ignoreMap":7},[2989],{"type":32,"value":2983},{"type":27,"tag":28,"props":2991,"children":2992},{},[2993],{"type":27,"tag":2633,"props":2994,"children":2995},{},[2996],{"type":32,"value":2997},"粘贴完整错误",{"type":27,"tag":2619,"props":2999,"children":3001},{"code":3000},"\n相关代码：\n```javascript\n[粘贴代码]\n",[3002],{"type":27,"tag":631,"props":3003,"children":3004},{"__ignoreMap":7},[3005],{"type":32,"value":3000},{"type":27,"tag":492,"props":3007,"children":3008},{},[],{"type":27,"tag":60,"props":3010,"children":3012},{"id":3011},"第二轮补充信息",[3013],{"type":32,"value":3014},"第二轮：补充信息",{"type":27,"tag":28,"props":3016,"children":3017},{},[3018],{"type":32,"value":3019},"根据你的建议，我添加了日志，发现：",{"type":27,"tag":35,"props":3021,"children":3022},{},[3023,3031],{"type":27,"tag":39,"props":3024,"children":3025},{},[3026],{"type":27,"tag":2633,"props":3027,"children":3028},{},[3029],{"type":32,"value":3030},"发现 1",{"type":27,"tag":39,"props":3032,"children":3033},{},[3034],{"type":27,"tag":2633,"props":3035,"children":3036},{},[3037],{"type":32,"value":3038},"发现 2",{"type":27,"tag":28,"props":3040,"children":3041},{},[3042,3044,3049],{"type":32,"value":3043},"这是否说明问题出在 ",{"type":27,"tag":2633,"props":3045,"children":3046},{},[3047],{"type":32,"value":3048},"你的猜测",{"type":32,"value":3050},"？",{"type":27,"tag":492,"props":3052,"children":3053},{},[],{"type":27,"tag":60,"props":3055,"children":3057},{"id":3056},"第三轮确认修复",[3058],{"type":32,"value":3059},"第三轮：确认修复",{"type":27,"tag":28,"props":3061,"children":3062},{},[3063],{"type":32,"value":3064},"我按照你的建议修改了代码：",{"type":27,"tag":2619,"props":3066,"children":3069},{"code":3067,"language":2795,"meta":7,"className":3068},"[粘贴修改后的代码]\n",[2797],[3070],{"type":27,"tag":631,"props":3071,"children":3072},{"__ignoreMap":7},[3073],{"type":32,"value":3067},{"type":27,"tag":28,"props":3075,"children":3076},{},[3077],{"type":32,"value":3078},"请确认这个修复是否正确，以及是否有其他潜在问题。",{"type":27,"tag":492,"props":3080,"children":3081},{},[],{"type":27,"tag":60,"props":3083,"children":3085},{"id":3084},"第四轮预防",[3086],{"type":32,"value":3087},"第四轮：预防",{"type":27,"tag":28,"props":3089,"children":3090},{},[3091],{"type":32,"value":3092},"这个问题已解决。请建议：",{"type":27,"tag":422,"props":3094,"children":3095},{},[3096,3101,3106],{"type":27,"tag":39,"props":3097,"children":3098},{},[3099],{"type":32,"value":3100},"如何防止类似问题再次发生？",{"type":27,"tag":39,"props":3102,"children":3103},{},[3104],{"type":32,"value":3105},"应该添加什么测试用例？",{"type":27,"tag":39,"props":3107,"children":3108},{},[3109],{"type":32,"value":3110},"有什么最佳实践可以参考？",{"type":27,"tag":2619,"props":3112,"children":3114},{"code":3113},"\n## 结语：AI 是放大器，不是替代品\n\nAI 调试工具能够显著加速问题排查过程，但它不能替代你的思考。最有价值的能力组合是：\n\n- **你的领域知识** + **AI 的广博见识**\n- **你对项目的理解** + **AI 的分析能力**\n- **你的判断力** + **AI 的执行速度**\n\n调试的本质是假设-验证的循环。AI 帮你更快地生成假设、更高效地验证假设，但做出最终判断的还是你。\n\n学会与 AI 高效协作调试，不是依赖 AI 给你答案，而是让 AI 帮你更快地找到自己的答案。\n\n---\n\n## 参考资源\n\n- [Chrome DevTools 官方文档](https://developer.chrome.com/docs/devtools)\n- [Node.js 调试指南](https://nodejs.org/en/docs/guides/debugging-getting-started)\n- [React DevTools 使用指南](https://react.dev/learn/react-developer-tools)\n",[3115],{"type":27,"tag":631,"props":3116,"children":3117},{"__ignoreMap":7},[3118],{"type":32,"value":3113},{"title":7,"searchDepth":359,"depth":359,"links":3120},[3121,3122,3123,3128,3132,3137,3141,3145,3146,3147],{"id":2503,"depth":362,"text":2506},{"id":2509,"depth":362,"text":2512},{"id":2530,"depth":362,"text":2533,"children":3124},[3125,3126,3127],{"id":2536,"depth":359,"text":2539},{"id":2614,"depth":359,"text":2617},{"id":2780,"depth":359,"text":2783},{"id":2822,"depth":362,"text":2825,"children":3129},[3130,3131],{"id":2828,"depth":359,"text":2831},{"id":2848,"depth":359,"text":2851},{"id":2868,"depth":362,"text":2871,"children":3133},[3134,3135,3136],{"id":2874,"depth":359,"text":2877},{"id":2889,"depth":359,"text":2892},{"id":2904,"depth":359,"text":2907},{"id":2921,"depth":362,"text":2924,"children":3138},[3139,3140],{"id":2927,"depth":359,"text":2930},{"id":2942,"depth":359,"text":2945},{"id":2957,"depth":362,"text":2960,"children":3142},[3143,3144],{"id":2963,"depth":359,"text":2966},{"id":2977,"depth":359,"text":2980},{"id":3011,"depth":362,"text":3014},{"id":3056,"depth":362,"text":3059},{"id":3084,"depth":362,"text":3087},"content:topics:ai:ai-debugging-troubleshooting-guide.md","topics/ai/ai-debugging-troubleshooting-guide.md","topics/ai/ai-debugging-troubleshooting-guide",{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":3152,"image":18,"imageQuery":19,"pexelsPhotoId":20,"pexelsUrl":21,"featured":6,"readingTime":22,"body":3153,"_type":369,"_id":370,"_source":371,"_file":372,"_stem":373,"_extension":374},[13,14,15,16,17],{"type":24,"children":3154,"toc":3416},[3155,3159,3174,3178,3182,3186,3190,3209,3213,3217,3221,3240,3244,3248,3252,3256,3283,3287,3291,3295,3299,3318,3322,3326,3330,3349,3353,3357,3380,3384,3388,3392],{"type":27,"tag":28,"props":3156,"children":3157},{},[3158],{"type":32,"value":33},{"type":27,"tag":35,"props":3160,"children":3161},{},[3162,3166,3170],{"type":27,"tag":39,"props":3163,"children":3164},{},[3165],{"type":32,"value":43},{"type":27,"tag":39,"props":3167,"children":3168},{},[3169],{"type":32,"value":48},{"type":27,"tag":39,"props":3171,"children":3172},{},[3173],{"type":32,"value":53},{"type":27,"tag":28,"props":3175,"children":3176},{},[3177],{"type":32,"value":58},{"type":27,"tag":60,"props":3179,"children":3180},{"id":62},[3181],{"type":32,"value":65},{"type":27,"tag":28,"props":3183,"children":3184},{},[3185],{"type":32,"value":70},{"type":27,"tag":28,"props":3187,"children":3188},{},[3189],{"type":32,"value":75},{"type":27,"tag":35,"props":3191,"children":3192},{},[3193,3197,3201,3205],{"type":27,"tag":39,"props":3194,"children":3195},{},[3196],{"type":32,"value":83},{"type":27,"tag":39,"props":3198,"children":3199},{},[3200],{"type":32,"value":88},{"type":27,"tag":39,"props":3202,"children":3203},{},[3204],{"type":32,"value":93},{"type":27,"tag":39,"props":3206,"children":3207},{},[3208],{"type":32,"value":98},{"type":27,"tag":28,"props":3210,"children":3211},{},[3212],{"type":32,"value":103},{"type":27,"tag":60,"props":3214,"children":3215},{"id":106},[3216],{"type":32,"value":106},{"type":27,"tag":28,"props":3218,"children":3219},{},[3220],{"type":32,"value":113},{"type":27,"tag":35,"props":3222,"children":3223},{},[3224,3228,3232,3236],{"type":27,"tag":39,"props":3225,"children":3226},{},[3227],{"type":32,"value":121},{"type":27,"tag":39,"props":3229,"children":3230},{},[3231],{"type":32,"value":126},{"type":27,"tag":39,"props":3233,"children":3234},{},[3235],{"type":32,"value":131},{"type":27,"tag":39,"props":3237,"children":3238},{},[3239],{"type":32,"value":136},{"type":27,"tag":28,"props":3241,"children":3242},{},[3243],{"type":32,"value":141},{"type":27,"tag":60,"props":3245,"children":3246},{"id":144},[3247],{"type":32,"value":147},{"type":27,"tag":28,"props":3249,"children":3250},{},[3251],{"type":32,"value":152},{"type":27,"tag":28,"props":3253,"children":3254},{},[3255],{"type":32,"value":157},{"type":27,"tag":35,"props":3257,"children":3258},{},[3259,3263,3267,3271,3275,3279],{"type":27,"tag":39,"props":3260,"children":3261},{},[3262],{"type":32,"value":165},{"type":27,"tag":39,"props":3264,"children":3265},{},[3266],{"type":32,"value":170},{"type":27,"tag":39,"props":3268,"children":3269},{},[3270],{"type":32,"value":175},{"type":27,"tag":39,"props":3272,"children":3273},{},[3274],{"type":32,"value":180},{"type":27,"tag":39,"props":3276,"children":3277},{},[3278],{"type":32,"value":185},{"type":27,"tag":39,"props":3280,"children":3281},{},[3282],{"type":32,"value":190},{"type":27,"tag":28,"props":3284,"children":3285},{},[3286],{"type":32,"value":195},{"type":27,"tag":60,"props":3288,"children":3289},{"id":198},[3290],{"type":32,"value":201},{"type":27,"tag":28,"props":3292,"children":3293},{},[3294],{"type":32,"value":206},{"type":27,"tag":28,"props":3296,"children":3297},{},[3298],{"type":32,"value":211},{"type":27,"tag":35,"props":3300,"children":3301},{},[3302,3306,3310,3314],{"type":27,"tag":39,"props":3303,"children":3304},{},[3305],{"type":32,"value":219},{"type":27,"tag":39,"props":3307,"children":3308},{},[3309],{"type":32,"value":224},{"type":27,"tag":39,"props":3311,"children":3312},{},[3313],{"type":32,"value":229},{"type":27,"tag":39,"props":3315,"children":3316},{},[3317],{"type":32,"value":234},{"type":27,"tag":28,"props":3319,"children":3320},{},[3321],{"type":32,"value":239},{"type":27,"tag":60,"props":3323,"children":3324},{"id":242},[3325],{"type":32,"value":245},{"type":27,"tag":28,"props":3327,"children":3328},{},[3329],{"type":32,"value":250},{"type":27,"tag":35,"props":3331,"children":3332},{},[3333,3337,3341,3345],{"type":27,"tag":39,"props":3334,"children":3335},{},[3336],{"type":32,"value":258},{"type":27,"tag":39,"props":3338,"children":3339},{},[3340],{"type":32,"value":263},{"type":27,"tag":39,"props":3342,"children":3343},{},[3344],{"type":32,"value":268},{"type":27,"tag":39,"props":3346,"children":3347},{},[3348],{"type":32,"value":273},{"type":27,"tag":28,"props":3350,"children":3351},{},[3352],{"type":32,"value":278},{"type":27,"tag":60,"props":3354,"children":3355},{"id":281},[3356],{"type":32,"value":281},{"type":27,"tag":35,"props":3358,"children":3359},{},[3360,3364,3368,3372,3376],{"type":27,"tag":39,"props":3361,"children":3362},{},[3363],{"type":32,"value":291},{"type":27,"tag":39,"props":3365,"children":3366},{},[3367],{"type":32,"value":296},{"type":27,"tag":39,"props":3369,"children":3370},{},[3371],{"type":32,"value":301},{"type":27,"tag":39,"props":3373,"children":3374},{},[3375],{"type":32,"value":306},{"type":27,"tag":39,"props":3377,"children":3378},{},[3379],{"type":32,"value":311},{"type":27,"tag":60,"props":3381,"children":3382},{"id":314},[3383],{"type":32,"value":314},{"type":27,"tag":28,"props":3385,"children":3386},{},[3387],{"type":32,"value":321},{"type":27,"tag":28,"props":3389,"children":3390},{},[3391],{"type":32,"value":326},{"type":27,"tag":35,"props":3393,"children":3394},{},[3395,3402,3409],{"type":27,"tag":39,"props":3396,"children":3397},{},[3398],{"type":27,"tag":334,"props":3399,"children":3400},{"href":336},[3401],{"type":32,"value":339},{"type":27,"tag":39,"props":3403,"children":3404},{},[3405],{"type":27,"tag":334,"props":3406,"children":3407},{"href":345},[3408],{"type":32,"value":348},{"type":27,"tag":39,"props":3410,"children":3411},{},[3412],{"type":27,"tag":334,"props":3413,"children":3414},{"href":354},[3415],{"type":32,"value":357},{"title":7,"searchDepth":359,"depth":359,"links":3417},[3418,3419,3420,3421,3422,3423,3424],{"id":62,"depth":362,"text":65},{"id":106,"depth":362,"text":106},{"id":144,"depth":362,"text":147},{"id":198,"depth":362,"text":201},{"id":242,"depth":362,"text":245},{"id":281,"depth":362,"text":281},{"id":314,"depth":362,"text":314},1777334668410]