# Social Card Data Kpi

> 数据驱动的小红书 / 公众号社交卡 — 一个 hero 数字 + 解释、KPI 塔（3-5 指标堆叠）、前后对比、横向迷你条形图、排行榜带高亮行、ROI 卡。必须标单位 / 时间窗 / 数据来源，必须一个数字视觉主导。触发："做个 KPI 卡 / 数据卡 / 排行榜卡 / 增长卡 / 复盘数字卡"。NOT 表情绪 / 引言 / 图主导的卡，NOT chartjunk。

- Skill: `martin65536/social-card-data-kpi` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add martin65536/social-card-data-kpi`
- Raw SKILL.md: https://api.skillmd.com/api/skills/martin65536/social-card-data-kpi/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: martin65536 (https://skillmd.com/u/martin65536)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/martin65536/social-card-data-kpi

---


# Social Card Data / KPI Template

Use when the card is driven by numbers, rankings, growth, score, ROI, benchmark, funnel, or result summary.

## Core Rule

A data card must have one clear claim. Do not show numbers without explaining what decision or insight they support.

## Structure Options

- one hero number + explanation
- KPI tower: 3-5 stacked metrics
- before / after metric comparison
- horizontal bar mini-chart
- ranking table with one highlighted row
- ROI/result card with assumptions

## Must Do

- Label units, time windows, and data source / placeholder status.
- Make one number visually primary.
- Use consistent alignment and numeric tabular spacing where possible.
- If numbers are invented placeholders, mark them as sample/demo.

## Avoid

- Fake market size, fake growth rate, fake client proof.
- Chartjunk.
- Tiny chart labels.
- More than 5 competing metrics on one social card.

## Pattern Source Rule

Read this `SKILL.md` first. Do **not** read `pattern.html` by default.

Read `pattern.html` only when you need concrete layout rhythm, spatial relationships, or interaction/annotation behavior that this markdown cannot fully specify. When read, extract patterns only; do not copy DOM, CSS classes, exact spacing, placeholder copy, or styling wholesale.