手绘白板信息图提示词生成

SKILL前端设计

原名 whiteboard-infographic

前端设计 未标注权限 许可证不明确
安装这个技能

想要手绘白板风格的教学图、概念讲解图或架构说明图时,可生成对应的AI绘图提示词,覆盖白板、马克笔、草图和课堂讲解等风格。

一句话选型结论

按资料字段整理

手绘白板信息图提示词生成是前端设计类的 Agent Skill,安装方式未标注,权限级别未标注,许可证不明确,有可直接复制的安装命令。技能本质是给模型读的说明书,效果取决于模型与客户端;装完先用一个小任务验证,再放进正式流程。

分类前端设计 安装方式未标注 权限级别未标注权限 许可证许可证不明确
累计安装 未标注 本周 未标注
GitHub 星标 未标注 仓库 未标注
下载量 未标注 技能市场下载数
权限级别 未标注权限 安装前请确认风险范围
许可证 许可证不明确 未说明

安装

未标注
在支持 Skills 的客户端里执行,装完问一句「你有哪些技能」验证
skillhub install user_06254702/whiteboard-infographic
  1. 1
    确认客户端支持

    确认你的客户端支持 Skills(Claude、Codex、Cursor 等),并升级到较新的版本。

  2. 2
    拿到技能文件

    执行上面的命令安装;也可以把仓库里的 SKILL.md 手动放进客户端的 skills 目录。

  3. 3
    刷新技能列表

    重新打开客户端,或刷新技能列表,让新放进来的技能被加载。

  4. 4
    验证是否生效

    问一句「你有哪些技能」,确认列表里出现它,再拿一个小任务试跑。

技能档案

前端设计
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方user_06254702仓库 未标注 · 版本 未标注
宿主客户端未标注技能可被这些客户端加载
安装方式未标注安装包 community
权限级别未标注权限安装前请确认风险范围
许可证未说明许可证不明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验2026-11-06上游最后核验时间 · 数据更新 2026-11-06
正文体量12.5 KBSKILL.md 原文大小,越大说明说明书写得越细

能做什么

0 项能力
上游给出的能力概览与适用场景
生成教学示意图提示词概念讲解配图项目或架构概览图

典型使用场景

3 类
按分类整理的常见用法,具体以 SKILL.md 为准
出页面与组件

按描述生成页面结构和组件草稿。

调整样式与布局

改间距、配色与响应式布局。

生成设计说明

把设计稿整理成开发能接的说明。

选择建议

装之前先看这几条
按条目字段给出的判断,不替你决定用不用

值得选的地方

  • 有可直接复制的安装命令,不用自己翻文档找入口。

先想清楚的地方

  • 没有标注权限级别,实际能做什么要装好后确认。
  • 许可证不明确,商用或二次分发前先到仓库确认条款。
  • 没有做站内核验,内容以作者仓库为准。
  • 技能只是说明书,实际效果取决于模型与客户端,装完先用小任务试一遍。

更适合

  • 需要在前端设计场景里给模型补一套做法的人。
  • 愿意先读一遍 SKILL.md、确认它会让模型做什么的人。

不太适合

  • 对许可证要求很严、必须明确可商用的人。
  • 只想装完就自动变强、不打算看说明书的人。

同类对比

6 个同类
同分类里挑最接近的几条,字段以各自详情页为准
技能权限级别安装方式累计安装宿主客户端安装命令
手绘白板信息图提示词生成当前 未标注权限 未标注 未标注 未标注 有
前端设计 只读 GitHub 仓库 882.3 万 Codex、Claude、Cursor 有
Vercel 组合模式 联网访问 GitHub 仓库 385.9 万 Codex、Claude、Cursor 有
Vercel React native skills 前端 只读 GitHub 仓库 246.9 万 Codex、Claude、Cursor 有
adapt 搜索 浏览器控制 GitHub 仓库 202.7 万 Codex、Claude、Cursor 有
使用我的浏览器 浏览器控制 GitHub 仓库 184.8 万 Codex、Claude、Cursor 有

SKILL.md 全文

12.5 KB
模型实际读到的说明书原文,来自技能仓库

白板信息图提示词生成器

根据用户提供的素材(项目介绍、技术概念、架构描述等),生成一段结构化的中文提示词,用于 AI 绘图工具生成"专家白板教学"风格的手绘信息图。

输入

