القائمة
生成美观现代的 HTML 网页/报告/仪表盘/展示页时使用。当用户要求"写网页"、"做一个 HTML 页面"、"生成报告"、"dashboard"、"展示页"、"前端"时触发。基于本技能的精致深色模板来写，而不是裸写朴素 HTML，这样产出的页面自带统一的现代设计风格。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
用图表可视化数据时使用。当用户要求"图表"、"可视化"、"趋势图"、"统计图"、"数据分析报告"、"chart"、"plot"、"图形展示数据"时触发。基于本技能用 Plotly 在深色主题里画交互图表(折线/柱状/饼/散点),而非只列表格或裸数字。
需要动效/动画展示时使用。当用户要求"动画"、"动效"、"loading 动画"、"流程动画"、"动态展示"、"lottie"、"让它动起来"时触发。基于本技能用 lottie-web 在深色主题里播放矢量动画,而非静态图。
| name | frontend-page |
| description | 生成美观现代的 HTML 网页/报告/仪表盘/展示页时使用。当用户要求"写网页"、"做一个 HTML 页面"、"生成报告"、"dashboard"、"展示页"、"前端"时触发。基于本技能的精致深色模板来写，而不是裸写朴素 HTML，这样产出的页面自带统一的现代设计风格。 |
前端页面生成器。产出自带样式、视觉精致的现代 HTML（深色主题、渐变标题、卡片、美化表格），而非黑字白底的朴素页面。
用户要生成任何 HTML 页面：报告、仪表盘、展示页、说明页、数据可视化页。
fs_write 完整 HTML：在 <head> 内嵌下面这套 <style>，<body> 用它的 class 填真实内容。不要停下来说"请稍候"，直接写完。<head> 的 <style>）:root{--bg:#0b0f17;--surface:#131925;--surface2:#1b2333;--border:#283142;--text:#e6edf6;--dim:#9aa7b8;--accent:#3b82f6;--ok:#22c55e;--radius:14px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,'Segoe UI','Microsoft YaHei','PingFang SC',sans-serif;background:radial-gradient(1200px 600px at 70% -10%,#1a2436,var(--bg) 55%);color:var(--text);line-height:1.7;padding:48px 24px;min-height:100vh}
.container{max-width:880px;margin:0 auto}
.eyebrow{display:inline-block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:rgba(59,130,246,.12);padding:4px 12px;border-radius:999px;margin-bottom:16px}
h1{font-size:38px;font-weight:700;background:linear-gradient(135deg,var(--text) 30%,var(--accent) 120%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:12px}
.subtitle{font-size:18px;color:var(--dim)}
section{margin:36px 0}h2{font-size:24px;margin-bottom:16px}h3{font-size:18px;color:var(--text);margin:20px 0 10px}
p{color:var(--dim);margin-bottom:14px}a{color:var(--accent);text-decoration:none}strong{color:var(--text)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.card .label{font-size:13px;color:var(--dim);margin-bottom:6px}.card .value{font-size:28px;font-weight:700}
ul,ol{padding-left:22px;color:var(--dim);margin-bottom:14px}li{margin:6px 0}
table{width:100%;border-collapse:collapse;margin:18px 0;background:var(--surface);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
th{background:var(--surface2);color:var(--text);font-weight:600;text-align:left;padding:12px 16px;font-size:14px}
td{padding:12px 16px;border-top:1px solid var(--border);color:var(--dim);font-size:14px}
code{background:var(--surface2);color:#f472b6;padding:2px 7px;border-radius:6px;font-family:Consolas,monospace;font-size:13px}
pre{background:#0a0e16;border:1px solid var(--border);color:#e2e8f0;padding:18px;border-radius:var(--radius);overflow-x:auto}
.badge{display:inline-block;font-size:12px;padding:3px 10px;border-radius:999px;background:rgba(34,197,94,.15);color:var(--ok);font-weight:600}
blockquote{border-left:3px solid var(--accent);background:var(--surface);padding:12px 18px;border-radius:0 var(--radius) var(--radius) 0;color:var(--dim);margin:16px 0}
<body><div class="container">
<header><span class="eyebrow">标签</span><h1>标题</h1><p class="subtitle">副标题</p></header>
<section><h2>概览</h2><div class="grid">
<div class="card"><div class="label">指标</div><div class="value">128</div></div>
</div></section>
<section><h2>详情</h2><p>正文...</p></section>
<section><h2>数据</h2><table><thead><tr><th>列</th></tr></thead><tbody><tr><td>值 <span class="badge">正常</span></td></tr></tbody></table></section>
</div></body>
.grid + .cardtable.badgepre/code，引用 → blockquote