这些需求都不复杂，但如果找人开发，至少要几天；自己学编程，至少要几个月。

而用 WorkBuddy，10 分钟就能做出来。

📖 先搞懂一个概念：什么是 HTML？

在开始之前，你需要知道一个词：

（超文本标记语言，一种用来做网页的文件格式，你每天打开的网页本质上都是 HTML 文件）。

不用被"语言"两个字吓到。你不需要学会写 HTML，你只需要知道：

所以，"做一个网页小工具"其实就是"让 AI 帮你写一个 HTML 文件"。写好了，双击打开就能用。

🍅 今天我们做什么？一个番茄钟小工具

效果就是一个网页：有倒计时数字，有开始/暂停/重置按钮，能输入当前任务名称。打开就能用，关了下次打开还在。

第一步：想清楚你要什么（1 分钟）

动手之前，先花 1 分钟想清楚：

你不需要想得很专业，像聊天一样描述就行。

一个番茄钟工具：
- 中间显示倒计时数字，默认 25 分钟
- 有开始、暂停、重置三个按钮
- 上面可以输入当前在做什么任务
- 倒计时结束时有提示音
- 颜色简洁好看，紫色系


第二步：把需求告诉 WorkBuddy（1 分钟）

打开 WorkBuddy 对话框，把下面这段话复制粘贴进去（你可以根据自己的需求修改）：

请帮我用 HTML + CSS + JavaScript 写一个番茄钟小工具，要求：

1. 页面中间显示倒计时，格式 25:00，字体大一点
2. 有三个按钮：开始、暂停、重置
3. 顶部有一个输入框，可以输入当前任务名称
4. 倒计时到 0 时播放提示音
5. 倒计时进行时数字变成红色
6. 整体风格简洁现代，紫色系配色
7. 所有代码写在一个 HTML 文件里，方便直接双击打开

请给出完整代码，确保可以直接保存为 .html 文件运行。


第三步：复制 AI 生成的代码（1 分钟）

WorkBuddy 会给你一段完整的代码。下面是我拿到的一份完整代码，你可以

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>番茄钟</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
            font-family: -apple-system, "Microsoft YaHei", sans-serif;
        }

        .container {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 4px 20px rgba(124, 58, 237, 0.1);
            text-align: center;
            width: 360px;
        }

        h1 {
            color: #5b21b6;
            font-size: 22px;
            margin-bottom: 20px;
        }

        .task-input {
            width: 280px;
            padding: 10px 16px;
            border: 2px solid #e9d5ff;
            border-radius: 10px;
            font-size: 14px;
            margin-bottom: 24px;
            outline: none;
            transition: border-color 0.3s;
        }

        .task-input:focus {
            border-color: #8b5cf6;
        }

        .timer-display {
            font-size: 64px;
            font-weight: bold;
            color: #5b21b6;
            margin: 20px 0;
            font-variant-numeric: tabular-nums;
        }

        .timer-display.running {
            color: #dc2626;
        }

        .btn-group {
            display: flex;
            gap: 12px;
            justify-content: center;
            margin-top: 20px;
        }

        .btn {
            padding: 12px 28px;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
        }

        .btn-start {
            background: #8b5cf6;
            color: white;
        }

        .btn-start:hover {
            background: #7c3aed;
        }

        .btn-pause {
            background: #f3f4f6;
            color: #6b7280;
        }

        .btn-reset {
            background: #f3f4f6;
            color: #6b7280;
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .status {
            font-size: 13px;
            color: #9ca3af;
            margin-top: 16px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>番茄钟</h1>
        <input type="text" class="task-input" placeholder="输入当前任务..." id="taskInput">
        <div class="timer-display" id="timerDisplay">25:00</div>
        <div class="btn-group">
            <button class="btn btn-start" id="btnStart">开始</button>
            <button class="btn btn-pause" id="btnPause" disabled>暂停</button>
            <button class="btn btn-reset" id="btnReset">重置</button>
        </div>
        <div class="status" id="status">点击开始，专注 25 分钟</div>
    </div>

    <script>
        let timeLeft = 25 * 60;
        let timerInterval = null;
        let isRunning = false;

        const display = document.getElementById('timerDisplay');
        const btnStart = document.getElementById('btnStart');
        const btnPause = document.getElementById('btnPause');
        const btnReset = document.getElementById('btnReset');
        const status = document.getElementById('status');
        const taskInput = document.getElementById('taskInput');

        function updateDisplay() {
            const minutes = Math.floor(timeLeft / 60);
            const seconds = timeLeft % 60;
            display.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        }

        function playSound() {
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();

            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);

            oscillator.frequency.value = 800;
            oscillator.type = 'sine';

            gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 1.5);

            oscillator.start(audioContext.currentTime);
            oscillator.stop(audioContext.currentTime + 1.5);
        }

        function startTimer() {
            if (isRunning) return;
            isRunning = true;
            display.classList.add('running');
            btnStart.disabled = true;
            btnPause.disabled = false;
            const task = taskInput.value.trim();
            status.textContent = task ? `正在专注：${task}` : '专注中...';

            timerInterval = setInterval(() => {
                timeLeft--;
                updateDisplay();

                if (timeLeft <= 0) {
                    clearInterval(timerInterval);
                    isRunning = false;
                    display.classList.remove('running');
                    playSound();
                    const finishedTask = taskInput.value.trim();
                    status.textContent = finishedTask
                        ? `完成！「${finishedTask}」已搞定`
                        : '时间到！休息一下吧';
                    btnStart.disabled = false;
                    btnPause.disabled = true;
                }
            }, 1000);
        }

        function pauseTimer() {
            if (!isRunning) return;
            clearInterval(timerInterval);
            isRunning = false;
            display.classList.remove('running');
            btnStart.disabled = false;
            btnPause.disabled = true;
            btnStart.textContent = '继续';
            status.textContent = '已暂停';
        }

        function resetTimer() {
            clearInterval(timerInterval);
            isRunning = false;
            timeLeft = 25 * 60;
            updateDisplay();
            display.classList.remove('running');
            btnStart.disabled = false;
            btnPause.disabled = true;
            btnStart.textContent = '开始';
            status.textContent = '点击开始，专注 25 分钟';
        }

        btnStart.addEventListener('click', startTimer);
        btnPause.addEventListener('click', pauseTimer);
        btnReset.addEventListener('click', resetTimer);

        updateDisplay();
    </script>
