学习路线 / 03 做第一个小作品 / 第 1 篇
Station 03 · Article 1/2

20 分钟做一个倒数日网页

第一版一次就能用：48 天，我们手动数过。附完整提示词、代码和保存打开的步骤。

GUSTS.AI 编辑部2026.10.19约 3 分钟读完难度 入门含 真实运行 记录#网页#提示词

第一个作品不用大，能打开、能用、能给家人看就算成功。这篇我们让 AI 做一个「倒数日」网页：离孩子生日还有几天。全程没手写一行代码；第一版一次就能用，加功能那一版却藏了两个 bug（下一篇专门修）。

实测：本地 qwen2.5:3b（3B 小模型，Ollama，temperature 0，seed 42），2026-10-19 运行；输出原样贴出，未修改。　网页在 Chrome（无头模式，手机宽度 390px）里实际打开测试。

01 · Goal我们要做什么

一个单独的 .html 文件：双击就能在浏览器里打开，不需要装任何软件、不需要服务器。页面中间一行大字「距离小宇 7 岁生日还有 N 天」，N 每天自动变。

02 · Vague一句话会怎样

「帮我做一个网页。」 · AI 原样输出（节选）
当然可以帮助你创建一个简单的网页，但我需要一些具体的信息来确保我们能够创建一个符合你需求的网页。请告诉我以下几点：

1. 网页的主题或内容是什么？
2. 你希望网页包含哪些基本元素（如文本、图片、表格等）？
3. 你是否已经有特定的设计风格或布局要求？
4. 你希望网页使用哪种编程语言或框架（如HTML、CSS、Ja……（后面还有 3 个问题）

它反问了 5 个问题。和第 02 站的结论一样：你不交代，它就只能问或者猜。

03 · Brief四段式交代

我们发的提示词（可复制，改成你的日期和名字）
背景：我想给家里做一个「倒数日」小网页，放在手机浏览器里看，记录离孩子生日（2026年12月6日）还有几天。
任务：写一个单文件 HTML 网页。
要求：
1. 只用一个 HTML 文件，CSS 和 JavaScript 都写在里面，不引用任何外部文件或网络资源；
2. 页面中间大字显示「距离小宇 7 岁生日还有 N 天」，N 根据当天日期自动计算；
3. 手机上看不需要左右滑动，背景浅色，字是深色；
4. 只输出完整代码，不要解释。

第 1 条「只用一个文件、不引用外部资源」最重要：这样你拿到的东西保存下来就能用，不会因为某个网址打不开而坏掉。

04 · Run拿到代码怎么打开

  1. 把 AI 回复里 <!DOCTYPE html> 到 </html> 的全部内容复制下来。
  2. 电脑上新建一个文本文件，粘贴进去，保存为 countdown.html（注意后缀是 .html，不是 .txt）。
  3. 双击打开，浏览器里就能看到。想在手机上看，可以把文件发给自己，用手机浏览器打开。
AI 给出的第一版代码（原样，可复制）
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒数日</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            text-align: center;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            font-size: 2em;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 id="daysLeft"></h1>
    </div>

    <script>
        const targetDate = new Date('2026-12-06');
        const now = new Date();
        const difference = targetDate - now;
        const daysLeft = Math.ceil(difference / (1000 * 60 * 60 * 24));

        document.getElementById('daysLeft').innerText = `距离小宇 7 岁生日还有 ${daysLeft} 天`;
    </script>
</body>
</html>

05 · Look打开看看

第一版倒数日网页截图
第一版在手机宽度下的实际截图（2026-10-19 打开，显示 48 天）

2026 年 10 月 19 日打开，显示 48 天。我们自己数了一遍：10 月还剩 12 天、11 月 30 天、12 月 6 天，正好 48。手机上没有左右滑动，配色也照要求。第一版一次就成了。

06 · Add加一个功能

接着追问（可复制）
在这个网页基础上加一个功能：下面加一个按钮「换一个目标日」，点了以后弹出输入框，让我输入新日期（格式 2027-01-01）和名字，页面就改成倒数这个新日期，并且刷新页面后还记得（用 localStorage）。其余保持不变，输出修改后的完整代码，不要解释。

它给出了第二版：多了一个按钮，点了会弹框让你输入。看起来功能都在。但「看起来有」和「真的能用」是两回事，下一篇我们把它当成一个挑剔的用户来测。

07 · Limits真实边界

· 代码里写的是 new Date('2026-12-06')，浏览器会按 UTC 零点理解。在中国时区今天算出来是对的，但在某些时区、某些时刻天数可能差 1 天。我们没有让 AI 修这一点。

· 我们只在 Chrome 里测试过，没有在 Safari、微信内置浏览器里测试。

08 · Next下一步

做出来只是一半。下一篇：怎么自己测、怎么把 bug 描述清楚，让 AI 一次改对。

这是「03 做第一个小作品」的第 1/2 篇。实测原始记录随站点源码保存（src/runs.json）。