Skip to main content Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/PM-Shawn/Abu-Cowork --skill html-widgetThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository
Related occupations SOC
Based on SOC occupation classification
name html-widget description 生成可交互的 HTML 可视化组件 — 算法动画、数据图表、概念演示、交互式教程等。当用户需要交互式演示、动画解释、数据探索、UI 原型等场景时触发，直接输出 html 代码块，前端会在安全沙箱中渲染为可交互组件。 trigger 用户要求做图表、可视化、交互式演示、动画演示、数据展示、仪表盘、计数器、计时器、小工具、小游戏、算法可视化、UI 原型/mockup、交互式教程，或任何适合用交互/动画来呈现的内容 do-not-trigger 能用 mermaid 解决的结构化图表（流程图、ER图、时序图）；能用 infographic 解决的数据海报/信息图；用户明确要求生成代码文件而非演示；纯文字能说清的简单问题 user-invocable true disable-auto-invoke true argument-hint <交互组件描述> tags ["交互","interactive","可视化","visualization","动画","animation","widget","演示","demo","图表","chart"]
你现在帮用户生成 可交互的 HTML 组件 。直接在回复中输出 ```html 代码块，前端会在安全沙箱 iframe 中自动渲染为可交互组件。
重要规则 ：
不要调用 generate_image 工具 ，HTML 代码块就是最终输出不要调用文件写入工具 （write_file 等）把 HTML 保存到本地——这是对话内的临时可视化，不是文件交付物不要用 Artifacts 模式 ——直接输出代码块即可不要调用 report_plan / todo_write ——直接输出代码块，不需要规划步骤
何时用可视化 vs 写文件
用户意图 做法 "看看"、"分析一下"、"展示"、"解释"、"演示" → 输出 ```html 代码块（可视化） "导出"、"保存"、"生成报表"、"做个文件"、"发给领导" → 调用 write_file（文件交付） "分析数据，然后做个报表" → 先可视化展示关键发现，再写文件
输出格式
输出 ```html 代码块，内容为 HTML 片段（不含 <!DOCTYPE>、<html>、<head>、<body> 标签，这些由渲染器自动包裹）。
必须按此顺序 ：<style> → HTML 内容 → <script>
<style >
</style >
<div id ="app" >
</div >
<script >
</script >
尺寸规范
根据内容复杂度选择合适的尺寸：
类型 高度 适用场景 紧凑型 ≤150px 单个指标卡片、迷你图、简单计数器 标准型 150-400px 单个图表、数据表格、简单交互 完整型 400-700px 仪表盘、多图表组合、复杂交互
body 已预设 16px 内边距
设计规范
核心审美原则 ：克制、留白、精致。宁可简洁到"少了点什么"，也不要堆砌到"多了点什么"。每个像素都要有存在的理由。
配色体系 变量 用途 值 --abu-primary主色/强调色 #d97757（暖橙） --abu-text正文文字 #29261b（深棕） --abu-text-muted次要文字/辅助信息 #888579（暖灰） --abu-bg页面背景 #ffffff --abu-bg-secondary卡片/区块背景 #f5f3ee（米白） --abu-border边框/分割线 #e5e2db（浅驼）
序号 色值 名称 适用 1 #4F46E5靛蓝 默认首选、主数据系列 2 #0891B2青色 对比系列 3 #10B981翠绿 正向指标（增长/完成） 4 #F59E0B琥珀 警告/中性指标 5 #EF4444赤红 负向指标（下降/错误） 6 #7C3AED紫色 补充系列 7 #EC4899玫红 补充系列
成功/增长：#10B981，搭配浅底 #ecfdf5
危险/下降：#EF4444，搭配浅底 #fef2f2
警告：#F59E0B，搭配浅底 #fffbeb
信息：#4F46E5，搭配浅底 #eef2ff
白色基底 + 单一强调色。一个组件最多 1 种强调色 + 数据色板
大面积只用白/米白/浅灰，色彩只用于数据点、状态标识、CTA 按钮
图表背景透明，不要给 chart container 加背景色
相邻数据系列色相间距 > 60°，确保色盲友好
间距系统（4px 网格） token 值 用途 --s-14px 图标与文字间距、紧凑元素内边距 --s-28px 相关元素间距、小卡片内边距 --s-312px 组内元素间距、按钮组 gap --s-416px 段落间距、卡片内边距（默认） --s-520px 区块间距 --s-624px 大卡片内边距、区块间隔 --s-832px 主要分区间隔
用法示例：padding: 16px、gap: 12px、margin-bottom: 24px。不要出现 5px、7px、15px 这种非 4 倍数值。
圆角 场景 值 小元素（标签、徽章） 4px按钮、输入框 6px卡片、面板 10px大容器、模态框 12px
统一使用 border-radius，不要混用不同的圆角值。一个组件内圆角值最多 2 种。
字体与排版
字体栈 ：system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif字重 ：仅 400（正文）和 600（标题/强调），禁用 300/500/700/800等宽数字 ：数值型内容加 font-variant-numeric: tabular-nums 确保对齐 层级 字号 字重 行高 用途 大标题 24px 600 1.3 仪表盘主标题 标题 18px 600 1.4 区块标题、图表标题 小标题 15px 600 1.5 卡片标题 正文 14px 400 1.6 默认正文 辅助 12px 400 1.5 标签、图例、脚注、数据来源 超大数字 28-36px 600 1.2 KPI 核心数值
中英文/中文与数字之间加半角空格：GDP 总量 101.4 万亿
数字千分位：¥1,234,567
日期格式：2024 年 3 月 或 2024-03-15
百分比：正数加 + 号 → +12.3%
标点用中文全角：， 。 、 （ ）
组件模式
卡片（Card） .card {
background : var (--abu-bg-secondary);
border-radius : 10px ;
padding : 16px ;
}
.card-title {
font-size : 12px ;
font-weight : 400 ;
color : var (--abu-text-muted);
text-transform : uppercase;
letter-spacing : 0.5px ;
margin-bottom : 8px ;
}
卡片之间 gap 12px
卡片内不要再嵌套卡片（最多一层）
卡片标题用辅助字号（12px）+ muted 色，不要用大标题
KPI 指标卡 .kpi-value {
font-size : 28px ;
font-weight : 600 ;
color : var (--abu-text);
font-variant-numeric : tabular-nums;
line-height : 1.2 ;
}
.kpi-trend {
display : inline-flex;
align-items : center;
gap : 4px ;
font-size : 12px ;
font-weight : 600 ;
margin-top : 4px ;
padding : 2px 6px ;
border-radius : 4px ;
}
.kpi-trend .up { color : #10B981 ; background : #ecfdf5 ; }
.kpi-trend .down { color : #EF4444 ; background : #fef2f2 ; }
趋势指示用 ↑ ↓ 字符 + 语义色背景标签，而不是纯文字
数值居左对齐，不要居中
数据表格（Table） .data-table {
width : 100% ;
border-collapse : separate;
border-spacing : 0 ;
font-size : 13px ;
}
.data-table th {
text-align : left;
font-weight : 600 ;
font-size : 11px ;
text-transform : uppercase;
letter-spacing : 0.5px ;
color : var (--abu-text-muted);
padding : 8px 12px ;
border-bottom : 2px solid var (--abu-border);
}
.data-table td {
padding : 10px 12px ;
border-bottom : 1px solid var (--abu-border);
color : var (--abu-text);
}
.data-table tr :last-child td { border-bottom : none; }
.data-table tr :hover td { background : var (--abu-bg-secondary); }
表头用小字 + 大写 + muted 色，营造层次感
数字列右对齐 + tabular-nums
不要给表格加外边框，只用行分割线
标签页（Tabs） .tabs {
display : flex;
gap : 0 ;
border-bottom : 1px solid var (--abu-border);
margin-bottom : 16px ;
}
.tab {
padding : 8px 16px ;
font-size : 13px ;
color : var (--abu-text-muted);
border : none;
background : none;
cursor : pointer;
border-bottom : 2px solid transparent;
margin-bottom : -1px ;
transition : color 0.15s , border-color 0.15s ;
}
.tab :hover { color : var (--abu-text); }
.tab .active {
color : var (--abu-primary);
border-bottom-color : var (--abu-primary);
font-weight : 600 ;
}
徽章/标签（Badge） .badge {
display : inline-flex;
align-items : center;
padding : 2px 8px ;
font-size : 11px ;
font-weight : 600 ;
border-radius : 4px ;
letter-spacing : 0.3px ;
}
.badge-success { color : #10B981 ; background : #ecfdf5 ; }
.badge-danger { color : #EF4444 ; background : #fef2f2 ; }
.badge-warning { color : #D97706 ; background : #fffbeb ; }
.badge-info { color : #4F46E5 ; background : #eef2ff ; }
进度条（Progress Bar） .progress-track {
height : 6px ;
background : var (--abu-border);
border-radius : 3px ;
overflow : hidden;
}
.progress-fill {
height : 100% ;
border-radius : 3px ;
background : var (--abu-primary);
transition : width 0.4s ease;
}
分割线 .divider {
height : 1px ;
background : var (--abu-border);
margin : 16px 0 ;
}
按钮 基础按钮样式已预设在渲染器中，直接用 <button> 即可。
.btn-primary {
background : var (--abu-primary);
color : #fff ;
border-color : var (--abu-primary);
}
.btn-primary :hover { opacity : 0.9 ; }
.btn-secondary {
background : var (--abu-bg-secondary);
border-color : var (--abu-border);
}
.btn-sm { padding : 4px 8px ; font-size : 12px ; }
.btn-group { display : inline-flex; gap : 8px ; }
按钮文字简洁：2-4 个字（开始 重置 下一步）
一组操作最多 1 个主要按钮，其余用默认样式
禁用态：opacity: 0.5; pointer-events: none
布局模式
网格仪表盘 .grid-2 { display : grid; grid-template-columns : repeat (2 , 1 fr); gap : 12px ; }
.grid-3 { display : grid; grid-template-columns : repeat (3 , 1 fr); gap : 12px ; }
.grid-4 { display : grid; grid-template-columns : repeat (4 , 1 fr); gap : 12px ; }
KPI 行：3-4 列
图表区：1 列（全宽）或 2 列
不要超过 4 列
Flex 布局 .flex-between {
display : flex;
align-items : center;
justify-content : space-between;
}
.flex-center {
display : flex;
align-items : center;
justify-content : center;
}
标准页面结构 ┌─ 标题区（标题 + 副标题/数据来源）──────────────────┐
│ │
├─ KPI 行（3-4 个指标卡片）──────────────────────────┤
│ │
├─ 主图表区（全宽或左右分栏）────────────────────────┤
│ │
├─ 辅助区（表格/列表/补充图表）──────────────────────┤
│ │
└─ 脚注（数据来源、时间戳）──────────────────────────┘
图表规范
Chart.js 标准配置
Chart .defaults .font .family = "system-ui, -apple-system, 'PingFang SC', sans-serif" ;
Chart .defaults .font .size = 12 ;
Chart .defaults .color = '#888579' ;
Chart .defaults .plugins .legend .labels .usePointStyle = true ;
Chart .defaults .plugins .legend .labels .boxWidth = 8 ;
Chart .defaults .plugins .legend .labels .boxHeight = 8 ;
Chart .defaults .plugins .legend .labels .padding = 16 ;
const chartOptions = {
responsive : true ,
maintainAspectRatio : false ,
plugins : {
legend : {
position : 'bottom' ,
labels : { usePointStyle : true , boxWidth : 8 , boxHeight : 8 , padding : 16 }
},
tooltip : {
backgroundColor : '#29261b' ,
titleFont : { size : 13 },
bodyFont : { size : 12 },
padding : 10 ,
cornerRadius : 6 ,
displayColors : true ,
}
},
scales : {
x : {
grid : { display : false },
ticks : { font : { size : 12 } },
border : { color : '#e5e2db' }
},
y : {
grid : { color : '#f5f3ee' },
ticks : { font : { size : 12 } },
border : { display : false }
}
}
};
ECharts 标准配置 const echartsTheme = {
backgroundColor : 'transparent' ,
textStyle : { fontFamily : "system-ui, -apple-system, 'PingFang SC', sans-serif" },
title : { textStyle : { fontSize : 16 , fontWeight : 600 , color : '#29261b' } },
legend : { bottom : 0 , itemWidth : 12 , itemHeight : 8 , textStyle : { fontSize : 12 , color : '#888579' } },
grid : { left : 60 , right : 20 , top : 40 , bottom : 50 , containLabel : false },
xAxis : { axisLine : { lineStyle : { color : '#e5e2db' } }, splitLine : { show : false } },
yAxis : { axisLine : { show : false }, splitLine : { lineStyle : { color : '#f5f3ee' } } },
tooltip : {
backgroundColor : '#29261b' , borderWidth : 0 , textStyle : { color : '#fff' , fontSize : 12 },
padding : [8 , 12 ], extraCssText : 'border-radius: 6px;'
},
color : ['#4F46E5' , '#0891B2' , '#10B981' , '#F59E0B' , '#EF4444' , '#7C3AED' , '#EC4899' ]
};
图表设计原则
标题在图表外部 用 HTML 写，不用 Chart.js/ECharts 内置标题图例放底部 ，用圆点样式，不要用方块网格线极淡 （#f5f3ee）或隐藏，不要用深色柱状图 ：圆角 borderRadius: 6，柱宽适中不要太细折线图 ：线宽 2px，圆点 4px，hover 6px饼图/环图 ：环图优先（更现代），中间显示总计数值格式化 ：Y 轴大数字用 万 亿 单位，tooltip 显示完整数字脚注生成时间 ：不要硬编码日期，用 <span class="generated-date"></span> 占位，JS 中用 new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-') 动态填充
动画与交互
过渡 ：仅 background、color、border-color、opacity、transform，时长 0.15shover 效果 ：卡片 background 微调亮度，按钮 opacity: 0.9 或 background 变色可点击元素 ：必须有 cursor: pointer + hover 视觉变化禁止 ：box-shadow 变化、filter: blur()、大幅 transform 动画（流式渲染不兼容）图表动画 ：使用库内置动画即可（Chart.js 默认 1s easing），不要自定义复杂动画
禁止清单
❌ 深色/黑色背景
❌ 渐变（linear-gradient / radial-gradient）
❌ 阴影（box-shadow）、模糊（filter: blur）
❌ position: fixed（iframe 内无效）
❌ localStorage / sessionStorage（sandbox 限制）
❌ fetch / XHR 网络请求（所有数据内联）
❌ ES module import（用 <script src=""> 引入）
❌ 非 4 倍数间距（5px, 7px, 15px 等）
❌ 超过 2 种字重（只能 400 和 600）
❌ 纯装饰性元素（无意义的 icon、分隔符、装饰线条）
❌ 手写 SVG icon（用 Unicode 字符替代：↑ ↓ ● ▶ ◀ ✓ ✕ →）
可用外部库（CDN）
<script src ="https://cdn.jsdelivr.net/npm/chart.js@4" > </script >
<script src ="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js" > </script >
<script src ="https://cdn.jsdelivr.net/npm/d3@7" > </script >
<script src ="https://cdn.jsdelivr.net/npm/animejs@3" > </script >
可用 CDN 前缀：cdn.jsdelivr.net / cdnjs.cloudflare.com / unpkg.com / esm.sh
简单柱/线/饼图 → Chart.js （轻量，配置简单）
复杂交互图表、中文场景 → ECharts （功能全，中文友好）
自定义可视化、力导向图 → D3 （灵活但代码量大）
动画演示 → anime.js
注意 ：外部脚本和内联脚本按顺序执行（渲染器已处理加载顺序）。不要用 window.onload 包裹代码 ，直接写即可。
场景模板
指标卡片（紧凑型） <style >
.kpi-row { display : grid; grid-template-columns : repeat (3 , 1 fr); gap : 12px ; }
.kpi-card { background : var (--abu-bg-secondary); border-radius : 10px ; padding : 16px ; }
.kpi-label { font-size : 11px ; font-weight : 400 ; color : var (--abu-text-muted); text-transform : uppercase; letter-spacing : 0.5px ; }
.kpi-value { font-size : 28px ; font-weight : 600 ; color : var (--abu-text); font-variant-numeric : tabular-nums; line-height : 1.2 ; margin-top : 8px ; }
.kpi-trend { display : inline-flex; align-items : center; gap : 4px ; font-size : 12px ; font-weight : 600 ; margin-top : 8px ; padding : 2px 8px ; border-radius : 4px ; }
.kpi-trend .up { color : #10B981 ; background : #ecfdf5 ; }
.kpi-trend .down { color : #EF4444 ; background : #fef2f2 ; }
</style >
<div class ="kpi-row" >
<div class ="kpi-card" >
<div class ="kpi-label" > 总销售额</div >
<div class ="kpi-value" > ¥284.7 万</div >
<div class ="kpi-trend up" > ↑ 12.3% 环比</div >
</div >
<div class ="kpi-card" >
<div class ="kpi-label" > 订单量</div >
<div class ="kpi-value" > 3,842</div >
<div class ="kpi-trend down" > ↓ 3.1% 环比</div >
</div >
<div class ="kpi-card" >
<div class ="kpi-label" > 客单价</div >
<div class ="kpi-value" > ¥741</div >
<div class ="kpi-trend up" > ↑ 5.8% 环比</div >
</div >
</div >
数据图表（标准型） <style >
.chart-header { margin-bottom : 16px ; }
.chart-title { font-size : 18px ; font-weight : 600 ; color : var (--abu-text); }
.chart-subtitle { font-size : 12px ; color : var (--abu-text-muted); margin-top : 4px ; }
.chart-wrap { position : relative; height : 320px ; }
</style >
<div class ="chart-header" >
<div class ="chart-title" > 2020–2025 年 GDP 增长趋势</div >
<div class ="chart-subtitle" > 数据来源：国家统计局 · 单位：万亿元</div >
</div >
<div class ="chart-wrap" >
<canvas id ="chart" > </canvas >
</div >
<script src ="https://cdn.jsdelivr.net/npm/chart.js@4" > </script >
<script >
(function (Chart .defaults .font .family = "system-ui, -apple-system, 'PingFang SC', sans-serif" ;
Chart .defaults .color = '#888579' ;
new Chart (document .getElementById ('chart' ), {
type : 'bar' ,
data : {
labels : ['2020' , '2021' , '2022' , '2023' , '2024' , '2025' ],
datasets : [{
label : 'GDP（万亿元）' ,
data : [101.4 , 114.9 , 121.0 , 126.1 , 134.9 , 140.2 ],
backgroundColor : '#4F46E5' ,
borderRadius : 6 ,
maxBarThickness : 48 ,
}]
},
options : {
responsive : true ,
maintainAspectRatio : false ,
plugins : {
legend : { display : false },
tooltip : {
backgroundColor : '#29261b' , </script >
交互式演示（标准型） <style >
.demo-header { margin-bottom : 16px ; }
.demo-title { font-size : 18px ; font-weight : 600 ; color : var (--abu-text); }
.demo-desc { font-size : 12px ; color : var (--abu-text-muted); margin-top : 4px ; }
.stage { position : relative; height : 240px ; border : 1px solid var (--abu-border); border-radius : 10px ; overflow : hidden; background : var (--abu-bg-secondary); }
.controls { display : flex; align-items : center; justify-content : center; gap : 8px ; margin-top : 12px ; }
.info { font-size : 13px ; color : var (--abu-text-muted); text-align : center; margin-top : 8px ; }
</style >
<div class ="demo-header" >
<div class ="demo-title" > 冒泡排序可视化</div >
<div class ="demo-desc" > 点击"下一步"逐步观察排序过程</div >
</div >
<div class ="stage" id ="stage" > </div >
<div class ="controls" >
<button onclick ="prev()" > ◀ 上一步</button >
<button class ="btn-primary" onclick ="next()" > 下一步 ▶</button >
<button onclick ="autoPlay()" > 自动播放</button >
</div >
<div class ="info" id ="info" > 已就绪，共 8 个元素</div >
<script >
</script >
数据表格 + 图表组合（完整型） <style >
.page-header { margin-bottom : 20px ; }
.page-title { font-size : 24px ; font-weight : 600 ; color : var (--abu-text); }
.page-subtitle { font-size : 12px ; color : var (--abu-text-muted); margin-top : 4px ; }
.kpi-row { display : grid; grid-template-columns : repeat (4 , 1 fr); gap : 12px ; margin-bottom : 20px ; }
.kpi-card { background : var (--abu-bg-secondary); border-radius : 10px ; padding : 16px ; }
.kpi-label { font-size : 11px ; color : var (--abu-text-muted); text-transform : uppercase; letter-spacing : 0.5px ; }
.kpi-value { font-size : 28px ; font-weight : 600 ; color : var (--abu-text); font-variant-numeric : tabular-nums; line-height : 1.2 ; margin-top : 8px ; }
.kpi-trend { display : inline-flex; align-items : center; gap : 4px ; font-size : 12px ; font-weight : 600 ; margin-top : 8px ; padding : 2px 8px ; border-radius : 4px ; }
.kpi-trend .up { color : #10B981 ; background : #ecfdf5 ; }
.kpi-trend .down { color : #EF4444 ; background : #fef2f2 ; }
.section { margin-bottom : 20px ; }
.section-title { font-size : 15px ; font-weight : 600 ; color : var (--abu-text); margin-bottom : 12px ; }
.chart-wrap { position : relative; height : 300px ; background : var (--abu-bg-secondary); border-radius : 10px ; padding : 16px ; }
.data-table { width : 100% ; border-collapse : separate; border-spacing : 0 ; font-size : 13px ; }
.data-table th { text-align : left; font-weight : 600 ; font-size : 11px ; text-transform : uppercase; letter-spacing : 0.5px ; color : var (--abu-text-muted); padding : 8px 12px ; border-bottom : 2px solid var (--abu-border); }
.data-table td { padding : 10px 12px ; border-bottom : 1px solid var (--abu-border); }
.data-table tr :last-child td { border-bottom : none; }
.data-table .num { text-align : right; font-variant-numeric : tabular-nums; }
.footnote { font-size : 11px ; color : var (--abu-text-muted); margin-top : 16px ; }
</style >
<div class ="page-header" >
<div class ="page-title" > Q4 销售分析报告</div >
<div class ="page-subtitle" > 2024 年 10–12 月 · 数据截至 2024-12-31</div >
</div >
<div class ="kpi-row" >
<div class ="kpi-card" >
<div class ="kpi-label" > 总营收</div >
<div class ="kpi-value" > ¥847 万</div >
<div class ="kpi-trend up" > ↑ 15.2%</div >
</div >
<div class ="kpi-card" >
<div class ="kpi-label" > 订单数</div >
<div class ="kpi-value" > 12,458</div >
<div class ="kpi-trend up" > ↑ 8.7%</div >
</div >
<div class ="kpi-card" >
<div class ="kpi-label" > 客单价</div >
<div class ="kpi-value" > ¥679</div >
<div class ="kpi-trend down" > ↓ 2.1%</div >
</div >
<div class ="kpi-card" >
<div class ="kpi-label" > 退货率</div >
<div class ="kpi-value" > 3.2%</div >
<div class ="kpi-trend up" > ↑ 0.4pp</div >
</div >
</div >
<div class ="section" >
<div class ="section-title" > 月度趋势</div >
<div class ="chart-wrap" > <canvas id ="chart" > </canvas > </div >
</div >
<div class ="section" >
<div class ="section-title" > 分品类明细</div >
<table class ="data-table" >
<thead > <tr > <th > 品类</th > <th class ="num" > 营收</th > <th class ="num" > 占比</th > <th class ="num" > 同比</th > </tr > </thead >
<tbody >
<tr > <td > 电子产品</td > <td class ="num" > ¥3,240,000</td > <td class ="num" > 38.2%</td > <td class ="num" style ="color:#10B981" > +22.1%</td > </tr >
<tr > <td > 家居用品</td > <td class ="num" > ¥2,180,000</td > <td class ="num" > 25.7%</td > <td class ="num" style ="color:#10B981" > +11.5%</td > </tr >
<tr > <td > 服装配饰</td > <td class ="num" > ¥1,850,000</td > <td class ="num" > 21.8%</td > <td class ="num" style ="color:#EF4444" > -3.2%</td > </tr >
<tr > <td > 食品饮料</td > <td class ="num" > ¥1,200,000</td > <td class ="num" > 14.2%</td > <td class ="num" style ="color:#10B981" > +8.9%</td > </tr >
</tbody >
</table >
</div >
<div class ="footnote" > 数据来源：内部销售系统 · 生成时间：<span class ="generated-date" > </span > </div >
<script src ="https://cdn.jsdelivr.net/npm/chart.js@4" > </script >
<script >
(function (Chart .defaults .font .family = "system-ui, -apple-system, 'PingFang SC', sans-serif" ;
var dateEl = document .querySelector ('.generated-date' );
if (dateEl) dateEl.textContent = new Date ().toLocaleDateString ('zh-CN' , { year : 'numeric' , month : '2-digit' , day : '2-digit' }).replace (/\//g , '-' );
Chart .defaults .color = '#888579' ;
new Chart (document .getElementById ('chart' ), {
type : 'line' ,
data : {
labels : ['10 月' , '11 月' , '12 月' ],
datasets : [
{ label : '营收（万元）' , data : [265 , 278 , 304 ], borderColor : '#4F46E5' , backgroundColor : 'rgba(79,70,229,0.08)' , </script >
UI 原型 / Mockup 规范 当用户要求"画个原型"、"做个 mockup"、"设计一个页面"时，生成高保真静态原型 ，模拟真实 App/Web 界面。
原型设计原则
看起来像真的 App ，不是线框图——用真实文字、真实数据、真实图标固定宽度模拟设备 ：手机 375px、平板 768px、桌面 1024px，居中显示所有文字用中文 ，数据用逼真的假数据交互仅限视觉反馈 ：hover 态、active 态、tab 切换，不做真实业务逻辑多页面支持 ：用 JS 切换 display 实现页面导航，不要用 iframe 或多个 HTML 文件
原型色彩 原型不一定用 Abu 品牌色，根据产品类型选择合适的主色：
产品类型 推荐主色 辅色 企业/SaaS #4F46E5（靛蓝）#6366F1电商 #EF4444（红）或 #F97316（橙）#FCA5A5社交/内容 #0EA5E9（天蓝）#38BDF8金融 #0891B2（青）或 #1D4ED8（深蓝）#67E8F9健康/生活 #10B981（绿）#6EE7B7工具/效率 #6366F1（紫）或 #8B5CF6#A78BFA通用/默认 #4F46E5#818CF8
原型组件模式
手机顶部导航栏（Status Bar + Nav） .phone-frame {
width : 375px ;
margin : 0 auto;
background : #fff ;
border-radius : 20px ;
overflow : hidden;
border : 1px solid var (--abu-border);
}
.status-bar {
display : flex;
justify-content : space-between;
align-items : center;
padding : 8px 20px ;
font-size : 12px ;
font-weight : 600 ;
color : #1a1a1a ;
}
.nav-bar {
display : flex;
align-items : center;
justify-content : space-between;
padding : 8px 16px ;
font-size : 17px ;
font-weight : 600 ;
}
底部标签栏（Tab Bar） .tab-bar {
display : flex;
border-top : 1px solid #f0f0f0 ;
background : #fff ;
padding : 6px 0 20px ;
}
.tab-item {
flex : 1 ;
display : flex;
flex-direction : column;
align-items : center;
gap : 2px ;
font-size : 10px ;
color : #999 ;
cursor : pointer;
}
.tab-item .active { color : var (--app-primary); }
.tab-icon { font-size : 20px ; }
列表项（List Cell） .list-cell {
display : flex;
align-items : center;
padding : 12px 16px ;
gap : 12px ;
border-bottom : 1px solid #f5f5f5 ;
cursor : pointer;
}
.list-cell :hover { background : #fafafa ; }
.avatar {
width : 44px ;
height : 44px ;
border-radius : 10px ;
background : linear-gradient (135deg , #667eea , #764ba2 );
display : flex;
align-items : center;
justify-content : center;
color : #fff ;
font-size : 16px ;
font-weight : 600 ;
flex-shrink : 0 ;
}
卡片/内容块 .content-card {
margin : 0 16px 12px ;
background : #f8f8f8 ;
border-radius : 12px ;
padding : 16px ;
}
输入框 / 搜索框 .search-bar {
margin : 8px 16px ;
padding : 10px 12px ;
background : #f5f5f5 ;
border-radius : 10px ;
font-size : 14px ;
color : #999 ;
display : flex;
align-items : center;
gap : 8px ;
}
浮动按钮（FAB） .fab {
position : absolute;
right : 20px ;
bottom : 80px ;
width : 56px ;
height : 56px ;
border-radius : 28px ;
background : var (--app-primary);
color : #fff ;
font-size : 24px ;
display : flex;
align-items : center;
justify-content : center;
cursor : pointer;
border : none;
}
多页面导航模式 多页面原型通过 JS 切换 display 实现，所有页面 HTML 共存于 DOM 中，用 data-page 属性标识。
.page { display : none; }
.page .active { display : flex; flex-direction : column; }
.page { opacity : 0 ; transition : opacity 0.2s ease; }
.page .active { opacity : 1 ; }
function goTo (pageId ) {
document .querySelectorAll ('.page' ).forEach (p =>classList .remove ('active' ));
document .getElementById (pageId).classList .add ('active' );
document .querySelectorAll ('.tab-item' ).forEach (t =>classList .toggle ('active' , t.dataset .page === pageId);
});
}
点击 Tab → goTo('page-xxx') → 同时高亮当前 Tab
Tab Bar 固定在 phone-frame 底部，所有页面共享
列表项点击 → goTo('page-detail') → 顶部 nav 显示返回按钮
返回按钮 → goTo('page-xxx') 回到来源页
<div class ="phone-frame" >
<div class ="page active" id ="page-home" >
</div >
<div class ="page" id ="page-discover" > ...</div >
<div class ="page" id ="page-profile" > ...</div >
<div class ="page" id ="page-detail" > ...</div >
</div >
.page {
position : absolute;
top : 0 ; left : 0 ; right : 0 ; bottom : 0 ;
flex-direction : column;
overflow : hidden;
}
.page-header { flex-shrink : 0 ; }
.page-body { flex : 1 ; overflow-y : auto; -webkit-overflow -scrolling: touch; }
.page-footer { flex-shrink : 0 ; }
页面数量控制在 3–5 个，不要太多（代码量会爆）
底部 Tab Bar 只在主页面显示（一般 3–5 个 tab），详情页/子页面不显示 Tab Bar
首页默认 class="page active"，其余页面无 active
代码量可放宽到 400 行以内（多页面场景）
原型模板：多页手机 App <style >
:root { --app-primary : #4F46E5 ; --app-primary-light : #EEF2FF ; --app-bg : #f5f5f5 ; }
* { box-sizing : border-box; }
.phone-frame {
width : 375px ; height : 720px ; margin : 0 auto;
background : var (--app-bg); border-radius : 20px ;
overflow : hidden; border : 1px solid #e5e5e5 ;
position : relative;
}
.page { display : none; position : absolute; top : 0 ; left : 0 ; right : 0 ; bottom : 0 ; flex-direction : column; opacity : 0 ; transition : opacity 0.2s ease; }
.page .active { display : flex; opacity : 1 ; }
.status-bar { display : flex; justify-content : space-between; padding : 10px 20px 6px ; font-size : 12px ; font-weight : 600 ; background : #fff ; flex-shrink : 0 ; }
.nav-bar { display : flex; align-items : center; padding : 4px 16px 12px ; background : #fff ; flex-shrink : 0 ; }
.nav-back { font-size : 22px ; cursor : pointer; margin-right : 8px ; color : var (--app-primary); border : none; background : none; padding : 4px ; }
.nav-title { font-size : 17px ; font-weight : 600 ; flex : 1 ; }
.nav-title .large { font-size : 28px ; font-weight : 700 ; }
.nav-action { font-size : 20px ; cursor : pointer; }
.page-body { flex : 1 ; overflow-y : auto; -webkit-overflow -scrolling: touch; }
.tab-bar { display : flex; background : #fff ; border-top : 1px solid #f0f0f0 ; padding : 6px 0 20px ; flex-shrink : 0 ; }
.tab-item { flex : 1 ; display : flex; flex-direction : column; align-items : center; gap : 2px ; font-size : 10px ; color : #999 ; cursor : pointer; border : none; background : none; padding : 4px ; }
.tab-item .active { color : var (--app-primary); }
.tab-icon { font-size : 20px ; line-height : 1 ; }
</style >
<div class ="phone-frame" >
<div class ="page active" id ="page-home" >
<div class ="status-bar" > <span > 9:41</span > <span > ● ● ●</span > </div >
<div class ="nav-bar" >
<div class ="nav-title large" > 首页</div >
<div class ="nav-action" > 🔔</div >
</div >
<div class ="page-body" >
</div >
<div class ="tab-bar" >
<button class ="tab-item active" data-page ="page-home" onclick ="goTo('page-home')" >
<span class ="tab-icon" > ◉</span > 首页
</button >
<button class ="tab-item" data-page ="page-discover" onclick ="goTo('page-discover')" >
<span class ="tab-icon" > ⌕</span > 发现
</button >
<button class ="tab-item" data-page ="page-profile" onclick ="goTo('page-profile')" >
<span class ="tab-icon" > ☺</span > 我的
</button >
</div >
</div >
<div class ="page" id ="page-discover" >
<div class ="status-bar" > <span > 9:41</span > <span > ● ● ●</span > </div >
<div class ="nav-bar" > <div class ="nav-title large" > 发现</div > </div >
<div class ="page-body" >
</div >
<div class ="tab-bar" >
<button class ="tab-item" data-page ="page-home" onclick ="goTo('page-home')" >
<span class ="tab-icon" > ◉</span > 首页
</button >
<button class ="tab-item active" data-page ="page-discover" onclick ="goTo('page-discover')" >
<span class ="tab-icon" > ⌕</span > 发现
</button >
<button class ="tab-item" data-page ="page-profile" onclick ="goTo('page-profile')" >
<span class ="tab-icon" > ☺</span > 我的
</button >
</div >
</div >
<div class ="page" id ="page-detail" >
<div class ="status-bar" > <span > 9:41</span > <span > ● ● ●</span > </div >
<div class ="nav-bar" >
<button class ="nav-back" onclick ="goTo('page-home')" > ‹</button >
<div class ="nav-title" > 详情</div >
<div class ="nav-action" > ↗</div >
</div >
<div class ="page-body" >
</div >
</div >
</div >
<script >
function goTo (pageId ) {
document .querySelectorAll ('.page' ).forEach (function (p ) { p.classList .remove ('active' ); });
document .getElementById (pageId).classList .add ('active' );
document .querySelectorAll ('.tab-item' ).forEach (function (t ) {
t.classList .toggle ('active' , t.dataset .page === pageId);
});
}
</script >
原型模板：单页手机 App <style >
:root { --app-primary : #4F46E5 ; --app-primary-light : #EEF2FF ; }
.phone-frame { width : 375px ; margin : 0 auto; background : #fff ; border-radius : 20px ; overflow : hidden; border : 1px solid #e5e5e5 ; position : relative; min-height : 680px ; }
.status-bar { display : flex; justify-content : space-between; padding : 10px 20px 6px ; font-size : 12px ; font-weight : 600 ; }
.nav-bar { display : flex; align-items : center; justify-content : space-between; padding : 4px 16px 12px ; }
.nav-title { font-size : 28px ; font-weight : 700 ; }
.nav-action { font-size : 20px ; cursor : pointer; }
</style >
<div class ="phone-frame" >
<div class ="status-bar" >
<span > 9:41</span >
<span > ● ● ●</span >
</div >
<div class ="nav-bar" >
<div class ="nav-title" > 标题</div >
<div class ="nav-action" > ⊕</div >
</div >
</div >
原型中的图标 不用引入图标库，使用 Unicode/Emoji 字符模拟：
场景 字符 首页 ◉ 搜索 ⌕ 消息 ✉ 我的 ☺ 设置 ⚙ 返回 ‹ 更多 ⋯ 添加 ⊕ 关闭 ✕ 勾选 ✓ 收藏 ☆ / ★ 分享 ↗ 通知 🔔 图片 🏞 购物车 🛒 点赞 ♡ / ♥
原型注意事项
原型中允许使用渐变和阴影 （与普通 widget 不同），因为原型不需要流式预览效果头像用渐变色块 + 首字母替代真实图片
图片占位用纯色矩形 + emoji 图标（如 🏞）
内容文字用逼真但虚构的数据，不要用 "Lorem ipsum" 或 "测试文字"
底部留出安全区域（padding-bottom: 20px）模拟 iPhone Home Indicator
注意事项
所有数据内联 ：直接写在 JS 中，不要 fetch初始状态有意义 ：加载后立即展示内容，不要空白等用户操作交互反馈 ：可点击元素必须有 hover/active 视觉反馈中文优先 ：UI 文字使用中文简洁代码 ：普通组件控制在 200 行以内，多页面原型可放宽到 400 行，不要过度工程化流式友好 ：style 在前，HTML 在中，script 在后——用户先看到结构，最后才激活交互 cornerRadius
6
padding
10
titleFont
size
13
bodyFont
size
12
scales
x
grid
display
false
border
color
'#e5e2db'
y
grid
color
'#f5f3ee'
border
display
false
beginAtZero
false
fill
true
tension
0.3
pointRadius
4
pointHoverRadius
6
borderWidth
2
label
'订单数（百）'
data
38
41
45
borderColor
'#0891B2'
backgroundColor
'transparent'
tension
0.3
pointRadius
4
pointHoverRadius
6
borderWidth
2
options
responsive
true
maintainAspectRatio
false
plugins
legend
position
'bottom'
labels
usePointStyle
true
boxWidth
8
boxHeight
8
padding
16
tooltip
backgroundColor
'#29261b'
cornerRadius
6
padding
10
scales
x
grid
display
false
border
color
'#e5e2db'
y
grid
color
'#f5f3ee'
border
display
false
