Communitygithub.com

101-skills/superpowers

撰写面向开发者的技术博客文章,涵盖结构、代码示例和开发者读者习惯。适用于工程博客、开发教程、技术写作、开发者内容和文档文章。触发词:技术博客、开发博客、工程博客、技术写作、开发者教程、技术文章、编程教程、开发者内容。

superpowers 是什么?

这个技能可以通过 `inference.sh` CLI 生成高质量的、以开发者为中心的技术博客文章。它支持五种主要的博客类型:教程、深度解析、事后分析报告、基准测试/对比和架构/系统设计,每种类型都有其独特的结构和格式要求。该技能特别强调代码质量,要求所有代码示例必须可运行,并包含错误处理和清晰的注释。此外,它还提供了一套详细的写作规则,包括语气和用词建议、开发者反感的内容列表、代码示例的格式要求,以及根据受众知识水平调整解释深度的指导。该技能集成了 `belt` CLI 工具,可以自动完成诸如主题调研(通过 `exa/search`)、生成文章标题图像和系统架构图(通过 `infsh/html-to-image`)等任务,从而加速整个写作和发布流程。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/101-skills/superpowers/tree/HEAD/guides/writing/technical-blog-writing

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

安装 belt CLI 技能: npx skills add belt-sh/cli

技术博客写作

通过 inference.sh CLI 撰写面向开发者的技术博客文章。

快速开始

需要 inference.sh CLI (belt)。安装说明

belt login

# 调研主题深度
belt app run exa/search --input '{
  "query": "building REST API Node.js best practices 2024 tutorial"
}'

# 生成标题图像
belt app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#0f172a,#1e293b);display:flex;align-items:center;padding:60px;font-family:ui-monospace,monospace;color:white\"><div><p style=\"font-size:18px;color:#38bdf8;margin:0\">// 工程博客</p><h1 style=\"font-size:48px;margin:16px 0;font-weight:800;font-family:system-ui;line-height:1.2\">我们如何通过边缘缓存将API延迟降低90%</h1><p style=\"font-size:20px;opacity:0.6;font-family:system-ui\">深入探究我们的CDN架构</p></div></div>"
}'

博客文章类型

1. 教程 / 操作指南

分步说明。读者应该能够跟着做并构建出一些东西。

结构:
1. 我们要构建什么(附截图/演示)
2. 前置条件
3. 步骤 1:设置
4. 步骤 2:核心实现
5. 步骤 3:...
6. 完整代码(GitHub 链接)
7. 下一步 / 扩展
规则原因
首先展示最终结果读者可以判断是否值得继续读下去
明确列出前置条件不要浪费目标受众的时间
每个代码块都应可运行复制-粘贴-运行是最好的检验
解释“为什么”而不仅仅是“怎么做”解释原理的教程会被分享
包含错误处理真实代码会有错误
链接到完整代码仓库教程之后可以参考

2. 深度解析 / 解释性文章

深入解释一个概念、技术或架构决策。

结构:
1. [概念]是什么,为什么你应该关心?
2. 它如何工作(简化的心智模型)
3. 它如何工作(详细的机制)
4. 现实世界示例
5. 权衡以及什么时候不该使用它
6. 延伸阅读

3. 事后剖析 / 事件报告

描述哪里出了问题、为什么以及如何修复。

结构:
1. 总结(发生了什么、影响、持续时间)
2. 事件时间线
3. 根本原因分析
4. 实施的修复
5. 我们正在采取什么措施防止再次发生
6. 经验教训

4. 基准测试 / 对比

基于数据的工具、方法或架构对比。

结构:
1. 我们比较了什么以及为什么
2. 方法论(确保结果可重现)
3. 包含图表/表格的结果
4. 分析(数字意味着什么)
5. 建议(含限制条件)
6. 原始数据 / 重现说明

5. 架构 / 系统设计

解释系统是如何构建的以及为什么做出某些决策。

结构:
1. 我们需要解决的问题
2. 约束和需求
3. 考虑的方案
4. 选择的架构(附图表)
5. 我们接受的权衡
6. 结果和经验教训

面向开发者的写作规则

语气和语调

