手工川 Logo手工川
Lovstudio.AI Skill / Design·FREE · OPEN SOURCE

手机信息图

把已有结论重排成手机上真能读完的竖版信息图,自带字号下限、安全区与可复核审计报告

基本信息

你会用它完成什么

把结论或材料整理成手机竖屏阅读的证据型信息图:输出永远是一张 1080 宽的 long 自适应卡片,内容多就把图加长、不拆卡;只有明确要求多张才做系列。交付可编辑 HTML 与 2× PNG。Use when the user says “把这个内容做成手机能读的信息图”“出一张竖版信息图”,or asks to "turn this into a mobile infographic".

适用场景
Design
当前版本
v0.18.2

开始前

先确认能不能跑

运行环境
Portable Agent Skills format. Python 3.8+; PNG rendering requires Playwright for Python with Chromium or Google Chrome. Generated HTML is portable and embeds the resolved brand logo as a data URL.
依赖
Playwright for Python 与 Chromium 或 Google Chrome(render 与 audit)
账号与密钥
不需要额外的账号或密钥

没有 Claude 或 GPT 账号也可以试:Skill 不绑定某一家模型,Claude 效果最稳,GPT 也可以;手里只有国产工具时,可以从下方的 WorkBuddy 安装入口开始,效果可能有差距。

安装渠道

装到你正在使用的 AI

Yoda、Codex、Claude Code 和其他兼容运行环境都使用同一份 Skill;选择你的工具后,按对应步骤完成安装。

先保存一次工作资料,支持 Profile 的 Skill 会在运行时直接复用。

配置工作资料

安装与配置

Yoda

适合同时使用多个 Agent 的工作流:在一个地方完成安装、分配和调用。

  1. 01打开 Yoda 的 Skills,搜索「mobile-infographic」,进入详情后点击“安装”。
  2. 02在目标 Agent 的配置中,把该 Skill 设为“自动”“仅手动”或“关闭”。
  3. 03重新加载当前会话,再从输入框的 Skill 菜单选择它;Yoda 会按当前 Runtime 插入对应调用命令。
打开 Yoda

在 Yoda 内完成

Yoda 会把安装后的 Skill 同步给已配置的 Agent,无需手动维护多个目录。

第一次调用

使用 lov-mobile-infographic 完成以下任务,并按 Skill 的验收标准检查结果:

该 Skill 声明:Portable Agent Skills format. Python 3.8+; PNG rendering requires Playwright for Python with Chromium or Google Chrome. Generated HTML is portable and embeds the resolved brand logo as a data URL.

使用说明

按这套方法完成任务

Version

把一段已经有结论的内容,重排成手机上真的读得下去的证据型信息卡:竖版画布、单列阅读路径、 字号下限与行宽上限、可核查的口径与来源。输出永远是一张 1080 宽、高度自适应的卡片 (--ratio long):内容多就把这张图加长、不拆卡;只有用户明确要求多张时才做系列。

两条硬规则:标题只写这张图的作用或主题(判断留给结论行,也不写「要点/速览/一图读完」这类 放在哪张图上都成立的废话),主关系必须图形化 (三项以上可比数据用 bar-ranking 的条形长度,不写流水账)。卡面来源只写 「来源:群聊记录」这类可披露来源,内部数据库/表名/路径由 source_hygiene 拦截;页脚署名可选。

与 lov-professional-infographic 的分工很清楚:那个 Skill 做 16:9 桌面阅读的咨询 Exhibit, 这个 Skill 做 1080 宽竖屏阅读的手机卡。文字、证据与排版全部由 DOM 生成,PNG 由浏览器精确栅格化, 不把整张卡交给生图模型。

本地安装

npx skills add lov-mobile-infographic -g -y

源码安装:

export SKILL_SOURCE_DIR="$(pwd)"
mkdir -p "${SKILL_SKILLS_INSTALL_DIR:?请设置本地 Skills 目录}"
ln -s "$SKILL_SOURCE_DIR" "$SKILL_SKILLS_INSTALL_DIR/lov-mobile-infographic"

LovStudio 三层链约定:~/.agents/skills/lov-mobile-infographic 绝对指向本目录, 各宿主目录用相对链接指向该共享入口。

用户 Profile(跨 session)

本 Skill 在 skill.yaml 中声明 user-profile/v1,从共享 Profile 读取用户、品牌、 工作区偏好与本 Skill 的长期记录。用户直接说出的持久偏好或品牌事实由 scripts/profile_store.py 写回 skills.lov-mobile-infographic.records。

品牌解析顺序与字段见 references/user-config.md; 完整 Profile 契约见 references/user-profile.md。

使用

一张卡:

export SKILL_DIR="$(pwd)"
python3 "$SKILL_DIR/scripts/infographic_cli.py" scaffold \
  --template single-claim --filename card-01.html \
  --eyebrow "运营手册 · 01" --title "优化 harness 的三步" \
  --claim "模型是自变量,harness 是因变量" \
  --source "来源:一次真实项目复盘" --output-dir ./cards
python3 "$SKILL_DIR/scripts/infographic_cli.py" render --input ./cards/card-01.html --output ./cards/card-01.png --scale 2
python3 "$SKILL_DIR/scripts/infographic_cli.py" audit --input ./cards/card-01.html --image ./cards/card-01.png --report ./cards/card-01.audit.json --ratio long

--ratio 省略时即 long:卡片高度跟着内容走(下限 1.2× 宽,不设上限;内容多时用小节分组保持节奏)。 需要固定比例时显式传 --ratio 3:4(微信图文)、4:5(信息流)、9:16(全屏故事)或 1:1(九宫格)。