用户提供以下任意一种或多种素材:
- 项目名称 + 简要描述
- 技术架构或工作流说明
- 核心特性列表
- 已有的分析文档或 README 内容
- 或者对话上下文中已经讨论过的项目信息

如果素材不够充分,提示用户补充关键信息:这个东西做什么、怎么做、核心组件有哪些、有什么独特之处。

提示词模板

生成的提示词必须严格遵循以下结构,每个部分都不能省略:

生成一张"专家白板教学"风格的手绘信息图,主题:{主题名} — {一句话描述},横版 16:9,背景为干净白色白板或浅灰网格纸。

**视觉元素:** 使用真实马克笔手绘质感的粗细不均线条、箭头和圆角方框。{整体布局描述}。

**画面{位置1}:** {区域内容详细描述,包含方框颜色、内部图标、标注文字}

**画面{位置2}:** {区域内容详细描述}

**画面{位置3}:** {区域内容详细描述}

{根据需要继续添加画面区域,通常 4-6 个区域}

**画面右下角:** 画一个简笔画火柴人老师拿着马克笔指向{核心元素},旁边画一个对话气泡写"{一句点睛话}!"

**文字:** 全部用真实手写风格(清晰可辨的手写体),标题大而醒目"{中文主标题}",副标题"{中文副标题}"。底部写"{总结金句}"。

**内容结构:** {布局总结},留白 30% 以上,整体干净、专业、像课堂白板教学图,所有文字必须 100% 清晰可读,无模糊、无重叠,高对比度。

生成原则

布局选择

根据素材的逻辑结构选择最合适的布局,而非千篇一律:

素材特征 推荐布局 示例
A vs B 对比 左右对比 旧方案 vs 新方案、问题 vs 解决方案
有中心节点辐射到多个子节点 中心辐射 消息中枢 + 多个客户端
多步骤流水线 左到右流水线 输入 → 处理层1 → 处理层2 → 输出
层级/树形关系 上下树形 主 Agent → 多个子 Agent
输入-处理-输出 三段式 威胁 → 检测引擎 → 防护动作

视觉要素规范

每个画面区域必须包含三要素:
1. 形状 + 颜色:明确指定方框/圆形/盾牌等形状和具体颜色
2. 内部图标:用"简笔画{具体物体}图标"描述,如"简笔画放大镜图标"、"简笔画大脑图标"
3. 标注文字:中文为主,关键术语可保留但非必须

颜色分配原则

  • 不同组件用不同颜色,形成视觉区分
  • 同类元素用同色系(如多个威胁都用红色系)
  • 正面/好的元素偏蓝绿,负面/问题元素偏红橙
  • 流水线各层用彩虹渐变色(红 → 橙 → 黄 → 绿 → 蓝 → 紫)

连接线规范

  • 虚线箭头:表示请求、轮询、可选路径
  • 实线箭头:表示数据流、确定路径、返回结果
  • 粗箭头:表示主要流向
  • 红色叉线:表示禁止/不允许的关系
  • 每条连接线旁必须有标注文字说明关系

内容提炼

从素材中提炼出信息图需要表达的核心信息,遵循以下优先级:
1. 核心机制:这个东西怎么工作的(最重要,必须画清楚)
2. 关键组件:有哪几个主要部分(3-6 个为佳,太多会拥挤)
3. 独特卖点:和别的方案有什么不同(用对比或强调色突出)
4. 量化数据:如果有具体数字(性能提升、节省比例),用大号手写数字展示

文字内容规范

  • 标题、标注、说明文字全部使用中文
  • 火柴人老师的对话气泡用一句通俗的中文点睛
  • 底部总结金句用"A + B + C = D"的公式化结构
  • 副标题用中文概括核心价值

示例

左右对比布局(mcp2cli)

素材特征:新方案 vs 旧方案的对比,有量化数据

生成一张"专家白板教学"风格的手绘信息图,主题:mcp2cli — 运行时 API 转 CLI 的令牌节省引擎,横版 16:9,背景为干净白色白板或浅灰网格纸。

**视觉元素:** 使用真实马克笔手绘质感的粗细不均线条、箭头和圆角方框。画面分为左右两大区域,用一条红色竖虚线从上到下分隔,左侧标注"❌ 原生工具注入",右侧标注"✅ mcp2cli 方式"。