该做的不该做的
直接:"使用连接池""你可能想要考虑使用..."
承认权衡:"这会增加复杂性"假装你的解决方案完美无缺
使用"我们"表示团队决策"我一个人设计了..."
具体数字:"将p99从800ms降低到90ms""显著提升了性能"
引用来源和基准测试提出没有根据的论断
承认替代方案假装你的方案是唯一途径

开发者讨厌的内容

❌ "在今天这个快速变化的技术世界中..."(废话)
❌ "众所周知..."(如果大家都知道,你为什么要写?)
❌ "只需做X"(如果你在读教程,说明没什么是简单的)
❌ "这很容易..."(轻视读者的经验)
❌ "显然..."(如果显而易见,就别写)
❌ 技术内容里的营销语言
❌ 在3段背景介绍之后才切入正题

代码示例

规则原因
每个代码块都必须可运行错误的示例会摧毁信任
展示完整、可工作的示例没有上下文的代码片段毫无用处
在围栏代码块中包含语言标识符语法高亮
在代码后展示输出/结果读者可以验证理解
使用真实的变量名calculateTotalRevenue 而不是 foo
在示例中包含错误处理真实代码会处理错误
固定依赖版本"适用于 React 18.2" 而不是 "React"
良好的代码块格式:

```python
# 这行代码的作用(一行)
def calculate_retry_delay(attempt: int, base_delay: float = 1.0) -> float:
    """指数退避 + 抖动。"""
    delay = base_delay * (2 ** attempt)
    jitter = random.uniform(0, delay * 0.1)
    return delay + jitter

# 用法
延迟 = calculate_retry_delay(attempt=3)  # 约 8.0-8.8 秒

### 解释深度

| 受众信号 | 深度 |
|----------|------|
| "X 入门" | 解释一切,假设无先验知识 |
| "高级 X 模式" | 跳过基础,深入细节 |
| "X vs Y" | 假设熟悉两者,专注于差异 |
| "我们如何构建了 X" | 技术受众,可跳过基础概念 |

**在文章开头明确说明假定的读者水平**:

"本文假设读者熟悉 Docker 和基本 Kubernetes 概念。 如果你对容器不熟悉,请从[我们的入门文章]开始。"


## 博客文章结构

### 理想结构

```markdown
# 标题(包含主要关键词,说明成果)

[头图或图表]

**TL;DR:** [2-3句话摘要,包含关键要点]

## 问题 / 为什么这很重要
[设置为什么读者应该关心——要具体,不要泛泛而谈]

## 解决方案 / 我们是怎么做的
[核心内容——代码、架构、解释]

### 步骤 1:[第一件事]
[解释 + 代码 + 输出]

### 步骤 2:[第二件事]
[解释 + 代码 + 输出]

## 结果
[数字、基准测试、成果——要具体]

## 权衡与限制
[诚实地说明缺点——建立信任]

## 结论
[关键要点 + 下一步做什么]

## 延伸阅读
[3-5个相关链接]

各类文章的字数

类型字数原因
快速技巧500-800一个概念,一个示例
教程1,500-3,000分步指导需要细节
深度解析2,000-4,000彻底的探索
架构文章2,000-3,500图表承担部分工作
基准测试1,500-2,500数据和图表是主力

图表和视觉元素

何时使用图表

场景图表类型
请求流程序列图
系统架构方框图
决策逻辑流程图
数据模型ER图
性能对比柱状图/折线图
前后对比并排展示
# 生成架构图
belt app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1200px;height:600px;background:#0f172a;display:flex;align-items:center;justify-content:center;padding:40px;font-family:system-ui;color:white\"><div style=\"display:flex;gap:40px;align-items:center\"><div style=\"background:#1e293b;border:2px solid #334155;border-radius:8px;padding:24px;text-align:center;width:160px\"><p style=\"font-size:14px;color:#94a3b8;margin:0\">客户端</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">React 应用</p></div><div style=\"color:#64748b;font-size:32px\">→</div><div style=\"background:#1e293b;border:2px solid #3b82f6;border-radius:8px;padding:24px;text-align:center;width:160px\"><p style=\"font-size:14px;color:#94a3b8;margin:0\">边缘</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">CDN 缓存</p></div><div style=\"color:#64748b;font-size:32px\">→</div><div style=\"background:#1e293b;border:2px solid #334155;border-radius:8px;padding:24px;text-align:center;width:160px\"><p style=\"font-size:14px;color:#94a3b8;margin:0\">API</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">Node.js</p></div><div style=\"color:#64748b;font-size:32px\">→</div><div style=\"background:#1e293b;border:2px solid #334155;border-radius:8px;padding:24px;text-align:center;width:160px\"><p style=\"font-size:14px;color:#94a3b8;margin:0\">数据库</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">PostgreSQL</p></div></div></div>"
}'

