Web coding 从0到1
完整入门教程

用大白话教你和AI配合，从第一句话到软件跑起来。
四个月实战经验浓缩，举一反三做出你想要的任何工具。

📌 导读
本教程带你完整走一遍 真实 Web coding 全过程：从提出需求、让AI稳定执行，到解决bug、做好项目管理。
全程使用 VS Code + Claude Code + Deep Stick V4 Pro 组合，无需科学上网，成本极低。
跟着做，你也能做出属于自己的软件。

🛠️ 工具组合推荐

VS Code 免费

代码编辑器，小白首选

Claude Code 免费

AI 编程助手，高效协作

Deep Stick V4 Pro

超低成本·1.1亿token仅13元

Xcode 必备

苹果官方工具，运行 Mac / iOS 软件

💡 全套工具无需科学上网，亲测好用

📊 成本与效率

1.1亿

消耗 token

¥13

总花费

¥1~2

单项目成本

¥14

两天消耗 (1.2亿 token)

* 基于 Deep Stick V4 Pro 实际使用数据

🧠 核心方法论 · 四步搞定

📋

需求表达模板

用大白话告诉AI：你是谁、要什么功能、页面长什么样、设计偏好。最后让AI整理确认。

🎯

Plan Mode 采访制

开启 Plan Mode，AI 会用选择题提问，帮你把模糊需求梳理得清清楚楚。

📦

分步开发策略

不让AI一口气做完，而是规划步骤、逐步推进，避免上下文过长导致信息丢失。

🔄

上下文压缩管理

当上下文圆环快合上时，一键压缩，AI自动总结历史，继续高效工作。

👣 实战七步走 · 从0到运行

1

创建项目文件夹

在电脑里新建一个文件夹，比如历史粘贴板，作为项目的落脚点。
2

在 VS Code 中打开

打开 VS Code → 选择「打开文件夹」→ 选中刚创建的文件夹。
3

向AI提交需求 (模板)

第一句：小白Mac 背景说明；第二句：核心功能；第三句：页面样式；第四句：设计需求；最后一句：让AI整理确认。
4

开启 Plan Mode 深度梳理

AI 会通过选择题形式提问，帮你完善需求细节（如是否需要开机启动等）。
5

规划开发步骤

让AI制定分步开发计划，并建立开发日志和文档文件夹，方便后续AI对接。
6

执行开发 & 验证运行

AI 完成一步，你就在 Xcode 中运行验证，然后告诉AI「继续做下一步」。循环推进。
7

迭代优化

截图 + 文字描述 bug 或优化需求，发给AI，它会理解并修复。小优化不用开 Plan Mode。

📁 实战案例 · 历史粘贴板工具

🎯 项目目标

做一个运行在 Mac 电脑上的历史粘贴板工具，记录所有复制的内容（文字/图片），支持搜索、置顶、删除、一键复制。

✅ 复制历史记录 ✅ 文字 & 图片 ✅ 搜索功能 ✅ 置顶 ✅ 删除 ✅ 一键复制 ✅ 开机启动

💬 第一次运行成功出现图标，第二次测试复制粘贴功能全部跑通，第三次验证置顶删除均正常。

💡 开发Tips： 每次AI完成一个阶段，就在 Xcode 中运行验证。发现问题直接截图+文字发给AI，它看图+文字理解更准确。

✨ 金句

Web coding 就是用大白话去告诉AI，让它理解并做出来。最难的不是技术，而是第一次动手的决心。

—— 大牙，四个月 Web coding 实践者

你先把自己的想法提炼一下，总结后发给AI，让它帮你落实、做出来。然后一步一步去完善，整个过程很有成就感。

—— 大牙

🚀 行动建议

看完视频，你可以这样做：

打开电脑，下载 VS Code + Claude Code + Deep Stick V4 Pro
找一个你想做的工具（哪怕很简单），用需求模板和AI沟通
开启 Plan Mode，让AI帮你梳理需求细节
按分步策略推进，每完成一步就验证一次
遇到问题截图 + 文字发给AI，让它帮你修复
在评论区晒出你的成果，和大家交流

📌 关键提醒： 下载 Xcode（Mac开发必备），软件跑起来需要它。第一次运行成功记得给自己鼓掌 👏

📝 总结

Web coding 的本质就是 用大白话和AI沟通，让它理解你的需求并一步步实现。

从需求表达 → Plan Mode 梳理 → 分步开发 → 验证迭代，这套方法论可以复用到几乎任何软件项目。
你已经知道怎么和AI说话了，剩下的就是 打开电脑去试一试。

Web coding 从0到1完整入门教程

Web coding 从0到1
完整入门教程

Web coding 小白入门教程 · 颜值笔记