5K Stars自媒体配图 Skill

5K Stars自媒体配图 Skill – 小黑 Skill 手绘文章配图实测教程

今天分享一些适合用作配图的内容。

在自媒体创作领域，文章撰写仅仅是基础，配图能力的重要性日益凸显。如今，读者很难静下心来通读长篇大论，而引人入胜的配图则更能吸引他们的目光。

在此，我向大家隆重推荐一个极具趣味性的配图项目：ian-xiaohei-illustrations，我通常称之为“小黑 Skill”。

微信关注回复“开源”，加入AI开源项目交流群

01. 项目概览

helloianneo/ian-xiaohei-illustrations 是由 Ian 开源的一个 Codex Skill。其图像生成逻辑在于捕捉文章中的判断、流程、状态及比喻，并将其转化为一张张以纯白为底、手绘风格、略带怪诞却又清新脱俗的正文配图。

小黑的形象是：实色，白点眼睛，细腿，表情空洞。

小黑 Skill 生成的画面通常为 16:9 的白底手绘风格，配以少量红、橙、蓝三色的中文标注，留白充裕，颇有产品设计师在白纸上随手绘制解释草图之感。

项目地址：https://github.com/helloianneo/ian-xiaohei-illustrations

02. 项目实操演示

案例一：配图规划

小黑 Skill 拥有多种使用方式，其一便是用于配图规划。我们尝试用过往的文章进行测试。

提示词：

请使用小黑 Skill，暂时不要生成图片。请分析以下文章哪些部分适合配图，并输出约 5 张的图片列表。每张图需包含：建议放置位置（在哪段后）、主题、核心寓意、结构类型、小黑正在进行的动作、建议的中文标注词。

文章：

今日内容，旨在为学术研究者提供实用资源。

当前，AI 学术工具日益增多，写作效率虽有提升，但仔细校对后常发现诸多疏漏。

更令人沮丧的是，AI 能够以极其肯定的语气陈述一个观点，但其引用的原始文献却未必真正支持该观点。

近日，我在 GitHub 上发现一个专门解决此类问题的学术研究项目，该项目已获得 30K Star 的关注。

图片

01

项目概述

Academic Research Skills（ARS）是一套面向 Claude Code 的开源学术研究 Skill 包。它将选题、文献检索、论文写作、同行评审、修订、格式整理等环节细分，让 AI 分阶段参与，而关键的判断仍由我们主导。

该项目全面覆盖了从选题研究、文献检索、论文撰写、同行评审、修改，直至最终的格式化和过程总结的完整学术工作流程。

图片

该项目主要包含四组 Skill：

Deep Research：用于深度研究、文献综述、系统性回顾、事实核查。

图片

Academic Paper：辅助论文写作、摘要生成、格式转换、引用格式校验、LaTeX / PDF 输出。

图片

Academic Paper Reviewer：模拟同行评审，从多角度审阅论文，并提供质量评分和修改建议。

图片

Academic Pipeline：串联研究至成稿的全过程，按阶段推进，并在关键节点插入学术诚信检查。

图片

使用起来也极为便捷。

若您已在使用 Claude Code，只需两行命令即可轻松安装插件。

/plugin marketplace add Imbad0202/academic-research-skills

/plugin install academic-research-skills

图片

02

项目实测

项目中的四组 Skill 相辅相成，十余个 Skill 会在我们完成论文的过程中交替出现。例如，让我们尝试让项目引导撰写一篇论文：

提示词：请引导我撰写一篇关于少子化影响的论文。

Academic Paper 组内的 plan mode Skill 将以引导式方式协助我们规划论文。

图片

通过提问的方式，了解论文当前进展，并确定我们期望采用的结构。

图片

在完成进度汇报和结构选择后，系统将根据当前的论文进展，建议我们优先进行 deep-research。

图片

当然，在 deep-research 过程中，也会通过反问来明确一些论文的研究方向问题。

<点击图片上下滑动查看全部内容>