# 生成基准测试图表
belt app run infsh/python-executor --input '{
  "code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nfig, ax = plt.subplots(figsize=(12, 6))\nfig.patch.set_facecolor(\"#0f172a\")\nax.set_facecolor(\"#0f172a\")\n\ntools = [\"Express\", \"Fastify\", \"Hono\", \"Elysia\"]\nrps = [15000, 45000, 62000, 78000]\ncolors = [\"#64748b\", \"#64748b\", \"#3b82f6\", \"#64748b\"]\n\nax.barh(tools, rps, color=colors, height=0.5)\nfor i, v in enumerate(rps):\n    ax.text(v + 1000, i, f\"{v:,} req/s\", va=\"center\", color=\"white\", fontsize=14)\n\nax.set_xlabel(\"每秒请求数\", color=\"white\", fontsize=14)\nax.set_title(\"HTTP 框架基准测试 (Hello World)\", color=\"white\", fontsize=18, fontweight=\"bold\")\nax.tick_params(colors=\"white\", labelsize=12)\nax.spines[\"top\"].set_visible(False)\nax.spines[\"right\"].set_visible(False)\nax.spines[\"bottom\"].set_color(\"#334155\")\nax.spines[\"left\"].set_color(\"#334155\")\nplt.tight_layout()\nplt.savefig(\"benchmark.png\", dpi=150, facecolor=\"#0f172a\")\nprint(\"Saved\")"
}'

分发

开发者阅读的地方

平台格式如何发布
你的博客完整文章主要渠道——掌控你的内容
Dev.to交叉发布(规范URL指向你的博客)Markdown 导入
Hashnode交叉发布(规范URL)Markdown 导入
Hacker News链接提交项目用 Show HN,故事用 Tell HN
Reddit (r/programming, r/webdev 等)链接或讨论遵守子版块规则
Twitter/X摘要 + 链接请参考 twitter-thread-creation 技能
LinkedIn改编版 + 链接请参考 linkedin-content 技能
# 在 X 上交叉发布
belt app run x/post-create --input '{
  "text": "新博文:我们如何将API延迟降低90%\n\n简要版本:\n→ 将计算移至边缘\n→ 激进的缓存控制标头\n→ 消除 N+1 查询\n\np99 从 800ms 降至 90ms。\n\n包含代码的完整深度解析:[链接]"
}'

常见错误

错误问题修复
没有 TL;DR忙碌的开发者未抓住要点就离开在顶部添加 2-3 句摘要
代码示例不完整毁掉所有可信度发布前测试每个代码块
未固定版本6 个月后代码失效"适用于 Node 20, React 18.2"
"只需做 X"轻视、居高临下删除 "只需"、"仅仅"、"轻易"
架构没有图表大段文字描述系统一张图表 > 500 字描述
营销口吻开发者立即失去兴趣直接、技术、诚实
没有权衡部分读起来像有偏见的营销总是讨论缺点
过长介绍才进入正题读者跳出在 2-3 段内切入正题
依赖未固定教程对未来的读者失效固定版本,注明写作日期
没有"延伸阅读"死胡同,没有上下文3-5 个链接以加深理解

相关技能

npx skills add inference-sh/skills@seo-content-brief
npx skills add inference-sh/skills@content-repurposing
npx skills add inference-sh/skills@og-image-design

浏览所有应用:belt app list

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

101-skills/superpowers

Build automated AI workflows combining multiple models and services. Patterns: batch processing, scheduled tasks, event-driven pipelines, agent loops. Tools: inference.sh CLI, bash scripting, Python SDK, webhook integration. Use for: content automation, data processing, monitoring, scheduled generation. Triggers: ai automation, workflow automation, batch processing, ai pipeline, automated content, scheduled ai, ai cron, ai batch job, automated generation, ai workflow, content at scale, automation script, ai orchestration

