3天、0代码，我做出了一个能用的违章举报网页版

从想法到上线，我没写一行代码——甚至连HTML标签都没自己敲过。

第一幕：开场冲击

这事确实不简单。我第一次冒出这个念头，是在上周五下午小区门口——又一辆车停在消防通道上。

想举报吗？当然想。可拿起手机，点开官方App，面对注册/认证/上传/填表那一套流程……手先累了。

“这是政府该做的平台，我一个普通人怎么弄？”

直到我看到那条新闻：《程序员用AI三天生成违章举报网页版》。

那一刻我突然意识到：程序员能做的，AI也能帮我做。而且更快。

这篇就是我亲手验证的全过程。3天后，我拿着一个真实可用的违章举报工具——没写一行代码，没花一分钱，甚至没学过一天前端开发。

更关键的是：这套方法，你现在就能直接抄走。

第二幕：认知突破

我犯的第一个错误：把AI当成程序员

刚开始我以为：“找个AI帮我写代码不就行了？”结果GPT给了我一个基础到简陋的<input type="file">上传框——能用，但粗糙得像个半成品。

关键发现：AI不会主动“优化体验”，它只会被动“完成指令”。你说“加个上传功能”，它给你最基础的；你说“加个拖拽预览+进度条+文件校验”，它才能给你像样的。

我不是在写代码，是在组建一支AI小团队

后来我换了个思路：

• GPT-4 = 产品经理（负责需求定义、逻辑梳理）
• Claude = 前端+后端工程师（写HTML/CSS/JavaScript）
• Midjourney = UI设计师（做界面效果图）
• Github Copilot = 技术顾问（随时修正bug）
• Supabase = 仓库管理员（免费存数据）
• Vercel = 开店筹备师（一键部署上线）

这不是编程，这是在当“翻译官”——把我脑子里的想法，翻译成AI能理解的精确指令。

最大的认知翻转

过去我以为：“做个网页工具 = 学编程半年 + 写代码三个月 + 调试一个月”现在我知道：“做个网页工具 = 告诉AI你想要什么 + 告诉AI具体细节 + 告诉AI哪里有问题”

门槛从“学一门语言”降到了“会说清楚话”。

第三幕：执行革命

第一步：需求翻译（1小时）

我对GPT说：

你是一个产品经理。我要做一个交通违章举报网页工具。用户是普通市民，不懂技术。核心功能：1.上传照片 2.地图定位 3.选择违章类型 4.提交举报明确不能做的：不接真实政府平台，纯演示用途，不做后台审核请给我：1.功能清单（优先级排序） 2.技术实现路径建议

GPT花了2分钟，给我一份清晰的产品文档——比我之前自己写的需求清单还要完整。

小技巧：明确说“不能做什么”，比罗列“要做什么”更重要。

第二步：代码生成（3小时）

我把GPT的输出喂给Claude：

基于这个产品定义，生成完整网页代码，要求：1. HTML结构：标题、上传区域、地图区域、表单、提交按钮2. CSS样式：移动端优先，干净简洁，蓝白配色3. JavaScript：原生JS实现交互4. 核心：每段代码必须有注释，解释它做什么

Claude吐出一个200多行的文件。我保存为index.html，用浏览器打开——居然真的显示了页面。

虽然功能还不能用，但视觉效果让心里那根“这事能成”的弦绷紧了。

第三步：核心功能逐个击破

照片上传功能踩坑实录：

开始我让Claude“加个上传功能”，它给了个基础的<input type="file">，没预览，没校验，没进度条。

发现问题：指令不够具体。

我改成：

我需要一个照片上传功能，要求：1. 支持拖拽上传 + 传统文件选择2. 上传前显示缩略图预览3. 限制文件类型为jpg/png，大小<5MB4. 有上传进度百分比提示5. 文件太大或有错误时，显示友好错误信息

这次，Claude给我一个带预览、带校验、带进度条的完整方案。代码量从10行变成80行，但用户体验从“能用”变成“好用”。

第四步：地图定位（最意外的惊喜）

我告诉Claude：

集成Google Maps API，实现：1. 自动获取用户当前位置（需要浏览器授权）2. 在地图上显示标记点，可拖动调整3. 标记点对应经纬度自动填入隐藏表单4. 如果用户拒绝定位，允许手动输入地址

这里有个惊喜：Claude连“如何在Google Cloud Console申请免费API Key”的步骤都给了出来——截图示范，点击哪里，填什么，一步不差。

第五步：数据存储（原来可以这么简单）

传统网站需要租服务器+搭数据库。AI时代就一句话：

我想用Supabase作为后端数据存储，需求：1. 在Supabase创建免费项目2. 建表叫“reports”，字段：照片URL、纬度、经度、违章类型、提交时间3. 生成前端提交数据的JS代码4. 设置权限：只允许匿名用户插入数据，不能删除或修改

Supabase是开源的Firebase替代品，免费额度完全够用。跟提示操作，15分钟搞定。

第六步：部署上线（10分钟）

最后一步：

我想用Vercel部署这个静态网站，步骤：1. 创建GitHub仓库上传代码2. 用Vercel导入GitHub仓库3. 生成一个公开可访问的URL

跟着步骤走，10分钟后，我拿到一个vercel.app域名。打开它，从上传照片到成功举报——整个流程完全可用。

成本盘点

金钱成本：0元（GPT-4免费额度、Claude免费版、Supabase免费档、Vercel免费档）

时间成本：  

• 需求翻译：1小时  
• 代码生成：3小时（含试错）
• 功能优化：5小时（挨个测试修复）  
• 总计约12小时（分散在3天）

但说实在的，这个“12小时”是我第一次摸索的时间。如果你用我的提示词模板直接抄，可能只要1-2小时——因为坑我都帮你踩过了。

我真正学会的东西

不是代码，而是一套“人类+AI”协作的心法：

1. 你不是程序员，是“翻译官”——把模糊想法翻译成机器能执行的精确指令
2. AI只解决“已知问题”——你要做的不是创造新解法，而是挑出现有解法里适合你场景的那个，并把场景描述清楚
3. 问题拆得越细，AI越有用——别问“怎么做网站”，问“怎么实现拖拽上传时的预览效果”
4. 保留“debug思维”——当AI方案有问题，别自己硬改，告诉它“这里报错了，错误信息是XXX，可能是什么原因？”

这套心法的妙处在于：它不限于违章举报工具。

你把“违章”换成“活动报名”，把“照片”换成“信息表单”，把“地图定位”换成“时间选择”——同样的流程，同样能跑通。

关键不是学会做一个工具，而是学会“怎么让AI帮你做任何工具”，也想问你一个问题：

你用这套方法，最想做出个什么工具？

评论区告诉我。点赞最高的三个想法，我会用同样的方法把它做出来，把完整流程写成下一篇教程——从你的想法开始，到我帮你实现为止。

下期预告：我用同样的方法，用AI三天做了个“AI帮你写周报”的微信机器人，从接入API到自动回复全流程拆解。关注我，下次发给你。