可以看到，此处已切换至 Academic Paper Skill 组的 full mode 流程。

进程直接进入 Phase 1：为我们生成研究问题简报和方蓝图。

系统还会细致地确认一些方向性问题，方才进行文献检索，整个流程相当严谨。

<点击图片上下滑动查看全部内容>

我认为，按四个方向进行的文献检索结果已相当详尽，但出乎意料的是，它还能列出一些潜在的局限性。

<点击图片上下滑动查看全部内容>

在完成 Phase 3：分析与综合后，提供了两个选项：

进入 Phase 4：直接撰写完整的学术报告。

或携带此研究基础，返回 academic-paper 的 Plan 模式，进入逐章引导规划。

第二个选项即回归我们最初的目标，在积累文献后进行论文规划。

图片

我们由此获得了初步的文献收集成果，进度不再是空白一片。而且，通过刚才的过程，也提炼出了这篇论文的核心论点。

<点击图片上下滑动查看全部内容>

有了核心论点，系统将协助我们逐章进行规划。ARS 不会直接代笔完成全文，而是通过一系列的问答 Skill，尽量融入我们的观点。

在一轮问询后，若无修改意见，则进入 full mode，由 AI 生成论文初稿。

<点击图片上下滑动查看全部内容>

该项目的精髓在于其学术诚信闸门和引用审计功能。

我们只需简单一句“请帮我审查整篇论文”，ARS 便会在论文流程中专门插入检查节点，以查验虚构引用、数据错误、论据缺乏文献支持、方包装不当、AI 幻觉结果等问题。

具体实现方式是直接调用 Academic Paper Reviewer 这组 Skill 来完成。

<点击图片上下滑动查看全部内容>

可以看到，ARS 会从宏观层面，通过多个维度对我们的论文进行评分，并具体指出哪些段落或句子需要进行修改。

<点击图片上下滑动查看全部内容>

最终结果呈现出完整的结构和充实的内容。作为一篇课程级别的论文，已堪称得上乘之作。

03

深度挖掘

相较于完成一篇完整的论文，我更关注 ARS 背后的方：将其分解为一套可重复执行、可追溯过程、可供审查的 AI 工作流。

学校可以利用 ARS 进行论文写作指导，或作为学术诚信的审查工具。科研团队可借此进行文献综述和项目预研。期刊、教育机构可用于初筛稿件。企业中的研发、咨询、投研团队，亦可运用类似流程审查报告中的证据链。

尤其值得关注的是，“引用审计”和“论据支撑检查”等功能，很可能成为未来 AI 学术工具的核心盈利点。

当前许多 AI 工具仍停留在“帮你写得更像论文”的层面，但真正的难题并未解决：每个结论是否有文献支持？引用是否被曲解？数据是否脱离了原有语境？

AI 无需包办所有专业工作。更优的策略是，将其融入专业流程，辅助人们进行追问、查证、复核，弥补那些最容易被忽视的环节。

几分钟内，便选定了五个适合配图的关键点：

这五个选点整体表现不俗，准确抓住了文章中几个能引起读者思考的节点。这组图片并非平均分配到各个功能模块，而是选取了文章中真正需要建立判断的环节。

案例二：正文配图生成

第二种使用方式是直接生成正文配图。输入一篇文章，系统即可为其配好图片。

提示词：请使用小黑 Skill 为以下文章生成 4 张怪诞风格的正文配图。要求：16:9 横版、纯白背景、黑色手绘线稿、少量红橙蓝中文手写标注。

文章：

今日内容，聚焦前端开发相关主题。

坦白说，当下部分 AI Agent 的前端审美堪忧，普遍存在布局过于居中、卡片堆叠、渐变滥用、留白与层级不自然、动效缺乏节奏感、字体与间距缺乏高级感等问题，导致生成的网页显得廉价，其中 Codex 便是一个典型代表。

前不久，我在 GitHub 上发现了一个名为 Taste Skill 的项目，能够有效解决 AI Agent 审美不佳的问题，该项目仓库目前已获得约 4 万 Stars 的关注。