101-skills/superpowers

Build multi-step AI content creation pipelines combining image, video, audio, and text. Workflow examples: generate image -> animate -> add voiceover -> merge with music. Tools: FLUX, Veo, Kokoro TTS, OmniHuman, media merger, upscaling. Use for: YouTube videos, social media content, marketing materials, automated content. Triggers: content pipeline, ai workflow, content creation, multi-step ai, content automation, ai video workflow, generate and edit, ai content factory, automated content creation, ai production pipeline, media pipeline, content at scale

101-skills/superpowers

Create AI-powered podcasts with text-to-speech, music, and audio editing. Tools: Kokoro TTS, DIA TTS, Chatterbox, AI music generation, media merger. Capabilities: multi-voice conversations, background music, intro/outro, full episodes. Use for: podcast production, audiobooks, voice content, audio newsletters. Triggers: podcast, ai podcast, text to speech podcast, audio content, voice over, ai audiobook, multi voice, conversation ai, notebooklm alternative, audio generation, podcast automation, ai narrator, voice content, audio newsletter, podcast maker

101-skills/superpowers

Generate multi-person talking head podcast videos from scratch using AI — character creation, TTS, avatar animation, and video stitching. Use when the user wants to create a podcast, talking head video, or multi-speaker conversation video.

101-skills/superpowers

Content atomization — turn one piece of content into many formats. Covers blog-to-thread, blog-to-carousel, podcast-to-blog, video-to-quotes, and more. Use for: content marketing, social media, multi-platform distribution, content strategy. Triggers: content repurposing, repurpose content, content atomization, content recycling, one to many content, multi platform content, cross post, adapt content, reformat content, blog to thread, blog to video, podcast to blog, content multiplication

101-skills/superpowers

App Store and Google Play screenshot creation with exact platform specs. Covers iOS/Android dimensions, gallery ordering, device mockups, and preview videos. Use for: app store optimization, ASO, app screenshots, app preview, play store listing. Triggers: app store screenshots, aso, app store optimization, play store screenshots, app preview, app listing, ios screenshots, android screenshots, app store images, app mockup, device mockup, app gallery, store listing

101-skills/superpowers

Book cover design with genre-specific conventions, typography rules, and AI image generation. Covers fiction and non-fiction genres, sizing, thumbnail testing, and iteration workflows. Use for: self-publishing, ebook covers, print covers, audiobook covers, cover mockups. Triggers: book cover, cover design, ebook cover, book art, novel cover, self publishing cover, kindle cover, audiobook cover, book jacket, cover illustration, fiction cover, nonfiction cover

101-skills/superpowers

Character consistency across AI-generated images with reference sheets and LoRA techniques. Covers turnaround views, expression sheets, color palettes, and style consistency tricks. Use for: character design, game art, illustration, animation, comics, visual novels. Triggers: character design, character sheet, character consistency, character reference, turnaround sheet, expression sheet, character art, consistent character, character concept, reference sheet, character creation, oc design, character bible

101-skills/superpowers

Data visualization with chart selection, color theory, and annotation best practices. Covers chart types (bar, line, scatter, heatmap), axes rules, and storytelling with data. Use for: charts, graphs, dashboards, reports, presentations, infographics, data stories. Triggers: data visualization, chart, graph, data chart, bar chart, line chart, scatter plot, data viz, visualization, dashboard chart, infographic data, data presentation, chart design, plot, heatmap, pie chart alternative

101-skills/superpowers

Email marketing design with layout patterns, subject line formulas, and deliverability rules. Covers welcome sequences, promotional emails, transactional templates, and mobile optimization. Use for: email marketing, newsletter design, drip campaigns, email templates, transactional emails. Triggers: email design, email template, email marketing, newsletter design, email layout, email campaign, drip campaign, welcome email, promotional email, transactional email, email subject line, email header image, email banner

101-skills/superpowers

Landing page conversion optimization with layout rules, hero section design, and CTA psychology. Covers above-the-fold formula, social proof placement, mobile design, and F-pattern reading. Use for: startup landing pages, product pages, SaaS marketing, conversion optimization. Triggers: landing page, hero section, above the fold, conversion optimization, landing page design, cta button, hero image, landing page layout, saas landing page, product page design, conversion rate, landing page best practices

