開源！我的推薦文章創作 Skill 工作流

我之前出過「資源推薦系列」嘅文章，數據都唔錯，成個流程係 蒐集訊息 -> 內容創作 -> 製作截圖，其實都係花時間嘅，後來仔細諗過，呢套係可以整成工作流嘅。推薦型文章核心就係「工具概括 + 真實性」，文案要求反而冇咁高。

於是我將佢整成咗 Skill，即係 rico-resource-article，目前已經開源到 ricocc/rico-skills 倉庫。

而家，只要一句指令，就可以叫 AI 自動完成成套流程，輸出可以直接發布嘅文章。最近幾篇推薦文章都係用咗呢個 Skill。

一、核心作用

rico-resource-article 主要透過 AI 生成資源類文章，支援多領域資源分析，佢可以自動蒐集候選資源、建立文章框架，仲可以選擇加截圖，確保輸出內容真實、專業，亦都符合我日常寫文嘅習慣。

例子指令：寫篇 shadcn/ui 組件庫的推薦文章，推薦 12 個佢會自動判斷領域，執行「候選蒐集 → 標題生成 → 內容創作 → 自動截圖 → 格式適配」等多步流程，最終輸出帶 Front Matter 嘅完整文章。（Front Matter 係我更新 Blog 自己用嘅規範，你可以自己調整個 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. 1. 畀核心指令：包含「生成動作+文章類型」，觸發創作流程；
2. 2. 互動確認：跟指示確認候選資源、揀標題風格，可以調整資源數量、篇幅；
3. 3. 生成初稿：AI 輸出含 Front Matter 嘅標準化 Markdown 文章。
4. 4. 個人化最佳化：用自然語言調整（例如「語氣更加口語化」「每項簡介2句話」）；
5. 5. 可選添加截圖：跟指示選擇係咪添加，生成最終版本。

3. 最佳做法

• • 新手強烈建議用「智能逐步生成」模式，零試錯。
• • 創作時越具體越好（主題 + 數量 + 風格），輸出質量越高。
• • 自定義文章結構，配合其他 Skills 搭建工作流。

4、可選截圖功能配置（2分鐘搞掂）

需要提前配置 API Key，操作簡單，支援兩款主流截圖服務，提升文章視覺質感。

1. 截圖服務特性

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 得一個文件，製作簡單但可以完成資源蒐集、篩選、截圖、排版工作全部自動化，大幅提升創作效率。如果你營運公眾號、Blog，不妨試嚇，亦可以自定義適合自己嘅工作流。其實好多重複工作都可以拆解成可重用嘅工作流，希望呢款工具可以幫你慳時間、提升效率。

更多細節可以參考倉庫指南：

➡️倉庫地址： https://github.com/ricocc/rico-skills/

我會逐步分享我而家嘅工作流！

我係 Rico，多謝閲讀！

歡迎關注我嘅公眾號，獲取更多 AI 技能分享。

我之前發佈過"資源推薦系列"的文章, 數據還不錯，整體流程是 蒐集訊息 -> 內容創作 -> 製作截圖, 其實也是花時間的, 後面仔細想了想，這一套是可以做成工作流的, 推薦型文章核心就是“工具概括 + 真實性”，文案要求反而沒那麼高。

於是我把它做成了 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. 1. 下達核心指令：包含「生成動作+文章類型」，觸發創作流程；
2. 2. 交互確認：按提示確認候選資源、選擇標題風格，可調整資源數量、篇幅；
3. 3. 生成初稿：AI 輸出含 Front Matter 的標準化 Markdown 文章。
4. 4. 個性化優化：用自然語言調整（如“語氣更口語化”“每項簡介2句話”）；
5. 5. 可選添加截圖：按提示選擇是否添加，生成最終版本。

3. 最佳實踐

• • 新手強烈建議用「智能分步生成」模式，零試錯。
• • 創作時越具體越好（主題 + 數量 + 風格），輸出質量越高。
• • 自定義文章結構，配合其他 Skills 搭建工作流.

4、可選截圖功能配置（2分鐘搞定）

需提前配置API Key，操作簡單，支持兩款主流截圖服務，提升文章視覺質感。

1. 截圖服務特性

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 僅一個文件，製作簡單卻能完成資源蒐集、篩選、截圖、排版工作全部自動化，大幅提升創作效率。如果你運營公眾號、博客，不妨嘗試一下，也可自定義適配自己的工作流。其實很多重複工作都可拆解為可複用的工作流，願這款工具能幫你節省時間、提升效率。

更多細節參考倉庫指南：

➡️倉庫地址： https://github.com/ricocc/rico-skills/

我會逐漸分享我現在的工作流!

我是Rico，感謝閲讀！

歡迎關注我的公眾號，獲取更多 AI 技能分享。