Web coding 纯小白入门完整教程：从 0 到 1 运行历史粘贴板工具

Web coding 纯小白入门完整教程：从 0 到 1 运行历史粘贴板工具

核心结论：作者用四个月 web coding 经验演示了一条小白可复制的真实开发流程：在 VS Code 中打开项目文件夹，用 cloud code 接入 deep ck v 4 pro，按“讲清需求 → plan mode 梳理 → 分阶段开发 → 用开发日志/文档管理项目 → 在 Xcode 中运行验证 → 截图反馈优化”的方式，从 0 到 1 做出并跑通一个 Mac 历史粘贴板工具；他强调 web coding 不难，最难的是第一次动手的决心。

一、核心要点

• 教程定位：这是一期“纯小白入门完整教程”，通过演示一遍完整的真实 web coding 过程，教大家从 0 到 1 运行起来一个软件。
• 覆盖内容：如何向 AI 发起第一次开发需求、如何让它稳定执行、遇到问题如何解决、如何做好项目管理等。
• 作者经验来源：全部来自作者四个月 web coding 的经验，纯干货总结分享，用大白话讲解。
• 工具组合：VS Code + cloud code + deep ck v 4 pro。作者认为这套组合能力不错、价格低，而且不需要科学上网（原文称“不需要科学的魔法上王”）。
• 开发对象：作者想做的是一个“历史粘贴板”工具，并以此作为实况案例，带大家一步一步完成。
• 关键方法：先把需求用大白话讲清楚，再让 AI 整理需求；使用 plan mode 让 AI 以选择题方式采访需求；第二轮要求 AI 分阶段规划开发步骤，避免上下文过长；用开发日志文件夹和文档文件夹帮助换人、换 AI 对接；在 Xcode 中运行验证；遇到 bug 或优化时用截图 + 文字反馈。
• 成本感受：作者两天深度使用，消耗 1.1 亿 token，花费 13 块钱；后文又说已用两天消耗 1.2 亿 token，才花 14 块钱。本项目实况任务花费大约一块多不到两块。原文数据前后不完全一致，需注意。
• 最终结论：web coding 很简单，就是用大白话告诉 AI，让它理解并做出来。最难的不是技术，而是第一次动手的决心。掌握这些后，作者认为几乎可以举一反三做出任何想要的软件或工具。

二、工具、AI 与背景

1. 工具组合与推荐

• 软件：VS Code
• 免费软件，下载之后就可以用。
• 作者推荐它作为 web coding 入门软件。
• 重要原因：AI 创建的 Markdown 文件可以在 VS Code 中直接点击预览，甚至可以进行编辑和修改。

• 工具：cloud code
• 原文称 cloud code 可以免费下载和使用。
• 如果使用 cloud code，可以点开 cloud code md。原文此处也有“cloud点 M D”“cloud code md”等写法。
• 作者认为 cloud code md 是 AI 写给自己看的文件，可以告诉 AI 自己是谁、要做什么项目，所有文件路径指引都会放在这里。AI 每次运行都会看这个文件，告诉自己要干什么。
• 作者认为这是 cloud code 非常好的一个点，并提到其中还有很多细节使用技巧，有机会再单独分享。

• AI：deep ck v 4 pro
• 原文称使用的是最新的 deep ck v 4 pro。后文又出现 deep stick v 4 pro、deep si、deep sick、deep ck、deep v 4 pro 等写法，名称转写不一致。
• 作者经过两天深度使用，消耗 1.1 亿 token，价格只花了 13 块钱，觉得能力和价格都非常香。
• 后文又说已用两天，消耗 1.2 亿 token，才花 14 块钱。两处数据存在差异。
• 原文强调这套组合不需要科学上网，所以作者觉得还是很棒。

• 接入方式
• 关于如何把 deep stick v 4 pro 接入到 cloud code，作者说 deep stick 官方使用文档中会有详细教程。
• 实际就是输入一行命令，很快会安装好。原文没有给出这一行命令的具体内容。

• Xcode
• 如果开发的是 Mac 上的软件，或者是 iPhone 上的软件，一定要下载 Xcode。
• Xcode 是苹果官方开发工具，可以让整个软件运行起来，是必备开发软件。

2. 项目目标与准备

• 作者最近刚好想做一个“历史粘贴板”的工具。
• 这期视频以这个工具的开发实况过程，带大家一步一步完成。
• 观众可以跟着同样方式做，也可以换一个需求再来跟着做。
• 项目最开始需要在电脑里面创建一个项目文件夹，例如作者叫它“历史粘贴”。
• 这样项目就有了一个落脚的地方。
• 然后回到 VS Code 中，选择打开，选中刚才创建的项目文件夹，点击打开，就可以开始工作。