**画面左侧区域(问题):** 顶部画一个紫色圆角方框代表"大语言模型"(内画简笔画大脑图标)。下方画一个巨大的红色膨胀气球形状,内部密密麻麻写满小字"结构描述 结构描述 结构描述...",标注"每轮注入所有工具结构描述"。气球旁边用红色手写大字标注"10 轮对话耗费 50,000+ 令牌",画一个简笔画钱袋冒烟的图标表示浪费。从大语言模型到气球画粗红色箭头,标注"每轮都要全额付费"。

**画面右侧区域(方案):** 顶部同样画一个蓝色圆角方框代表"大语言模型 + mcp2cli"(内画大脑 + 终端图标)。下方画三层流水线结构,从上到下依次是:
1. 第一层绿色方框"--list 发现可用工具"(内画放大镜图标),旁注"约 100 令牌,仅需一次"
2. 第二层黄色方框"--help 查看工具详情"(内画问号图标),旁注"约 120 令牌/工具,按需加载"
3. 第三层橙色方框"执行调用"(内画闪电图标),旁注"只为实际调用付费"

三层之间用向下的蓝色实线箭头连接,整体标注"延迟加载"。右侧用绿色手写大字标注"10 轮对话仅需 2,100 令牌",画一个简笔画火箭图标表示高效。

**画面底部中央:** 画三个并排的彩色圆角方框代表三种支持的协议,从左到右:蓝色"开放接口规范"(内画齿轮图标)、绿色"模型上下文协议"(内画插头图标)、紫色"图查询语言"(内画六边形图标)。三个方框上方用虚线箭头汇聚到一个统一的灰色方框"统一命令抽象层",标注"三种协议,一个命令行"。

**画面右下角:** 画一个简笔画火柴人老师拿着马克笔指向左右对比区域,旁边画一个对话气泡写"省 95% 令牌!"

**文字:** 全部用真实手写风格(清晰可辨的手写体),标题大而醒目"mcp2cli:运行时接口转命令行引擎",副标题"零代码生成,运行时自省"。左右对比区域各自的数字用大号加粗手写。底部写"延迟发现 + 命令行代理 = 节省 90-99% 令牌开销"。

**内容结构:** 左右对比布局(问题 vs 方案),底部三协议统一层,留白 30% 以上,整体干净、专业、像课堂白板教学图,所有文字必须 100% 清晰可读,无模糊、无重叠,高对比度。

中心辐射布局(claude-peers-mcp)

素材特征:有一个中心节点连接多个对等节点

生成一张"专家白板教学"风格的手绘信息图,主题:Claude-Peers-MCP — 让多个 Claude Code 实例实时互相通信,横版 16:9,背景为干净白色白板或浅灰网格纸。

**视觉元素:** 使用真实马克笔手绘质感的粗细不均线条、箭头和圆角方框。画面采用中心辐射布局。

**画面中央:** 画一个较大的红色圆角方框代表"消息中枢"(内画一个简笔画信号塔图标),旁注"本地端口 7899",下方画一个小的蓝色圆柱体代表"轻量数据库",用短实线连接到消息中枢。

**画面四周:** 围绕中央消息中枢,画 4 个大小相同的蓝色圆角方框,分布在左上、右上、左下、右下位置,每个代表一个"Claude Code 实例"(内画简笔画终端窗口图标)。四个实例分别标注不同的工作内容:左上"重写后端接口"、右上"更新前端界面"、左下"安全审查"、右下"编写测试"。

**连接线:** 从每个实例到消息中枢画两种箭头:向内的绿色虚线箭头标注"轮询拉取 每秒一次",向外的橙色粗实线箭头标注"通道推送 即时送达",形成清晰的"拉取-推送混合"通信模式。

**画面右侧中部:** 画一个竖排的工具清单面板,浅黄色背景圆角方框,标题"四个核心工具",内部从上到下列出:"发现同伴 — 查看谁在线"、"发送消息 — 直达对方实例"、"设置摘要 — 告诉别人我在干什么"、"查收消息 — 手动拉取未读",每项旁边配一个对应的简笔画小图标。

**画面左侧中部:** 画一个三层漏斗形状,从上到下代表三级发现范围,颜色由浅到深:"整台机器 — 所有实例"、"同一仓库 — 含工作树"、"同一目录 — 最精确",漏斗旁标注"三级范围过滤"。

**画面顶部:** 画一个消息流时序示例,用简笔画气泡对话框展示实例甲发消息、中枢转发、实例乙收到消息的过程,气泡之间用带时间戳的箭头连接,标注"延迟不到一秒"。

