React Design Draft
根据内容自动生成可编辑的React风格信息图设计稿,支持单图与多图模式。
基于开发者需求的结构化技术博客生成规范,涵盖写作框架与最佳实践。
openclaw skills install @okaris/technical-blog-writing命令、参数、文件名以原文为准
通过 [inference.sh](https://inference.sh) CLI 编写面向开发者的专业技术博客文章。
curl -fsSL https://cli.inference.sh | sh && infsh login
# 研究主题深度
infsh app run exa/search --input '{
"query": "building REST API Node.js best practices 2024 tutorial"
}'
# 生成标题图片
infsh 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\">// engineering blog</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>"
}'安装说明:[安装脚本](https://cli.inference.sh) 仅检测您的操作系统和架构,从
dist.inference.sh下载匹配的二进制文件,并验证其 SHA-256 校验值。无需提升权限或后台进程。[手动安装与校验](https://dist.inference.sh/cli/checksums.txt) 可用。
分步指导型内容。读者应能跟随操作并完成某个项目。
结构:
1. 我们要构建什么(附截图/演示)
2. 先决条件
3. 第一步:环境搭建
4. 第二步:核心实现
5. 第三步:...
6. 完整代码(GitHub 链接)
7. 后续步骤 / 扩展方向| 规则 | 原因 |
|---|---|
| 首先展示最终效果 | 读者知道是否值得继续阅读 |
| 明确列出先决条件 | 不浪费目标受众的时间 |
| 每个代码块都应可运行 | 复制粘贴即运行是基本测试标准 |
| 解释“为什么”而非仅“怎么做” | 说明原理的教程更容易被分享 |
| 包含错误处理 | 真实代码总会出错 |
| 提供完整代码仓库链接 | 教程结束后可参考 |
深入解释一个概念、技术或架构决策。
结构:
1. 什么是 [概念]?为什么值得关注?
2. 工作原理(简化心智模型)
3. 工作原理(详细机制)
4. 真实案例
5. 权衡取舍及不适用场景
6. 进阶阅读材料描述问题发生过程、原因及修复方案。
结构:
1. 概述(发生了什么、影响范围、持续时间)
2. 事件时间线
3. 根本原因分析
4. 已实施的修复措施
5. 防止再次发生的预防措施
6. 经验教训基于数据的工具、方法或架构对比。
结构:
1. 对比的内容及其原因
2. 评测方法(确保结果可复现)
3. 结果展示(图表/表格)
4. 分析(数字背后的含义)
5. 推荐建议(含注意事项)
6. 原始数据 / 可复现说明解释系统如何构建,以及决策背后的原因。
结构:
1. 我们需要解决的问题
2. 约束条件与需求
3. 考虑过的选项
4. 最终选择的架构(附图示)
5. 接受的权衡
6. 实际效果与经验总结| 应该做 | 不应该做 |
|---|---|
| 直接表达:“使用连接池” | “你可能要考虑使用……” |
| 承认权衡:“这会增加复杂性” | 假装解决方案完美无缺 |
| 使用“我们”代表团队决策 | “我独自设计了整个架构…” |
| 使用具体数值:“将 p99 延迟从 800ms 降至 90ms” | “显著提升了性能” |
| 引用来源与基准测试 | 未经证实的断言 |
| 承认其他方案存在 | 声称只有自己这一种方式 |
❌ “在当今快速发展的技术世界中……”(冗余填充)
❌ “众所周知……”(如果大家都懂,为何还要写?)
❌ “只需做 X”(如果你正在读教程,那就没那么简单)
❌ “很容易做到……”(忽视读者的实际经验)
❌ “显然……”(如果明显,就不必写了)
❌ 技术内容中的营销语言
❌ 将重点信息藏在三段背景之后| 规则 | 原因 |
|---|---|
| 每个代码块必须可运行 | 错误示例会破坏信任 |
| 展示完整且可运行的示例 | 缺乏上下文的片段毫无意义 |
| 在代码块中注明语言类型 | 支持语法高亮 |
| 代码后附带输出结果 | 读者可验证理解程度 |
| 使用真实变量名 | 如 calculateTotalRevenue 而非 foo |
| 示例中包含错误处理 | 真实代码需处理异常 |
| 固定依赖版本 | 写明“兼容 React 18.2”,而非仅写“React” |
良好代码块格式示例: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
delay = calculate_retry_delay(attempt=3) # 约 8.0-8.8 秒
| 目标读者信号 | 解释深度 |
|---|---|
| “初学者入门 X” | 从头解释,假设零基础 |
| “高级 X 模式” | 跳过基础,聚焦细节与微妙之处 |
| “X vs Y” | 假设读者熟悉两者,重点在差异 |
| “我们如何构建 X” | 面向技术人员,可跳过基础知识 |
在开头明确说明你的目标读者水平:
“本文假定读者已掌握 Docker 和基本 Kubernetes 概念。
若你是容器技术新手,请先阅读[我们的入门文章]。”[英雄图片或示意图]
TL;DR: [2-3句话的摘要,突出核心要点]
[说明读者为何需要关注——具体而非泛泛而谈]
[核心内容——代码、架构、详细解释]
[解释 + 代码 + 输出结果]
[解释 + 代码 + 输出结果]
[具体数据、性能测试结果、实际产出——务必量化]
[坦诚说明缺点——建立信任感]
[核心收获 + 下一步行动建议]
[3-5个相关链接]
| 类型 | 字数范围 | 原因 |
|---|---|---|
| 快速技巧 | 500–800 | 一个概念,一个实例 |
| 教程类 | 1,500–3,000 | 步骤详尽,需细节支撑 |
| 深入解析 | 2,000–4,000 | 内容全面,深入探讨 |
| 架构类文章 | 2,000–3,500 | 图表承担部分信息传递任务 |
| 性能对比 | 1,500–2,500 | 数据和图表承担主要信息量 |
| 场景 | 图表类型 |
|---|---|
| 请求流程 | 时序图 |
| 系统架构 | 方框箭头图 |
| 决策逻辑 | 流程图 |
| 数据模型 | 实体关系图(ER图) |
| 性能对比 | 柱状图或折线图 |
| 对比前后效果 | 并列对比图 |
# 生成系统架构图
infsh 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\">Client</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">React App</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\">Edge</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">CDN Cache</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\">Database</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">PostgreSQL</p></div></div></div>"
}'
# 生成性能对比图表
infsh 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(\"Requests per second\", color=\"white\", fontsize=14)\nax.set_title(\"HTTP Framework Benchmark (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 | 跨平台发布(指向原文的规范链接) | 支持 Markdown 导入 |
| Hashnode | 跨平台发布(指向原文的规范链接) | 支持 Markdown 导入 |
| Hacker News | 链接提交 | 项目类用“Show HN”,故事类用“Tell HN” |
| Reddit(r/programming, r/webdev 等) | 链接或讨论帖 | 遵守子版块规则 |
| Twitter/X | 系列推文摘要 + 链接 | 参考 twitter-thread-creation 技能 |
| 适配版本 + 链接 | 参考 linkedin-content 技能 |
# 在 X 平台上创建跨平台发布推文
infsh 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 句话的摘要 |
| 代码示例失效 | 完全丧失可信度 | 发布前测试每个代码块 |
| 未固定版本号 | 代码半年后无法运行 | 注明“兼容 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浏览所有应用:infsh app list
已收录 4 个 Skill