排位数据用条形榜单:条目按大小画长度,名单与依据写在对应条形下方,不写流水账。

python3 "$SKILL_DIR/scripts/infographic_cli.py" scaffold \
  --template bar-ranking --filename card.html \
  --eyebrow "调研 · 群像" --title "最受欢迎的,是继续做事的那类城" \
  --claim "前三类合计 41 人,占可判断成员的 58%" \
  --row "01 新海|25|New Harbor · AI 进入工作|早* · 南艺 89" \
  --row "04 新界|13|Nexus · 低税低监管|刘*畅 · Cakinna" \
  --source "来源:群聊记录" --output-dir ./cards

只有用户明确要求多张时才做系列:按 --series-index 1..N --series-size N 逐张 scaffold、render、audit,再按 references/series-and-export.md 写 manifest.json。

真实案例见 cases/cases.json:一次“明确要求三张”的 3:4 系列, 机器审计 3/3 通过、各 100/100。

原子组合

references/skill-composition.md 记录了已检查的相邻 Skills、 产物级交接、重叠处理,以及判定为 Single Skill 的理由。外部 sibling Skill 不是隐藏依赖。

可信度卡与用户案例

质量门

python3 scripts/test_infographic_cli.py
python3 scripts/validate_skill.py .

依赖

  • Python 3.8+ 标准库;scaffold 与 init-brand 不需要浏览器或网络。
  • render 与 audit 需要 Playwright for Python 与 Chromium 或 Google Chrome。
  • 无必需凭据。
python3 -m pip install "playwright>=1.45,<2"
python3 -m playwright install chromium

License

MIT

案例

用过这个 Skill?分享你满意的真实成果,可以手动填写,也可以交给 Agent 整理。

正在读取案例…

SKILL CARD / TRUST RECORD

先看证据,再决定是否使用

把已有结论的内容重排成 1080 宽竖屏可读的证据型信息卡,交付可编辑 HTML、2× PNG 与可复核的 移动可读性审计报告;输出永远是一张 long 自适应高度卡(可以很长,不拆卡), 只有用户明确要多张时才做系列。

CARD v0.18.2

适用场景

手里已经有结论、证据与来源,需要在信息流、朋友圈、微信图文或课程材料里被读完

维护方 · LovStudio Skills

输出契约

PNG 由浏览器按精确像素栅格化,尺寸与画布不一致时渲染直接失败,避免交付被缩放或裁切的成品。

字号下限、行宽上限、对比度、安全区、裁切与越界;单一 data-claim、证据挂载、品牌页脚、系列页码;骨架文案必须全部替换;省略号截断按 warning 记录

依赖与环境

none

Playwright for Python 与 Chromium 或 Google Chrome(render 与 audit)

风险与缓解

为了把内容塞进一屏而缩小字号或删掉口径 · 字号下限、行宽上限与口径检查写入机器审计,低于阈值即失败,只能改内容或拆卡

+3 项

DIMENSIONS

维度地图

4 维度

移动可读性

100

在真实手机观看距离下能否被读完,而不只是被渲染出来

字号下限 72/50/36/26px、每行字符当量上限、对比度 4.5:1,由 audit 逐项测量

证据完整性

100

每个可见数字与判据都能追到来源、口径与单位

evidence_linkage 检查编码元素是否挂在 data-source-ref 上,brief.md 记录证据表

竖屏版式正确性

100

内容不越界、不裁切、不挤压安全区,系列保持一致的页脚与宽度

canvas、overflow、out_of_bounds、safe_area、series_page 五项检查

品牌一致性

100

Logo、署名与强调色符合品牌 Profile,且强调色在文字上仍可读

brand_footer 检查、accent_ink 对比度测量、brand_origin 来源回读

VALUE CARD

价值与交付边界

把结论、证据与来源重排成手机上读得完的竖版信息图:先立观点标题,再用条形长度编码排位,把来源与工具收进附录,并用字号下限、行宽上限、对比度与安全区把「能读」变成可判定结果。

开源免费

免费

直接安装使用

价值锚点

一次使用可保守减少约 1–3 小时的字号试错、版式返工与导出检查,并让单位、口径与来源成为交付的一部分。

使用边界

覆盖排版、渲染、移动可读性审计与系列组织;不含内容写作、事实核查、生图插图、翻译、托管渲染与平台发布。

维护说明

随浏览器渲染、字体度量、平台导出规格与真实使用反馈复评。

用户评价与留言

登录后即可留言

分发渠道

在哪里可以获得它

这里标注这个 Skill 在各个平台的真实发布状态;有单品页时,入口会直接打开对应页面。

已发布

GitHub

公开源码、更新记录与 Issue 都在这里。

查看 GitHub
LS已发布

Lovstudio.AI 官网

在 Lovstudio.AI 获取、安装并查看使用说明。

你正在浏览此页面

WB暂未发布

WorkBuddy

该平台的单品页尚未发布。

单品页发布后会在这里出现。

SP暂未发布

支付宝 SkillPay

该平台的单品页尚未发布。

单品页发布后会在这里出现。

搭配使用

需要时,继续补齐这些能力

更多信息

权限与许可

源码可见性
公开仓库,可检查源码、Issue 与更新记录。
数据与权限
不同 Skill 可能读取本地文件、访问网络或调用第三方模型。执行前请检查完整手册中的具体步骤与命令。
许可
MIT
mobileinfographiccard-seriesreadabilityhtmlpng

NEXT STEP

一个会员,全部 Skill。

回到目录,按结果、证据和依赖继续挑选;开通 VIP 后,每个 Skill 都能直接安装。

返回当前 Skills 结果

手工川 / KEEP MAKING

生命的意义,在于创作。