三、完整方法与步骤

1. 第一次向 AI 提需求：整个项目的地基

作者强调，在 web coding 开始之前，必须先有需求。向 AI 提出第一次需求这一步非常非常重要，要尽可能将自己的需求表达清楚。如果完全不会，也不用紧张害怕，可以参考作者模板，并做好笔记。这部分内容会比较长，因为它是整个项目的地基。

需求模板包含以下层次：

1. 第一句话：说明身份和运行平台

• 告诉 AI：我是一个不懂代码的小白，想要做一个运行在 Mac 电脑上的历史粘贴板软件。
• 作用一：告诉 AI 自己是小白，很多问题需要 AI 自己搞定，不要问自己。
• 作用二：说明软件运行在 Mac 电脑上，AI 就会去准备对应的开发规则。
• 这样 AI 对第一次开发需求用一句话就有了大概认知。

1. 第二段话：说明功能和要解决的问题

• 告诉 AI 这个软件需要有什么样的功能，它能解决你的什么问题。

1. 第三段话：说明页面和显示内容

• 告诉 AI 这个软件有什么样的页面，显示什么样的内容。

1. 第四段话：说明设计需求

• 告诉 AI 在设计上的一些需求。
• 作者建议按这套模板梳理自己的需求，不用很专业，就用自己大白话，想到什么就说出什么。

1. 最后一句话：非常关键

• 作者说：我暂时就这些想法了，你帮我整理下我的需求，如果你有不确定的地方可以问我。
• 我们先沟通项目的需求，等我确认之后再做下一步的执行。
• 这一步已经把想要的、想做的功能、想要的页面、想要的设计都表达完了。
• 然后让 AI 去整理需求，帮我们梳理是否有遗漏的地方。

1. 选择 plan mode 并发送

• 点开右下角的这里选择 plan mode。
• 这一步可以让 AI 更有系统性地梳理需求。
• 选择好之后就可以发送。

2. plan mode 下 AI 如何采访和梳理需求

• AI 会思考如何消化需求，例如它需要有粘贴板监听等。原文说这些内容太干了，可能听不懂。
• 这一步非常重要：会弹出一个框，这是选择 plan mode 非常重要的地方。
• AI 会根据需求，像采访一样用选择题方式向用户提问。
• 用户可以点击一个功能，告诉 AI 想要的回答。
• 在这个模式下，AI 提出的第一个推荐内容一般都是最好的。
• 当然也可以有自己的想法，去看其他选项。
• 如果都不满意，可以选择“其他”，然后手动输入想要的内容、答案或需求方向。
• 作者选择的需求之一是：需要它开机启动。
• 作者把四个问题发送出去，AI 就对用户进行了一次采访或访问。
• 这样 AI 帮我们把需求梳理得更加清晰、更加明确。
• 作者认为这些确实是自己有想到、有提到的，AI 都帮自己想到了。
• 如果觉得 AI 还没有把思路或需求完全整理开，可以继续向它提问，让它继续回复和整理需求。

3. 第二轮对话：要求 AI 分阶段规划，避免上下文过长

如果觉得到这一步已经 OK，可以复制作者第二段内容发给 AI。核心要求如下：

• 首先告诉 AI：不要一口气一下子全部做完。
• 原因：如果一口气全部做完，上下文就会非常非常长。
• 越到后期，AI 通过上下文的积攒，可能会有点“失忆”。
• 或者 AI 通过压缩上下文的方式再来工作，也会造成一定的信息丢失。
• 让 AI 去规划开发步骤，一步一步做，就可以有效避免这个问题。
• 开发日志文件夹和文档文件夹，主要是让 AI 去看的。
• 这样不论换什么样的人，或者什么样的 AI 去对接这份工作，都能直接看到这些东西。
• 对接者会很清楚：历史做过什么、下一步需要做什么、有哪些标准、哪些文件可以引用。
• 第二轮对话发送出去之后，就可以让 AI 更加安全、有效、稳定地推进项目。
• 发送这一步时，也要点开 plan mode，让 AI 更有效地规划自己的工作。
• 发送后继续等待 AI 思考和处理即可。

4. 查看 AI 创建的初始文件与 cloud code md

