在Vibe Coding中使用Skills!
本文最后更新于31 天前,其中的信息可能已经过时,如有错误请发送邮件到big_fw@foxmail.com

skills : 其实是一个markdown文件,它有三部分组成:元数据(始终加载)、指令(触发时加载)、资源和代码(按需加载)。

参考文档:https://platform.claude.com/docs/zh-CN/agents-and-tools/agent-skills/overview


触发skills的三种方法:
1.直接用/
2.AI主动触发
3.直接说明我要用哪一个skills

我用来coding的是codex,所以用codex举例如何去使用skills.

首先在codex创建skills, .codex/skills/ 文件夹下存放skills,这里推荐几个非常好且经常能用到的sklls,

1.https://skillsmp.com/zh/skills/bear2u-my-skills-claude-skills-landing-page-guide-v2-skill-md

这是一个“高转化 + 高审美”的落地页生成 skill:用 DESIGNNAS 的「11 个必备转化要素」做结构框架,同时强制先完成“设计定调”(极端风格方向 + 字体/配色/动效/空间策略),再用 Next.js +(App Router)+ Tailwind + ShadCN + TS 输出可上线代码。它的核心是让落地页既能系统性提升转化,又能彻底避免模板/AI 同质化,做出更“记得住”的品牌体验。

2.https://skillsmp.com/skills/nextlevelbuilder-ui-ux-pro-max-skill-claude-skills-ui-ux-pro-max-skill-md

内置大量可复用的风格库(50 种风格)、配色(21 套)、字体搭配(50 组)、图表样式(20 种)和多栈实现模板(React/Next/Vue/Svelte/SwiftUI/React Native/Flutter/Tailwind),可对网站/落地页/仪表盘等项目直接“计划→设计→实现→优化/重构”。它不仅能生成组件/页面代码(.html/.tsx/.vue/.svelte),还会对现有 UI 代码做 review、修复与可访问性/动效/排版等体验优化,确保输出既好看又可用。


3.https://skillsmp.com/zh/skills/leonardomso-33-js-concepts-opencode-skill-seo-review-skill-md

这是一个标准化 SEO 审核 skill:它会按固定流程(关键词簇→页面要素→精选摘要→内链→技术 SEO)给每篇概念文档打分并输出可执行的改进报告。核心目标是让这些“概念解释页”更容易拿到排名与 Featured Snippet,并通过标题/描述/结构/内链等细节系统性提升搜索可见性。

然后接着我们去一个自己的skills,去完成的项目,制做一个skills第一步就是把skills的官方文档和要调用的api的文档喂给chatgpt 去生成skills,就完成了。

最后我们只需写提示词就可以完成开发落地页用/ui-ux-pro-max,再用我们生成的skills,去完成功能。

相关的项目在项目中查看······

文末附加内容
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