ARTICLE · 1091048
手把手:用 AI 做一个能挂在小红书里的小工具(附完整提示词)
手把手:用 AI 做一个能挂在小红书里的小工具(附完整提示词)教 程 · 可 复 制 提 示 词 不会写代码也能做 用 AI 做一个小红书小工具 先说结论：不需要会写代码，一台电脑、一个能对话的 AI，一个下午就能做出一个能挂在小红书里、别人点开就能用的小工具。 我自己试了一遍，做出来的是「深夜故事铺」——一家只在深夜营业、可以经营和收集的小店。这篇不讲我的感想，只讲怎么做。 文末有三个可以直接复制的提示词。 
1 先搞清楚它到底是什么 小红书小工具，本质上是一个离线 H5 压缩包：你把一个网页（HTML + CSS + JS + 图片）打包成 zip 上传，用户在小红书里点开就直接运行，不用下载、不用注册。 知道这一点很重要，因为它决定了两件事： 它是纯前端的。没有服务器、没有数据库、不联网。所以别做需要登录、需要保存用户数据到云端的玩法。 它能很轻。一个简单的工具打包完可能只有几十 KB，加载是瞬时的。 适合做成小工具的类型，我按"容易做且有人用"排了个序： 适合做成小工具的类型，我按"容易做且有人用"排了个序： 测算类 生日性格、名字评分、运势、BMI ▸ 输入 → 计算 → 出结果，逻辑简单 测试类 心理小测、选择困难终结器 ▸ 题库 + 计分，纯前端就能跑 生成类 壁纸生成、文案生成器、取名 ▸ 随机组合 + 排版输出 收集类 图鉴、打卡、进度记录 ▸ 本地存档即可 小游戏 经营、放置、短关卡 ▸ 玩法设计要花点心思 新手建议从测算类或测试类开始，逻辑最清晰，一次就能跑通。 2 核心玩法只能有一个 这是最容易翻车的地方。 很多人一上来想做"又能测、又能玩、还能生成图片"的东西，结果 AI 写出来一堆半成品，哪儿都没做好。 正确的做法是：一句话说清你的工具是干什么的。 ✕ 错误 "做一个有趣的占卜工具" ✓ 正确 "输入生日，算出你的'深夜人格'，给出一句描述和一张可保存的结果卡" 一句话能说完，AI 才写得对。剩下的花活，等第一版跑起来再加。 3 让 AI 一次写对 别问"帮我做个小游戏"。要把玩法、限制、风格、交付形式一次讲清楚。 这是我在用的模板，改括号里的内容就能用： ✦ 提示词模板 · 一次说清需求 我要做一个手机端的小工具，要求是： 【交付形式】单个 HTML 文件，CSS 和 JS 全部内联，零依赖（不用任何外部库、CDN、字体），双击就能在浏览器打开。 【主题】[一句话说清它是干什么的] 【核心玩法】1. [用户做的第一个动作]2. [系统给出什么反馈]3. [结果如何呈现] 【界面要求】竖屏适配手机，最大宽度 430px 居中；[描述你想要的色调和氛围] 【必须要有】本地存档（用 localStorage，刷新页面进度不丢） 请先给我一个能跑起来的最小版本，不要追求功能完整。 三个关键点： ① 强调"单文件、零依赖"。不写这句，它很可能给你引一堆 CDN，离线包里全部加载失败。 ② 强调"先给能跑的最小版本"。要完整版，它会在一堆细节里迷路。 ③ 描述氛围而不是描述好看。"暗色调 + 暖黄灯光、安静治愈"比"做得好看点"有用十倍。 4 先跑起来，再一轮轮改 第一版一定很粗糙，这没关系。接下来是整个过程中最花时间、也最关键的部分：提意见。 规则只有一条：一次只提一个改动，而且要说具体。 对比一下： ✕ "玩法太单一了" ✕ "这个界面有点丑" ✓ "客人应该各自带有不同诉求（要热茶、想听故事、想撸猫），店里陈设和诉求对上了才算投缘，投缘时收益翻倍。" ✓ "顶部这个按钮不要粉橙渐变，改成透明底 + 金色细边框 + 金色文字，和整体暗金色调统一。" 第二个版本为什么有效？因为它给了判断标准。AI 不怕改，怕的是不知道往哪改。 一个小技巧 如果你自己都说不清想要什么（尤其是审美问题），就让它先给你方案。直接说："这个按钮我不满意，给我 4 个不同方向的样式方案，我来选。" 5 加料，让它不无聊 工具能跑之后，通常会遇到"太简单、玩两下就腻"。有四个通用配方，按需要挑一两个加进去： ① 给它一个目标 完成有奖励，不完成有损失 "每天生成一个'今日目标'（比如接待 8 位客人），完成后才能领当日奖励。" ② 加一点随机 同样的操作，偶尔有惊喜 "每隔一段时间随机触发一次'奇遇'，一天最多出现两次，触发时弹出一个小事件让玩家选择。" ③ 给点可以收集的东西 这是留存最强的一招 "做一个图鉴页，展示全部 12 样可解锁的物件，已获得的金色高亮，未获得的置灰加锁，顶部显示'已收集 N/12'。" ④ 制造一点取舍 有选择才有策略 "资源有限，玩家必须决定先升级哪一样；不同选择会带来不同收益。" 四个不用全加。加两个，耐玩度就有质的区别。 6 手机端和存档 两个必做项： 存档 用 localStorage 保存进度，页面加载时读回来。这是"我的进度还在"的唯一来源，一定要在第一版就让它做进去。 竖屏适配 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> 后面那个 viewport-fit=cover 别漏，它决定你能不能正确处理全面屏的安全区。 7 打包上线：能跑不等于能上传 这是我踩坑最多的一步。本地双击打开一切正常，上传后一堆问题。原因是容器的规范比浏览器严格得多。 把这份清单对照着改，能省掉反复上传的时间。 目录与打包 ☐ 入口文件必须叫 index.html，必须在 zip 根目录 ☐ 压缩的是"和 index.html 同级的那批文件"，不是外面那个文件夹 ☐ 整包不超过 10MB，建议控制在 2MB 以内 脚本 · 最容易挂 ☐ JS 必须外置成独立文件，用 <script src="./main.js"> 引入 ☐ 行内事件 onclick="..." 全部禁止，改成 addEventListener ☐ 只用经典脚本，不要 type="module"，也别用 import / export 兼容性基线是 Chrome 61 ☐ 不用可选链 ?.、空值合并 ??、对象 spread ☐ CSS 里 inset:0 不能用，写成 top/right/bottom/left:0 ☐ Flex 的 gap 不认，用 grid-gap 或给子元素加 margin 存储 · 安全区 · 真机验证 ☐ 优先用容器提供的存储能力，写 localStorage 作为回退 ☐ 顶部预留容器导航栏高度，底部留出 env(safe-area-inset-bottom) ☐ 模拟器走一遍 → Android 真机走一遍 → iOS 真机走一遍 ☐ 模拟器看不出顶部遮挡和安全区问题，这一步不能省 8 上传到小红书创服平台 第 1 步 进入创作服务平台 打开小红书网页版，右上角「创作中心」→「创作服务」。 
第 2 步 Builder hub → 小工具 新建后先填基础信息： 小工具名称：14 字以内 简介：一句话概括功能 图标：png / jpg / jpeg，不超过 5M，推荐 1:1 往下是「部署小工具」，分两步。 第一步：调整符合小红书规范的代码格式 这一步官方直接给了一段提示词，整段复制，发给你正在用的 AI 编程工具： ✦ 官方 skill 提示词 · 建议截图保存 从 https://fe-static.xhscdn.com/minitool/20260923133933/minitool-zip-builder-1.7.0.skill 下载 skill，解压到工作区（Cursor/Claude Code → .claude/，Codex → .codex/，其余 → .skill/），读取 SKILL.md，对当前工作区产物按指引校验、修复并打包，输出校验摘要和产物路径。 这是整个发布环节里最重要的一句话。它会让 AI 自动下载官方打包规范，对你的产物逐条校验——上一节清单里的内联脚本、onclick、Chrome 61 兼容、存储、安全区，全都会自动修，最后打好合规的 zip。 审计 PASS（2 files, 0 warning），产物：xxx.zip 第二步：制作并部署代码 把合规 zip 拖进上传框。传完先别提交，用页面右侧的「手机扫码预览」在真机上过一遍。 真机才看得出的问题：容器顶部的返回、分享按钮是悬浮在你页面上的。如果预览时发现标题、按钮被盖住一截，就是没留顶部安全区——回去补上、重新打包再传。 
第 3 步 审核通过后，挂到笔记上 发笔记时通过「发布页 → 添加组件 → 添加小工具」挂载。读者刷到笔记，点一下就能进你的工具。 
9 三个可以直接复制的提示词 ① 一次说清需求 见第三节完整模板。 ② 提改动意见 [描述你看到的问题]。请只改这一处，其他保持不变。改动后告诉我：你改了哪个文件、哪一段、改成什么样。 后面那句很重要——它逼着 AI 交代改了什么，你才好去核对。 ③ 一键做合规改造 我要把这个 H5 打包成小红书小工具上传，请帮我做合规改造：1. 把内联的 <script> 抽成独立的 main.js，用 <script src="./main.js"> 引入（不要用 type="module"）2. 所有 onclick 等行内事件改成 addEventListener3. 兼容 Chrome 61：去掉可选链、空值合并、对象 spread；CSS 里 inset 改写成 top/right/bottom/left，Flex gap 改成子元素 margin 或 grid-gap4. viewport 加上 viewport-fit=cover5. 页面顶部预留容器导航栏的高度（固定值兜底 + 安全区变量），底部留出 safe-area-inset-bottom6. 存储改为：优先使用容器存储 API，不可用时回退 localStorage改完给我一份自查清单。 10 最后 这套流程我自己跑通了一次，成品是「深夜故事铺」——一家深夜营业的小店，接待带诉求来的客人、盖 12 样陈设、攒故事值解锁故事片段。从第一行提示词到能上传，一个下午。 它当然不完美，但它真的能玩了。 
你要做的第一步其实很小： 把那句"我的工具是干什么的"写清楚，然后把模板粘进对话框。 剩下的，就是一轮一轮提意见而已。 写 在 最 后 这篇里最值得收藏的是两个部分：第七节的合规清单，和第九节三个提示词。建议截图保存。 如果你也做了一个，欢迎评论区说一声，我去玩。 #AI工具 #小红书小工具 #教程 #提示词 #零代码