• AI 把关键文件基本都创建好之后，可以在左边文件列表当中查看它创建的文件。
• 这也是作者推荐使用 VS Code 作为 web coding 入门软件的原因：它创建的 Markdown 文件可以直接点击预览，甚至还可以编辑和修改。
• 如果使用 cloud code，可以点开 cloud code md。
• 这个文件是 AI 写给自己看的，可以告诉它自己是谁、要做什么项目。
• 所有文件的路径指引都会放在这里。
• AI 每次运行都会看一下这个文件，告诉自己要干什么。
• 作者认为这是 cloud code 非常好的一个点，细节使用技巧很多，以后有机会再单独分享。

5. 初始阶段完成，进入正式代码开发

• 初始阶段任务全部完成后，AI 会告诉用户：它把项目必备的东西全部搭建完了，文件夹和文件以及路径全部都做好了。
• 下一步就要进入正式的代码开发阶段。
• 这时可以告诉 AI：开始推进项目吧。如果软件可以在 Xcode 当中运行的时候告诉我。
• 发送出去，让 AI 正式开始执行代码开发工作。
• 作者补充一个小技巧：点开 plan mode 的模式，推荐在大的功能或复杂的功能开发时选择。这样会让开发进度更加有效、更加稳妥。
• 如果只是日常修复小问题、小 bug，或优化一点小地方，就不用点开 plan mode。
• 第一版软件一般来说大概都是搭一个框架，可能实质性功能还没有开发完。
• 但如果这一步成功了，就可以恭喜自己，给自己鼓个掌。这是你的第一个软件第一次成功运行。

6. 在 Xcode 中运行与分阶段验证

• AI 把第一次运行搞定后，会告诉用户可以在 Xcode 中体验。
• 打开 Xcode 后，可以直接打开一个项目的文件夹。
• 成功把项目在 Xcode 中打开后，点击播放图标，就可以让软件跑起来。
• 等待 building 完成。
• building 成功后，Dock 栏出现了一个图标，就代表运行成功。
• 点击一下，出来一个小小的框。
• 因为没有任何记录，所以这里记录也是空的。
• 这里确实也给出了一个搜索的按钮，作者认为框架搭得不错。
• 开发循环是：AI 完成一步，用户验证一下工作结果，然后再告诉 AI 继续做下一步工作。
• 作者说自己痴迷 web coding 的原因：把想法提炼后总结发给 AI，让 AI 落实、做出来，然后一步一步完善，整个过程很享受，也能带来很大的成就感。

测试过程：

• 第二阶段完成后，AI 说可以体验。打开 Xcode，第二版成功运行。
• 点击小图标后测试：输入“我是大牙大”，Ctrl+C（原文写“cc 一下”），记录中出现“一秒钟前”，说明软件成功运行。
• 再试一次，Ctrl+C 后马上出现，软件运行成功。
• 作者认为 deep sick 的能力很棒，两次都是一次性完成开发工作。
• 第三次验证：输入“大家早上、中午、晚上好”，Command+C（原文写“come 加 C”），也出现了，说明文字功能测试可用。

使用技巧：

• 使用 cloud 沟通时，运行久了会出现一个圆环。
• 圆环显示上下文的使用的额度。
• 当时作者看到已经用了 54%。
• 如果圆环快要合上，可以直接点击这里，让它进行上下文的压缩。
• 这样 AI 就可以在这个窗口里面把所有的历史记录做一些自己的总结和提要，然后再做下面的工作。
• 如果不压缩，首先会让上下文空间变得非常大。
• AI 每次工作时要回看的内容就更多，就会更消耗 token，更消耗钱。

阶段完成情况：

• 六个阶段全部完成。
• AI 给了一个 list 清单，告诉用户都完成了什么。
• 重新打开 Xcode，重新编译软件，运行功能上看还不错。
• 点击之后可以点击复制，很不错。
• 图片也可以复制，测试粘贴出来也可以。
• 再试文字，非常顺。
• 但能看到现在的窗口有点小。
• 测试删除、右键之后有置顶，置顶功能成功。
• 删除功能也跑通了。
• 到这里，软件基本上成功做完，而且跑通了。

7. 后续优化与 bug 反馈方法

• 剩下的是根据自己想要的目标不断优化软件。
• 例如当时觉得窗口太小，而且不能手动调整。
• 可以把这里截图告诉 AI，然后粘贴，并说：现在这个窗口默认的很小，需要调大一点，然后直接点发送。
• 再等待 AI 来修复即可。
• 作者推荐：很多时候提交一些 bug 的修复或做优化时，如果图片上就能展示出来，就用图片的方式截图下来告诉 AI，让它去看图，再理解文字需求。这样一配合，AI 就会更加清晰。

四、案例与数据

五、限制与待确认问题

