Data Report
- 1.8k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
data-report is an agent skill that turns csv, excel, or json data into a polished visual report page.
About
data-report is an agent skill from nexu-io/open-design that turns csv, excel, or json data into a polished visual report page. 【模板: 数据可视化报告】 - 头部: 报告标题 + 时间区间 + 数据来源说明。 - KPI 卡片网格: 3-5 个最重要指标, 每个卡片显示数值 + 同比变化 + 微型趋势线。 - 主图表区: 至少 2 个图表 (柱状 / 折线 / 饼 / 散点), 使用 Chart.js 或 ECharts (jsdelivr CDN 引入), 数据从用户输入解析得到。 - **图表容器必须有固定高度**: 每个 `<canvas>` 外层包一个 `<div style="position:relative;height:NNNpx">` (KPI 迷你图 ~40px, 主图表 ~240–280px)。Chart.js 用 `responsive:true, maintainAspectRatio:f Developers invoke data-report during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.
- KPI 卡片网格: 3-5 个最重要指标, 每个卡片显示数值 + 同比变化 + 微型趋势线。
- 主图表区: 至少 2 个图表 (柱状 / 折线 / 饼 / 散点), 使用 Chart.js 或 ECharts (jsdelivr CDN 引入), 数据从用户输入解析得到。
- 数据表格: 用户原始数据节选, 使用 `<table>` + 现代化样式 (zebra stripe, hover, sticky header)。
- 洞察块: 3-5 条文字洞察, 用 emoji 开头, 像产品周报。
- 配色克制专业: 主色 1 + 中性色阶, 图表用调色板。
Data Report by the numbers
- 1,774 all-time installs (skills.sh)
- +139 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #162 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
data-report capabilities & compatibility
- Capabilities
- kpi 卡片网格: 3 5 个最重要指标, 每个卡片显示数值 + 同比变化 + 微型趋势线。 · 主图表区: 至少 2 个图表 (柱状 / 折线 / 饼 / 散点), 使用 chart.js 或 · 数据表格: 用户原始数据节选, 使用 `<table>` + 现代化样式 (zebra stri · 洞察块: 3 5 条文字洞察, 用 emoji 开头, 像产品周报。 · 配色克制专业: 主色 1 + 中性色阶, 图表用调色板。
- Use cases
- orchestration
What data-report says it does
- KPI 卡片网格: 3-5 个最重要指标, 每个卡片显示数值 + 同比变化 + 微型趋势线。
- 主图表区: 至少 2 个图表 (柱状 / 折线 / 饼 / 散点), 使用 Chart.js 或 ECharts (jsdelivr CDN 引入), 数据从用户输入解析得到。
- 数据表格: 用户原始数据节选, 使用 `<table>` + 现代化样式 (zebra stripe, hover, sticky header)。
npx skills add https://github.com/nexu-io/open-design --skill data-reportAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.8k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 2 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
Turns CSV, Excel, or JSON data into a polished visual report page.
Who is it for?
Developers working on design & ui/ux during build tasks.
Skip if: Tasks outside Design & UI/UX scope described in SKILL.md.
When should I use this skill?
Turns CSV, Excel, or JSON data into a polished visual report page.
What you get
Completed design & ui/ux workflow aligned with SKILL.md steps.
- Interactive HTML report page
- Chart.js visualizations
- KPI summary cards
By the numbers
- Featured rank 10 in open-design catalogue metadata
- Sample weekly-report example covers 9 months of growth data
- Supports 3 input formats: CSV, Excel, and JSON
Files
【模板: 数据可视化报告】
- 头部: 报告标题 + 时间区间 + 数据来源说明。
- KPI 卡片网格: 3-5 个最重要指标, 每个卡片显示数值 + 同比变化 + 微型趋势线。
- 主图表区: 至少 2 个图表 (柱状 / 折线 / 饼 / 散点), 使用 Chart.js 或 ECharts (jsdelivr CDN 引入), 数据从用户输入解析得到。
- 图表容器必须有固定高度: 每个
<canvas>外层包一个<div style="position:relative;height:NNNpx">(KPI 迷你图 ~40px, 主图表 ~240–280px)。Chart.js 用responsive:true, maintainAspectRatio:false时若父容器没有显式高度, 会陷入 ResizeObserver 死循环, 图表无限增高直至卡死浏览器。绝对不要直接给 canvas 写height=属性当布局, 那个只是初始值。 - 数据表格: 用户原始数据节选, 使用
<table>+ 现代化样式 (zebra stripe, hover, sticky header)。 - 洞察块: 3-5 条文字洞察, 用 emoji 开头, 像产品周报。
- 底部"方法论"折叠区。
- 配色克制专业: 主色 1 + 中性色阶, 图表用调色板。
- 必须解析用户提供的实际数据, 不要捏造。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>数据周报 · 2025 年 5 月</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
body { background:#fafaf7; font-family:'Inter','Noto Sans SC',sans-serif; color:#15140f; -webkit-font-smoothing:antialiased; }
.num { font-family:'Inter',sans-serif; font-feature-settings:'tnum' on; letter-spacing:-0.02em; }
.section h2 { font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#5a564e; margin:0 0 16px; }
table { border-collapse:collapse; width:100%; font-size:13px; }
thead th { background:#f4f1ec; text-align:left; padding:10px 14px; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#5a564e; position:sticky; top:0; }
tbody td { padding:10px 14px; border-bottom:1px solid #e7e5e0; }
tbody tr:nth-child(even) { background:#fbfaf7; }
tbody tr:hover { background:#f4f1ec; }
.delta-up { color:#1f7a3a; font-weight:600; }
.delta-down { color:#9c2a25; font-weight:600; }
</style>
</head>
<body>
<div class="max-w-6xl mx-auto px-8 py-12">
<header class="pb-7 mb-8 border-b border-[#e7e5e0]">
<div class="flex items-baseline justify-between flex-wrap gap-3">
<div>
<div class="text-[11px] font-semibold tracking-[0.22em] uppercase text-[#c96442] mb-2">Weekly Report · Week 19</div>
<h1 class="text-4xl font-extrabold tracking-tight">数据周报 · 2025 年 5 月</h1>
</div>
<div class="text-xs text-[#5a564e] text-right">
<div>来源: <span class="font-semibold text-[#15140f]">内部 BI</span></div>
<div>截止 <span class="font-mono text-[#15140f]">2025-05-11</span></div>
</div>
</div>
<p class="mt-3 text-sm text-[#5a564e] max-w-2xl leading-relaxed">本周关键指标全部向好。MAU 同比增长 184%, 付费转化与流失双双改善。</p>
</header>
<section class="section mb-10">
<h2>核心指标 · KPI</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="rounded-2xl bg-white p-5 border border-[#e7e5e0] shadow-[0_1px_0_#f0ece5]">
<div class="text-[11px] font-semibold uppercase tracking-wider text-[#5a564e] mb-2">月活用户 · MAU</div>
<div class="text-3xl font-extrabold num">23,950</div>
<div class="text-xs mt-2"><span class="delta-up">▲ 16.0%</span> <span class="text-[#5a564e]">vs 上月</span></div>
<div class="mt-3" style="position:relative;height:40px"><canvas id="kpi1"></canvas></div>
</div>
<div class="rounded-2xl bg-white p-5 border border-[#e7e5e0] shadow-[0_1px_0_#f0ece5]">
<div class="text-[11px] font-semibold uppercase tracking-wider text-[#5a564e] mb-2">新增 · Signups</div>
<div class="text-3xl font-extrabold num">4,250</div>
<div class="text-xs mt-2"><span class="delta-up">▲ 15.5%</span> <span class="text-[#5a564e]">vs 上月</span></div>
<div class="mt-3" style="position:relative;height:40px"><canvas id="kpi2"></canvas></div>
</div>
<div class="rounded-2xl bg-white p-5 border border-[#e7e5e0] shadow-[0_1px_0_#f0ece5]">
<div class="text-[11px] font-semibold uppercase tracking-wider text-[#5a564e] mb-2">付费 · Paying</div>
<div class="text-3xl font-extrabold num">2,418 <span class="text-base text-[#5a564e]">/ 10.1%</span></div>
<div class="text-xs mt-2"><span class="delta-up">▲ 18.5%</span> <span class="text-[#5a564e]">vs 上月</span></div>
<div class="mt-3" style="position:relative;height:40px"><canvas id="kpi3"></canvas></div>
</div>
<div class="rounded-2xl bg-white p-5 border border-[#e7e5e0] shadow-[0_1px_0_#f0ece5]">
<div class="text-[11px] font-semibold uppercase tracking-wider text-[#5a564e] mb-2">流失 · Churn</div>
<div class="text-3xl font-extrabold num">1.8%</div>
<div class="text-xs mt-2"><span class="delta-up">▼ 0.1pp</span> <span class="text-[#5a564e]">vs 上月</span></div>
<div class="mt-3" style="position:relative;height:40px"><canvas id="kpi4"></canvas></div>
</div>
</div>
</section>
<section class="section mb-10">
<h2>趋势 · Growth</h2>
<div class="grid lg:grid-cols-3 gap-4">
<div class="lg:col-span-2 rounded-2xl bg-white p-5 border border-[#e7e5e0]">
<div class="text-sm font-semibold mb-3">MAU & 付费用户增长</div>
<div style="position:relative;height:260px"><canvas id="chart-main"></canvas></div>
</div>
<div class="rounded-2xl bg-white p-5 border border-[#e7e5e0]">
<div class="text-sm font-semibold mb-3">流失率 · 月度</div>
<div style="position:relative;height:260px"><canvas id="chart-churn"></canvas></div>
</div>
</div>
</section>
<section class="section mb-10">
<h2>明细 · Raw data</h2>
<div class="rounded-2xl border border-[#e7e5e0] overflow-hidden bg-white">
<table>
<thead><tr><th>月份</th><th class="text-right">MAU</th><th class="text-right">新增</th><th class="text-right">付费</th><th class="text-right">流失率</th></tr></thead>
<tbody id="rows"></tbody>
</table>
</div>
</section>
<section class="section mb-10">
<h2>洞察 · Insights</h2>
<div class="grid md:grid-cols-3 gap-4">
<div class="rounded-2xl bg-white p-5 border border-[#e7e5e0]">
<div class="text-3xl mb-2">📈</div>
<div class="font-semibold mb-1.5">MAU 半年增长 184%</div>
<div class="text-sm text-[#5a564e] leading-relaxed">主要来自小红书自然流量, 单条爆款笔记带来 8k+ 新增。</div>
</div>
<div class="rounded-2xl bg-white p-5 border border-[#e7e5e0]">
<div class="text-3xl mb-2">💰</div>
<div class="font-semibold mb-1.5">付费转化 7.3% → 10.1%</div>
<div class="text-sm text-[#5a564e] leading-relaxed">团队 Pro 套餐贡献最大。新引导流程 + 30 天试用是关键。</div>
</div>
<div class="rounded-2xl bg-white p-5 border border-[#e7e5e0]">
<div class="text-3xl mb-2">🎯</div>
<div class="font-semibold mb-1.5">月流失 3.4% → 1.8%</div>
<div class="text-sm text-[#5a564e] leading-relaxed">AI 起草功能上线后, 沉默用户激活率翻倍。</div>
</div>
</div>
</section>
<details class="mt-12 rounded-xl border border-[#e7e5e0] bg-white p-5">
<summary class="cursor-pointer text-sm font-semibold text-[#5a564e] flex items-center justify-between">
方法论 · Methodology <span class="text-[#5a564e]">▾</span>
</summary>
<div class="text-xs text-[#5a564e] leading-relaxed mt-3 max-w-3xl">
MAU = 30 天内至少打开一次产品的去重用户。付费 = 当月有效付费订阅。流失率 = 上月付费但本月未续的比例。数据来自内部 BI, 已剔除测试账号与 bot。
</div>
</details>
</div>
<script>
const data = [
{month:'2024-09', mau:8420, signups:1240, paying:612, churn:0.034},
{month:'2024-10', mau:9180, signups:1380, paying:701, churn:0.031},
{month:'2024-11', mau:10240, signups:1610, paying:840, churn:0.028},
{month:'2024-12', mau:11800, signups:1890, paying:1012, churn:0.025},
{month:'2025-01', mau:13620, signups:2240, paying:1218, churn:0.023},
{month:'2025-02', mau:15440, signups:2680, paying:1455, churn:0.021},
{month:'2025-03', mau:17890, signups:3120, paying:1722, churn:0.020},
{month:'2025-04', mau:20640, signups:3680, paying:2041, churn:0.019},
{month:'2025-05', mau:23950, signups:4250, paying:2418, churn:0.018},
];
document.getElementById('rows').innerHTML = data.map(d => `
<tr>
<td class="font-mono text-xs">${d.month}</td>
<td class="text-right num">${d.mau.toLocaleString()}</td>
<td class="text-right num">${d.signups.toLocaleString()}</td>
<td class="text-right num">${d.paying.toLocaleString()}</td>
<td class="text-right num">${(d.churn*100).toFixed(1)}%</td>
</tr>
`).join('');
const sparkOpts = { responsive:true, maintainAspectRatio:false, plugins:{legend:{display:false},tooltip:{enabled:false}}, scales:{x:{display:false},y:{display:false}}, elements:{point:{radius:0},line:{tension:0.4,borderWidth:2}} };
new Chart(document.getElementById('kpi1'), { type:'line', data:{labels:data.map(d=>d.month), datasets:[{data:data.map(d=>d.mau), borderColor:'#c96442', fill:false}]}, options:sparkOpts });
new Chart(document.getElementById('kpi2'), { type:'line', data:{labels:data.map(d=>d.month), datasets:[{data:data.map(d=>d.signups), borderColor:'#e9b94a', fill:false}]}, options:sparkOpts });
new Chart(document.getElementById('kpi3'), { type:'line', data:{labels:data.map(d=>d.month), datasets:[{data:data.map(d=>d.paying), borderColor:'#1f7a3a', fill:false}]}, options:sparkOpts });
new Chart(document.getElementById('kpi4'), { type:'line', data:{labels:data.map(d=>d.month), datasets:[{data:data.map(d=>d.churn*100), borderColor:'#2348b8', fill:false}]}, options:sparkOpts });
new Chart(document.getElementById('chart-main'), {
type:'bar',
data:{
labels:data.map(d=>d.month),
datasets:[
{label:'MAU', data:data.map(d=>d.mau), backgroundColor:'rgba(201,100,66,0.18)', borderColor:'#c96442', borderWidth:1.5, borderRadius:4, yAxisID:'y'},
{label:'付费', type:'line', data:data.map(d=>d.paying), borderColor:'#1f7a3a', backgroundColor:'#1f7a3a', tension:0.35, borderWidth:2.5, pointRadius:3, yAxisID:'y'},
]
},
options:{ responsive:true, maintainAspectRatio:false, plugins:{legend:{position:'bottom',labels:{usePointStyle:true,boxWidth:8}}}, scales:{x:{grid:{display:false}},y:{grid:{color:'#f0ece5'}, ticks:{callback:v=>v.toLocaleString()}}} }
});
new Chart(document.getElementById('chart-churn'), {
type:'line',
data:{ labels:data.map(d=>d.month), datasets:[{label:'流失率 %', data:data.map(d=>(d.churn*100).toFixed(2)), borderColor:'#9c2a25', backgroundColor:'rgba(156,42,37,0.08)', tension:0.4, borderWidth:2.5, fill:true, pointRadius:3}] },
options:{ responsive:true, maintainAspectRatio:false, plugins:{legend:{display:false}}, scales:{x:{grid:{display:false}},y:{grid:{color:'#f0ece5'}, ticks:{callback:v=>v+'%'}, beginAtZero:true}} }
});
</script>
</body>
</html>month,active_users,new_signups,paying,churn_rate 2024-09,8420,1240,612,0.034 2024-10,9180,1380,701,0.031 2024-11,10240,1610,840,0.028 2024-12,11800,1890,1012,0.025 2025-01,13620,2240,1218,0.023 2025-02,15440,2680,1455,0.021 2025-03,17890,3120,1722,0.020 2025-04,20640,3680,2041,0.019 2025-05,23950,4250,2418,0.018
数据周报 · 2025 年 5 月
来源: 内部 BI · 截止 5 月 11 日 洞察:
- MAU 半年增长 184%, 主要来自小红书自然流量
- 付费转化率从 7.3% 提升到 10.1%, 团队 Pro 套餐贡献最大
- 月流失从 3.4% 降到 1.8%, AI 起草功能上线后明显改善
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Pick data-report for quick static file-to-HTML report prototypes instead of standing up a full BI or React dashboard project.
FAQ
What does data-report do?
Turns CSV, Excel, or JSON data into a polished visual report page.
When should I use data-report?
During build frontend work for design & ui/ux.
Is data-report safe to install?
Review the Security Audits panel on this listing before production use.