文章

AI Coding:从「一句话」到「一个能用的东西」

入门指南:适度懂点网络请求逻辑 + 提升你的 vibe coding / AI coding 能力
方法论:先懂一点点后台 → 把想法说清 → AI 写码 → 你看效果改 → 反复到能用

你不需要成为程序员。你要成为一个会「指挥」的人。这份指南只教两件事:

  1. 适度懂一点点网络请求 —— 让你不是站在黑盒外面的人,至少能判断"出问题到底出在哪个环节"。

  2. 提升 vibe coding / AI coding 能力 —— 用自然语言描述想法,让 AI 帮你把东西写出来、改到能用。


第 1 部分 · 先懂一点点:一次「请求」到底经历了什么

这一节参考了广受流传的《一个完整的 HTTP 请求过程详细》。它的原理很深,但你要懂的只是「大概」——就像你开车不用会拆发动机,但要知道是轮胎没气还是没油了。

1.1 一句话版本

你在 AI Coding 框里敲下的话,会被打包成一个 HTTP 请求(一个标准信封),通过网络送到服务器,被用 Python 写成的后端接住、配上完整说明(Prompt)后交给大模型;大模型边想边写,答案再流式传回来,由前端渲染成你屏幕上的一段段文字和代码。

1.2 你敲下回车后,它经历的每一站

阶段

餐厅比喻

真实名称

发生了什么

① 你输入

顾客点菜

浏览器 / 前端

你在聊天框写下要求(用户 Prompt)

② 打包

服务员写单

JS 打包→HTTP 请求

前端把你的话、偏好装进一个"标准信封"

③ 传送

交到厨房窗口

网络传输(DNS 解析→建立连接→发请求)

信封通过互联网送到服务器。DNS 就像"查电话号码",把网址翻译成服务器地址

④ 接单

传菜主管

Python 后端

后端接住信封,验单,再把你的话拼上预设说明、历史对话、实时代码上下文,配成完整 Prompt

⑤ 思考

名厨掌勺

大模型(LLM)

大模型一个字一个字地生成,必要时"调用工具"读代码、跑命令

⑥ 上菜

一道道端出

流式返回 + 前端渲染

后端把答案流式传回,前端收到一个词就显示一个词,排版给你看

整体链路 · 上去(五站)/返程(四步)
① 你 / 浏览器 在这里输入要求 ② 前端打包 JS 装进 HTTP 请求 ③ 网络传送 DNS → 送达服务器 ④ Python 后端 接单 · 配完整 Prompt ⑤ 大模型 思考 · 写码 去程 · 你的要求 边写边回 ⑤ 流式作答 一个字一个字地写出来 ④ 后端回传 验单 · 沿途转送 ⑥ 前端渲染 收到即显示 · 排版 你看到答案 文字 · 代码 返程 · 流式答案 餐厅比喻: 你=顾客 · ①②⑥=门面/服务员 · ④=传菜主管 · ⑤=名厨 · DNS ③=查电话号码
去程 · 你的要求 返程 · 流式答案

1.3 为什么懂这一点能帮到你

  • 能定位问题:加载不出来 → 多半是 ③ 网络;半天没动静 → 可能 ⑤ 大模型在想或接口慢;显示乱码/排版怪 → 是 ⑥ 渲染。

  • 能听懂工具人:AI coding 工具让你"授权工具调用(读文件、跑命令)",你明白它其实在做 ⑤ 里说的"调用工具",会放心。

  • 能理解流式:它"边写边显示"不是错觉,是 ⑥ 真的一边收一边渲染——所以别盲目等它全完。


第 2 部分 · Vibe Coding:把「想法」变成「能用的东西」

Vibe coding(直译"跟着感觉写码")是现在很流行的 AI 开发方式:你不需要自己写代码,你用自然语言描述"我想要一个能干什么的东西",AI 负责把代码写出来,哪里不对你再描述、它再改,直到能用为止。

2.1 vibe coding 的完整工作流(一个闭环)

1 · 讲出你想要的东西 一句话:它能帮谁做什么、解决什么 2 · 让 AI 先搭个小样 别一次要太大,先做最小能跑的 3 · 看效果 / 试运行 在预览里点一点、用一用 4 · 满意吗? 满意度足够 → 收工 满意 → 收工 不满意 → 沿虚线回去,重新描述想法、让它改

2.2 三个"viber"心法

  • 先小后大:让它先做个能跑的最小版本,再一点点加功能。别一上来要"一个超完整的管理系统"。

  • 看效果说话:别空谈,先去预览里实际点一点、用一用,把"哪里不好用"当成给它的修正单。

  • 别怕重来:感觉方向不对就大胆让它重新来,或重开一轮。成本很低,别硬凑。

2.3 描述功能时,怎么把"我想要"说清楚

把这句话当模板:

我想要一个【用来给谁 / 解决什么问题】的小工具,功能有:

  1. 【功能一】

  2. 【功能二】
    界面上我想要【大概长什么样】。请先搭一个能运行的最小版本。如果哪里不清楚,先问我三个问题。


第 3 部分 · 和 AI「说清楚话」:交互能力

不管是不是 coding,和 AI 打交道的本事是同一种。这一节是通用核心。

3.1 万能需求公式

板块

说明

目标

你要它帮你达成什么结果

背景

它该知道什么事?——给谁用、什么处境

边界

什么不能做 / 必须做

示例

有没有参考样例/风格?照着学

格式

最后怎么交给你?——一段话、列表、还是选项

3.2 五个不靠技术的提问技巧

  1. 给它一个角色 —— "请你当一位资深的前端工程师,同时会用大白话解释。"(语气和深度完全不同)

  2. 把背景喂给它 —— "我在给完全不懂编程的同事做分享。"(别指望它猜)

  3. 给一个示例/样例 —— "按我发的这段风格来。"(说一百句不如贴例子)

  4. 一次只让它做一件小事 —— "先只给我大纲,别写正文。"(拆小步更靠谱)

  5. 允许它先问我一轮 —— "开始前先问我 3 个关键问题。"(少返工)

3.3 交互闭环:会追问、检查、修正

  • 别只说"不对" —— 指出具体哪里: "第三段太啰嗦,帮我改短,每条例子一句话。"

  • 让它给选项 —— "给我 3 个界面布局方案让我挑。"

  • 让它解释 —— "这句代码为什么这么写?"(懂了你就真正掌控了它)

  • 顺着对话继续 —— 同一段对话里追问,它会记得上下文。


第 4 部分 · 记住它的边界:别盲信,别被吓退

  • 它会"一本正经地编"(幻觉):数字、事实、引用的地方,自己核对。

  • 它不知道你的真实情况:文件、记录、需求细节,你不说它不懂。

  • 关键决定人来拍板:涉及规则、安全、钱的地方,把它当"参谋",别当"拍板的人"。

  • 能主动控制的变量:把话说清楚,它就靠谱;这是你能控制的。


第 5 部分 · 一张即用卡片

复制进聊天框,把【】换成你的,它会自动进入"先确认、再干活":

请你当一位【资深且耐心的】专家。
请帮我达成【具体想得到的结果】。
情况是:【给谁用、什么处境、需要哪些背景】。
注意【什么不能做 / 必须做到】。
风格参考【贴一个例子或描述】。
最后请以【3 个候选 / 一段话 / 可运行的最小功能】给我。
开始前,如果哪里不清楚,先问我【最多3个问题】。
​