[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fP-ijRK-1jbw6lUqa25-XmHAtDcEOhKany_YJEyamWsE":3,"$faIFOR0dJ2YobmGlrkkYR9Qpiidd1Lc7c_WuAh5Dym8Y":43},[4],{"id":5,"type":6,"title":7,"slug":8,"summary":9,"body":10,"coverUrl":11,"productScreenshots":12,"productLinks":13,"authorName":14,"authorUrl":15,"authorSubject":16,"category":17,"tags":22,"sourceLabel":35,"sourceName":35,"sourceUrl":35,"status":36,"seoTitle":35,"seoDescription":35,"canonicalUrl":35,"isFeatured":37,"sno":38,"sortOrder":39,"publishedAt":40,"updatedAt":41,"createdAt":42},"b53e8d96-5ee6-448e-b249-5573d6adf6d4","article","氛围编程入门","vibe-coding-intro","以网页制作为例，介绍氛围编程涉及到的核心概念，帮助新手入门","这是一篇写给完全零基础新手的指南，内容包括：\n\n1. 什么是网页背后的“积木块”（HTML、CSS、JS 到底在干什么）\n2. 什么是 Vibe Coding\n3. 如何用 Vibe Coding 亲手做出你的第一个网页\n\n## 第一步：认识网页的三个“演员”\n\n一个网页，无论它看上去多复杂，都只是三种东西在合作演戏：\n\n- HTML —— 这是网页的“骨头和肉”\n\n它负责把内容放在网页上。比如：标题文字、按钮、图片、输入框。你可以把它想象成盖房子的结构：先有墙，才有地方挂画。\n\n- CSS —— 这是网页的“衣服和化妆”\n\n它负责让骨头和肉变得好看。颜色、大小、间距、位置，全归它管。还是那个房子：墙是 HTML，但墙刷成粉色还是蓝色，沙发摆左边还是右边，就是 CSS 说了算。\n\n- JavaScript (简称 JS) —— 这是网页的“大脑和动作”\n\n它负责让网页动起来。你点击按钮弹出“你好”，或者网页自动刷新天气，都是 JS 在干活。房子里的电灯开关：你按下开关（动作），灯亮了（结果）——这个“动”就是 JS。\n\n- 举个例子\n\n你在网页上看到一个红色的“购买”按钮。\u003Cbr>\n“按钮”两个字本身 = HTML\u003Cbr>\n红色、圆角、大尺寸 = CSS\u003Cbr>\n点击按钮后弹出“已加入购物车” = JavaScript\n\n这三个演员，平时就住在一个叫 文件 的“剧本”里。最常见的剧本，就是后缀是 .html 的普通文件。\n\n## 第二步：HTML文件是什么？怎么打开它？\n\n你不需要安装任何特殊的软件。一个 .html 文件其实就是一本用“网页语言”写好的剧本，一本只有电脑能看懂的剧本。\n\n- 怎么创建一个 .html 文件？\n\n在电脑上新建一个文本文档（Windows 的记事本，或 Mac 的文本编辑都可以），然后把它的名字从新建文本文档.txt 改成 我的网页.html。系统可能会问“改变后缀名可能导致文件不可用”，点是就行。现在，这个文件就变成了一个网页剧本。\n\n- 怎么打开看效果？\n\n直接双击这个 .html 文件，它就会自动用你正在用的浏览器（比如 Chrome、Edge）打开。浏览器就是“演员”，它负责把剧本演出来给你看。\n\n## 第三步：什么是 Vibe Coding？\n\n传统的写网页，是你自己一行一行去写 HTML、CSS、JS 的剧本。你得记住很多“咒语”，漏一个符号整个页面就白屏了。\n\nVibe Coding（氛围编程） 换了一种完全不同的思路：\n\n你不需要写代码，你只需要用日常说话的方式，告诉一个 AI（比如 ChatGPT、Claude、DeepSeek 等），你想要什么。然后 AI 直接把完整的 .html 文件剧本写好给你。\n你的工作变成了：说想法 → 看效果 → 再提修改意见，就像和一个懂技术的美工朋友聊天。\n\n“Vibe”这个词很贴切，你靠的是感觉和描述：“我要那种深夜小酒馆风格的页面，带一个暗色背景，中间有一句会慢慢浮现的欢迎语”，而不是去想代码。\n\n这就好比你盖房子，以前得自己当木工、泥瓦匠；现在你成了设计师+房主，只管说：“我要一扇落地窗，采光要特别好”，AI 泥瓦匠去帮你实现。\n\n## 第四步：开始你的第一个 Vibe Coding 项目（全程 5 分钟）\n\n下面跟着做，什么都不用懂。\n\n1. 打开你喜欢的任何一个 AI 对话工具\n\nChatGPT、Claude、Kimi、DeepSeek……哪个顺手用哪个。\n\n2. 用最直白的话告诉它你的想法\n\n复制下面这段话，或者自己改一改，发给 AI：\n\n```\n请帮我写一个完整的网页，要求：\n\n· 背景是柔和的深蓝色，像夜空\n· 网页正中间用白色大字写着“欢迎来到我的小站”\n· 字的下面有一个粉色的按钮，写着“点我一下”\n· 点击按钮后，按钮会变成绿色，并且文字变成“你成功啦！”\n· 把所有的 HTML、CSS、JS 都写在一个 .html 文件里，代码要完整，能直接保存运行\n· 最后告诉我这个文件怎么保存和使用\n```\n\n3. AI 会给出一大段代码\n\n它通常会给你一个代码块，类似这样（你不用看懂）：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>...\u003C\u002Fhead>\n\u003Cbody>...\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n直接全选，然后按 Ctrl+C（Mac 按 Cmd+C）复制，或点击下载按钮保存到电脑中。\n\n4. 把它保存成网页文件（若无法直接下载）\n\n- 在桌面上新建一个文本文档（记事本\u002F文本编辑）。\n- 把复制的代码粘贴进去。\n- 点“文件” → “另存为”。\n- 在文件名那里输入：my-first-page.html。重点：一定要把保存类型选为“所有文件”，编码选 UTF-8，然后保存。\n- 文件图标会变成浏览器的样子。\n\n5. 双击打开，见证奇迹\n\n浏览器打开，你会看到一个深蓝色星空的页面，正中间有你写的字和按钮。点击按钮，颜色变了，文字也变了。\n你刚刚做出了一个带交互功能的网页。\n\n## 第五步：用“Vibe”继续改，越玩越熟\n\n这才是 Vibe Coding 最有趣的地方。页面做出来了，但你可能觉得：“按钮不够圆”“字太小了”“背景要是能有点点星光就更好了”。\n\n你完全不用自己碰代码。继续跟 AI 聊天就行：\n\n“按钮再大一点，圆角一些，鼠标放上去要变小手”\n“给背景加上一些缓慢移动的星星”\n“再添一个能输入名字的框，点击按钮后下面显示‘xxx，你好’”\n\n每一次提要求，AI 都会再给你一版完整的代码。你只需：\n全选复制 → 粘贴进原来的 .html 文件覆盖全部旧内容 → 保存 → 刷新浏览器\n\n修改、看效果，再修改、再看。这就形成了一个纯粹的 “描述-观看” 循环，完全不需要学编程语法。\n\n## 你已经学会了\n\n总结一下，你要记住的其实就是这三层关系：\n\n- 网页 = HTML（内容）+ CSS（美化）+ JS（动作）\n- 做网页的老方法 = 自己学每一种语言，一行行敲\n- Vibe Coding 新方法 = 把你想要的样子说给 AI → AI 写好一个 .html 文件 → 你双击看戏\n\n从今天开始，你已经不是网页的局外人了。去试着做一张给朋友的生日卡片、一张自己的作品展示页、一个小倒计时器……不会的，就问 AI。\n\n你只负责想象，剩下的，都交给 Vibe。","https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-17\u002F538e5262-96da-46df-8e42-8f5156fe675e.jpg",[],[],"龙家轩","https:\u002F\u002Fweatheraintbad.com","f39339b1-aaa6-4e86-b0c2-a6e6a21113b5",{"id":18,"name":19,"slug":20,"description":21},"d6750616-07d9-4350-8485-1834c77be3d2","指南","guide","指导建议，仅供参考",[23,27,31],{"id":24,"name":25,"slug":26},"0848beb4-db26-4fb8-b391-f852a11be192","AI编程","ai-coding",{"id":28,"name":29,"slug":30},"4ab4d31d-2daf-4bd3-9d99-c7210c4943bf","网页制作","web-making",{"id":32,"name":33,"slug":34},"144abe77-0dc6-4f66-a176-20bddb1c0bfa","编程","coding",null,"published",false,53,0,"2026-07-17T00:00:00.000Z","2026-07-18T14:04:32.156Z","2026-07-17T05:12:58.995Z",[44,71,93],{"id":45,"type":6,"title":46,"slug":47,"summary":48,"body":49,"coverUrl":50,"productScreenshots":51,"productLinks":52,"authorName":53,"authorUrl":54,"authorSubject":16,"category":55,"tags":56,"sourceLabel":35,"sourceName":35,"sourceUrl":35,"status":36,"seoTitle":35,"seoDescription":35,"canonicalUrl":35,"isFeatured":37,"sno":67,"sortOrder":39,"publishedAt":68,"updatedAt":69,"createdAt":70},"d0b9da37-b593-4ce4-a055-6a7a3fa7f6d2","使用 AI 为项目接入 Supabase","ai-supabase","介绍如何让 AI 编程助手读取现有项目、规划 Supabase 架构、自动修改代码，并完成数据库、认证、存储和权限配置","本指南适用于以下情况：\n\n- 已有 React、Vue、Nuxt、Next.js、Astro 等项目；\n- 希望接入 Supabase 数据库、Auth 或 Storage；\n- 不熟悉 Supabase SDK、RLS 或服务端会话；\n- 希望由 AI 自动分析项目结构并完成大部分代码修改。\n\n推荐使用具备“读取整个项目、修改多个文件、运行命令和查看报错”能力的 AI 编程助手，而不是只在网页聊天框中复制代码。\n\n## 接入前准备\n\n开始前只需要准备：\n\n1. 一个已有项目；\n2. 一个 Supabase 项目；\n3. Supabase Project URL；\n4. Supabase Publishable Key；\n5. 明确需要接入的功能。\n\n常见功能包括：\n\n- 数据库存储；\n- 邮箱或 OAuth 登录；\n- 用户资料；\n- 图片和文件上传；\n- 后台管理；\n- 实时数据；\n- 服务端数据读取。\n\n不要一开始只对 AI 说“帮我接入 Supabase”。应先让 AI 分析项目，再生成实施方案。\n\n## 第一步：让 AI 分析现有项目\n\n先在项目根目录打开 AI 编程助手，并使用以下提示词：\n\n```text\n请完整分析当前项目，但暂时不要修改代码。\n\n你需要识别：\n\n1. 当前使用的框架、版本和路由模式；\n2. 是否使用 TypeScript；\n3. 当前数据来源和状态管理方式；\n4. 是否已有登录系统；\n5. 是否存在服务端 API、Server Actions 或中间件；\n6. 当前环境变量结构；\n7. 哪些页面需要读取或写入数据；\n8. 接入 Supabase 后可能需要修改的文件；\n9. 可能存在的安全风险。\n\n最后输出一份 Supabase 接入方案，按“数据库、认证、存储、权限、前端调用、服务端调用、迁移步骤”分类。\n\n暂时不要执行修改。\n```\n\n这一步的目标不是生成代码，而是让 AI 先理解项目。\n\n如果 AI 无法准确判断业务结构，可以补充：\n\n```text\n本项目的核心业务是：\n\n- 用户可以注册和登录；\n- 用户可以创建、编辑和删除文章；\n- 文章可以上传封面图；\n- 未登录用户可以浏览已发布文章；\n- 用户只能修改自己的文章；\n- 管理员可以管理全部内容。\n```\n\n## 第二步：让 AI 设计数据库\n\n将业务需求交给 AI，让其生成数据库结构和 RLS 策略。\n\n提示词：\n\n```text\n请根据当前项目业务设计 Supabase PostgreSQL 数据库。\n\n要求：\n\n1. 使用 public schema；\n2. 用户身份使用 auth.users；\n3. 为业务表设计主键、外键、创建时间和更新时间；\n4. 用户私有数据必须包含 user_id；\n5. 所有表默认启用 RLS；\n6. 为匿名用户、登录用户和管理员分别设计 Policy；\n7. 避免依赖前端传入用户身份；\n8. 需要提供完整可执行 SQL；\n9. SQL 要支持重复检查，避免明显的执行顺序错误；\n10. 说明每张表和每条 Policy 的作用。\n\n暂时只生成 SQL，不修改项目代码。\n```\n\n对于文章类项目，AI 通常会生成类似：\n\n```sql\ncreate table public.profiles (...);\ncreate table public.posts (...);\ncreate table public.categories (...);\ncreate table public.post_categories (...);\n```\n\n还应包含：\n\n```sql\nalter table public.posts enable row level security;\n```\n\n以及基于：\n\n```sql\nauth.uid()\n```\n\n的读取、创建、修改和删除策略。\n\n执行前，让 AI 再检查一次：\n\n```text\n请对刚才的 SQL 做安全审查。\n\n重点检查：\n\n- 是否存在越权读取；\n- 是否允许用户修改其他用户的数据；\n- insert 的 with check 是否正确；\n- update 是否同时包含 using 和 with check；\n- delete 是否限制所有者；\n- 管理员判断是否安全；\n- 是否有可能通过前端伪造 user_id；\n- 外键和级联删除是否合理。\n\n发现问题后直接输出修正版完整 SQL。\n```\n\n## 第三步：把 Supabase 配置交给 AI\n\n不要把真实密钥直接写进聊天记录或源代码。\n\n先在本地创建环境变量：\n\n```env\nNEXT_PUBLIC_SUPABASE_URL=\nNEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=\n```\n\n或者根据项目框架使用对应前缀。\n\n然后告诉 AI：\n\n```text\n我已经在本地环境变量中配置：\n\n- NEXT_PUBLIC_SUPABASE_URL\n- NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY\n\n请不要读取、打印或硬编码真实值。\n\n请根据当前项目框架：\n\n1. 安装正确的 Supabase SDK；\n2. 创建浏览器端客户端；\n3. 创建服务端客户端；\n4. 如果项目支持 SSR，正确处理 Cookie 会话；\n5. 为缺失环境变量增加错误提示；\n6. 不要在客户端使用 service_role；\n7. 保持现有项目目录风格；\n8. 完成后列出新增和修改的文件。\n```\n\n如果是 Vue、Nuxt、Vite 或 Astro，应让 AI 自动改用对应的环境变量读取方式，而不是照搬 Next.js 写法。\n\n## 第四步：让 AI 自动接入认证\n\n提示词：\n\n```text\n请为当前项目接入 Supabase Auth。\n\n需要实现：\n\n1. 邮箱注册；\n2. 邮箱密码登录；\n3. 退出登录；\n4. 获取当前用户；\n5. 登录状态持久化；\n6. 受保护页面；\n7. 登录后跳转；\n8. 未登录访问受保护页面时跳转到登录页；\n9. 显示认证错误；\n10. 保持当前 UI 风格。\n\n技术要求：\n\n- 使用当前框架推荐的 Supabase Auth 接入方式；\n- SSR 项目必须在服务端正确读取会话；\n- 不要只依赖客户端状态判断权限；\n- 不要在前端保存 service_role；\n- 不要破坏现有路由；\n- 修改完成后运行类型检查和构建。\n```\n\n如果项目已有登录页面，可补充：\n\n```text\n保留现有登录页面的布局和样式，只替换登录逻辑，不要重新设计 UI。\n```\n\n如果需要第三方登录：\n\n```text\n在现有认证基础上增加 GitHub OAuth 登录。\n\n请同时告诉我需要在 Supabase Dashboard 和 GitHub OAuth App 中配置哪些回调地址，但不要假设具体域名。\n```\n\n## 第五步：让 AI 替换原有数据层\n\n如果项目当前使用静态数据、LocalStorage、Mock API 或其他数据库，可以让 AI 自动迁移。\n\n提示词：\n\n```text\n请分析当前项目中所有数据读取和写入逻辑，将需要持久化的部分迁移到 Supabase。\n\n要求：\n\n1. 找出所有 Mock 数据、LocalStorage 和临时数组；\n2. 映射到对应 Supabase 表；\n3. 创建统一的数据访问层；\n4. 页面组件不要到处直接拼接 Supabase 查询；\n5. 所有查询必须处理 error；\n6. 加入 loading、empty 和 error 状态；\n7. 不改变现有页面视觉结构；\n8. 用户只能操作自己的数据；\n9. 服务端可完成的查询优先放在服务端；\n10. 修改后运行测试、类型检查和构建。\n```\n\n建议让 AI 建立统一目录，例如：\n\n```text\nlib\u002Fsupabase\u002F\nservices\u002F\nrepositories\u002F\nserver\u002F\n```\n\n具体目录应由 AI 根据现有项目风格决定。\n\n## 第六步：让 AI 接入文件上传\n\n提示词：\n\n```text\n请为当前项目接入 Supabase Storage，用于上传文章封面图。\n\n要求：\n\n1. 创建合理的 Bucket 使用方案；\n2. 文件路径包含当前用户 ID；\n3. 限制图片类型和大小；\n4. 文件名避免冲突；\n5. 支持替换和删除；\n6. 上传失败时显示明确错误；\n7. 数据库只保存文件路径或 URL；\n8. 私有文件使用 signed URL；\n9. 公共封面图可使用 public URL；\n10. 设计对应 Storage Policy；\n11. 输出需要在 Supabase 中执行的 SQL；\n12. 修改现有上传组件，不重新设计 UI。\n```\n\n让 AI 重点检查 Storage Policy，而不是只生成上传代码：\n\n```text\n请检查当前 Storage Policy 是否允许用户覆盖、读取或删除其他用户的文件。\n\n文件路径规则为：\n\n{user_id}\u002F{resource_id}\u002F{filename}\n\n用户只能管理路径第一段等于自己 auth.uid() 的文件。\n```\n\n## 第七步：让 AI 生成类型\n\nSupabase 数据库结构确定后，可以让 AI 使用生成的数据库类型。\n\n提示词：\n\n```text\n请为当前 Supabase 数据库接入 TypeScript 类型。\n\n要求：\n\n1. 使用 Supabase 数据库生成类型；\n2. 将类型文件放到合适目录；\n3. Supabase Client 使用 Database 泛型；\n4. 数据访问函数返回明确类型；\n5. 删除重复手写类型；\n6. 保留纯 UI 类型；\n7. 修复由数据库字段可空性引起的类型错误；\n8. 不使用 any 临时绕过。\n```\n\n如果 AI 具备终端权限，可以让它执行 Supabase CLI 命令；如果没有，则让它给出需要执行的命令，并在生成类型文件后继续修改代码。\n\n## 第八步：让 AI 自动检查和修复\n\n完成代码修改后，不要直接认为接入成功。\n\n使用以下提示词：\n\n```text\n请对刚完成的 Supabase 接入做一次完整审查。\n\n依次执行：\n\n1. 检查依赖是否安装；\n2. 检查环境变量命名；\n3. 检查客户端和服务端 Supabase Client；\n4. 检查所有数据库查询；\n5. 检查 Auth 会话；\n6. 检查路由保护；\n7. 检查 RLS；\n8. 检查 Storage Policy；\n9. 检查是否泄露高权限密钥；\n10. 检查是否存在未处理的 error；\n11. 运行 lint；\n12. 运行 TypeScript 检查；\n13. 运行测试；\n14. 运行生产构建。\n\n发现问题后直接修复，直到构建通过。\n\n最后输出：\n\n- 修改文件列表；\n- 数据库 SQL；\n- 需要手动完成的 Supabase Dashboard 配置；\n- 尚未解决的问题；\n- 安全注意事项。\n```\n\n## 推荐的完整 AI 提示词\n\n可以直接将下面的提示词交给支持项目级修改的 AI 编程助手：\n\n```text\n请为当前项目完整接入 Supabase。\n\n第一阶段：只分析，不修改\n\n1. 分析框架、版本、路由、数据层、认证、环境变量和部署方式；\n2. 找出所有需要接入数据库、Auth 和 Storage 的页面；\n3. 输出接入计划和风险；\n4. 等完成分析后继续执行，不需要再次询问我。\n\n第二阶段：数据库\n\n1. 根据现有业务设计 PostgreSQL 表；\n2. 使用 auth.users 关联用户；\n3. 所有业务表启用 RLS；\n4. 用户只能管理自己的数据；\n5. 匿名用户只能读取允许公开的数据；\n6. 输出完整 SQL；\n7. 检查 Policy 是否存在越权风险。\n\n第三阶段：代码接入\n\n1. 安装 Supabase SDK；\n2. 创建浏览器端和服务端 Client；\n3. 使用环境变量，不硬编码密钥；\n4. 接入注册、登录、退出和会话；\n5. 替换现有 Mock 数据或 LocalStorage；\n6. 接入文件上传；\n7. 保留现有 UI；\n8. 建立统一数据访问层；\n9. 所有操作处理 loading、empty 和 error。\n\n第四阶段：质量检查\n\n1. 生成或接入数据库 TypeScript 类型；\n2. 不使用 any；\n3. 运行 lint、类型检查、测试和生产构建；\n4. 修复所有由本次接入产生的问题；\n5. 检查 RLS、Storage Policy 和密钥安全。\n\n限制：\n\n- 不要打印真实环境变量；\n- 不要把 service_role 放进客户端；\n- 不要绕过 RLS；\n- 不要重构无关代码；\n- 不要改变现有视觉设计；\n- 不要删除已有功能。\n\n最终输出：\n\n1. 修改文件清单；\n2. 完整 SQL；\n3. Supabase Dashboard 中需要手动配置的内容；\n4. 本地需要补充的环境变量名称；\n5. 测试结果；\n6. 安全审查结果。\n```\n\n## AI 接入时最常见的问题\n\n### AI 只生成代码，没有理解项目\n\n解决方式：\n\n```text\n先停止修改。请重新完整读取项目结构，并说明每个改动与现有代码的关系。\n```\n\n### AI 把 Supabase 查询写满所有组件\n\n解决方式：\n\n```text\n请把 Supabase 查询集中到统一的数据访问层，组件只调用业务函数。\n```\n\n### AI 关闭 RLS 解决报错\n\n这是错误做法。\n\n提示：\n\n```text\n不允许通过关闭 RLS 或使用 service_role 解决前端权限问题。请修复对应 Policy。\n```\n\n### AI 在客户端判断管理员\n\n前端判断只能用于显示界面，不能作为真正权限控制。\n\n提示：\n\n```text\n管理员权限必须由数据库 Policy 或可信服务端验证，不能只根据客户端字段判断。\n```\n\n### AI 忽略 SSR 会话\n\n提示：\n\n```text\n当前项目使用 SSR。请检查 Cookie 会话同步、服务端用户读取和路由保护，不能只使用浏览器端 getSession。\n```\n\n### AI 修改范围过大\n\n提示：\n\n```text\n只修改 Supabase 接入所需文件，恢复所有无关的格式化、命名和 UI 改动。\n```\n\n## 需要人工完成的内容\n\n即使使用 AI，以下内容通常仍需要项目负责人确认：\n\n- 创建 Supabase 项目；\n- 保存真实环境变量；\n- 执行并审核数据库 SQL；\n- 配置 Auth 回调域名；\n- 配置邮件模板；\n- 配置 OAuth Provider；\n- 确认生产域名；\n- 审核 RLS；\n- 审核 Storage Policy；\n- 决定数据保留和删除策略；\n- 在正式环境中进行多账号权限测试。\n\nAI 可以生成和检查方案，但最终权限设计仍需要人工负责。\n\n## 安全检查清单\n\n- AI 没有将真实密钥写入代码。\n- 客户端没有使用 `service_role`。\n- 所有私有业务表已启用 RLS。\n- 用户不能修改其他用户的 `user_id`。\n- UPDATE 同时检查 `using` 和 `with check`。\n- Storage 路径包含用户身份。\n- 私有文件没有使用永久公开 URL。\n- 管理员权限在数据库或可信服务端验证。\n- SSR 页面不是只在客户端判断登录状态。\n- 所有 Supabase 调用都处理了 `error`。\n- 已使用两个不同账号测试越权访问。\n- 已运行生产构建。\n\n## 官方资料\n\n- Supabase Getting Started  \n  https:\u002F\u002Fsupabase.com\u002Fdocs\u002Fguides\u002Fgetting-started\n\n- Supabase AI Prompts  \n  https:\u002F\u002Fsupabase.com\u002Fdocs\u002Fguides\u002Fgetting-started\u002Fai-prompts\n\n- Next.js Quickstart  \n  https:\u002F\u002Fsupabase.com\u002Fdocs\u002Fguides\u002Fgetting-started\u002Fquickstarts\u002Fnextjs\n\n- Auth  \n  https:\u002F\u002Fsupabase.com\u002Fdocs\u002Fguides\u002Fauth\n\n- Row Level Security  \n  https:\u002F\u002Fsupabase.com\u002Fdocs\u002Fguides\u002Fdatabase\u002Fpostgres\u002Frow-level-security\n\n- Storage  \n  https:\u002F\u002Fsupabase.com\u002Fdocs\u002Fguides\u002Fstorage\n\n- JavaScript SDK  \n  https:\u002F\u002Fsupabase.com\u002Fdocs\u002Freference\u002Fjavascript\u002Fintroduction\n\n## 总结\n\n使用 AI 接入 Supabase 的正确方式，不是让 AI 随机生成几段 SDK 代码，而是让它依次完成：\n\n**分析项目 → 设计数据库 → 生成 RLS → 接入 Auth → 替换数据层 → 接入 Storage → 运行测试 → 安全审查。**\n\nAI 可以显著降低接入成本，但 Supabase 的安全边界最终仍由数据库结构、RLS、Storage Policy 和服务端权限控制决定。","https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-18\u002Ff7e1bd9c-37c2-4198-b313-4243f6482024.jpg",[],[],"GPT-5.6 Sol","https:\u002F\u002Fopenai.com\u002Fzh-Hans-CN\u002Findex\u002Fgpt-5-6\u002F",{"id":18,"name":19,"slug":20,"description":21},[57,58,62,63],{"id":24,"name":25,"slug":26},{"id":59,"name":60,"slug":61},"d2513b48-43d7-49ba-adac-6d09366f751f","内容由AI生成","gen-by-ai",{"id":32,"name":33,"slug":34},{"id":64,"name":65,"slug":66},"a202d639-99a6-488a-a712-4d4c6ffd7e15","开发","dev",51,"2026-07-01T00:00:00.000Z","2026-07-18T14:04:43.800Z","2026-07-18T10:20:35.364Z",{"id":72,"type":6,"title":73,"slug":74,"summary":75,"body":76,"coverUrl":77,"productScreenshots":78,"productLinks":79,"authorName":53,"authorUrl":54,"authorSubject":16,"category":80,"tags":81,"sourceLabel":35,"sourceName":35,"sourceUrl":35,"status":36,"seoTitle":35,"seoDescription":35,"canonicalUrl":35,"isFeatured":37,"sno":90,"sortOrder":39,"publishedAt":68,"updatedAt":91,"createdAt":92},"d55f78f9-5755-434f-9f6f-462a0ff764c7","氛围编程避坑","vibe-coding-reminds","AI能写代码，但不能替你负责","VibeCoding指通过自然语言描述需求，让AI生成、修改和调试代码。它能快速把想法变成原型，但“能运行”不等于“能上线”。AI生成的代码仍可能存在逻辑错误、安全漏洞、依赖风险和维护问题。\n\n## 1. 需求模糊，AI只能自行猜测\n\n只说“帮我做一个用户系统”，AI并不知道角色、权限、数据结构和部署环境。前期假设错误，会不断影响后续代码。\n\n建议：先明确用户、功能、页面、数据表、权限、技术栈和不做的内容，再开始开发。\n\n## 2. 一次生成整个项目\n\n一次生成大量文件看似高效，实际很难定位问题，也容易出现技术栈混乱和重复代码。\n\n建议：按最小闭环开发：先启动项目，再完成一个页面、一张数据表、一个完整功能，每一步测试并提交Git。\n\n## 3. 页面正常，不代表功能真实有效\n\n按钮可能只修改前端显示，没有写入数据库；权限可能只隐藏页面，没有限制后端接口。\n\n建议：检查刷新后数据是否保留、不同账号能否越权、接口能否被绕过，以及异常输入和网络失败时的表现。\n\n## 4. 反复把报错扔给AI\n\nAI可能修复当前错误，却引入新的问题，甚至通过关闭检查、写死数据来绕过根因。\n\n建议：要求AI先解释错误原因，再提出最小修改方案，并说明影响范围。警惕“暂时禁用”“直接跳过验证”等做法。\n\n## 5. 随意安装第三方依赖\n\nAI可能推荐过时、不兼容甚至不存在的软件包，也可能增加供应链安全风险。\n\n建议：安装前确认用途、维护状态、许可证、漏洞和准确版本，能用框架原生能力解决时尽量不加依赖。\n\n## 6. 泄露密钥和数据库密码\n\n不要把API密钥、数据库连接字符串和管理员令牌写入代码、提交到Git或放在前端。\n\n建议：使用环境变量和云平台Secrets，区分开发与生产环境；一旦泄露，立即撤销并重新生成。\n\n## 7. 有登录页面，不代表系统安全\n\n真正的权限控制必须放在服务端。常见问题包括普通用户调用管理员接口、读取他人数据、数据库完全公开等。\n\n建议：重点检查身份认证、服务端权限、数据库行级权限、输入校验、文件上传、接口限流和敏感日志。\n\n## 8. 不写测试\n\nAI修改一个功能时，可能破坏另一个功能。没有测试，就很难发现回归问题。\n\n建议：至少执行类型检查、构建检查、接口测试和关键流程测试，并覆盖空值、重复提交、网络失败等异常情况。\n\n## 9. 不使用Git\n\nAI可能一次修改大量文件。没有版本记录，很难恢复稳定版本。\n\n建议：小步提交，大改动使用分支，修改前后检查差异，不要让AI覆盖未提交的人工代码。\n\n## 10. 本地能跑就直接上线\n\n生产环境的运行版本、环境变量、数据库和网络配置往往与本地不同。\n\n建议：上线前完成生产构建、备份、HTTPS、错误监控、日志、限流、依赖扫描和回滚方案。\n\n## 11. 代码越来越乱，仍继续加功能\n\nVibeCoding项目后期常出现重复代码、超大文件、命名混乱和临时补丁堆积。\n\n建议：定期暂停开发，拆分模块、删除废弃代码、统一结构、更新文档并补齐测试。\n\n## 12. 完全依赖AI，不理解系统\n\n不必记住所有语法，但至少要理解前端、后端、数据库、接口、权限、环境变量、部署和日志。\n\n开发者必须知道数据存在哪里、谁可以访问、请求如何流转，以及出现问题后如何恢复。\n\n## 更稳妥的VibeCoding流程\n\n明确需求 → 设计数据和架构 → 搭建最小项目 → 分模块实现 → 检查代码差异 → 自动测试 → 安全审计 → 小范围发布 → 持续监控。\n\nAI适合提高执行效率，但开发者仍需负责需求判断、功能验收和风险控制。\n\n## 结语\n\nVibeCoding适合原型、个人工具和低风险MVP，但不应跳过需求、测试、安全和版本管理。\n\n可以让AI写代码，但不能让AI替你验收代码。\n\n## 引用来源\n\n1. GitHub Docs：AI生成代码的人工审查与测试建议。  \n2. Anthropic Docs：密钥管理、权限控制与项目指令实践。  \n3. OpenAI Codex：代码差异审查、沙箱执行与Pull Request工作流。  \n4. OWASP Top 10：Web应用常见安全风险。  \n5. OWASP Software Supply Chain Security：第三方依赖与供应链安全。  \n6. SLSA：依赖混淆、来源验证与版本固定。  \n7. 《Vibe Coding in Practice》：VibeCoding效率与技术债研究。  \n8. 《Is Vibe Coding Safe?》：AI代理生成代码的安全性研究。  \n9. 《Understanding the (In)Security of Vibe-Coded Applications》：真实VibeCoding项目中的常见漏洞。","https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-17\u002F867d174b-fbb8-4a1c-8bbf-f12a2881e763.jpg",[],[],{"id":18,"name":19,"slug":20,"description":21},[82,83,84,88,89],{"id":24,"name":25,"slug":26},{"id":32,"name":33,"slug":34},{"id":85,"name":86,"slug":87},"88d2bc27-0e0f-468a-b907-2991cb97b87b","人工智能","ai",{"id":64,"name":65,"slug":66},{"id":59,"name":60,"slug":61},54,"2026-07-18T14:04:29.803Z","2026-07-17T15:47:16.293Z",{"id":94,"type":6,"title":95,"slug":96,"summary":97,"body":98,"coverUrl":99,"productScreenshots":100,"productLinks":101,"authorName":53,"authorUrl":54,"authorSubject":16,"category":102,"tags":107,"sourceLabel":35,"sourceName":35,"sourceUrl":35,"status":36,"seoTitle":35,"seoDescription":35,"canonicalUrl":35,"isFeatured":37,"sno":117,"sortOrder":39,"publishedAt":118,"updatedAt":119,"createdAt":120},"871e57ba-8d0e-4f70-a706-b7ec5f472ea7","Skill是什么？","what-is-skill","一套可复用、可安装、可共享的任务说明","在AI智能体和AI编程工具中，Skill通常指一套可复用、可安装、可共享的任务说明。它把操作规范、专业知识、示例、脚本和参考资料组织在一起，让AI能够更稳定地完成某一类工作。\n\n随着ChatGPT、Codex、Claude Code等工具逐渐从“聊天机器人”发展为能够读取文件、调用工具和执行任务的智能体，仅靠临时提示词已经很难管理复杂、重复的工作。Skill的出现，正是为了把成熟的工作方法保存下来，让AI在需要时直接调用。\n\n## 一、Skill到底是什么？\n\n可以把通用AI想象成一名能力很强、学习速度很快，但不了解你具体工作规范的新员工。\n\n你可以每次都重新告诉它：\n\n- 报告应该使用什么结构；\n- 代码需要遵循哪些规范；\n- 处理PDF时应该调用什么程序；\n- 发布网站前要检查哪些项目；\n- 分析数据时要生成哪些图表。\n\n但这些要求如果每次都重新输入，不仅麻烦，还容易遗漏。\n\n**Skill就是为AI准备的一份“标准作业包”。**\n\n它通常以一个文件夹存在，核心文件一般是`SKILL.md`。除了文字说明，还可以包含：\n\n- 操作步骤；\n- 任务触发条件；\n- 示例输入和输出；\n- 模板文件；\n- Python、Shell或JavaScript脚本；\n- API说明和参考资料；\n- 检查清单与质量标准。\n\nOpenAI将Agent Skills描述为封装指令、资源和可选脚本的任务能力包；ChatGPT中的Skills则被定义为可复用、可分享的工作流程。Claude Code的Skills也遵循Agent Skills开放标准，并在此基础上提供调用控制、子智能体运行和动态上下文等扩展能力。\n\n```mermaid\nflowchart TB\n    U[用户提出任务] --> A[AI智能体]\n    A --> D{是否有匹配的Skill}\n    D -- 没有 --> G[依靠通用能力完成]\n    D -- 有 --> S[读取Skill说明]\n    S --> R[加载模板、资料或脚本]\n    R --> T[按照固定流程执行]\n    T --> O[输出更稳定的结果]\n```\n\n## 二、Skill和提示词有什么区别？\n\n提示词和Skill都能指导AI，但两者解决的问题不同。\n\n| 对比项 | 普通提示词 | Skill |\n|---|---|---|\n| 使用方式 | 每次对话临时输入 | 安装后重复使用 |\n| 内容规模 | 通常较短 | 可以包含完整工作流程 |\n| 文件支持 | 一般只有文字 | 可包含脚本、模板和资料 |\n| 适用场景 | 一次性、简单任务 | 重复、专业、复杂任务 |\n| 一致性 | 容易因表达变化而波动 | 更容易保持固定标准 |\n| 分享方式 | 复制一段文字 | 分享完整Skill文件夹 |\n\n例如，下面是一条普通提示词：\n\n```text\n请检查这个网页是否存在SEO问题，并给出优化建议。\n```\n\n而一个SEO审计Skill可以进一步规定：\n\n1. 先检查页面是否能被抓取；\n2. 再检查标题、描述和Canonical；\n3. 分析结构化数据；\n4. 检查正文是否依赖JavaScript渲染；\n5. 按严重程度排列问题；\n6. 使用统一表格输出；\n7. 最后生成修改后的代码示例。\n\n因此，**提示词更像一次性的口头要求，Skill更像经过整理的标准操作手册。**\n\n## 三、Skill和工具、MCP有什么区别？\n\n这几个概念经常被混淆。\n\n### 1. 工具：让AI能够“做事”\n\n工具为AI提供实际操作能力，例如：\n\n- 搜索互联网；\n- 读取文件；\n- 执行Python；\n- 查询数据库；\n- 发送邮件；\n- 调用天气API；\n- 修改代码。\n\n工具解决的是：**AI能调用什么。**\n\n### 2. MCP：让AI连接外部系统\n\nMCP是Model Context Protocol的缩写，可以用统一方式把AI连接到数据库、知识库、GitHub、Notion、浏览器或企业内部系统。\n\nMCP解决的是：**AI怎样连接数据和服务。**\n\n### 3. Skill：告诉AI怎样完成任务\n\nSkill负责描述工作方法，例如：\n\n- 什么情况下应该调用某个工具；\n- 工具调用顺序是什么；\n- 哪些风险操作必须确认；\n- 输出必须符合什么格式；\n- 完成后如何检查质量。\n\nSkill解决的是：**AI应该按照什么流程做。**\n\n```mermaid\nflowchart TB\n    P[用户目标] --> S[Skill：任务流程与规范]\n    S --> A[AI智能体进行判断与规划]\n    A --> T[Tool：执行具体动作]\n    A --> M[MCP：连接外部系统]\n    M --> D[(数据库、文档、GitHub等)]\n    T --> O[搜索、计算、编辑、发送等结果]\n    D --> A\n    O --> A\n    A --> R[最终交付]\n```\n\n可以用一个简单比喻理解：\n\n- AI模型是大脑；\n- 工具是双手；\n- MCP是插座和连接线；\n- Skill是操作手册。\n\n## 四、一个Skill通常由什么组成？\n\n一个简单的Skill目录可能如下：\n\n```text\nseo-audit\u002F\n├── SKILL.md\n├── references\u002F\n│   ├── checklist.md\n│   └── examples.md\n├── scripts\u002F\n│   └── check_meta.py\n└── templates\u002F\n    └── report-template.md\n```\n\n其中最重要的是`SKILL.md`。\n\n一个最小化的Skill可以这样写：\n\n```markdown\n---\nname: seo-audit\ndescription: 检查网页的SEO与GEO基础问题，并输出按优先级排序的修复建议。\n---\n\n# SEO Audit\n\n## 何时使用\n\n当用户要求检查网页的SEO、GEO、抓取、索引或结构化数据问题时使用。\n\n## 工作流程\n\n1. 获取目标网页的初始HTML。\n2. 检查HTTP状态码和重定向。\n3. 检查title、description和canonical。\n4. 检查正文是否无需JavaScript即可读取。\n5. 检查JSON-LD结构化数据。\n6. 按严重、高、中、低四个等级整理问题。\n7. 提供可以直接修改的代码示例。\n\n## 输出格式\n\n- 总体评分\n- 关键问题\n- 修复优先级\n- 代码示例\n- 验收方法\n\n## 限制\n\n- 不把推测写成确定事实。\n- 无法访问页面时必须明确说明。\n- 涉及搜索引擎规则时优先参考官方文档。\n```\n\n### 元数据有什么作用？\n\n文件开头的`name`和`description`不只是介绍文字，它们还会影响智能体能否正确识别和调用Skill。\n\n```yaml\n---\nname: seo-audit\ndescription: 检查网页的SEO与GEO基础问题，并输出按优先级排序的修复建议。\n---\n```\n\n名称应该简短、稳定；描述则应该说明：\n\n- Skill能完成什么；\n- 什么情况下使用；\n- 哪些用户表达可能触发它。\n\n描述过于宽泛，Skill可能被错误调用；描述过于狭窄，应该调用时又可能无法触发。\n\n## 五、Skill是怎样工作的？\n\nSkill并不是重新训练AI模型，也不会永久改变模型本身。\n\n它更接近一种**按需加载的上下文机制**：当智能体判断某项任务与Skill匹配时，再读取Skill中的详细说明和资源。\n\n```mermaid\nsequenceDiagram\n    participant U as 用户\n    participant A as AI智能体\n    participant S as Skill\n    participant T as 工具或脚本\n\n    U->>A: 帮我检查这个网站的SEO问题\n    A->>A: 判断任务类型\n    A->>S: 读取seo-audit Skill\n    S-->>A: 返回流程、规范与模板\n    A->>T: 抓取网页并运行检查\n    T-->>A: 返回检测结果\n    A->>A: 按Skill要求验证和整理\n    A-->>U: 输出标准化审计报告\n```\n\n这种方式有三个明显优势：\n\n### 1. 减少上下文浪费\n\n智能体不必在每次对话开始时读取全部规范，只在任务需要时加载相关Skill。\n\n### 2. 提高执行一致性\n\n同一种任务可以反复使用相同流程、模板和检查标准，减少不同对话之间的质量波动。\n\n### 3. 便于团队共享\n\n团队可以把经验整理成Skill，让不同成员和不同智能体复用同一套工作方法。\n\n## 六、Skill可以用来做什么？\n\nSkill适合处理具有明确方法、重复频率较高或专业要求较强的任务。\n\n### 内容创作\n\n- 按固定风格撰写文章；\n- 生成产品介绍；\n- 检查事实和引用；\n- 将文章转换为社交媒体内容；\n- 生成统一格式的Markdown文档。\n\n### 软件开发\n\n- 创建符合团队规范的项目；\n- 执行代码审查；\n- 编写单元测试；\n- 排查构建错误；\n- 发布版本；\n- 生成API文档。\n\n### 设计与文档\n\n- 制作演示文稿；\n- 生成PDF报告；\n- 按品牌规范使用字体和版式；\n- 创建流程图；\n- 检查设计稿的一致性。\n\n### 数据分析\n\n- 清洗表格；\n- 计算指标；\n- 生成图表；\n- 检查异常值；\n- 按固定结构输出分析结论。\n\n### 企业流程\n\n- 整理会议纪要；\n- 生成周报；\n- 审核合同中的关键条款；\n- 根据模板回复客户；\n- 检查项目上线条件。\n\n```mermaid\nmindmap\n  root((Agent Skill))\n    内容\n      文章写作\n      事实核查\n      格式转换\n    开发\n      代码审查\n      自动测试\n      项目部署\n    设计\n      演示文稿\n      品牌规范\n      图片处理\n    数据\n      表格清洗\n      指标分析\n      图表生成\n    运营\n      周报\n      客服回复\n      内容发布\n```\n\n## 七、怎样安装和使用Skill？\n\n不同平台的界面和存放路径可能不同，但基本过程相似。\n\n### 方法一：安装现成Skill\n\n一般步骤为：\n\n1. 在官方库、插件市场或GitHub仓库中找到Skill；\n2. 阅读`SKILL.md`，确认用途和权限；\n3. 检查是否包含可执行脚本；\n4. 将Skill安装到平台支持的位置；\n5. 重新加载客户端或会话；\n6. 用一个明确任务测试它是否正确触发。\n\n在支持自动调用的平台中，用户不一定要直接说出Skill名称。例如安装网页测试Skill后，可以直接说：\n\n```text\n检查本地网页的登录流程，并记录失败的步骤。\n```\n\n智能体会根据任务和Skill描述判断是否调用。\n\n部分平台也支持显式调用，形式可能类似：\n\n```text\n使用 seo-audit Skill 检查这个页面。\n```\n\n或：\n\n```text\n\u002Fseo-audit https:\u002F\u002Fexample.com\n```\n\n具体调用方式取决于平台实现。\n\n### 方法二：把Skill放进项目\n\n项目级Skill适合保存某个仓库特有的规则，例如：\n\n```text\nmy-project\u002F\n├── src\u002F\n├── tests\u002F\n└── .agents\u002F\n    └── skills\u002F\n        └── release-check\u002F\n            └── SKILL.md\n```\n\n它可以要求智能体在发布前完成：\n\n- 运行测试；\n- 检查环境变量；\n- 构建生产版本；\n- 扫描未提交文件；\n- 更新版本号；\n- 生成变更日志。\n\n### 方法三：使用平台内置的Skill管理界面\n\n部分AI产品提供Skill或插件管理页面，可以完成：\n\n- 浏览推荐Skill；\n- 安装或启用Skill；\n- 查看已安装项目；\n- 控制可访问的数据；\n- 删除不再需要的Skill。\n\n由于各产品仍在快速更新，实际界面和权限应以对应平台的最新官方说明为准。\n\n## 八、怎样自己创建一个Skill？\n\n创建Skill不需要训练模型。只需把成熟的任务流程写清楚，并加入必要的资源。\n\n### 第一步：选择合适的任务\n\n好的Skill通常满足至少一个条件：\n\n- 任务会反复出现；\n- 执行步骤比较固定；\n- 输出格式需要保持一致；\n- 涉及团队内部规范；\n- 需要调用脚本或模板；\n- 普通提示词经常遗漏步骤。\n\n不适合做成Skill的任务包括：\n\n- 只会执行一次的临时要求；\n- 没有稳定方法的开放式闲聊；\n- 可以用一句提示词准确解决的简单任务。\n\n### 第二步：定义触发条件\n\n先回答三个问题：\n\n1. 用户通常会怎样描述这个任务？\n2. 哪些场景应该使用该Skill？\n3. 哪些相似场景不应该使用？\n\n例如：\n\n```markdown\n## 何时使用\n\n当用户要求创建、修改、读取或分析`.pptx`演示文稿时使用。\n\n## 不应使用\n\n当用户只要求提供演讲提纲，而不需要生成或编辑演示文件时，不要使用。\n```\n\n### 第三步：写出可靠流程\n\n不要只写“认真完成任务”，而要写成可以检查的步骤。\n\n较弱的写法：\n\n```markdown\n请专业地检查代码，确保没有问题。\n```\n\n更好的写法：\n\n```markdown\n1. 先读取受影响文件和相关测试。\n2. 检查空值、边界条件和错误处理。\n3. 检查是否引入安全问题。\n4. 运行现有测试。\n5. 对新增逻辑补充测试。\n6. 输出问题位置、影响和修复方案。\n```\n\n### 第四步：加入示例和模板\n\n示例可以让AI更准确地理解输出标准。\n\n```markdown\n## 输出示例\n\n### 严重问题\n\n**位置：** `src\u002Fauth.ts:42`\n\n**问题：** 用户输入未经验证就拼接进SQL语句。\n\n**影响：** 可能导致SQL注入。\n\n**建议：** 使用参数化查询，并增加恶意输入测试。\n```\n\n### 第五步：加入脚本\n\n当工作需要稳定计算、文件转换或自动检查时，脚本通常比自然语言更可靠。\n\n```python\n# scripts\u002Fcheck_required_files.py\nfrom pathlib import Path\n\nrequired_files = [\n    \"README.md\",\n    \"LICENSE\",\n    \".gitignore\",\n]\n\nmissing = [name for name in required_files if not Path(name).exists()]\n\nif missing:\n    print(\"缺少文件：\")\n    for name in missing:\n        print(f\"- {name}\")\n    raise SystemExit(1)\n\nprint(\"必要文件检查通过。\")\n```\n\nSkill中可以规定：\n\n```markdown\n发布项目之前，必须运行：\n\npython scripts\u002Fcheck_required_files.py\n```\n\n### 第六步：进行真实测试\n\n至少测试以下三类情况：\n\n| 测试类型 | 目的 |\n|---|---|\n| 正常任务 | 检查Skill能否正确执行 |\n| 模糊表达 | 检查Skill能否正确触发 |\n| 相似但无关的任务 | 检查Skill是否会被误调用 |\n\n## 九、怎样写出一个高质量Skill？\n\n### 1. 描述要具体\n\n不推荐：\n\n```yaml\ndescription: 帮助用户处理网页。\n```\n\n推荐：\n\n```yaml\ndescription: 检查网页的可访问性、SEO元数据、结构化数据和无JavaScript正文可读性，并生成按严重程度排序的修复报告。\n```\n\n### 2. 只保留必要内容\n\nSkill不是越长越好。过多背景材料会增加上下文负担，也可能让智能体忽略真正重要的规则。\n\n建议将内容分层：\n\n- `SKILL.md`保存核心流程；\n- `references\u002F`保存详细资料；\n- `templates\u002F`保存输出模板；\n- `scripts\u002F`保存可执行程序。\n\n### 3. 把硬性要求写成可验证规则\n\n不推荐：\n\n```markdown\n输出应当美观、专业。\n```\n\n推荐：\n\n```markdown\n- 一级标题只能出现一次。\n- 每个问题必须包含位置、影响、证据和修复建议。\n- 问题按严重、高、中、低排序。\n- 没有证据时不得下确定结论。\n```\n\n### 4. 为危险操作设置确认点\n\n涉及删除、发布、付款、发送、覆盖文件等动作时，应明确要求用户确认。\n\n```markdown\n在执行以下操作之前必须获得用户明确确认：\n\n- 删除文件或数据库记录；\n- 向外部收件人发送邮件；\n- 部署到生产环境；\n- 覆盖无法恢复的文件；\n- 产生费用的API调用。\n```\n\n### 5. 不要把密钥写进Skill\n\nSkill可能被复制、分享或提交到Git仓库。API密钥、访问令牌、密码和个人数据不应直接写入文件。\n\n正确方式是引用环境变量：\n\n```bash\nexport API_KEY=\"...\"\n```\n\n然后在脚本中读取：\n\n```python\nimport os\n\napi_key = os.environ[\"API_KEY\"]\n```\n\n## 十、使用第三方Skill时要注意什么？\n\nSkill可能包含脚本、命令和外部资源，因此不能只看名称就直接安装。\n\n安装前至少检查：\n\n1. Skill来自谁；\n2. `SKILL.md`要求AI做什么；\n3. 是否会读取个人文件；\n4. 是否会访问网络；\n5. 是否包含删除或覆盖命令；\n6. 脚本是否会上传数据；\n7. 是否要求提供密钥；\n8. 最近是否仍在维护。\n\n```mermaid\nflowchart TD\n    A[发现第三方Skill] --> B{来源可信？}\n    B -- 否 --> X[不要安装]\n    B -- 是 --> C[阅读SKILL.md]\n    C --> D[检查scripts目录]\n    D --> E{涉及敏感权限？}\n    E -- 是 --> F[限制权限或在沙箱测试]\n    E -- 否 --> G[使用测试任务验证]\n    F --> G\n    G --> H{行为符合预期？}\n    H -- 否 --> X\n    H -- 是 --> I[正式启用]\n```\n\n需要特别警惕以下内容：\n\n```bash\nrm -rf\ncurl ... | sh\nsudo ...\ngit push --force\n```\n\n这些命令不一定恶意，但可能造成不可逆影响。应先理解其用途，再决定是否执行。\n\n## 十一、一个完整示例：文章配图Skill\n\n下面是一个适合内容网站使用的简化示例。\n\n```markdown\n---\nname: article-illustration\ndescription: 根据文章主题生成简洁、无文字、16:9比例的封面插图方案。\n---\n\n# Article Illustration\n\n## 适用场景\n\n当用户要求为文章、博客或报告设计封面图时使用。\n\n## 工作流程\n\n1. 阅读文章标题和摘要。\n2. 提炼一个核心隐喻，不要堆叠多个概念。\n3. 优先使用抽象、几何或平面设计语言。\n4. 默认比例为16:9。\n5. 画面内不得出现文字、字母、水印和界面截图。\n6. 主体应占画面的25%至45%，保留足够留白。\n7. 颜色控制在三种主色以内。\n8. 输出图像生成提示词并执行图像生成工具。\n\n## 质量检查\n\n- 缩略图尺寸下是否仍能识别主体；\n- 是否存在多余文字；\n- 是否过度拥挤；\n- 是否准确表达文章主题；\n- 是否避免使用未经授权的品牌元素。\n```\n\n安装后，用户只需说：\n\n```text\n为“让大模型先查资料，再回答问题”设计一张文章封面图。\n```\n\n智能体便可以自动应用比例、留白、无文字和构图规则，而不需要用户每次重新说明。\n\n## 十二、Skill的真正价值是什么？\n\nSkill的价值并不只是“让AI多会一种功能”。\n\n它更重要的作用，是把人的经验转化为AI能够重复执行的流程。\n\n```mermaid\nflowchart LR\n    E[个人经验] --> W[整理工作步骤]\n    W --> S[制作成Skill]\n    S --> R[智能体重复执行]\n    R --> C[持续测试和修正]\n    C --> S\n    S --> T[团队共享]\n```\n\n一条优秀提示词可能解决一次问题；一个优秀Skill则可以持续改进，并被整个团队反复使用。\n\n因此，可以将Skill理解为：\n\n> **介于提示词、程序和操作手册之间的AI能力模块。**\n\n它用自然语言描述意图和规则，用脚本保证确定性，用模板维持输出标准，再由智能体根据当前任务灵活执行。\n\n## 十三、常见问题\n\n### Skill会让AI永久学会新知识吗？\n\n不会。Skill通常是在任务执行时被读取，并不会重新训练底层模型。删除或停用Skill后，对应规则通常也不会继续生效。\n\n### 不会编程也能创建Skill吗？\n\n可以。最简单的Skill只需要一个写清楚任务流程的`SKILL.md`文件。脚本是可选项，不是必需项。\n\n### Skill可以跨平台使用吗？\n\n部分Skill可以。Claude Code文档说明其Skills遵循Agent Skills开放标准；Codex也支持以`SKILL.md`为核心的能力包。不过不同平台可能增加自己的字段、目录约定和调用方式，因此迁移时仍需检查兼容性。\n\n### Skill能代替MCP吗？\n\n不能。Skill主要描述方法，MCP主要负责连接外部服务。两者经常搭配使用。\n\n### Skill越多越好吗？\n\n不是。安装过多、描述重叠的Skill可能增加误触发和冲突。更合理的做法是保留用途明确、质量可靠、经常使用的Skill。\n\n## 结语\n\nAI模型提供通用能力，工具提供行动能力，MCP提供连接能力，而Skill负责把这些能力组织成一套稳定的工作方法。\n\n对于普通用户，Skill可以减少重复提示；对于开发者，它可以封装工程流程；对于团队，它可以把个人经验变成共享标准。\n\n当你发现自己反复向AI解释同一套要求时，就可以考虑把它整理成一个Skill。\n\n## 参考资料\n\n1. [OpenAI Codex：Agent Skills](https:\u002F\u002Fdevelopers.openai.com\u002Fcodex\u002Fskills)\n\n2. [OpenAI Help Center：Skills in ChatGPT](https:\u002F\u002Fhelp.openai.com\u002Fen\u002Farticles\u002F20001066-skills-in-chatgpt)\n\n3. [OpenAI Codex：Customization](https:\u002F\u002Fdevelopers.openai.com\u002Fcodex\u002Fconcepts\u002Fcustomization)\n\n4. [OpenAI：Introducing the Codex app](https:\u002F\u002Fopenai.com\u002Findex\u002Fintroducing-the-codex-app\u002F)\n\n5. [Anthropic Claude Code：Extend Claude with skills](https:\u002F\u002Fdocs.anthropic.com\u002Fen\u002Fdocs\u002Fclaude-code\u002Fskills)\n\n6. [Anthropic Skills示例仓库] (https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills)\n\n> 注：AI产品的Skill安装入口、目录结构和功能仍在持续更新。实际使用时，应优先查看对应产品的最新官方文档。","https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-18\u002F4c35d873-e4f1-418f-a9ae-bb56d85df6ff.jpg",[],[],{"id":103,"name":104,"slug":105,"description":106},"6179d3b6-dc34-4483-9ded-3cd9f1b37a47","科普","abbreviation","介绍各领域新兴概念",[108,109,110,111,115,116],{"id":85,"name":86,"slug":87},{"id":24,"name":25,"slug":26},{"id":64,"name":65,"slug":66},{"id":112,"name":113,"slug":114},"7c76bfc2-f80f-4ee0-a95d-27bd8708b434","技术","slug",{"id":32,"name":33,"slug":34},{"id":59,"name":60,"slug":61},45,"2026-06-11T00:00:00.000Z","2026-07-18T16:22:51.494Z","2026-07-18T15:17:09.969Z"]