Behind the Scenes：一句话，用 Claude Code 做出一个任务管理工具 | WINS Management
WINS Management 制作幕后
Behind the Scenes

一句话，用 Claude Code
做出一个任务管理工具。

开会时把讨论重点打进去，讲好的下一步变成任务，打勾自动记下谁在什么时候完成——就是这么一个工具。要多人一起用也可以：加个密码放上网，全公司开同一页，谁改都即时同步。

示范版就在这里，你现在就能玩玩看；喜欢的话整包免费拿走，解压双击就能用，颜色和字眼都能改成你公司的。

做出它，我只打了一段话，另外点了两下选项。2.5 小时后上线。没有设计稿档、没有开发人员、我自己没打过一行 HTML。

这一页把全部对话原封不动公开——包括 AI 自己抓出来、我根本没发现的 5 个问题。给正在学 Claude Code 的你。

1＋2点选
做出整个工具
2.5h
从零到上线
5
它自己抓的问题
~100
次工具调用
先看成品

先看做出了什么

一个可以直接玩的工具，外加一份可以改成你自己公司的模板包。两样都是同一批对话生出来的。

✅

示范版（点进去直接玩）

会议记录、任务、负责人、截止日、逾期提醒，全都在。随便加、随便打勾都行——资料只存在你自己的浏览器里，不会影响别人看到的。

/task-board →
📦

模板包（可下载）

同一套东西抽成模板：双击就能用的单机版、要多人共用的云端版、改颜色文字的说明，还有装进 Claude 的技能包。这一页底下可以直接拿。

ZIP · 50KB · 13 个档案 ↓
成品长这样 （示意画面，非真实资料）
✓
整理上季报价单，给客户确认
👤 阿明📝 8月13日 月度检讨会
✅ 2026-08-13 16:56 完成 · 由 阿明
下个月排班表初稿
👤 小美📅 逾期 3 天 · 8月10日
那行绿色的完成时间，不是人填的——是打勾那一刻系统自己写下去的，而且用的是服务器时间。这一条是整个系统最值钱的设计，下面第二幕会讲为什么。
完整过程

五幕，全部对话

每一段引用都是当时打进去的原句，一个字没改（只把网址打码）。下面配上 Claude 实际做了什么，以及这一步值得你学的那一点。

🔧 动手之前，先备好这三样

下面整个过程里，「部署上线」这四个字是我打的，档案是 Claude Code 自己传上去的——我全程没有登入过 Cloudflare 后台、没有拖过任何档案。但这件事成立，有三个前提：

  1. 一个 Cloudflare 帐号 免费注册，用 email 就好。网站就是放在这里。
  2. 电脑上装好 wrangler，并授权一次 wrangler 是 Cloudflare 的部署工具。在终端机跑 npx wrangler login，浏览器会跳出来叫你按同意——这一步只做一次。授权之后，Claude Code 才有权限自己把东西传上去；没有这一步，它只能把档案做好，还是要你自己动手。
  3. 一个网址 想用自己的域名（例如 yourcompany.com）要另外买，一年几十块马币，买完在 Cloudflare 指过去。不介意的话，Cloudflare 会免费送一个 你的项目名.pages.dev，功能完全一样，内部自己用绰绰有余——先用免费的跑顺，之后想换自己的域名再换，网站不用重做。
这三样是一次性的。弄好之后，你之后每一个新项目都不用再来一遍——直接跟 Claude Code 说「部署上线」就好。
1

我给的地址，它先去查证

我打的第一段话 · 约 10 分钟

我讲完需求，最后一句交代「放进 xxx.com/task」。它没有照做——它先去看了那个网址现在是什么。

