塞音菩光上周一个做活动运营的朋友找我：“你会不会做签到？周末读书会马上开始，我们不想再用纸质表，公司又没有现成系统，临时去找那些在线表单工具又要注册又要审核，根本来不及。”那会儿我在外面，就远程指导他打开手头的 Cursor，挂上一个自制的签到 Skill，从建项目到页面能在浏览器里跑起来，大概十来分钟。他全程没有手写过一行完整代码。
这篇文章不是教你成为程序员，而是把那条我已经反复验证过的零代码链路完整拆给你看：先想清楚签到这件事的规则，再把规则固化成 Skill，接着让 Cursor 按 Skill 生成页面，最后按验收清单测一遍再拿去用。适合三类人：完全不懂开发但需要给社团、培训、门店做小工具的人；前端刚入门、想用 AI 减少重复劳动的人；以及那些听说了 Skill 但一直没搞明白它到底改变了什么的人。
先说清楚一件事：标题里写的“零代码”，不意味着系统背后没有代码，而是你不必亲手写。你要做的只是把需求说清楚、把结果验收好，剩下的事交给 Cursor 和 Skill。明白这个前提后，下面这套玩法你就完全能复现。
1. 别让 AI 自由发挥：签到需求先压缩成这几条，Skill 才能发挥价值
我见过太多新手一上来就甩给 AI 一句“帮我做个签到系统”，然后对着一个华丽但根本没法在现场用的页面发呆。问题不在 AI，在于“签到系统”这四个字太模糊。AI 不知道你是要会议室门口扫二维码，还是前台人员拿电脑代签，也不知道你有多少人、要不要导出报表、要不要统计迟到。
1.1 签到的软件本质，其实是一张登记表
把签到需求翻译成软件逻辑，一句话就能讲完：不断往一张表里追加记录，每条记录至少包含“谁、什么时间、参加哪个活动”三个字段，再加一条业务规则——同一个活动里同一个人不能重复签到。
这就够了。后面的界面长什么样、按钮放哪里、名单怎么展示，都是锦上添花。核心数据模型就是这张表。
我自己在做这类小工具前，一定会先花两分钟把需求压成这么几条，而不是急着打开 Cursor：
- 用什么来唯一标识一个人？可以是手机号、工号、学号，甚至可以只是姓名。
- 签到数据要保存多久？活动结束之后还想不想查历史记录？
- 使用现场是什么样的？多人同时用手机签，还是签到处一台电脑/平板由工作人员操作？
- 要不要导出？导出成 CSV 用 Excel 打开，是最通用且零成本的办法。
这几条想清楚了，你就已经具备了一个产品经理的思维。接下来的事，是把这几条“翻译”成 AI 能严格执行的说明文档。
1.2 我先圈定一个“最小可用”的签到场景
零代码实战最忌讳一步到位。你最好先选一个小到不能再小的真实场景，把它做透，再谈扩展。
这篇文章默认的使用场景是这样的：一场线下培训或活动，报名 30 到 50 人，签到处放一台电脑或平板，来一个人就输入姓名和工号（或手机号后四位）完成签到，屏幕上能实时看到已签到名单，活动结束时能一键导出名单。所有人不用装任何软件，只要有一个现代浏览器。
先别急着做扫码签到、短信验证、大屏滚动那些功能。那些属于第二步、第三步，先把最小闭环跑通，才是新手上手最快的方式。我见过不少人想一口气做一个媲美企业级 OA 的东西，结果在需求阶段就被自己吓退了。
1.3 Skill 不是神秘技术，它是给 AI 的“岗位说明书”
标题里的 Skill 到底是个什么东西？你完全可以把它理解成一份给 AI 的岗位说明书，或者是一套行为 SOP。没有 Skill 的时候，你每次新开对话都要重新解释一遍：“我要中文界面、不要依赖框架、要防止重复签到、要支持导出……”有了 Skill 之后，这些约束被固化成一个文件，你只需要说一句“按 qiandao 技能来做”，AI 就会自动遵守里面写好的规则。
这也正是 Skill 和普通聊天的本质区别：普通聊天里的要求是临时的、易遗忘的；Skill 里的要求是可复用、可维护的。同一个 Skill 不但能用来生成签到系统，下次换一个活动名称、换一个 logo，照样能再次使用。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 装好 Cursor 之后，我建议你先处理这三件事：中文界面、项目目录、技能入口
既然目标用户是新手，环境准备这部分我尽量往细了写。已经装好 Cursor 的人可以直接跳到 2.3，但前两步花不了你一分钟，顺手做完后面会省很多事。
2.1 安装 Cursor 和切换中文界面的方法
Cursor 是一款基于 AI 的代码编辑器，界面长得和 VS Code 几乎一样，对新手来说没有额外学习成本。直接去官网下载对应你操作系统的安装包，安装过程就是一路下一步，不再赘述。
第一次打开后，如果界面是英文，不用慌，也不需要去折腾任何非官方的东西，Cursor 本身就内置了多语言界面。在软件的设置里搜索 language 或 display language，把界面语言切换成简体中文，重启一下即可。这一步和你平时把手机系统语言切成中文是一模一样的操作。
小提示：官方免费档的额度用来完成这种个人项目和练习完全够用，不必一开始就考虑付费。如果你用量大，再去官网看当前的价格和权益即可，别信那些所谓“续杯”“破解”的路子，没必要也不稳妥。
2.2 建立一个干净的项目目录，别在“桌面”乱放
新手最容易犯的错，是让 AI 把文件生成到某个自己根本找不到的位置。我建议一开始就固定一个目录。比如在电脑上建一个名为 qiandao 的文件夹，用 Cursor 左上角的“打开文件夹”功能把它加载进来。这样后续生成的文件都会落在这个文件夹里，一目了然。
目录结构可以是这样：
code复制qiandao
└── .cursor
└── skills
└── qiandao
└── SKILL.md
看不看得懂无所谓，你只要知道：这是一个约定俗成的放置技能文件的位置。就算你完全没有代码经验，也能通过右键新建文件的方式创建出来。先创建文件夹，再创建里的 SKILL.md 文本文件。你甚至可以直接在 Cursor 的对话框里对它说“帮我在当前项目里创建 .cursor/skills/qiandao/SKILL.md”，让 AI 代劳。
2.3 Skill 的加载方式：先建文件，再学一个万金油激活法
Skill 的加载方式在不同版本里偶尔会有差异，这是很多人卡壳的地方。我自己的做法很简单：先把上面那个 SKILL.md 文件写好，然后在对话里明确说一句“加载项目里 .cursor/skills/qiandao/SKILL.md 的 qiandao 技能”。
如果你的 Cursor 版本暂时没有原生的技能自动读取机制，或者你翻遍了菜单也没找到技能入口，那就用下面这个笨办法，效果几乎一样：把 SKILL.md 文件里的内容全部复制，粘到对话的消息框里，然后再提你的具体需求。AI 读完这份“岗位说明书”后，行为表现和载入原生 Skill 时没有本质区别。不要被“必须从某个入口加载”这种想法困住，技能文件本身是一段文字，你把它喂给 AI 了，它就已经在被执行。
3. 真正让“零代码”成立的是这份 Skill 模板：直接复制就能用
这一节是整篇内容的核心资产。下面这份 SKILL.md 文件是我在实际项目中反复调整后沉淀下来的版本，你可以直接复制，存成 SKILL.md 放到前面说的目录里。它并不长，但每个模块都对应上面说的“签到最小模型”。
markdown复制# Skill：签到系统生成器
name: qiandao
description: 用于生成中文活动签到页面。当用户描述活动签到、参会登记、培训考勤、读书会签到等需求时使用本技能。
## 目标使用者
- 非编程背景的活动组织者、培训负责人
- 希望快速得到可运行页面并自行维护的人
## 技术约束
- 只输出一个名为 index.html 的完整文件，不要拆成多个文件
- 不依赖任何网络 CDN、前端框架或 node_modules
- 双击 index.html 即可在浏览器中直接使用
- 数据保存在浏览器 localStorage 中。必须提供“清除全部数据”按钮，并让该按钮远离主签到按钮
- 全部界面文案为简体中文，代码中写清晰的中文注释
## 功能要求
1. 页面顶部显示活动名称，活动名称允许预置
2. 提供签到表单，字段包含姓名和工号/手机号后四位
3. 点击签到后校验字段不能为空，同一工号或手机号后四位不可重复签到
4. 签到成功后，下方实时显示已签名单，最新签到排在最前，展示姓名、工号、签到时间
5. 页面显示当前已签到人数
6. 提供导出 CSV 按钮，点击后下载包含全部记录的 CSV 文件
7. 签到状态在关闭页面后仍然保留，直到手动清除
## 界面要求
- 大字号、高对比度，方便活动现场非技术人员操作
- 有明确的表单区和名单区
- “清除数据”“导出 CSV”等操作按钮不要和主签到按钮放在一起
## 验收标准
- 非开发者用户无需阅读代码即可完成签到、查重、导出全流程
- 页面在主流浏览器上直接打开不出现报错
3.1 每个模块为什么不能省
我看到很多人一听到“Skill”就觉得要写多复杂的逻辑，其实完全不是。上面这份文档里没有一行程序代码，全是自然语言约束。但这恰恰是它有效的原因。
“技术约束”这一段最关键。它把 AI 的自由发挥空间锁住了。如果这一段缺失，AI 可能会自作主张生成一个需要 npm install 才能跑的前端项目，新手看到终端就劝退了。而现在你要求它输出一个独立的 HTML 文件，这是“双击就能用”的前提，也是“十分钟搞定”能成立的技术底座。
“功能要求”看起来像是在给 AI 下命令，其实它更重要的作用是给 AI 一份验收标准。模型在生成代码时，会根据这些条目一条一条去检查自己有没有漏掉。防重复、统计人数、导出 CSV、数据持久化，每一条都是现场签到里的真实痛点，都有对应的测试方式。
“界面要求”则是根据实际使用场景补的。我早先的版本没写“按钮不要太近”，结果 AI 把“清除数据”按钮放在了和签到按钮同一排，一旦误点，全场的签到数据立刻清零。现场演示时这简直就是灾难。所以后来在 Skill 里加上了距离约束，把这类低级事故提前拦截在需求阶段。
3.2 想把模板改成“我的活动专属”，不需要自己改文件
很多新手拿到模板后的第一反应是，我要不要自己动手改字段，把“手机号后四位”改成“工号”？不需要。你完全可以新建对话，先按上一节的办法让 AI 读取这份 Skill，然后直接说：“活动是公司新员工培训，签到标识改成员工工号，限制 8 到 12 位数字。”
AI 会自动在既有 Skill 规则的基础上做局部修改。这就是 Skill 复用的意义：你不必理解它是怎么改的，只需要告诉它“改什么”，它就会在约束范围内输出新的版本。
4. 十分钟实操链路：从新建文件夹到在浏览器里跑出签到页
如果你已经准备好了 Skill 文件，接下来就是真正的“动手十分钟”。我尽量按实际操作的顺序一步一步拆开讲，每一步都告诉你为什么要这么做，方便你举一反三。
4.1 第 1 到 3 步：新建项目、激活技能、交代活动背景
第一步：打开 Cursor，用“打开文件夹”载入你准备好的 qiandao 项目目录。目的是让 AI 知道所有新文件都往哪里写。
第二步：在对话区发出激活指令。我通常这样写：
“加载当前项目 .cursor/skills/qiandao/SKILL.md 里的 qiandao 技能，按这个技能的标准来生成。如果觉得技能里的某个字段不符合我的场景，先问我，不要擅自改动。”
加上后面那句“先问我”很重要。新手的另一个通病是 AI 一旦自作主张改需求，自己完全没察觉，最后拿到的东西和预期南辕北辙。这句话能给对话设定一个预期的锚点。
第三步：把活动背景补上，越具体越好。一个可以直接抄的完整提示词是这样的：
“活动名称：产品部第 12 期新员工培训。
预计到场人数 30 人左右。
签到流程：来一个人，在电脑上输入姓名和员工工号，点击签到按钮。
签到之后，在页面下方能看到已签到列表，并按签到时间倒序排列。
最后要能一键导出 CSV，方便我统计谁没来。”
这段描述里没有让你去解释任何代码逻辑，只是把真实的使用流程讲清楚。AI 会结合 Skill 里的规则，把这个描述翻译成一个完整的页面。
4.2 第 4 到 6 步：生成、预览、确认文件真的落盘
AI 收到任务后，会开始在对话框里输出 index.html 的完整内容。这时候新手最容易产生疑问：它生成在对话框里了，但我的项目文件夹里怎么没看到？
这是 Cursor 比较特殊的一点。AI 在对话中生成的代码，不一定会自动写入文件。你需要留意回复区域是否出现“Apply”或“接受”之类的按钮，点击后改动才会真正落到你的文件里。如果没看到这类按钮，你可以在对话里补一句“请把完整文件写入当前文件夹，保存为 index.html”，它就会把这份代码落盘。
等文件树里出现 index.html 后，预览方式很简单：直接在文件树上右键这个文件，选择用系统默认浏览器打开；或者把这个文件用鼠标拖进浏览器窗口，效果一样。不需要启动任何本地开发服务器。
第一次打开时，你可能会觉得界面朴素，这很正常。Skll 里写了“大字号、高对比度”，它更在意的是现场实际使用的可靠性，而不是炫技。先别急着嫌弃，做一次完整流程测试，你会发现朴素的东西跑起来反而更顺。
4.3 第 7 到 10 步：三轮迭代，把页面调到贴合现场
第一轮迭代的目标是“做减法”。先在浏览器里用测试数据签到一次，确认人员出现在已签到列表里；刷新页面，确认数据没有丢；再用同样信息签到一次，确认会提示重复。这三点过了，就说明核心逻辑没问题。
第二轮迭代开始做“局部微调”。比如你觉得签到按钮不够显眼，或者时间显示成了“3123123”这种时间戳格式，你不需要自己改代码，直接在对话里说：
“签到时间现在显示成一串数字，我看不懂。我希望它显示成 12:30，不要显示日期。签名列表里的工号字段排到姓名后面。”
你会发现，这种描述方式比“你帮我把页面改好看一点”有效得多。原因在于你描述的是具体问题和期望结果，而不是抽象感觉。AI 最擅长处理这类精准修改。
第三轮迭代是“导出测试”。导出按钮按下去后，浏览器会下载一个 CSV 文件。用 Excel 或 WPS 打开，确认里面有姓名、工号、签到时间三列，并且每一条都完整。如果列的顺序不对，同样可以在对话里告诉它，让导出顺序和页面展示顺序保持一致。
做完这三轮迭代，页面基本就已经到了可以拿去现场使用的状态。整个过程熟练后确实可以控制在十分钟内：前两三分钟用来描述和生成，后面几分钟全是在实测和微调。
4.4 想做成“所有人都能在自己手机上签到”，走哪条路
我必须在这里泼一盆冷水。前面这套用 localStorage 存数据的方案，数据是存在“当前这台电脑的浏览器”里的。它非常适合签到处一台电脑、参与者排队签到的场景，或者由工作人员代签的会议、培训场景。但如果你想打印一个二维码贴在门口，让每个人掏出手机扫码在同一份名单上签到，那靠 localStorage 是不行的——每个人的手机各自存储，数据根本不会汇总到一处。
从零代码的角度，多设备同时在线签到有两条升级路线。一是把本地保存逻辑改成调用在线表格或低代码数据库的接口，用分享出去的表单页面收集签到信息。这个方案的优点是改动量小、不用自己搭服务器；缺点是你要去折腾在线表格的 API 鉴权，对新手来说不算零代码。二是直接使用现成的表单平台，把签到做成一条可分享的收集链接，然后从后台定期导出名单。这条路更适合活动组织者，但它已经不是“用 Cursor 做系统”的范畴了。
我的建议是：先按单机终端的方案交付第一版，让签到流程真实跑起来，然后再考虑多终端问题。很多人一上来就想做全员手机扫码的方案，结果半个月都没上线。先解决 80% 的现场问题，剩下的，我们回头再迭代。
5. 交给活动前，先把这四类场景测一遍：我的验收表格和翻车清单
AI 生成代码的时候，逻辑上看起来天衣无缝，真正翻车往往发生在你没预料到的操作路径上。因此我每次让人把页面拿去用之前，都会要求他们按下面这张表跑一遍验收。
| 测试模块 | 具体操作 | 预期结果 |
|---|---|---|
| 页面加载 | 双击 index.html | 显示活动名称和签到表单，无白屏、无报错 |
| 正常签到 | 输入姓名和工号，点击签到 | 名单中出现该人员，签到人数加一 |
| 重复签到 | 再次提交同一个工号 | 页面给出友好提示，并阻止重复写入 |
| 空字段校验 | 什么都不填，直接点签到 | 提示必填项缺失，不产生非法记录 |
| 名单排序 | 连续签三个人，观察展示 | 最新签到的人出现在名单最上方 |
| 数据持久化 | 签到 2 条后刷新浏览器 | 名单保留，数据不丢失 |
| 导出 CSV | 点击导出，再用 Excel 打开 | 文件被下载，所有字段完整 |
| 误点保护 | 观察“清除数据”按钮位置 | 离签到主按钮足够远，不在手滑范围内 |
5.1 容易被误判的三种“假 Bug”
这一节单独拿出来讲，是因为我指导新手验收时，最常见的问题并不是 AI 写错了，而是验收方法本身不对。
第一种假 Bug，是开了浏览器的无痕模式或者清理了缓存，然后发现签到记录不见了。其实逻辑没有坏，是 localStorage 和浏览器缓存被当成一回事清掉了。对本地页面来说，localStorage 会被保留在你的浏览器配置里，清缓存时会连坐清除，但记录丢失不代表程序出错。
第二种假 Bug，是在不同的浏览器之间切换测试。比如在 Chrome 里签了三条，又用 Edge 打开文件，发现名单是空的。这个现象会让很多新手以为文件没保存。其实 localStorage 是浏览器隔离的，Chrome 存的数据 Edge 读不到，这是正常现象，不是 bug。解决办法是：测试时固定用一个浏览器。
第三种假 Bug，是把同一个 HTML 文件从文件夹 A 移到文件夹 B 之后，发现数据丢了。原因是浏览器把本地文件当成 URL，文件路径变了，来源也就变了，旧的 localStorage 不一定能被读到。所以现实中的建议是：index.html 放在哪个目录，就固定在哪个目录用，不要频繁移动。
5.2 现场使用前，建议做一次“预演”
如果这是要带到真正活动现场用的系统，我的最后一条建议是做一次完整预演：找同事或者家人，模拟不同的签到顺序，签到几个人，导出一份 CSV，再用另一台设备打开一次页面看看名单是否正常。
别看这个动作简单，它能暴露的问题比你想的多得多。我遇到过最典型的情况是：导出 CSV 后在 Excel 里打开发现中文全部乱码。原因不是代码逻辑错，而是生成 CSV 时缺少 UTF-8 BOM 标识。你在预演阶段发现了，就回去对 AI 说一句“生成的 CSV 要用带 UTF-8 BOM 的编码，让 Excel 打开时中文不乱码”，问题就解决了。要是没有预演，这个坑大概率在现场导出时当场爆掉。
6. 我踩过的坑：需求太模糊、版本对不上、以及 localStorage 的上限
这一节算是我个人经验的沉淀。那些停留在正确理论里的教程，不会告诉你这些事，但它们恰恰是新手最容易反复卡住的地方。
6.1 需求太“形容词”，AI 给不了你真正想要的
我第一次尝试做这类小工具时，输入的是“帮我做一个美观的签到页面”。AI 确实给了我一个看起来不错的页面，背景有渐变、有圆角，但导出功能没有，防重复签到也没有，整个页面就是一张静态图加上一个并不会保存数据的按钮。
后来我复盘，问题不在 AI 能力，而在我的需求太过“形容词”。“美观”是一个观感，不是一个可被程序判定的功能点。正确的做法是用动词和名词去描述用户行为，少用形容词。“能导出 CSV”“能防重复签到”“能保存状态”，这些才是 AI 能落地的东西。在那之后，我所有提示词都改成“行为 + 预期结果”的结构，成功率大幅提升。
6.2 AI 回复了很长的代码，但文件里没有变化
这个坑在 Cursor 里极其常见。AI 在对话框里生成了完整代码，你也看到了，但项目文件里没有出现 index.html，或者文件还是旧版本。
一开始我也困惑，后来才明白，AI 的“回复内容”和“对项目文件的操作”是两回事。它可能在对话中展示代码样本，但没有真正触及文件系统。这时候你需要做的是找到回复区域里的 Apply 按钮，或者直接说“把上面的代码写入当前文件夹，保存为 index.html”。生成完成后再看一眼文件树，确认文件存在、大小不是 0。
如果你发现自己连续试了几次，文件都没变化，有个更直接的兜底方案：把 AI 给的完整代码复制，自己在项目文件夹里新建一个 index.html，粘贴保存。这个操作虽然不够“零代码”，但能让你摆脱“工具失灵”的焦虑，保证继续往前推进。
6.3 功能贪多，是一个系统从“能用”变成“难用”的开始
说实话，我理解新手的心态。看到 AI 能帮你写代码，会忍不住想：能不能顺便加个二维码？加个自动发送确认短信？加个迟到统计？