Skill 真香！5 分钟帮女友制作一款塔罗牌 APP

最近发现一个 AI 提效神器 ——Skills，用它配合 Cursor 开发，我仅用 5 分钟就帮女友做出了一款塔罗牌 H5 APP！在说如何操作之前，我们先大概了解下 Skills 的原理

一、Skills的核心内涵与技术构成

（一）本质界定

Skills 可以理解为给 AI Agent 定制的「专业技能包」，把特定领域的 SOP、操作逻辑封装成可复用的模块，让 AI 能精准掌握某类专业能力，核心目标是实现领域知识与操作流程的标准化传递，使AI Agent按需获取特定场景专业能力。其本质是包含元数据、指令集、辅助资源的结构化知识单元，通过规范化封装将分散专业经验转化为AI Agent可理解执行的“行业SOP能力包”，让 AI 从‘只会调用工具’变成‘懂专业逻辑的执行者

（二）技术构成要素

完整Skill体系由三大核心模块构成，形成闭环能力传递机制：

1. 元数据模块：以SKILL.md或meta.json为载体，涵盖技能名称、适用场景等关键信息约 100 个字符（Token），核心功能是实现技能快速识别与匹配，为AI Agent任务初始化阶段的加载决策提供依据。
2. 指令集模块：以instructions.md为核心载体，包含操作标准流程（SOP）、决策逻辑等专业规范，是领域知识的结构化转化成果，明确AI Agent执行任务的步骤与判断依据。
3. 辅助资源模块：可选扩展组件，涵盖脚本代码、案例库等资源，为AI Agent提供直接技术支撑，实现知识与工具融合，提升执行效率与结果一致性。

和传统的函数调用、API 集成相比，Skills 的核心优势是：不只是 “告诉 AI 能做什么”，更是 “教会 AI 怎么做”，让 AI 理解专业逻辑而非机械执行

二、Skills与传统Prompt Engineering的技术差异

从技术范式看，Skills与传统Prompt Engineering存在本质区别，核心差异体现在知识传递的效率、灵活性与可扩展性上：

1. 知识封装：传统为“一次性灌输”，冗余且复用性差；Skills为“模块化封装”，一次创建可跨场景复用，降低冗余成本。
2. 上下文效率：传统一次性加载所有规则，占用大量令牌且易信息过载；Skills按需加载，提升效率并支持多技能集成。
3. 任务处理：传统面对复杂任务易逻辑断裂，无法整合外部资源；Skills支持多技能组合调用，实现复杂任务全流程转化。
4. 知识迭代：传统更新需逐一修改提示词，维护成本高；Skills为独立模块设计，更新成本低且关联任务可同步受益。

上述差异决定Skills更适配复杂专业场景，可破解传统Prompt Engineering规模化、标准化应用的瓶颈。

三、渐进式披露：Skills的核心技术创新

（一）技术原理与实现机制

Skills能在不增加上下文负担的前提下支撑多复杂技能掌握，核心在于“按需加载”的渐进式披露（Progressive Disclosure）设计，将技能加载分为三阶段，实现知识传递与上下文消耗的动态平衡：

1. 发现阶段（启动初始化）：仅加载所有Skills元数据（约100个令牌/个），构建“技能清单”明确能力边界，最小化初始化上下文负担。
2. 激活阶段（任务匹配时）：匹配任务后加载对应技能指令集，获取操作规范，实现精准加载并避免无关知识干扰。
3. 执行阶段（过程按需加载）：动态加载辅助资源，进一步优化上下文利用效率。

（二）技术优势与价值

渐进式披露机制使Skills具备三大核心优势：

1. 降低令牌消耗：分阶段加载避免资源浪费，支持单次对话集成数十个技能，降低运行成本。
2. 提升执行准确性：聚焦相关知识组件，减少干扰，强化核心逻辑执行精度。
3. 增强扩展性：模块化设计支持灵活集成新知识，无需重构系统，适配领域知识快速迭代。

四、Cursor Skills

介绍完 Skills 是什么之后，我将使用的是 Cursor 作为我的开发工具。先说明一下，最开始只有 Claude Code 支持 Skills、Codex 紧随其后，口味自己选。

（一）Cursor 设置

因为 Cursor 刚支持不久，并且是 Beta 才能使用，所以要进行下面操作

要启用或禁用 Agent Skills：

1. 打开 Cursor Settings → Rules
2. 找到 Import Settings 部分
3. 切换 Agent Skills 开关将其开启或关闭 如下图所示

（二）复制 Claude Skills

然后我们直接去 Anthropic 官方维护的开源仓库 anthropics/skills，里面提供了大量经过验证的 Skill 范例，涵盖了创意设计、开发技术、文档处理等多个领域。

你可以访问 github.com/anthropics/… 查看完整列表。以下是这次用到的 Skills：

• Frontend Design：这是一个专门用于提升前端设计质量的技能。它包含了一套完整的 UI 设计原则（排版、色彩、布局）

然后我们直接把 Skills 里面的 .claude/skills/frontend-design 到当前项目文件下，如图：

模型和模式如下图

提示词如下，不一定非得用我的。

使用 Skill front-design。我要做一个 H5 ，功能是一个塔罗牌。

你是一名经验丰富的产品设计专家和资深前端专家，擅长UI构图与前端页面还原。现在请你帮我完成这个塔罗牌应用的 UI/UX 原型图设计。请输出一个包含所有设计页面的完整HTML文件，用于展示完整UI界面。

注意：生成代码的时候请一步一步执行，避免单步任务过大，时间执行过长

然后 Cursor 会自动学习 Skills，并输出代码

然后就漫长的等待之后，Cursor 会自动做一个需求技术文档，然后会一步一步的实现出来，这时候可以去喝杯茶，再去上个厕所！

最终输出了 5 个页面

1. 首页 (Home)
2. 每日抽牌页 (Daily Draw)
3. 牌阵占卜页 (Spread Reading)
4. 塔罗百科页 (Encyclopedia)
5. 占卜历史页 (History)

最终效果如下,整体效果看起来，完全是一个成熟的前端工程师的水准，甚至还带有过渡动画和背景效。因为掘金无法上传视频，欢迎私信我找我要或者关注我：

扩展阅读

因为 Cursor 目前仅在 Nightly 版本上才可以使用 Skills。如果担心切换此模式会引发意想不到的情况，可以使用另一种方案

OpenSkills 是一个开源的通用技能加载器。

• 完全兼容：它原生支持 Anthropic 官方 Skill 格式，可以直接使用 Claude 官方市场或社区开发的技能。
• 桥梁作用：它通过简单的命令行操作，将这些技能转换为 Cursor、Windsurf 等工具可识别的配置（AGENTS.md），从而让 Cursor 具备与 Claude Code 同等的“思考”与“技能调用”能力。