图片

01

项目简介

Taste Skill 是一个面向 AI Agent 的前端设计技能库，旨在帮助 AI 摆脱模板化、同质化、缺乏审美的固有前端模式。

它将布局、排版、动效、间距、视觉密度、设计语言等原本需要设计经验判断的要素，转化为 AI Agent 可读取并执行的 SKILL.md 指令，从而提升 AI 在生成界面时的设计判断力。

Taste Skill 目前包含多种不同用途的技能模块，每个模块都针对解决一个具体问题：

design-taste-frontend

默认 Skill，能够根据需求推断设计语言，并通过几个关键维度控制输出，例如布局变化度、动效强度、信息密度等。

gpt-taste

适用于 GPT/Codex 的严格版本，对布局变化、GSAP 动效、反模板化有更高要求。

image-to-code

适用于需要先创建网页参考图，再让 AI 还原成前端代码的场景。

redesign-existing-projects

用于改造现有项目。先审查现有 UI，再修复布局、间距、层级、视觉风格等问题。

high-end-visual-design

偏向高端、克制、精致的视觉风格，强调柔和的对比度、留白、字体质感和自然的动效。

minimalist-ui

偏向 Notion、Linear 等现代极简产品界面，适合 SaaS、工具型产品、开发者产品和内容型后台。

industrial-brutalist-ui

偏向工业风、粗粝感、瑞士字体、强对比和实验性布局，适合更具个性、更锋利的视觉表达。

full-output-enforcement

用于约束 AI 不要只提供半成品、占位符或省略代码，适用于处理 Agent 输出不完整的问题。

图片生成相关技能

包括 imagegen-frontend-web、imagegen-frontend-mobile、brandkit，用于生成网站视觉稿、移动端界面流、品牌视觉板等参考图，再交给 Codex、Cursor 或 Claude Code 实现。

Taste Skill 的安装方式非常简单，可通过 CLI 直接安装：

npx skills add https://github.com/Leonxlnx/taste-skill

如果仅需安装某个特定 Skill，也可指定 Skill 名称：

npx skills add https://github.com/Leonxlnx/taste-skill –skill “design-taste-frontend”

项目也支持更轻量化的使用方式：直接复制任意 SKILL.md 到项目中，或粘贴到 ChatGPT / Codex 对话中使用。

02

项目实测

Codex 实测 1

让我们在无 Skill 和有 Skill 的两种情况下，分别生成一个网页，并进行效果对比。

无 Skill：

提示词：

请从零开始为我实现一个 AI Agent 产品官网的首屏，不使用任何 Skill。

产品名称：LoopPilot

产品定位：一个帮助团队自动规划、执行、复盘任务的 AI Agent 工作台。

目标用户：开发者、小型团队、AI 产品经理。

页面气质：避免普通 SaaS 模板感，避免大面积蓝紫渐变，避免堆砌卡片。希望体现出高级、克制、清晰的信息层级，同时带有一点未来感和工具感。

请完成以下内容：

1. 设计一个完整首屏

— 包含产品名、主标题、副标题、主要 CTA、次要 CTA

— 展示 3 个核心能力：自动拆解任务、持续执行、复盘优化

— 需要有一个产品界面预览区域，但避免像普通 Dashboard 模板

— 首屏需具备明显的视觉记忆点

2. 设计风格要求

— 采用非模板化布局，避免所有内容居中堆叠

— 字体层级清晰，标题富有冲击力但不粗糙

— 色彩控制在 3-5 个主色以内

— 可包含动效，但需服务于信息表达，避免炫技

— 页面需适配移动端和桌面端

3. 代码要求

— 请直接输出完整可运行的代码

— 避免使用占位符，不得省略任何关键代码

— 请勿仅提供设计建议，务必实现页面

— 若使用组件，请确保所有组件均已完整编写

— 若需样式，请完整编写 CSS / Tailwind class