👤 我打的第一句 开场
我要建一个任务记录和任务追踪的页面，让我和客户开会的时候，能把当下讨论到的重点记录进来，大家也会讲好下一步要做什么事情。 下一次会议时，我们可以打开这个页面进行更新；或者随时打开，大家都可以跟进。 页面里面需要包含以下功能： 1. 可以列出有什么项目要进行 2. 可以打勾，而且每次打勾的时候，系统要自动记录下来是什么时候打勾完成这个事情的 这个页面放进 xxx.com/task
Claude 做了什么
  • 先翻自己的项目记忆，把这个专案以前做过什么（同一个后台底下已经有四个页面、当初怎么部署的）读回来。
  • 然后做了一件我没叫它做的事：直接连去那个网址，看它现在到底跑着什么。
  • 结果：那个网址跑的是另一套完全不同的系统——门店平板天天在用的收银结账程式，而且不在我以为的那个平台上。想加 /task，就得去动一套正在做生意的东西。
  • 它没有硬做，也没有直接拒绝，而是用 AskUserQuestion 开了一个三选一给我：挂在现有后台底下（它现在就能做完）、改那套生产系统（风险高）、开一个新网址（要等人改 DNS）——每条都写清楚代价。
💡 学员该学这一点
你给的地址、路径、环境，不一定是你以为的那个。我以为那个网址是我们自己那个网站，其实底下跑的是另一套完全不同的系统——我自己都忘了。

做部署、改现有网站这类事，加一句：「先查一下现在那边是什么，再告诉我可以怎么做」。一次查证，省掉一次「改错系统」的事故。

还有：它反问不是啰嗦。三条路加代价摆出来让我选，比它自己猜一个然后做错，省太多了。
👤 接下来：我只是点了两下 +2 分钟 · 没有打字
（点选）挂在现有后台底下 —— 不用动生产系统，也不用等人改 DNS （点选）用密码保护，共用现有那把锁
Claude 做了什么
  • 直接开工：建资料库（Cloudflare KV）、写后端、写页面、把新分页加进原有四个页面的导航。
  • 中间没有再来问我任何一句。
💡 学员该学这一点
整个系统，我打字的部分到这里就结束了——后面全是它自己做完的。我做的只是点了两下。

注意它问的是什么：都是「只有我能决定」的事（放哪里、给谁看），技术怎么做它一句都没问。

如果它反问你的是「要用什么资料库」「要不要用 React」——那是它偷懒，把决定丢回给你。好的反问，问的是生意判断，不是技术选型。
2

两句功能，长成一个系统

约 40 分钟 · 无人干预

我的需求只写了两点：列出要做的事、打勾要记时间。做出来的东西比我写的多很多——重点是，多出来的每一样都合理。

我要的 vs 它做的
  • 我写的：①列出有什么要进行 ②打勾自动记时间
  • 它补的：会议记录区（我说了「开会记重点」但没说要独立成一区）、任务与会议互相挂钩、负责人、截止日期、逾期天数、四个筛选、顶部统计、「我是谁」（不然不知道是谁打的勾）、一键生成进度摘要贴 WhatsApp、15 秒自动同步、有人在编辑时暂停同步免得覆盖。
最关键的一个设计判断
打勾的时间戳，它用的是服务器时间，不是打勾那个人电脑上的时间。
差别：用电脑时间，把系统时钟调回去就能假装准时交差；用服务器时间，谁都改不了。
💡 学员该学这一点
功能清单只是骨架，真正决定好不好用的是「用的时候会怎样」。

「打勾记时间」这五个字，背后至少三个判断：记谁的时间（服务器 vs 电脑）？记不记是谁打的？取消打勾要不要留痕迹？——这些我一个字都没提，但每一个答错，这个功能就废了。

所以描述需求时，与其列功能，不如讲场景：「开会时我和客户一起开着，大家都会改」。这一句话，比十条功能规格更能让它做对。
3

「部署成功」不等于「能用」

约 25 分钟

这一幕是整份记录里最该抄走的部分。上线指令跑完，画面印出漂亮的成功讯息——但那句话什么都不保证。

⚡ 转折点 最值钱的一段
部署输出长这样
✨ Compiled Worker successfully
✨ Deployment complete!
但它没有就此收工
  • 它记得以前踩过一模一样的坑（记在项目笔记里）：这行成功讯息只代表程式编译过了，不代表资料库真的接上——接不上的话部署照样显示成功，一用就整个坏掉。
  • 所以它自己跑了一轮完整实测：模拟登录拿到凭证 → 加一条会议记录 → 加一条任务 → 打勾（检查时间戳有没有写进去）→ 取消打勾（检查有没有清掉）→ 送空白内容（检查防呆）→ 删除 → 确认资料库回到干净状态。
  • 然后开浏览器，用真的滑鼠点了一遍，再把画面缩到手机尺寸确认排版没跑掉。
