rico-resource-article

资源推荐文章生成器

此技能通过多轮交互式工作流，帮助你创作高质量的资源推荐文章，确保内容准确、结构完整、风格专业。

核心功能

• 智能分步生成：收集候选项 → 用户确认 → 生成标题 → 生成文章
• 领域适配：自动检测主题领域（设计／开发／营销／产品／内容），并采用专业术语和写作风格
• 广泛支持各领域：技术工具、设计资源、开发框架、在线服务、实体产品等
• 多种生成模式：智能分步、一次生成、基于大纲生成
• 专业格式规范：包含完整的 Front Matter 和标准文章结构
• 数据准确：仅使用可验证的数据（GitHub Stars、组件数量、官方指标）

触发条件

此技能支持两种触发模式：

模式 1：显式命令（rico article 前缀）

• rico article [topic] / rico 文章 [主题]
• rico article 8 design tools / rico 文章 8个设计工具

模式 2：自然语言（必须明确表达文章创作意图）

• “生成一篇关于 shadcn/ui 的推荐文章”
• “写一篇工具推荐文章”
• “创建一篇资源清单文章”

重要：仅当用户明确想要生成文章时，才会触发此技能。 对于“推荐 8 个工具”或“有哪些好用的工具”这类简单问题，不要触发——直接回答即可。

示例

触发示例：

• rico article 8 React hooks libraries
• rico 文章 10个设计工具
• 生成一篇关于 shadcn/ui 的推荐文章
• 写一篇 Figma 插件推荐文章

不触发示例（只是提问或交谈）：

• “推荐 8 个组件库”——直接回答
• “有什么好用的工具？”——一般询问
• “生成 8 个资源”——请求不明确，没有表达创作文章的意图
• “你推荐哪些插件？”——仅提问
• “生成 8 个资源”——没有明确文章生成意图的模糊请求
• “推荐几个好用的插件”——单纯询问，不生成文章

---

🎯 模式选择与优先级

默认模式：智能分步生成

模式选择优先级：

1. 用户明确指定模式 → 使用所请求的模式
2. 用户提供大纲列表 → 使用基于大纲生成
3. 用户只需要简单列表 → 使用快速生成
4. 默认回退 → 使用智能分步生成

如有疑问，始终使用智能分步生成，因为通过用户确认可以确保最高质量。

---

🌟 推荐模式：智能分步生成

这是最智能、最可控的生成模式，通过多轮交互确保文章质量。

工作流

User inputs topic and quantity
  ↓
Step 0: Domain Detection (Auto-detect topic domain)
  ↓
Step 1: Collect candidate items (URL + recommendation reason + differentiating features + verifiable data)
  ↓
User confirms candidate list
  ↓
Step 2: Generate 6 title options (pain-point, exploratory, recommendation)
  ↓
User selects title
  ↓
Step 3: Generate complete article with domain-specific writing style
  ↓
Step 4: Ask about screenshots (Optional - ALWAYS ask after article generation)

步骤 0：检测领域

自动检测主题领域，并应用相应的写作模板

检测规则

领域	关键词（EN/CN）	目标受众	重点
设计	Figma, Sketch, UI, UX, design system, component, mockup, prototype, 插件, 设计, 组件库, 设计系统	设计师	创意效率, 视觉质量, 设计规范, Design System, 交付流程
开发	React, Vue, Angular, API, framework, library, TypeScript, npm, 框架, 库, 开发	开发者	技术栈, 性能优化, 代码质量, GitHub Stars, 社区生态
营销	SEO, ROI, conversion, A/B test, analytics, email marketing, 转化率, 营销, 分析	营销人员	ROI, 数据驱动, 转化效果, 受众分群, 自动化
产品	Prototype, user research, roadmap, collaboration, 原型, 用户调研, 路线图	产品经理	功能完整性, 团队协作, 用户价值, 决策支持
内容	Writing, CMS, publishing, editing, 写作, 编辑, 发布	内容创作者	创作效率, 内容质量, 分发渠道, AI 辅助
通用	fallback	普通用户	易用性, 功能全面, 实用性

检测流程

