Skill: horizoncove/yuheng-html-report (version 1.0.0)

--- name: html-report-generator version: 1.0.0 description: "任意数据输入 → 精美可视化HTML报告页面。触发词：生成报告/精美HTML/可视化页面/数据大屏/制作网页。" --- # HTML报告生成器 · SKILL.md ## 核心能力 用户给出数据 → 自动生成精美可视化HTML页面 → 直接部署链接 ## 使用方法 用户说："帮我把这个数据做成精美HTML页面" → 执行本skill ## 执行流程 ### Step 1：分析数据结构 读取用户提供的数据（文字/表格/JSON），确定： - 有哪些指标/字段 - 数据类型（数值/文本/时间序列） - 适合的图表类型 ### Step 2：选择配色方案 根据主题选择配色： **科技感（蓝色系）：** ```css background: #06060f accent: #00d4ff gradient: linear-gradient(135deg, #0d1b3e, #0a2540) ``` **品牌感（紫色系）：** ```css background: #080810 accent: #a78bfa gradient: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(59,130,246,0.05)) ``` **商业感（深灰+金色）：** ```css background: #0f0f0f accent: #f5c842 gradient: linear-gradient(135deg, #1a1400, #0d0f00) ``` **医疗/健康（绿色系）：** ```css background: #040f0a accent: #34d399 gradient: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(0,0,0,0)) ``` ### Step 3：生成HTML 使用以下标准组件库： **组件1：Hero区** ```html <div class="hero" style="background: linear-gradient(135deg, #0d1b3e, #0a2540); padding: 48px 40px; text-align: center; border-bottom: 1px solid rgba(0,150,255,0.15);"> <h1 style="font-size:2.2em;font-weight:800;color:#fff;">标题</h1> <p style="color:rgba(255,255,255,0.5);margin-top:8px;">副标题</p> </div> ``` **组件2：KPI数字墙** ```html <div class="kpi-bar" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:32px;"> <div class="kpi" style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:20px;text-align:center;"> <div class="num" style="font-size:1.8em;font-weight:800;color:#00d4ff;">51.9<span style="font-size:0.5em;">%</span></div> <div class="label" style="font-size:0.8em;color:rgba(255,255,255,0.4);margin-top:4px;">青少年近视率</div> </div> </div> ``` **组件3：卡片网格** ```html <div class="card" style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:24px;margin-bottom:16px;"> <h3 style="color:#fff;font-size:1em;margin-bottom:10px;">标题</h3> <p style="color:#9a9a9a;font-size:0.85em;line-height:1.7;">描述文字</p> </div> ``` **组件4：时间线** ```html <div class="timeline" style="position:relative;padding-left:28px;"> <div class="timeline::before" style="content:'';position:absolute;left:8px;top:0;bottom:0;width:1px;background:rgba(255,255,255,0.08);"></div> <div class="timeline-item" style="position:relative;margin-bottom:20px;"> <div style="font-size:0.75em;color:#00d4ff;font-weight:600;margin-bottom:2px;">PHASE 1</div> <div style="font-weight:600;color:#fff;">阶段名称</div> <div style="color:#888;font-size:0.82em;line-height:1.6;">描述</div> </div> </div> ``` **组件5：表格** ```html <table style="width:100%;border-collapse:collapse;margin-top:12px;"> <tr> <th style="background:rgba(0,212,255,0.1);color:#00d4ff;font-size:0.75em;padding:8px 12px;text-align:left;font-weight:600;border-bottom:1px solid rgba(0,212,255,0.1);">列1</th> <th>列2</th> </tr> <tr> <td style="color:#9a9a9a;font-size:0.8em;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,0.04);">内容</td> <td style="color:#00d4ff;font-weight:600;">重点</td> </tr> </table> ``` **组件6：标签云** ```html <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;"> <span style="background:rgba(0,212,255,0.08);color:#00d4ff;border:1px solid rgba(0,212,255,0.15);padding:3px 10px;border-radius:10px;font-size:0.78em;">标签</span> </div> ``` **组件7：引用框** ```html <div style="background:linear-gradient(135deg,rgba(0,212,255,0.06),rgba(0,100,200,0.04));border-left:3px solid #00d4ff;border-radius:0 12px 12px 0;padding:16px 20px;margin:12px 0;font-size:0.9em;color:rgba(255,255,255,0.8);line-height:1.7;font-style:italic;"> 引用文字 </div> ``` **组件8：双色徽章** ```html <span style="display:inline-block;background:rgba(255,80,80,0.1);color:#ff6060;border:1px solid rgba(255,80,80,0.2);padding:2px 10px;border-radius:8px;font-size:0.72em;font-weight:700;">高优先级</span> ``` ### Step 4：生成完整HTML模板 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{报告标题}</title> <style> * { margin:0; padding:0; box-sizing:border-box; } body { font-family:-apple-system,'PingFang SC',sans-serif; background:#06060f; color:#e8e6e3; min-height:100vh; } .hero { background:linear-gradient(135deg,#0d1b3e,#0a2540); padding:48px 40px; text-align:center; border-bottom:1px solid rgba(0,150,255,0.15); } .hero h1 { font-size:2.2em; font-weight:800; color:#fff; } .hero .sub { color:rgba(255,255,255,0.5); font-size:0.95em; margin-top:8px; } .container { max-width:960px; margin:0 auto; padding:40px 24px; } .section { margin-bottom:40px; } .section-title { font-size:1em; font-weight:700; color:#fff; margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.08); } .kpi-bar { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:32px; } .card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:14px; padding:24px; margin-bottom:14px; } .card h3 { color:#fff; font-size:0.95em; margin-bottom:10px; } .card p { color:#9a9a9a; font-size:0.85em; line-height:1.7; } .footer { text-align:center; color:#333; font-size:0.75em; padding:40px 0 20px; border-top:1px solid rgba(255,255,255,0.04); margin-top:40px; } </style> </head> <body> {内容区} </body> </html> ``` ### Step 5：部署 ```bash # 保存HTML write /workspace/{project}/index.html # 部署 deploy --dist_dir /workspace/{project} --project_name {项目名} ``` ## 输出 部署后返回链接，用户可直接打开。 ## 设计规范（设计师参考） | 元素 | 规范 | |------|------| | 主背景 | #06060f 或 #080810 | | 强调色 | #00d4ff（蓝）或 #a78bfa（紫）或 #34d399（绿）| | 渐变 | linear-gradient(135deg, #0d1b3e, #0a2540) | | 卡片圆角 | border-radius: 12px~16px | | 内边距 | padding: 20px~28px | | 边框 | border: 1px solid rgba(255,255,255,0.06)~0.1 | | 标题字重 | font-weight: 700~800 | | 正文字号 | font-size: 0.82em~0.9em | | 行高 | line-height: 1.6~1.7 |


Security scan verdicts — ClawScan: suspicious | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)