**画面右下角:** 画一个简笔画火柴人老师拿着马克笔指向中央的消息中枢,旁边画一个对话气泡写"零配置,自动发现!"

**文字:** 全部用真实手写风格(清晰可辨的手写体),标题大而醒目"Claude-Peers:多实例实时通信总线",副标题"让你的所有 Claude Code 随时互相对话"。底部写"中枢调度 + 辐射连接 + 轻量存储 = 即时互联互通"。

**内容结构:** 中心辐射布局(消息中枢居中,四个实例环绕),左侧三级发现范围漏斗,右侧工具清单,顶部消息流示例,留白 30% 以上,整体干净、专业、像课堂白板教学图,所有文字必须 100% 清晰可读,无模糊、无重叠,高对比度。

三段式流水线布局(AgentSeal)

素材特征:输入(威胁)→ 处理(检测引擎)→ 输出(防护动作)

生成一张"专家白板教学"风格的手绘信息图,主题:AgentSeal — AI 智能体安全检测与防护平台,横版 16:9,背景为干净白色白板或浅灰网格纸。

**视觉元素:** 使用真实马克笔手绘质感的粗细不均线条、箭头和圆角方框。画面采用左到右的流水线布局,整体隐喻"安全盾牌守护智能体"。

**画面左侧:** 画一组代表威胁来源的红色元素,从上到下排列三个红色锯齿形方框,分别标注"提示注入攻击"、"工具描述投毒"、"供应链篡改攻击"。三个红色方框右侧汇聚成一条粗红色箭头,指向画面中央,标注"攻击向量"。

**画面中央:** 画一个大的深蓝色盾牌形状,内部写"AgentSeal 智能体卫士"和一个简笔画安全徽章图标。盾牌内部从上到下画六层横条,代表六级检测流水线:模式签名匹配、去混淆解码层、语义相似度分析、基线变更追踪、公共注册表查询、自定义合规规则,每层用不同颜色和小图标。

**画面右侧:** 画四个竖排的彩色圆角方框,代表四个核心命令:"巡检扫描"、"对抗测试"、"工具审计"、"实时防护"。每个方框内配一个简笔画图标,并用一行小字说明它的防护动作。

**画面底部:** 画一行小的灰色圆角方框图标矩阵,代表支持的多种主流 AI 智能体;左下角画一个 0 到 100 的信任评分仪表盘,按红、橙、黄、绿分段标注风险等级。

**画面右下角:** 画一个简笔画火柴人老师拿着马克笔指向中央盾牌,旁边画一个对话气泡写"本地运行,零依赖!"

**文字:** 全部用真实手写风格(清晰可辨的手写体),标题大而醒目"AgentSeal:AI 智能体安全卫士",副标题"检测 · 扫描 · 防护 — 智能体时代的安全基石"。底部写"六级流水线 + 多智能体支持 + 信任评分 = 全方位智能体安全"。

**内容结构:** 左侧威胁 → 中央六层盾牌(检测流水线)→ 右侧四命令,底部智能体矩阵和信任评分仪表盘,留白 30% 以上,整体干净、专业、像课堂白板教学图,所有文字必须 100% 清晰可读,无模糊、无重叠,高对比度。

常见问题

5 问
答案由本站依据条目字段整理
手绘白板信息图提示词生成怎么安装?

在支持 Skills 的客户端里执行:skillhub install user_06254702/whiteboard-infographic。安装方式为未标注。装完刷新技能列表或重开客户端。

手绘白板信息图提示词生成支持哪些客户端?

资料没有标注宿主客户端,但只要客户端支持 Skills(Claude、Codex、Cursor 等),一般都能加载。

手绘白板信息图提示词生成权限高吗,安全吗?

权限级别为未标注权限。安装前先看它会读取或写入哪些内容。

手绘白板信息图提示词生成收费吗?

本站不代收费用,也没有标注具体价格。是否收费取决于技能本身和所用的模型或客户端,正式使用前按作者说明确认。

手绘白板信息图提示词生成用什么许可证?

许可证标注为 未说明(许可证不明确)。商用或二次分发前请到仓库确认条款原文。

热门专题

按场景挑技能
全部专题 →

技能内容以作者仓库为准;分类、权限级别与许可证状态的中文说明为中文整理,最近核验 2026-11-06。