4. 验收标准

— 页面第一眼不能显得像 AI 默认生成的 SaaS 模板

— 视觉层级清楚，CTA 明显

— 移动端 9:16 截图时也应协调统一

— 所有文字不得溢出或重叠

— 最终效果应如同一个真实产品准备发布的首屏

请先简要说明您的设计思路，然后直接提供完整实现。

▲上下滑动查看全文

桌面端效果：

图片

移动端效果：

<点击图片上下滑动查看全部内容>

无 Skill 版本虽然避免了落入普通 SaaS 首屏的“标题居中 + 三张卡片 + 蓝紫渐变”的俗套，但产品感略显不足。右侧的工作台更像装饰图，用户虽被大标题和图形吸引，却难以理清产品如何帮助团队协作、如何形成闭环。

移动端表现尚可，但标题断行显得有些生硬。

使用 Taste Skill：

提示词：

请使用 Taste Skill 中的 design-taste-frontend 和 full-output-enforcement，协助我从零开始实现一个 AI Agent 产品官网的首屏。

产品名称：LoopPilot

产品定位：一个帮助团队自动规划、执行、复盘任务的 AI Agent 工作台。

目标用户：开发者、小型团队、AI 产品经理。

页面气质：避免普通 SaaS 模板感，避免大面积蓝紫渐变，避免堆砌卡片。希望体现出高级、克制、清晰的信息层级，同时带有一点未来感和工具感。

请完成以下内容：

1. 设计一个完整首屏

— 包含产品名、主标题、副标题、主要 CTA、次要 CTA

— 展示 3 个核心能力：自动拆解任务、持续执行、复盘优化

— 需要有一个产品界面预览区域，但避免像普通 Dashboard 模板

— 首屏需具备明显的视觉记忆点

2. 设计风格要求

— 采用非模板化布局，避免所有内容居中堆叠

— 字体层级清晰，标题富有冲击力但不粗糙

— 色彩控制在 3-5 个主色以内

— 可包含动效，但需服务于信息表达，避免炫技

— 页面需适配移动端和桌面端

3. 代码要求

— 请直接输出完整可运行的代码

— 避免使用占位符，不得省略任何关键代码

— 请勿仅提供设计建议，务必实现页面

— 若使用组件，请确保所有组件均已完整编写

— 若需样式，请完整编写 CSS / Tailwind class

4. 验收标准

— 页面第一眼不能显得像 AI 默认生成的 SaaS 模板

— 视觉层级清楚，CTA 明显

— 移动端 9:16 截图时也应协调统一

— 所有文字不得溢出或重叠

— 最终效果应如同一个真实产品准备发布的首屏

请先简要说明您的设计思路，然后直接提供完整实现。

▲上下滑动查看全文

桌面端效果：

图片

移动端效果：

<点击图片上下滑动查看全部内容>

Taste Skill 的加入，增加了顶部导航，使得整体观感更加舒适，毕竟如今的网站很少有不带导航的。右侧的产品预览不再只是抽象图形，用户可以通过步骤性的文字清晰地理解产品的运作路径。

移动端的表现也更为成熟，能力点被设计成的模块，阅读顺序也显得更加自然。

Codex 实测 2

当然，已有的项目也可以通过 Taste Skill 进行前端重构。

提示词：

请使用 Taste Skill 中的 redesign-existing-projects、minimalist-ui、high-end-visual-design 和 full-output-enforcement，协助我重构一个已有项目的官网首页。

项目位置：

D:\360MoveData\Users\win\Desktop\公众号\wechat-topic-dashboard-ugly-homepage

背景：

这是一个“公众号选题管理平台”的官网首页，产品名为 Content Desk。它面向公众号、小红书、视频号、知乎等内容团队，旨在帮助他们管理选题、分配负责人、跟踪状态、查看 AI 推荐及内容表现。

当前存在的问题：

现有页面在功能和信息上都比较完善，但视觉上存在明显的模板化倾向：

