前面几篇文章，老张带大家做了深度的行业调研、做了商务 PPT。有些朋友在私信里说：“老张，这些是挺好，但我还是想看点能立刻跑起来、有反馈的东西。”
能理解，毕竟看着屏幕上蹦出一个能点击、能交互的页面，那种“我居然做出来了”的成就感，是看几万字报告比不了的。
今天，老张就带你用 AI，花 5 分钟手搓一个网页小工具。
一、以前做网页，现在做网页
搁在以前，你想弄个网页，得学 HTML 结构、CSS 样式、动效代码，还得买服务器、弄域名，门槛极高。
现在呢？只要你会说话，AI 就能帮你把网页写出来。
为了照顾小白，咱们今天不搞复杂的。老张最近老容易分心，今天咱们就手搓一个“极简番茄钟”（网页版）。
老张在对话框里，直接敲下这段指令：
“你是一个资深前端工程师。请帮我写一个极简风格的番茄钟网页。要求：
- 背景深色极简风，不要花里胡哨。
- 中间是一个大圆环，默认 25 分钟倒计时。
- 下面有‘开始’、‘暂停’、‘重置’三个按钮。
- 倒计时结束时，弹出一个提示框‘老张，该站起来走走啦！’。
- 代码写在一个 HTML 文件里（包含 CSS 和 JS）。”
二、见证奇迹：代码是怎么变成网页的？
按下回车后，WorkBuddy 会直接在你的工作区生成一个 index.html 文件。而且它右侧自带实时预览面板，你直接点开，就能看到那个带大圆环的番茄钟页面了。
老张看着这个页面，还是有点震撼的。深色极简背景、大红色的圆环，甚至连按钮的质感都做出来了。
但更让老张意外的是，老张明明只提了最基础的需求，它却在后台偷偷干了几件极其专业的活儿：
- 防止时间变慢：它没用那种容易被浏览器“卡脖子”的笨办法，而是用时间戳计算，保证哪怕你切出去看电影，切回来时间也是准的。
- 标签页实时显示：你不用一直盯着网页，网页的标签栏会直接显示倒计时。
- 音效开关：右下角甚至贴心地加了一个“音效开”的按钮。
为了测试它的功能，老张点了几下“开始”、“暂停”和“重置”，反应极其灵敏，没有任何卡顿。
虽然老张实在没那个耐心干等 25 分钟，但看着这个干净利落、完全按需求跑通的深色界面，老张彻底服了。我们不懂代码，但我们懂“我要一个什么样界面”。而现在，AI 不仅听懂了需求，还用专业的工程手段，把细节填补得天衣无缝。
三、微创新：加点自己的东西
界面看着挺好，但老张觉得 25 分钟太死板了？如果我想临时弄个 5 分钟倒计时怎么办？
这个时候，我们就需要用到“微创新”的思维了。不用推翻重来，直接在对话框里继续提一句大白话：
“帮我在圆环下面加一个输入框，可以自己设定倒计时分钟数。”
这里老张得说句实话，别看只是加个输入框，AI 在后台反复修改、调整排版，实打实花了十分钟才跑通。 它确实不是神仙，一秒钟变不出完美结果。但只要你把要求提清楚，它就能不知疲倦地帮你改到对为止。
你看，微创新不需要你从零去写底层代码。你只需要在 AI 搭好的框架上，加上你需要的、哪怕只有一点点不同的细节。
老张看着红色的圆环，总觉得跟自己“老张蓝”的 IP 品牌色不太搭。于是老张又补了一句：
“把界面上所有的红色元素，全部换成‘老张蓝’（色值：#2f6feb）。深色背景保持不变。”
一秒钟，网页换肤完成。看着这个属于自己品牌色的番茄钟，老张心里极其舒坦。
看着蓝色的铃铛和那句“老张，该站起来走走啦！”，老张觉得，这玩意儿虽然简单，但真像是自己亲手“装修”出来的一个小房间。
四、网页做好了，怎么让朋友也能看到？
你在本地双击打开，只有你自己能看到。怎么发给别人看？
其实非常简单。你之前如果跟老张一样，有个自己的域名（比如 aubzhang.com），直接把这个文件传到你的托管平台上，你的朋友就可以通过 aubzhang.com/tomato.html 访问了。
这就是自己折腾最爽的地方：你的地盘，你做主，放什么工具你说了算。
写在最后
最后，老张给大家交个底。
从最开始敲下第一段 Prompt，到中间加输入框，再到最后换成老张蓝，加上反复调试和测试，你们猜花了多少积分？
答案是：只有 16 个积分。
WorkBuddy 每天签到就送 100 个积分。这意味着，哪怕你天天搞这种级别的开发，靠白嫖的免费积分都完全够用。这成本，连买杯瑞幸都不够。
所以，别把 AI 开发想得多高大上。它就是咱们普通人手里的工具，多试几次，多费几句口舌，你就能拥有一个完全属于自己的小工具。
今天只是拿个网页小工具练练手。但这其实打开了一扇门：既然网页能搞出来，手机里的 App 能不能搞？
这个周日，老张准备带大家挑战点新东西。咱们用 AI 手搓一个手机端的去广告神器（类似李跳跳），而且老张会把这个开发过程用到的所有 Prompt 全公开。
网页只是开胃菜，准备好你的电脑，周日见真章！