</body>
</html>


——你不需要看懂它，只需要全选复制就行。

第四步：保存成文件，双击打开（2 分钟）

这是最关键的一步，但也是最简单的：

你的浏览器会自动打开，出现一个漂亮的番茄钟页面。输入任务名，点"开始"，25 分钟的倒计时就会开始跳动。

恭喜你！你刚刚做出了人生第一个网页小工具！

做完之后，你可能会想：能不能改成 15 分钟？能不能加个 5 分钟休息模式？能不能换个颜色？

不用自己改代码，直接告诉 WorkBuddy。

请把番茄钟的专注时间从 25 分钟改成 45 分钟，
另外加一个"短休息"按钮，点击后切换到 5 分钟倒计时。


请把番茄钟的配色从紫色改成蓝绿色系，更清爽一些。


请给番茄钟增加以下功能：
1. 完成一个番茄钟后，自动计数（已完成几个）
2. 底部显示今日完成数量
3. 倒计时结束时，除了提示音，页面背景闪烁一下


AI 会直接给你修改后的完整代码，你只需要重新复制粘贴、保存就行。

你负责想，AI 负责写。你不需要学任何语法。

💡 除了番茄钟，还能做什么？

理解了这个方法之后，你能做的小工具远不止番茄钟。下面是一些灵感：

帮我做一个网页工具：
- 输入时薪和每天工作小时数
- 自动计算日薪、月薪、年薪
- 加一个"加班费计算"功能：输入加班小时数，按 1.5 倍计算


帮我做一个网页工具：
- 一个文本框，可以输入一组名字（每行一个）
- 点"随机抽取"按钮，随机选一个人
- 选中的名字大字显示，有动画效果


帮我做一个网页工具：
- 可以设置会议时长（比如 30 分钟）
- 大字显示剩余时间
- 最后 5 分钟数字变橙色
- 最后 1 分钟数字变红色并闪烁


帮我做一个网页工具：
- 可以添加多个习惯（比如喝水、运动、读书）
- 每个习惯旁边有一个打卡按钮
- 今天打卡过的习惯变绿色
- 数据保存在浏览器本地，关了再打开还在


帮我做一个网页工具：
- 可以选择密码长度（8-32 位）
- 可以勾选是否包含大小写字母、数字、特殊符号
- 点"生成"按钮，随机生成一个强密码
- 旁边有"复制"按钮


每个灵感，你只需要把需求描述发给 WorkBuddy，10 分钟内就能拿到一个能用的网页文件。

Q1：做出来的网页别人能访问吗？

不能。这个文件只存在你的电脑上，双击打开只有你自己能看到。如果你想让别人也访问，需要把它放到服务器上，那就是另一个话题了。

 文件发到手机上（比如用微信发给自己），用手机浏览器打开就能用。

Q3：AI 生成的代码报错了怎么办？

直接把报错信息复制粘贴发给 WorkBuddy，它会帮你修。你也可以说"运行后页面是空白的，帮我检查一下哪里有问题"。

Q4：我不懂代码，怎么知道 AI 写得对不对？

。功能正常就是对的，功能不对就跟 AI 说哪里不对。你不需要看懂代码，只需要看懂效果。

能，但建议从简单的开始。如果你想做"在线商城""社交平台"这种复杂系统，一个 HTML 文件搞不定，需要后端（服务器端程序，处理数据存储和业务逻辑）配合。但日常小工具，一个 HTML 文件足够了。

🎯 总结：你已经拥有了"做工具"的能力

你不再是"只会用别人做好的工具"的人了。从今天开始，你有了"自己定制工具"的能力。

想要什么功能，描述出来，10 分钟就能得到。这种能力，在以前是程序员才有的。

在开始之前，你需要知道一个词：HTML（超文本标记语言，一种用来做网页的文件格式，你每天打开的网页本质上都是 HTML 文件）。

10 分钟用 WorkBuddy 做一个网页小工具，不会代码也能做出来

本文面向零基础读者，教你用 WorkBuddy 在 10 分钟内做出一个能用的网页小工具（番茄钟）。文章先解释了 HTML（网页文件格式）的概念，再手把手演示完整四步流程：想需求 → 给 AI 指令 → 复制代码 → 保存打开。提供一份完整可直接复制运行的 HTML 代码，并给出 5 个进阶工具灵感和常见问题解答。核心观点：你不需要学编程，只需要学会描述需求，AI 就能帮你把想法变成能用的工具。

首席科学家

人工智能

无需编程基础，10分钟用WorkBuddy制作个性化网页工具！本文手把手教你创建番茄钟小工具，从需求描述到代码生成，只需简单四步。还能自由修改功能、更换配色，打造专属效率工具。解锁AI编程新技能，轻松实现工资计算器、随机点名器等实用工具开发，告别复杂软件安装，一个HTML文件搞定所有需求！

数据存储

服务器

WorkBuddy 

AI编程

Windows

2026上云采购 | AI焕新·智启新局

workbuddy

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

10 分钟用 WorkBuddy 做一个网页小工具，不会代码也能做出来

10 分钟用 WorkBuddy 做一个网页小工具，不会代码也能做出来

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