— 蓝紫粉渐变运用过多

— 大标题显得浮夸

— 页面布局过度居中

— 卡片堆叠现象严重

— CTA 按钮重复出现

— 产品截图更像装饰，而非真实的产品展示

— 信息层级较为松散

— 移动端阅读路径过长

— 整体感觉与普通 AI 生成的 SaaS 落地页无异

重构目标：

在不改变产品主题和核心信息的前提下，将其重构为一个更专业、更克制、更可信的内容运营工具官网首页。最终效果应如同一个真实 SaaS 产品上线前的官网，而非模板页面。

请完成以下内容：

1. 首屏重构

— 保留产品名称 Content Desk

— 保留产品定位：专为内容团队打造的公众号选题管理平台

— 需包含清晰的主标题、副标题、主 CTA、次 CTA

— 避免使用“效率提升 300%”这类夸张的表述

— 首屏必须展示一个可信的产品界面预览，避免仅作为装饰性图片

— 视觉上应具有记忆点，但不能过于花哨

2. 产品能力展示

需要展示以下能力：

— AI 推荐选题

— 多平台选题管理

— 状态与负责人跟踪

— 截止时间与优先级管理

— 内容风险提醒

— 发布表现复盘

展示方式不应是简单堆砌 6 张大卡片，而应根据内容运营的实际场景重新组织信息层级。

3. 工作流程展示

展示一个内容团队从选题到复盘的完整流程：

— 收集热点

— 评估选题

— 分配写作

— 审核发布

— 数据复盘

流程应与产品界面相呼应，而非简单的 1、2、3 步骤卡片。

4. 页面风格要求

— 偏向 Notion / Linear / 飞书多维表格 / 现代 B2B SaaS 工具的风格

— 克制、清爽、值得信赖

— 信息密度适中，避免过于空旷

— 避免大面积蓝紫渐变

— 避免圆角大卡片的堆叠

— 避免浮夸的阴影效果

— 避免营销腔调

— 需具备清晰的版面节奏、留白、字体层级和状态色

— 以桌面端为优先，同时移动端也应能自然适配

5. 代码要求

— 直接修改项目中的现有文件

— 输出完整可运行的版本

— 不得省略代码

— 不得使用 lorem ipsum

— 请勿仅提供设计建议，务必实现页面

— 确保桌面端和移动端文本不溢出、不重叠

— 仅需纯静态 HTML / CSS 实现，无需引入复杂框架

6. 验收标准

— 第一眼不能显得像 AI 默认生成的 SaaS 模板

— 产品界面预览应具有可信度，能清晰展示其为“内容选题管理工具”

— CTA 按钮清晰而不突兀

— 能力和流程的展示应围绕真实内容运营场景组织，而非简单堆砌卡片

— 移动端阅读顺序自然流畅

— 重构前后视觉差异应明显

— 最终页面应适合作为 Taste Skill 重构已有项目的实测案例进行展示

请先简要指出原页面的主要问题，再说明您的重构策略，然后直接修改项目文件并提供完整实现。

▲上下滑动查看全文

原桌面端效果：

<点击图片上下滑动查看全部内容>

原移动端效果：

<点击图片上下滑动查看全部内容>

原页面过度使用蓝紫粉渐变和厚重阴影，首屏布局过于居中，功能和流程都采取了平均卡片堆叠的方式。中间的产品截图也偏向装饰性，其中的数据和界面结构显得不太真实，更像是为了填满首屏而放置的 mockup。

移动端的问题更为突出：导航、标题、按钮、截图、功能卡片层层堆叠，导致阅读路径冗长，视觉噪音也比较严重。

重构后的桌面端效果：

图片

重构后的移动端效果：

<点击图片上下滑动查看全部内容>

重构后的页面布局看起来顺眼多了，原来的配色方案简直让人眼花缭乱。

桌面端的左侧展示了产品定位和核心数据，右侧则是一个可信的选题工作台预览。用户可以一目了然地理解：这是一个用于管理选题、状态、AI 建议、风险和发布表现的工具。