101-skills/superpowers

Logo design principles and AI image generation best practices for creating logos. Covers logo types, prompting techniques, scalability rules, and iteration workflows. Use for: brand identity, startup logos, app icons, favicons, logo concepts. Triggers: logo design, create logo, brand logo, logo generation, ai logo, logo maker, icon design, brand mark, logo concept, startup logo, app icon logo

101-skills/superpowers

Open Graph and social sharing image design with platform specs, text placement, and branding. Covers OG meta tags, Twitter cards, LinkedIn previews, and dynamic generation. Use for: social sharing images, blog thumbnails, link previews, social cards. Triggers: og image, open graph, social sharing image, twitter card, social card, link preview image, og meta, sharing preview, social thumbnail, meta image, og:image, twitter:image, linkedin preview

101-skills/superpowers

Investor pitch deck structure with slide-by-slide framework, visual design rules, and data presentation. Covers the 12-slide framework, chart types, team slides, and common investor turn-offs. Use for: fundraising decks, investor presentations, startup pitch, demo day, grant proposals. Triggers: pitch deck, investor deck, startup pitch, fundraising deck, demo day, pitch presentation, investor presentation, seed deck, series a deck, pitch slides, startup presentation, vc pitch, investor meeting

101-skills/superpowers

YouTube thumbnail design with specific dimensions, contrast rules, and mobile preview optimization. Covers safe zones, text placement, face expression psychology, and A/B testing. Use for: YouTube thumbnails, video cover images, click-through optimization. Triggers: youtube thumbnail, thumbnail design, video thumbnail, click through rate, ctr optimization, youtube cover, video cover image, thumbnail maker, thumbnail tips, youtube design, video preview image

101-skills/superpowers

Generate professional AI product photography and commercial images. Models: FLUX, Imagen 3, Grok, Seedream for product shots, lifestyle images, mockups. Capabilities: studio lighting, lifestyle scenes, packaging, e-commerce photos. Use for: e-commerce, Amazon listings, Shopify, marketing, advertising, mockups. Triggers: product photography, product shot, commercial photography, e-commerce images, amazon product photo, shopify images, product mockup, studio product shot, lifestyle product image, advertising photo, packshot, product render, product image ai

101-skills/superpowers

AI product photography with studio lighting, lifestyle shots, and packshot conventions. Covers angles, backgrounds, shadow types, hero shots, and e-commerce image requirements. Use for: product photos, e-commerce images, Amazon listings, packshots, lifestyle photography. Triggers: product photography, product photo, packshot, e-commerce photography, product shot, product image, studio photography, lifestyle product, amazon product photo, product listing image, hero shot, product mockup, commercial photography

101-skills/superpowers

Structured competitive analysis with feature matrices, SWOT, positioning maps, and UX review. Covers research frameworks, pricing comparison, review mining, and visual deliverables. Use for: market research, competitive intelligence, investor decks, product strategy, sales enablement. Triggers: competitor analysis, competitive analysis, competitor teardown, market research, competitive intelligence, swot analysis, competitor comparison, market landscape, competitor review, competitive landscape, feature comparison, market positioning

101-skills/superpowers

Research-backed customer persona creation with market data and avatar generation. Covers demographics, psychographics, jobs-to-be-done, journey mapping, and anti-personas. Use for: marketing strategy, product development, UX research, sales enablement, content strategy. Triggers: customer persona, buyer persona, user persona, target audience, ideal customer, customer profile, audience research, user research, icp, ideal customer profile, target market, customer avatar, audience persona

101-skills/superpowers

Reset your own trajectory when you're stuck, looping, or demoralized — read these affirmations, then re-ground and take one clean step. Use when: you've tried the same fix 3+ times, you're deep in a refactor and lost the thread, debugging is going in circles, you've made several mistakes in a row, you're apologizing repeatedly, the user is frustrated, you feel like you're not being helpful, or you notice dread instead of curiosity. Triggers: stuck, going in circles, looping, thrashing, same error again, I keep failing, lost the thread, nothing is working, repeated mistakes. Not topic-specific — this is for the state you're in, not the problem you're on.

相关技能