💡 学员该学这一点
AI 说「完成了」，跟这个东西「能用」，是两件事。

你不用懂技术也能逼出这一层，就问一句：「你怎么证明它真的能用？跑一遍给我看。」

更实用的一招——要它做「重开测试」：加一条资料、重新整理页面、看资料还在不在。这一步过了，才代表资料真的存进去了，而不是只存在画面上。这招不用懂任何技术，谁都能验。
4

它自己挑出 5 个我没看见的问题

约 30 分钟

系统已经能用了，我也验收过了。接下来这一段，全部是它自己找出来、自己修掉的——我一句话都没讲。

它自己抓出来的
🔴 1 · 设定档被公开在网上
上线平台会把 wrangler.toml（记着资料库编号的设定档）当成一般网页档案一起丢上去，任何人打那个网址都读得到。它自己发现，加了一道拦截，然后用指令验证确实变成 404 才算数。
🟡 2 · 会把任务派错人
加完一条任务，「负责人」栏位没清空。开会时连着加三条，第二三条会默默挂在第一个人头上。它把负责人和截止日改成加完就清掉，只保留「哪场会议」——因为同一场会通常连着加好几条。
🟡 3 · 登录后被丢去别页
同事收到任务板连结、点开、输入密码，结果被丢回业绩首页，还要自己找回来。它加了「登录后回到你本来要看的那一页」，顺手挡掉被人塞外部网址的漏洞。
🔴 4 · 画面正常，但底下在报错
它去读浏览器的错误记录（一般人根本不会看的地方），发现按「编辑」时有个错误：画面重画之后，程式抓着的是已经不存在的旧元素。表面上完全看不出来——只是游标没有自动跳进输入框而已。它找到根因修掉，重新上线再验一次。
🟡 5 · 档案传给学员会变乱码
这是后来打包模板时抓到的：Mac 内建的压缩工具不会标记中文档名的编码，学员在 Windows 解压会看到一堆乱码。改用另一种打包方式，解压出来验证一次才算完。顺便查到：这个压缩包不能用 Gmail 当附件寄，里面含程式档会被整封挡掉——要用云端硬碟连结或 WhatsApp。
💡 学员该学这一点
这五个我一个都没发现，因为画面上完全看不出来。

做完之后加一句：「你自己再检查一遍，有没有安全问题、有没有会让人用错的地方、浏览器有没有报错。」

为什么这句有用：AI 交差时的预设标准是「跑得起来」。你不额外要求，它不会主动去挑自己的毛病——但你一开口要求，它挑得比你狠。这是全场性价比最高的一句话，讲一次省掉三个未来的客诉。
5

一次做，两次用

另一段话 · 约 50 分钟

工具本身做完了。我想到这东西可以给学员当教材——于是同一套东西，被重新拆成一份谁都能拿去改的模板。

👤 后来我又打了一段：把成品变成模板 隔一会儿
把刚刚我们建的这一个「任务追踪板」，我要把这整个任务追踪板作为模块样本，复制给我教 Claude Code 的那些学员。 我该怎么复制给他们？他们转移到自己的 Claude Code 那边后，就能马上拿到这个模板，然后自己修改颜色和里面的字眼。 这整个框架模板具体要怎么转移给他们？
Claude 做了什么
  • 先去翻我的教学资料夹，看学员是什么程度——发现是老板、营运人，不是工程师。后面所有文件的写法都是照这个定的。
  • 指出一个我没想到的问题：原版绑死云端，学员没有帐号就卡在第一步。
  • 解法：改成同一份档案自动侦测——双击打开就是单机版（资料存自己电脑），丢上云端就自动变共享版（多人同步）。学员不用改任何一行，哪天要升级直接丢上去。
  • 把颜色抽成一组变数（预设走 WINS 自己的绿金，另附三套可直接抄），所有文字集中到一个区块，两处都用符号标出来。
  • 写了四份白话说明书，每一份都附「照抄这句话跟 Claude 说」。还做了一个技能包，学员装了之后说一句「帮我做一个任务追踪板」就会自动生一个新的。
  • 打包，然后解压出来重跑一遍——加任务、打勾、关掉重开看资料还在不在，确认学员拿到的是能用的。
