القائمة
把 CSV/Excel/JSON 数据转成漂亮的可视化报告页
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Create generative art using p5.js with seeded randomness so every render is reproducible. Useful for procedural posters, motion-style stills, and artistic frame studies.
Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
推特金句 / 数据卡, 适合配推文
小红书风格知识卡片, 多张联排可滑动浏览
电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)
锁死 1920×1080 画布, React 组件级自由组合, 不绑模板
| name | data-report |
| zh_name | 数据可视化报告 |
| en_name | Data Visualization Report |
| emoji | 📊 |
| description | 把 CSV/Excel/JSON 数据转成漂亮的可视化报告页 |
| category | data |
| scenario | finance |
| aspect_hint | 桌面长页面 |
| featured | 10 |
| tags | ["data","report","chart","数据","报告"] |
| example_id | sample-data-weekly-report |
| example_name | 数据报告 · 周报 |
| example_format | csv |
| example_tagline | KPI 卡 + Chart.js 图表 + 表格 |
| example_desc | 9 个月增长数据自动渲染成可视化报告, 内联 Chart.js |
| od | {"mode":"prototype","surface":"web","platform":"desktop","scenario":"finance","upstream":"https://github.com/nexu-io/html-anything","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":false},"example_prompt":"用「数据可视化报告」模板把我的内容做成一份「把 CSV/Excel/JSON 数据转成漂亮的可视化报告页」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"} |
【模板: 数据可视化报告】
<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)。