移动端的信息顺序调整为：品牌导航、产品定位、主标题、CTA、核心数据。用户无需先浏览大量渐变和营销宣传语，就能更快地理解产品的功能。

案例三：单一概念/段落生图

第三种用法是直接提供一个概念或一小段文字，然后用小黑 Skill 生成一张图。

提示词：请使用小黑 Skill 为“人人心中皆有一台天线，只要还能接受美好、希望、欢乐、勇气和力量的信号，就能青春永驻，风华常存。”生成一张配图。画面要求怪诞而清新，小黑必须承担核心动作。

隐喻清晰可见，美好、希望、欢乐、勇气、力量这五个信号词分别对应花朵、日出、笑脸、旗帜和火焰。信号线汇入胸腔内的天线，再连接到嫩芽和时钟。

小黑承担了画面的核心动作，并没有沦为旁观的装饰，这一点符合小黑 Skill 的使用要求。

03. 小黑 Skill 的个性化定制

您可能会想：我不太喜欢这个小黑人，能否更换一个角色？

当然可以，每个人都可以根据自己的喜好定制专属风格，只需一条提示词即可将自己的 IP 形象融入 Skill。

我提供了“挖挖”的三视图：

然后，在 Codex 中输入提示词：

提示词：请将小黑 Skill 中的小黑人替换为“挖挖”的形象，创建一个名为“小挖 Skill”的副本。

如此一来，我们便能获得一个融入了个人 IP 元素的“小黑 Skill”，当然，此时更应称之为“小挖 Skill”。

我们来尝试生成一张图。

提示词：请使用小挖 Skill 为这段话生成配图：“GLM-5.2 的此次更新，在当前背景下显得尤为重要。1M 的上下文长度为模型提供了处理更长代码库和事故材料的机会；MIT 许可证和开源权重，为团队在私有化部署、成本控制、合规审查方面提供了更多灵活性；Coding Agent 能力的增强，加速了研发提效这一最易落地的方向。”

再来一张，关于金句的。

提示词：请使用小挖 Skill 为这段话生成配图：“伟大梦想不是等得来、喊得来的，而是拼出来、干出来的。”

效果非常出色，再来一张。

提示词：请使用小挖 Skill 为这段话生成配图：“通用 Agent 将两端连接起来。Agent 既能理解材料，又能调用文件、浏览器、图像生成、代码和本地导出工具。将 PPT Skill 融入这一流程后，制作 PPT 就从‘打开某个工具’变成了‘交代一个任务’。”

这些图片已经带有鲜明的“小挖” IP 特征，识别点：橘色安全帽、头灯、护目镜、三花猫斑纹、小镐、矿洞、矿车等元素均有体现。

读者在看过几张同系列图片后，很可能会记住这是那只擅长挖掘概念的小矿工猫。

04. 深度挖掘

内容生产正从单纯的文字竞争，转向图文结构层面的竞争。

公众号、博客、知识库、产品文档、课程讲稿等都需要更高频率、更低成本的解释型配图。许多团队已经能够利用 AI 生成初稿，而配图策略和视觉风格则开始成为文章的独特记忆点。

小黑 Skill 首先会判断文章中哪些地方适合配图，然后将抽象的观点、流程、状态和比喻转化为清新脱俗的手绘解释图。对于内容创作者而言，这比临时搜集素材、生硬插入截图、套用模板信息图更为适合长期使用。

小黑 Skill 解决了长文阅读疲劳、配图风格不统一、抽象概念难以理解、创作者缺乏稳定视觉资产等问题。结合“小挖”这类个人 IP 的定制化改造，它甚至可以演变成账号自身的视觉识别系统。

当 AI 写作日益普及，能否将观点清晰、有趣、易于记忆地呈现出来，将成为内容账号新的差异化优势。

原文链接：Github 狂揽 5K Stars，这个配图 Skill 真的超级好用