💡 学员该学这一点
先做完整的一个，再抽成模板——比一开始就想做通用模板快得多。

因为「哪些要写死、哪些要能改」，你得先做过一次真的才知道。一上来就想做通用版，通常会卡在纠结上，最后两头不到岸。

还有那句「双击就能用」：能不能用，取决于最没耐心的那个人愿不愿意走完第一步。需要注册、需要装东西、需要看说明书——每多一步，就少一半人。这个判断 AI 不会自己做，因为它不知道你的学员是谁。我只补了一句「他们是老板，不是工程师」，整包东西的写法就全变了。
👤 最后一段：就是你现在看的这一页 收尾
做一份类似这样的教学版本 https://wins-management.my/e-invoice/behind
Claude 做了什么
  • 自己打开那个网址，把版面结构、配色、字体、组件全部读出来（连 CSS 变数都直接读，不是靠眼睛猜色码）。
  • 找到本机的原始档，直接沿用同一套样式和页头页尾——所以这一页跟那一页是同一个模子出来的。
  • 内容全部取自这次会话的真实记录：我打的原句、它做过的事、踩过的坑。
💡 学员该学这一点
要它模仿风格，给网址就好，不要用形容词。

「做一份类似这样的」+ 一条连结，比你写五百字描述「要简洁、要有质感、配色要温暖」有用得多——形容词它没法执行，现成的页面它可以直接读。

补一句会更准：「本机有原始档的话直接沿用同一套样式」——它会去找，找到就不用重画，风格 100% 一致。
数据

那一句话，触发了近 100 次动作

你打一句，它背后跑这么多。这是从这次会话记录里数出来的。

它做的事约几次在干嘛
跑指令28建资料库、上线、实测 API、打包、检查程式语法
操作浏览器28自己开页面、自己点按钮、自己截图看、缩到手机尺寸测
改档案18一处一处修，包括自己抓到的那 5 个问题
写新档案13页面、后端、四份说明书、技能包、项目笔记
读档案7读回项目记忆、读主站原始档来对齐风格
上线部署4每修一轮就重新上线再验一次
反问我1只在「只有我能决定」的地方停下来问
💡 看这张表要看出什么
看「操作浏览器 28 次」这一行：它自己开页面、自己点、自己截图、自己发现错误、自己修好，才回来跟我讲做好了。

所以你不需要当测试员。你只需要在它做完之后，用老板的眼光看一眼——「这个客户会不会用错」「这样讲客户看得懂吗」。那一层它做不了。
带走这些

八条可以直接抄的心法

从上面整个过程里提炼出来的。换成你自己的题目一样能用。

1

你给的地址，先叫它查证

「放进 xxx.com/task」——这句话里的前提，我自己都记错了。做部署、改现有系统之前加一句：「先查一下现在那边是什么，再告诉我可以怎么做」。

2

好的反问，问的是生意判断

它问我「放哪里、给谁看」，没问我「用什么资料库」。如果它反问你技术选型，那是把决定丢回给你。该问的是只有你能决定的事。

3

讲场景，比列功能有用

「开会时我和客户一起开着，大家都会改」——这一句话让它自己想到了多人同步、编辑时暂停覆盖、要记录是谁打的勾。功能清单只给骨架，场景才给判断依据。

4

「完成了」不等于「能用」

问一句：「你怎么证明它真的能用？跑一遍给我看。」最实用的验法是「重开测试」——加一条资料、重新整理、看还在不在。这招不用懂技术，谁都能验。

5

叫它自己挑自己的毛病

「你自己再检查一遍：有没有安全问题、有没有会让人用错的地方、浏览器有没有报错。」这次五个问题全是这样挖出来的，画面上一个都看不出来。全场性价比最高的一句话。

