开源！我的推荐文章创作 Skill 工作流

我之前发布过”资源推荐系列”的文章, 数据还不错，整体流程是 搜集讯息 -> 内容创作 -> 制作截图, 其实也是花时间的, 后面仔细想了想，这一套是可以做成工作流的, 推荐型文章核心就是“工具概括 + 真实性”，文案要求反而没那么高。

于是我把它做成了 Skill，即 rico-resource-article，目前已开源至 ricocc/rico-skills 仓库。

现在，只要一句指令，就能让 AI 自动完成整套流程，输出直接可发布的文章。最近的几篇推荐文章都是使用了这个 Skill.

一、核心作用

rico-resource-article 主要通过 AI 生成资源类文章，支持多领域资源分析，它能自动搜集候选资源、构建文章框架，还可选添加截图，确保输出内容真实、专业，也贴合我日常写文的习惯。

示例指令：写篇 shadcn/ui 组件库的推荐文章，推荐 12 个它会自动判断领域，执行「候选搜集 → 标题生成 → 内容创作 → 自动截图 → 格式适配」等多步流程，最终输出带 Front Matter 的完整文章。（Front Matter 是我更新博客自用的规范，你可以自行调整 skill。）

简单来说，它把原来需要半天的手动工作，压缩到了 5 分钟内完成。

在这个基础上，如果再配合其他 Skills（比如宝玉的 skills），还能一键发布到公众号、小红书等多个平台，真正实现端到端工作流。这里就不详细聊了。

二、安装和使用（简单易上手）

适配 Claude Code、Cursor、Gemini CLI 等所有支持自定义Skill的编程/AI工具，无需额外适配，操作逻辑统一。

仓库地址: https://github.com/ricocc/rico-skills/

1. 安装

• 终端一键安装（推荐）：

npx skills add ricocc/rico-skills

（含仓库内所有技能，选择 rico-resource-article 安装）；

• Claude Code专用：

输入 /plugin marketplace add ricocc/rico-skills，在 /plugin 面板完成安装。

• 手动安装：

从 GitHub 下载仓库，复制 skills/rico-resource-article 文件夹到对应工具的技能目录（如 .claude/skills/、.cursor/skills/）。

2. 指令创作（核心步骤）

1. 下达核心指令：包含「生成动作+文章类型」，触发创作流程；
2. 交互确认：按提示确认候选资源、选择标题风格，可调整资源数量、篇幅；
3. 生成初稿：AI 输出含 Front Matter 的标准化 Markdown 文章。
4. 个性化优化：用自然语言调整（如“语气更口语化”“每项简介2句话”）；
5. 可选添加截图：按提示选择是否添加，生成最终版本。

3. 最佳实践

• 新手强烈建议用「智能分步生成」模式，零试错。
• 创作时越具体越好（主题 + 数量 + 风格），输出质量越高。
• 配合其他 Skills 搭建工作流.

4、可选截图功能配置（2分钟搞定）

需提前配置API Key，操作简单，支持两款主流截图服务，提升文章视觉质感。

1. 截图服务特性

服务	免费额度	生成速度	配置要求
ScreenshotOne	100次/月	2-5秒	需配置Access Key
urlscan.io	5000次/天	10-30秒	需配置API Key

2. 配置步骤（终端3步）

# 1. 创建配置目录
mkdir -p .rico-skills

# 2. 复制示例配置
cp .env.example .rico-skills/.env

# 3. 填入你的 Key（任选其一，免费注册即可）
SCREENSHOTONE_ACCESS_KEY=your_key
URLSCAN_API_KEY=your_key
SCREENSHOT_DEFAULT_SERVICE=screenshotone
SCREENSHOT_DEFAULT_SIZE=1600x900

常用截图尺寸（可在指令中指定）

• 1920×1080（16:9）—— 全高清展示
• 1600×900（16:9）—— 博客/公众号（默认）
• 1440×900（16:10）—— Mac 风格
• 1200×800（3:2）—— 平板适配

三、触发规则

核心前提：指令需同时包含「生成动作」+「文章类型」，缺一不可，否则AI不会触发该技能。

✅ 有效触发示例：

生成一篇关于shadcn/ui的推荐文章
写一个前端工具推荐文章
创建一款小众设计网站的资源列表文章
推荐8个Vue组件库并生成文章
Write a recommendation article about React hooks

❌ 无效触发示例（仅询问资源，无生成意图）：

推荐8个Vue组件库
有哪些好用的小众设计网站
What are some React hooks

四、核心优势

截至目前，我测试过 Skill 生成效果可满足我的日常创作需求, 它的优势包括：

• 智能多轮交互：分步确认候选资源、选择标题风格，避免一次性生成偏差，大幅减少后期修改成本；
• 专业格式适配：自动生成包含 Front Matter 元数据、背景引入、正文推荐、结尾总结的完整结构，内容上不需要太多调整；
• 自动截图支持：适配 ScreenshotOne / urlscan.io 等截图服务，免费额度充足，提升文章视觉吸引力；
• 优化 AI 文案：输出原创、专业的内容描述，彻底摒弃空泛排比句，贴合专业内容创作者的水准。

五、生成模式

可根据自身创作需求选择，核心指令下达后AI自动匹配，也可明确指定模式。

1. 智能分步生成（推荐）

适合创作思路模糊、不确定具体资源的场景，多轮交互把控内容：

用户：生成一篇关于Mesh渐变生成器的推荐文章，推荐3个
AI：自动搜集3个候选资源（含地址、推荐理由、差异化特点），请求确认
用户：确认
AI：提供痛点型、探索型、推荐型标题选项，请求选择
用户：选择探索型B1
AI：生成完整规范文章

2. 一步到位生成

适合需求明确、想快速出稿的场景，无需交互，直接输出：

用户：生成一篇关于Figma插件的推荐文章，推荐5个，标题用精选推荐风格
AI：直接生成含Front Matter的完整文章

3. 基于大纲生成

适合已有资源清单的场景，AI完成扩充和排版：

用户：根据以下大纲生成文章：1.Navbar Gallery <https://www.navbar.gallery/> 导航栏组件 2.SupaHero <https://supahero.io/> 英雄区组件 3.Cta Gallery <https://www.cta.gallery/> CTA组件
AI：扩充简介、优势，生成标准化文章

最后

这款 Skill 仅一个文件，制作简单却能完成资源搜集、筛选、截图、排版工作全部自动化，大幅提升创作效率。如果你运营公众号、博客，不妨尝试一下，也可自定义适配自己的工作流。其实很多重复工作都可拆解为可复用的工作流，愿这款工具能帮你节省时间、提升效率。

更多细节参考仓库指南：

• 仓库地址：https://github.com/ricocc/rico-skills/
• 详细指南：https://github.com/ricocc/rico-skills/blob/main/guides/rico-resource-article-zh.md

我会逐渐分享我现在的工作流!

我是Rico，感谢阅读！