• 名称转写不一致：原文中 cloud code、cloud点 M D、cloud code md、clou、cloucode 等写法混用；AI 名称也有 deep ck v 4 pro、deep stick v 4 pro、deep si、deep sick、deep ck、deep v 4 pro 等。无法从原文确认准确产品名和对应关系，需以官方文档为准。
• 具体命令缺失：原文说把 deep stick v 4 pro 接入 cloud code 只需输入一行命令，并可在官方使用文档看到详细教程，但没有给出命令内容。
• 需求模板非全文：作者介绍了需求模板的四段结构和最后关键句，但没有给出可直接复制的完整模板全文。
• 四个问题未完整列出：plan mode 下 AI 提出了四个问题，原文只明确提到作者选择了“需要它开机启动”，其余问题内容未展开。
• 开发日志文件夹和文档文件夹未具体命名：作者强调它们主要给 AI 看，也方便换人、换 AI 对接，但没有给出文件夹名称和结构。
• 六个阶段清单未展开：AI 最后给了一个 list 清单，说六个阶段全部完成，但原文没有逐项列出。
• cloud code md 细节未展开：作者说其中还有很多细节使用技巧，有机会再单独分享，本期未深入。
• token 与金额数据前后不一致：前文说两天消耗 1.1 亿 token、花 13 元；后文说两天消耗 1.2 亿 token、花 14 元。两者存在差异。
• 部分需求未明确验证：例如“开机启动”是否最终测试成功，原文没有明确说明。
• 窗口调整未明确完成：最后提出窗口默认很小、需要调大一点，并发送给 AI 修复，但原文未说明修复后的结果。
• 界面位置描述不一致：plan mode 一处说右下角，一处说左下角；应结合实际软件界面确认。

六、行动清单

1. 准备工具：下载 VS Code、cloud code，并按官方文档把 deep ck v 4 pro 接入 cloud code。
2. 如果开发 Mac 或 iPhone 软件，下载 Xcode，作为苹果官方开发工具。
3. 在电脑中创建一个项目文件夹，例如“历史粘贴”。
4. 打开 VS Code，选择“打开”，选中项目文件夹。
5. 向 AI 提出第一次需求，按模板说清：自己是不懂代码的小白、运行平台是 Mac、软件功能、解决的问题、页面和显示内容、设计需求。
6. 在需求最后加上关键句：暂时就这些想法，请 AI 整理需求，有不确定可以问；先沟通项目需求，等确认后再执行下一步。
7. 选择 plan mode，让 AI 更有系统性地梳理需求。
8. 回答 AI 用选择题方式提出的问题；如果不满意，选择“其他”并手动输入。
9. 如果需求还没整理清楚，继续向 AI 提问，让它继续整理。
10. 发送第二轮要求：不要让 AI 一口气全部做完，要求它规划开发步骤，一步一步做；建立开发日志文件夹和文档文件夹，方便换人、换 AI 对接。
11. 发送第二轮时也点开 plan mode，让 AI 更有效规划工作。
12. 在 VS Code 左边文件列表查看 AI 创建的关键文件，点击预览 Markdown 文件，必要时编辑修改。
13. 如果使用 cloud code，点开 cloud code md，检查 AI 写给自己看的项目说明和文件路径指引。
14. 初始阶段完成后，告诉 AI：开始推进项目吧；如果软件可以在 Xcode 中运行，告诉我。
15. 在 Xcode 中打开项目文件夹，点击播放图标，等待 building 完成。
16. 每次 AI 完成一步后，验证结果，再让 AI 继续下一步。
17. 测试核心功能：文字复制、文字粘贴、图片复制、图片粘贴、删除、右键置顶、搜索等。
18. 关注 cloud 沟通界面的上下文圆环；快满时点击进行上下文压缩，避免上下文过大、消耗更多 token 和钱。
19. 发现 bug 或需要优化时，优先截图 + 文字说明发给 AI；例如窗口太小不能手动调整，就截图并说明需要调大。
20. 查看 token 和金额，控制成本。作者本项目花费约一块多不到两块。
21. 如果还有不懂或想看的教程内容，可在下方告诉作者。作者是“大牙”。

七、总结

这期教程完整走了一遍 web coding 过程：从跟 AI 说第一句话，到软件真正跑起来。作者认为，只要掌握了以上内容，几乎已经可以做出任何想要的软件。web coding 是不是非常简单？就是用大白话去告诉 AI，让它理解并做出来。

作者最后强调：我觉得最难的不是这个技术，而是第一次动手的决心。看完这期视频，你已经知道怎么去跟 AI 说话和沟通，剩下的就是打开电脑去试一试。