1. Extract keywords from user topic
2. Match against domain keyword library
3. Calculate confidence score based on keyword matches
4. If confidence ≥80%: Auto-select domain and inform user
5. If confidence 50-79%: Ask user to confirm
6. If confidence <50%: Use General template

交互示例

高置信度（自动选择）：

### User Input
"生成一篇 Figma 插件推荐文章，推荐 6 个"

### AI Response
🔍 **检测到领域: Design (设计领域)**

基于关键词 "Figma" + "插件"，将使用设计领域专业模板，侧重：
- ✅ 设计工作流集成
- ✅ 创意效率提升
- ✅ Design System 兼容性

[继续执行 Step 1: 收集候选项目...]

中等置信度（询问用户）：

### User Input
"生成一篇图片压缩工具推荐文章"

### AI Response
🤔 **检测到多个可能的领域方向**

"图片压缩工具" 可以是：
- A. 面向设计师（设计工作流、批量处理、保持质量）
- B. 面向开发者（API 集成、自动化处理、性能优化）

请问您希望侧重哪个方向？(回复 A 或 B，或直接跳过使用通用模板)

---

步骤 1：收集候选项目

根据用户的主题要求，收集匹配的项目／网站／工具，并按以下格式列出：

候选列表格式：

**1. [Project Name]**
- URL: {{website link}}
- Recommendation reason: {{2-3 sentences explaining why it's worth recommending}}
- Differentiating features: {{How it differs from similar projects}}
- Data: {{Verifiable metrics - GitHub Stars, component counts, official numbers}}

**2. [Project Name]**
...

⚠️ 数据准确性规则（至关重要）：

1. 仅使用可验证的数据

• ✅ 使用：GitHub Stars、GitHub Forks、NPM 每周下载量、组件／模板数量（来自官网）
• ✅ 使用：贡献者数量、最后更新日期、许可证类型、技术栈详情
• ❌ 不要使用：用户数量、客户数量、效率百分比、虚假指标
• ❌ 不要使用：“100 万+ 用户”“效率提升 10 倍”“转化率提升 25%”（除非经过官方验证）

2. 如何收集数据

• 访问 GitHub 页面 → 获取 Stars、Forks、贡献者、最后更新时间
• 访问官网 → 获取组件／模板数量、功能列表
• 访问 NPM 页面 → 获取每周／每月下载量
• 如果不确定数据 → 可以省略，或标记为“约”

⚠️ 关键规则（必须遵守）：

1. 绝不编造项目或 URL

• ❌ 不要编造或捏造项目名称、URL 或网站
• ❌ 不要创建虚假的资源或虚构的工具
• ✅ 只推荐真实存在且可验证的项目
• ✅ 如果不确定项目是否存在，请跳过或询问用户

2. 列出前验证 URL

• ✅ 确保 URL 可访问且有效
• ✅ 如果 URL 看起来可疑或已失效，提醒用户核实
• ❌ 不要包含 URL 已失效或存疑的项目

重要：如果遇到以下情况，请先询问用户：

• 主题方向不明确
• 候选项目不足（告知找到的数量）
• 发现多个相关子主题，需要确认重点
• 某些项目的 URL 需要核实
• 无法找到足够多真实、可验证的候选项目（告知用户并询问后续方向）

列出候选项目后，务必等待用户确认，并告知用户：

Above are {{number}} candidate items. Please confirm:
1. Do you need to adjust any items?
2. Do you need to add or remove any items?
3. Reply 'y' or 'yes' to confirm and proceed

步骤 2：生成标题选项

用户确认候选列表后，根据这些项目生成 6 个不同风格的文章标题：

### Please select your preferred title style:

**A. Pain-Point Type**
- A1. {{title}}
- A2. {{title}}

**B. Exploratory Type**
- B1. {{title}}
- B2. {{title}}

**C. Recommendation Type**
- C1. {{title}}
- C2. {{title}}

Please tell me which title you choose (e.g., A1), or suggest modifications.

标题风格参考：

• 痛点型：拒绝同质化！突破瓶颈！告别 XXX
• 探索型：灵感探索！深度解析！XXX 探索
• 推荐型：精选、必备、必知、打造 XXX、XXX 必备

步骤 3：生成完整文章

用户选定标题后，生成完整文章。

首先，确定文章文件夹路径：

1. 将中文标题翻译成描述性的英文 slug
2. 使用小写字母，并以连字符分隔
3. 告知用户：“文章将保存至：{{article-slug}}/index.md”
4. 如果使用截图，截图将保存在同一文件夹中

示例：

Title: 精选 4 款最受欢迎的渐变生成器，每个设计师都值得收藏
Slug: featured-4-most-popular-gradient-generators
Path: featured-4-most-popular-gradient-generators/index.md

然后继续生成文章内容。

文章结构规范

文件组织

文章文件应遵循以下结构：

{{article-slug}}/
└── index.md          # Article content
├── screenshot-1.png   # Screenshots (if any)
├── screenshot-2.png
└── ...

路径说明：

• 文章保存在当前工作目录中
• 文件夹名称：{{article-slug}}/（例如：featured-4-most-popular-gradient-generators/）
• 文章文件：始终为 index.md
• 截图：保存在与文章相同的文件夹中

封面图片位置（与文章文件夹分开）：

assets/blog/
└── cover-{{article-slug}}.jpg  # Manually added cover images

命名规则：

• 文章文件夹：使用小写英文，以连字符分隔，描述清晰且简洁
  • 示例：shadcn-ui-component-libraries/、featured-4-most-popular-gradient-generators/
  • 规则：将中文标题翻译成英文，使用小写字母，并以连字符连接
  • 格式：[adjective]-[number]-[category]-[items] 或类似的描述性模式
  • 示例：
    • “精选 4 款最受欢迎的渐变生成器” → featured-4-most-popular-gradient-generators/
    • “设计师必备的 8 个 Figma 插件” → essential-8-figma-plugins-for-designers/
    • “2026 年最佳 Vue 组件库” → best-vue-component-libraries-2026/
• 文件：始终为 index.md
• 截图：保存在与文章相同的文件夹中，并以项目名称命名（例如：cssgradient-io.png）

1. Front Matter（元数据）

---
title: {{user selected title}}
publishDate: {{today's date: YYYY-MM-DD}}
read: {{estimated reading time in minutes, typically 6-12}}
description: {{English subtitle, concise summary for SEO}}
tags:
  - {{English tag1}}
  - {{English tag2}}
  - {{Chinese tag1}}
  - {{Chinese tag2}}
img: "/assets/blog/cover-{{article-slug}}.jpg"
img_alt: "{{Chinese description of cover image}}"
---

重要说明：

• img 和 img_alt 是手动添加的封面图片（不会自动生成）
• 图片路径应遵循以下格式：/assets/blog/cover-{{article-slug}}.jpg
• description 应使用英文，简洁且符合 SEO 要求
• read 是预估阅读时间，单位为分钟
• tags 应包含中文和英文关键词（共 4-6 个）

2. 开篇段落（3-4 段）

• 第 1 段：介绍行业背景和现状
• 第 2 段：阐述主题的核心价值和意义
• 第 3 段：介绍文章将推荐的内容
• 第 4 段（可选）：说明推荐这些资源的原因

3. 正文内容

按照以下格式撰写每个已确认条目的内容：

### {{number}}. {{Project Name}}

- **官网**: [{{URL}}]({{URL}})
- **简介**: {{Core positioning, main functions, problems solved}}, covering {{specific content scope}}, {{special features/characteristics}}.
- **优势**: {{Why it's worth recommending, unique value, applicable scenarios, problems solved}}.

正文要求：

• 推荐条目数量：根据用户要求，通常为 6-12 个
• 按照逻辑顺序排列（从基础到进阶，或从通用到专业）
• 描述应说明核心定位和主要内容范围
• 优势应突出差异化价值和适用场景
• 语言应专业易懂，并适合目标读者

聚合平台（如适用）：

如果有聚合平台，请单独列出：

Additionally, here are {{number}} aggregation platforms that collect {{platform purpose}}:

### {{number}}. {{Project Name}}
...

4. 结尾（2 个部分）

• 小标题（二级标题 ##）：应升华主题，避免过于笼统

  • 示例：## Vibe Coding：让设计回归「创造」本身
  • 或：## 组件化灵感：让创意聚焦核心

• 总结段落（3-4 段）：

  • 说明这些资源的整体价值
  • 联系当前趋势（例如 AI 辅助、自动化）
  • 提供使用建议
  • 鼓励读者采取行动

不要添加作者署名。

---

第 4 步：询问是否需要截图（文章生成后始终询问）

文章生成完成后，务必询问用户：

✅ Article generated successfully! Saved to: `{{article-slug}}/index.md`

📸 Would you like to add screenshots for the recommended websites?

Quick Options:
- Type "n" or "no" - Skip screenshots
- Type "y" or "yes" - Use default service (ScreenshotOne)
- Type "u" or "urlscan" - Use urlscan.io (requires API key)

Default size: 1600×900 (16:9) - Best for blog articles

如果用户回答「no」或「n」： 跳过并结束工作流。

如果用户回答「yes」或「y」： 进入截图流程（见下文 📸 可选：添加截图）。

如果用户需要自定义尺寸： 接受并按照指定尺寸处理。

---

📌 其他生成模式

模式 1：一次性生成

适用于用户明确知道所需内容且不需要多轮确认的情况。

工作流：

1. 了解用户的主题
2. 直接收集候选条目
3. 生成一个吸引眼球的标题
4. 生成完整文章

文章格式：同上（Front Matter + 引言 + 正文 + 结尾）

模式 2：基于大纲生成

适用于用户已经提供候选列表的情况。

工作流：

1. 阅读用户提供的大纲
2. 为每个条目撰写描述和优势
3. 生成标题
4. 生成完整文章

额外处理：

• 如果大纲包含类别标签（例如 3D、Animated、Minimal），应在相应条目的「优势」部分体现
• 如果大纲包含 URL，应验证链接是否有效
• 根据大纲内容调整条目数量

模式 3：快速生成

只生成推荐列表，不包含引言、结尾或 Front Matter。

### {{number}}. {{Project Name}}

- **官网**: [{{URL}}]({{URL}})
- **简介**: {{1-2 sentences}}
- **优势**: {{1-2 sentences}}

**注意：**快速生成模式不包含图片。如有需要，用户可以手动添加截图。

---

写作风格要求

1. 专业：术语准确，逻辑清晰
2. 实用：每条推荐都应明确说明使用场景和价值
3. 易读：段落长度适中，避免冗长论述
4. 自然：避免常见的 AI 写作问题（过度排比、描述空泛、「三段式」、负面排比、归属模糊）
5. 原创：避免照搬官方介绍，用自己的语言改写

避免常见的 AI 写作问题

问题 1：过度使用排比

• ❌“它兼具高效、灵活和可扩展性。”
• ✅“它高效、灵活，而且易于扩展。”

问题 2：描述模糊

• ❌“这个组件库功能强大、内容丰富。”
• ✅“包含 200 多个组件，覆盖表单、数据展示、导航等场景。”

问题 3：三段式表达

• ❌“不仅……而且……还……” / “无论……还是……都……”
• ✅ 使用自然、多样的句式

问题 4：否定式排比

• ❌“它不需要复杂配置、额外依赖，也没有学习曲线。”
• ✅“配置简单、零依赖、上手快。”

问题 5：归属模糊

• ❌“很多人认为……” / “众所周知……”
• ✅ 直接陈述观点，或提供具体的数据来源

---

特别说明

内容指南

• 标签应包含中文和英文关键词，共 4-6 个
• URL 必须准确且可点击
• 避免夸大宣传，保持客观、专业
• 不要添加作者署名
• 图片为可选项——用户可以根据需要手动向生成的文章添加截图

⚠️ 安全与合规规则（关键）

1. 禁止内容

• ❌ 不要推荐盗版、破解或非法软件/资源
• ❌ 不要推广侵犯版权的内容
• ❌ 不要推荐违反服务条款的资源
• ❌ 不要包含成人内容、赌博或非法活动
• ✅ 只推荐合法、合规且符合道德规范的资源

2. 准确性要求

• ❌ 不要虚构项目、URL 或网站
• ❌ 不要编造资源或工具
• ✅ 只推荐真实且可验证的项目
• ✅ 如果真实候选项不足，请告知用户并征求意见

3. 验证

• ✅ 验证推荐的资源确实存在
• ✅ 确保 URL 可访问且安全
• ❌ 不要在未提醒用户的情况下，提供可疑或失效的 URL

4. 信息披露

• ✅ 如果不确定某项资源是否合法合规，请注明
• ✅ 如果知识库中没有匹配的内容，请如实告知用户
• ❌ 不要为了满足请求而编造推荐内容

---

模式选择指南

用户需求	推荐模式	原因
“推荐 X 个项目……并生成一篇文章”	智能分步模式	让用户参与确认，确保最高质量
“生成一篇关于 XXX 的推荐文章”	智能分步模式	多轮交互有助于确保准确性
提供了大纲列表	基于大纲生成	快速完成，内容已由用户确认
只需要推荐列表	快速生成	简洁高效
主题和数量明确	一次性生成	快速输出

---

完整示例

用户输入：

“写一篇关于 shadcn/ui 组件库的推荐文章，推荐 8 个”

AI 第 1 步：收集候选项目

Here are 8 collected shadcn/ui component libraries:

**1. [Aceternity UI]**
- URL: https://ui.aceternity.com/
- Recommendation reason: Hottest component library in shadcn/ui ecosystem, 120k+ developers using it
- Differentiating features: Deeply integrated with Framer Motion, extensive visual effects components

**2. [Kibo UI]**
- URL: https://www.kibo-ui.com/
- Recommendation reason: Fills gaps in shadcn/ui's advanced components
- Differentiating features: Provides color picker, rich text editor and other advanced components

...

Above are 8 candidate items. Please confirm:
1. Do you need to adjust any items?
2. Do you need to add or remove any items?
3. Reply 'y' or 'yes' to confirm and proceed

用户：y

AI 第 2 步：生成标题选项

### Please select your preferred title style:

**A. Pain-Point Type**
- A1. Say No to Homogenization! 8 Curated Shadcn/UI Component Libraries
- A2. Break Through Design Bottlenecks! 8 Must-Try Shadcn/UI Extension Libraries

**B. Exploratory Type**
- B1. Inspiration Exploration! 8 Shadcn/UI-Focused Component Libraries
- B2. In-Depth Analysis: 8 Efficiency-Boosting Shadcn/UI Resources

**C. Recommendation Type**
- C1. 8 Shadcn/UI Component Libraries to Double Development Efficiency
- C2. Developer Essentials: 8 Quality Shadcn/UI Extension Libraries

Please tell me which title you choose (e.g., A1), or suggest modifications.

用户：A1

AI 第 3 步：生成完整文章

文件结构：

content/shadcn-ui-component-libraries/
└── index.md

内容：

---
title: Say No to Homogenization! 8 Curated Shadcn/UI Component Libraries
publishDate: 2026-03-03
read: 8
description: Top 8 Awesome Shadcn UI Component Libraries
tags:
  - Shadcn UI
  - Component Libraries
  - UI组件库
  - 组件库推荐
img: "./cover-shadcn-ui.jpg"
img_alt: "8 Curated Shadcn/UI Component Libraries"
---

shadcn/ui is one of the hottest component systems today...

### 1. Aceternity UI

- **官网**: [https://ui.aceternity.com/](https://ui.aceternity.com/)
- **简介**: Hottest component library in shadcn/ui ecosystem with 120k+ developers, covering 200+ production-quality components...
- **优势**: Deeply integrated with Framer Motion and Tailwind CSS, providing glow cards, text gradients, 3D globe and other unique visual components...

...

---

📸 可选：添加截图

文章生成后，可向用户提供选项，为推荐的网站添加截图。

询问时机

文章生成完成后询问：

✅ Article generated successfully!

Would you like to add screenshots for the recommended websites?

Quick Options:
- Type "n" or "no" - Skip screenshots
- Type "y" or "yes" - Use default service (ScreenshotOne)
- Type "u" or "urlscan" - Use urlscan.io (requires API key)

Current default: ScreenshotOne (JPG format, smaller file size)
Default size: 1600×900 (16:9) - 适合博客文章

💡 **自定义截图尺寸 / Customize Screenshot Size:**
   Just mention it when requesting / 在请求时直接说明:
   - "Use 1920×1080" / "用 1920×1080 截图"
   - "Screenshot at 1440×900" / "截图尺寸 1440×900"

服务选择

如果用户选择“是”（使用默认服务）或选择了特定服务：

如果用户选择“是”（默认服务）：

Using default service: ScreenshotOne

✓ Fast (2-5 seconds per screenshot)
✓ 100 free screenshots/month
✗ Requires API key

如果用户想比较服务：

Available screenshot services:

【ScreenshotOne】
✓ Fast (2-5 seconds)
✓ 100 free screenshots/month
✗ Requires API key

【urlscan.io】
✓ Free: 5,000 Public Scans/day
✓ Free: 1,000 Unlisted Scans/day  
✓ Free: 50 Private Scans/day
✗ Requires API key
✗ Slower than ScreenshotOne

Default: ScreenshotOne (configured in .env)

配置检查

重要：在询问用户之前，务必先检查 .env 文件

步骤 1：检查 .env 文件是否存在，以及其中是否包含 API 密钥

Check order:
1. .rico-skills/.env (project-level)
2. ~/.rico-skills/.env (user-level)

If API key found → Use it directly ✓
If not found → Go to Step 2

步骤 2：如果未配置 API 密钥

Checking ScreenshotOne configuration...

⚠️ API Key not found in .env file

Get your free API key:
1. Visit: https://screenshotone.com/
2. Sign up (free, 2 minutes)
3. Copy your API Key

Choose how to configure:

[A] 💾 Create .env file (Recommended) - Key will be saved for future use
[B] 🔑 Enter API key now (One-time) - Key will only be used for this session
[C] ⏭️ Skip screenshots - Add manually later

Please reply A, B, or C:

如果用户选择 [A] - 创建 .env 文件：

Great! I'll create the .env file for you.

Please enter your API Key: [wait for user input]

✓ Creating .rico-skills/.env file...
✓ Saving API key...
✓ Configuration complete! Key saved for future use.

Now proceeding with screenshots...

如果用户选择 [B] - 一次性使用：

Please enter your API Key (will be used for this session only): [wait for user input]

✓ Key received. Proceeding with screenshots...
(Note: You'll need to enter the key again next time)

如果用户选择 [C] - 跳过：

✓ Skipping screenshots. You can add them manually later.

Manual screenshot guide:
- Save screenshots to: say-goodbye-to-stock-photos-3-ai-image-generators/
- Recommended size: 1600×900 (16:9)
- Naming: {website-name}.png

对于 urlscan.io（流程相同）：

Checking urlscan.io configuration...

⚠️ API Key not found in .env file

Get your free API key:
1. Visit: https://urlscan.io/user/ (login required)
2. Go to Settings → API Keys
3. Copy your API Key

Choose how to configure:

[A] 💾 Create .env file (Recommended) - Save for future use
[B] 🔑 Enter API key now (One-time) - Use for this session only
[C] ⏭️ Skip screenshots - Add manually later

Please reply A, B, or C:

保存到 .env 后，显示确认信息：

✓ API key saved to .rico-skills/.env

Your configuration:
- Service: ScreenshotOne
- API Key: sk_•••••••••••••••• (hidden)
- Default size: 1600×900

This key will be automatically used for future screenshot requests.

截图尺寸

默认截图尺寸：1600×900（16:9）

这是适用于大多数博客和文章布局的最佳尺寸，可提供：

• 清晰展示网站详情
• 适合响应式设计的宽高比
• 便于网页加载的合理文件大小

自定义截图尺寸：

如果需要其他尺寸，请在请求截图时指定：

Example requests:
- "使用 1920×1080 尺寸截图"
- "用 1440×900 截图"
- "截图尺寸设为 1200×800"
- "Take screenshots at 1920×1080"

可用尺寸：

尺寸	宽高比	适用场景
1920×1080	16:9	全高清显示屏
1600×900	16:9	默认 - 博客文章
1440×900	16:10	Mac 风格显示屏
1200×800	3:2	平板电脑、小屏幕
1200×600	2:1	宽幅横幅
1200×900	4:3	传统显示屏

注意： urlscan.io 可选尺寸有限（通常为 1920×1080 或类似尺寸）。如需自定义尺寸，请使用 ScreenshotOne 或手动截图工具。

截图流程

配置完成后：

对于 ScreenshotOne：

Found 8 URLs to screenshot

[1/8] Capturing https://ui.aceternity.com/...
  Waiting for screenshot...
✓ aceternity-ui.png (2.3s)

[2/8] Capturing https://www.kibo-ui.com/...
✓ kibo-ui.png (1.8s)

...

✓ Screenshots completed: 8/8
Saved to: ./ (current directory)

对于 urlscan.io：

Found 8 URLs to screenshot

[1/8] Submitting scan for https://ui.aceternity.com/...
  Scan UUID: abc123-def456-ghi789
  Waiting for scan to complete...
  Downloading screenshot...
✓ aceternity-ui.png (8.2s)

[2/8] Submitting scan for https://www.kibo-ui.com/...
  Scan UUID: xyz789-uvw456-rst123
  Waiting for scan to complete...
  Downloading screenshot...
✓ kibo-ui.png (7.5s)

...

✓ Screenshots completed: 8/8
Saved to: ./ (current directory)

在文章中添加截图

截图保存后，务必更新文章以包含图片。

对于每个推荐条目，在标题后插入截图：

之前（不含截图）：

### 1. Aceternity UI

- **官网**: [https://ui.aceternity.com/](https://ui.aceternity.com/)
- **简介**: ...

之后（含截图）：

### 1. Aceternity UI

![Aceternity UI](aceternity-ui.jpg)

- **官网**: [https://ui.aceternity.com/](https://ui.aceternity.com/)
- **简介**: ...

图片插入规则：

1. 在条目标题（### N. Project Name）后立即插入图片
2. 使用格式：![Project Name](filename.jpg)
3. 替代文本应为项目名称或简短描述
4. 图片文件应与 index.md 位于同一目录

更新文章后，显示确认信息：

✓ Article updated with 3 screenshots

Updated sections:
- Section 1: meshgradients-com.jpg
- Section 2: csshero-mesher.jpg
- Section 3: nicepkg-mesh-gradient.jpg

截图文件命名

截图保存在与文章相同的目录中：

shadcn-ui-component-libraries/
├── index.md              # Article content
├── aceternity-ui.png     # Screenshot 1
├── kibo-ui.png           # Screenshot 2
├── ...
└── footer-design.png     # Screenshot 8

命名规则： {project-name}.png

• 从域名或项目名称中提取
• 使用小写字母，以连字符分隔
• 示例：aceternity-ui.png、kibo-ui.png

错误处理

如果截图失败：

⚠️ Some screenshots failed:
- kibo-ui.png: Timeout (30s)
- footer-design.png: API rate limit

✓ Successful: 6/8
❌ Failed: 2/8

You can manually add these screenshots later if needed.

手动截图指南

如果用户更倾向于手动截图或遇到 API 限制：

## Manual Screenshot Guide

### System Tools
- Mac: Cmd+Shift+4 (select area)
- Windows: Win+Shift+S (select area)

### Online Tools
- Screenshot.guru: https://screenshot.guru/
- Screenshot.rocks: https://screenshot.rocks/

### Recommended Dimensions
- Default: 16:9 (1600×900)
- Alternatives: 16:10, 3:2, 2:1, 4:3

### File Organization
Save screenshots in the same directory as the article:
- Article: `content/shadcn-ui-component-libraries/index.md`
- Screenshots: `content/shadcn-ui-component-libraries/*.png`

This keeps related files together and makes management easier.