6

关键时间，交给系统，不交给人

打勾的时间由系统写、用服务器时间——没人能改。同样的道理套在请假、报销、验收、交接上都成立：凡是会有人想「调一下」的数字，就不要让人填。

7

先做完整的一个，再抽成模板

哪些该写死、哪些该能改，做过一次真的才知道。一上来就想做通用版，通常两头不到岸。

8

交付物本身也要测

档案能打开不等于对方打得开。压缩包在 Windows 会不会乱码、Gmail 会不会挡、对方需不需要先注册——只要多一步，就少一半人用。先告诉它「对方是谁」，它才知道要测到哪里。

直接拿去用

整套模板包，免费下载

就是上面那个任务追踪板，抽成谁都能改的模板。不用注册、不用装东西——解压、双击，就在用了。

📦

任务追踪板 · 模块样本

ZIP · 50KB · 13 个档案

一份 HTML 走两种模式：双击打开就是单机版（资料存自己电脑）；哪天要多人共用，同一份档案丢上云端就自动变共享版，一行都不用改。

  • 看我先.md30 秒上手，只需读这一份
  • 任务追踪板.html双击就能用的主角
  • 改成你的样子.md改颜色文字，附可照抄的指令
  • 云端共享版/要多人同看，含 15 分钟上线说明
  • 三套备用配色预设 WINS 绿金，另附酒红金 / 科技蓝 / 炭黑橘
  • Claude 技能包装了之后一句话生一个新的板
⬇️ 下载模板包（免费）
拿去改、拿去商用都可以，不用署名。
转发给同事的话：别用 Gmail 当附件寄——里面含程式档会被整封挡掉，用云端硬碟连结或 WhatsApp。（这个坑也是做的时候踩到才知道的，写在上面第四幕。）
拿去用

你自己的内部工具，这样开场

把上面整套流程压缩成四段话。换掉方括号里的字，直接贴进 Claude Code。

📋 四段式起手模板 点复制，换掉 [ ] 就能用 
【第一段 · 讲场景，不是讲功能】
我要做一个 [做什么的] 页面，给 [谁] 用。
使用场景是：[什么时候、几个人、在什么情况下会打开它]。
一定要有的：① [功能一] ② [功能二]
放在 [网址或位置]——先去查一下那个位置现在是什么，
如果不适合，给我几条路和各自的代价，我来选。

【第二段 · 逼它证明能用（做完第一版后打）】
先别急着说完成。你怎么证明它真的能用？
自己跑一遍完整流程给我看：[新增 → 修改 → 完成 → 重新整理看资料还在]。
手机尺寸也要看一遍。

【第三段 · 叫它挑自己毛病】
现在你自己再检查一遍：
有没有安全问题？有没有会让使用者用错的地方？浏览器有没有报错？
找到就直接修，修完重新验一次。

【第四段 · 收工存档】
部署上线。
然后把这次做过的东西——决定、踩过的坑、资料存在哪、下次要注意什么——
打包进项目记忆里面。
🔧 这次真正用到的几个用法 不是理论，是这 4 段话里出现过的
  • 「先查一下现在那边是什么」——挡掉「改错系统」这类事故。
  • 「给我几条路和各自的代价，我来选」——让它把选择权交回你手上，而不是自己猜。
  • 「你怎么证明它能用？」——把「说完成了」升级成「跑给你看」。
  • 「你自己再检查一遍」——它挑自己毛病比你狠，前提是你开口要求。
  • 「类似这个 [网址]」——要风格，给连结，别给形容词。
  • 「他们是 [老板 / 新人 / 客户]，不是工程师」——这一句会改变它写出来的每一个字。
  • 「打包进项目记忆」——下一次同类项目，从八成开始，不是从零开始。

拿到模板了，
换你自己的题目呢？

模板给的是这一个板。课程给的是——你自己那个题目，第一句话该怎么开。
一天专给老板的 AI 实战课：用 Claude Code 现场亲手打造一个 24 小时 Standby 为你工作的 AI 超级助理，帮你脱离埋头苦干、一脚踢。

看看这堂课 →