360 Secure SkillHub
360 安全技能中心

Apple Viz

根据命令行传入的图表类型、标题与 JSON 数据,生成 Apple HIG 风格的 HTML 可视化(柱状、折线、环形、进度、统计卡),再用 Playwright 或 pyppeteer 截图输出 PNG,支持画布尺寸与深色模式参数。

baderfahoum17
baderfahoum17
热度 18.58
最近更新 2026-06-26 07:02:10
分类:创作依赖:代码执行 / 联网浏览搜索 / 读写文件应用场景:图像生成 / 报告撰写

安装技能

复制下面的话术发给你的 Agent,它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill: npx secure-skills-cli add apple-viz
Metadata
name
apple-viz
description
Generate beautiful Apple HIG-inspired HTML visualizations (bar, line, donut, progress, stat-card) and screenshot them as PNG images. Use when user asks to visualize, chart, plot, graph, or make a viz — or explicitly says "apple-viz".

Apple Viz

Generates beautiful, minimal, Apple-inspired data visualizations and saves them as PNG screenshots.

When to use

  • User asks to "visualize", "chart", "plot", "graph", or "make a viz"
  • User explicitly says "apple-viz"
  • User wants a stat card, progress ring, donut chart, bar chart, or line chart

How to invoke

python3 {baseDir}/generate.py \
  --type <bar|line|donut|progress|stat-card> \
  --title "Chart Title" \
  --data '<JSON string>' \
  --output /tmp/apple-viz-output.png \
  [--width 800] [--height 500] [--dark]

Chart types and data schemas

bar

Vertical bars with rounded ends.

{"labels": ["Mon", "Tue", "Wed"], "values": [42, 67, 55], "unit": "steps"}

line

Smooth bezier line chart with filled gradient area.

{"labels": ["Jan", "Feb", "Mar"], "values": [100, 150, 130], "unit": "ms"}

donut

Donut/ring chart, single or multi-segment.

{"segments": [{"label": "Sleep", "value": 7.5, "color": "#007AFF"}, {"label": "Awake", "value": 16.5}]}

progress

Circular or linear progress rings.

{"items": [{"label": "Steps", "value": 8200, "max": 10000, "color": "#34C759"}, {"label": "Calories", "value": 420, "max": 600, "color": "#FF9500"}]}

stat-card

Grid of stat cards, like Apple Health summary.

{"stats": [{"label": "Heart Rate", "value": "72", "unit": "BPM", "trend": "+3 BPM", "color": "#FF3B30"}, {"label": "Steps", "value": "8,241", "unit": "steps", "trend": "↑12%", "color": "#34C759"}]}

Flags

  • --dark — dark mode (black background, #F5F5F7 text)
  • --width N — canvas width (default: 800)
  • --height N — canvas height (default: 500)
  • --output PATH — output PNG path (default: /tmp/apple-viz-output.png)

Dependencies

Playwright (via npx) for screenshots. Falls back to pyppeteer if npx is unavailable.

pip3 install -r {baseDir}/requirements.txt