返回 Skill 列表
extension
分类: 数据与分析无需 API Key

Apple Viz

生成美观的 Apple HIG 风格 HTML 可视化(柱状图、折线图、环形图、进度条、统计卡片),并截图保存为 PNG 图片。当用户请求可视化时使用。

person作者: baderfahoum17hubclawhub

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