html-visual

HTML 可视化

输入

$ARGUMENTS

说明

将用户的请求可视化为一个交互式 HTML 单文件。 首先，阅读 references/common-rules.md，了解通用规则。

类型判定

根据 $ARGUMENTS 的第一个词确定类型。

参数	类型	文件名格式
mockup	UI 模型（高保真）	mockup-{name}.html
wireframe	线框图（低保真，手绘风格）	wireframe-{name}.html
erd	ERD	erd-{name}.html
flow	流程图 / 时序图	flow-{name}.html
chart	数据图表	chart-{name}.html
slides	演示文稿	slides-{name}.html
arch	架构图	arch-{name}.html
dashboard	综合仪表盘	dashboard-{name}.html
timeline	时间线 / 甘特图	timeline-{name}.html
mindmap	思维导图	mindmap-{name}.html
kanban	看板	kanban-{name}.html
table	交互式数据表格	table-{name}.html

不匹配：根据请求内容推断类型。如果无法推断，请询问用户。 推断出类型后，使用 visual-{name}.html 作为文件名。

{name} 规则：从请求中提取核心名词，并转换为 kebab-case。例如，“user login form” → login-form，“payment flow” → payment-flow。

输入处理

• 提供了文件路径：读取并分析文件，然后进行可视化。 例如：/html-visual erd schema.prisma → 分析 Prisma schema，自动生成 ERD
• 修改现有 HTML：读取并修改现有文件。不要从头重建。
• 仅有自然语言：推断类型，然后生成。

收集上下文

• 描述已足够：立即生成（例如：“简单的登录表单模型”）
• 需要参考项目代码：先读取代码/schema/API（例如：“我们项目的 ERD”、“当前的支付流程”）
• 判断标准：如果请求中包含“我们的”、“当前”、“项目的”等项目上下文引用，请先读取代码。

类型专属指南

mockup

• 设备边框：移动端/平板 UI 使用真实的设备边框形状
• 多个屏幕：并排布局 + 屏幕标签
• 占位数据：使用符合项目上下文的逼真数据
• 使用标签页/滑动切换屏幕

wireframe

• 手绘（草图）风格：线条略有不规则，呈现手绘质感
• 黑白或灰度。尽量少用颜色
• 文本区域显示为灰色块（不要使用 “Lorem ipsum”）
• 聚焦布局和信息结构，不包含视觉细节

erd

• 实体框中列出属性。区分 PK/FK
• 关系连线：使用 1:1、1:N、N:M 表示法。拖动节点时自动跟随
• 包含关系类型图例

flow

• 节点类型：开始/结束（圆形）、处理（矩形）、判断（菱形）
• 使用方向箭头。拖动节点时自动跟随
• 在连接线上显示分支条件

chart

• 根据数据自动选择合适的图表类型（柱状图、折线图、饼图、散点图等）
• 坐标轴标签 + 单位、悬停提示、图例
• 使用 Chart.js 或 D3.js

slides

• 基于 Reveal.js CDN
• 幻灯片切换动画
• 代码块高亮（highlight.js）
• 支持演讲者备注（按 S 键切换）

arch

• 按层/区域划分系统组件（前端 / 后端 / DB / 外部）
• 在通信连线上标注协议（HTTP、gRPC、pub/sub 等）
• 支持缩放/平移
• 使用 D3.js 力导向布局或直接生成 SVG

dashboard

• 在网格布局中排列多个图表/指标
• 顶部显示 KPI 卡片（数值 + 变化率）
• 图表间联动：点击一个图表 → 筛选其他图表

timeline

• 水平或垂直时间线
• 事件节点 + 日期标签
• 支持缩放/滚动浏览时间段
• 使用 Mermaid 甘特图或 D3.js

mindmap

• 从中心节点向外辐射展开
• 节点折叠/展开
• 使用 Mermaid mindmap 或直接生成 SVG

kanban

• 列：TODO / 进行中 / 已完成（可自定义）
• 在列间拖放卡片
• 在卡片上显示标签/标记

表格

• 点击列标题可排序（升序/降序）
• 在顶部搜索/筛选
• 分页或虚拟滚动
• 单元格高亮、行选择

流程

1. 识别类型和目标。如有歧义，请提问。如果提供了路径，请读取文件。
2. 判断是否需要收集上下文。确定是否需要了解项目上下文。如果需要，请阅读相关代码/文档。
3. 阅读 references/common-rules.md。了解通用原则、美观要求、CDN 和错误预防规则。
4. 阅读 references/html-boilerplate.md。从基础 HTML 模板开始。
5. 按照特定类型的指南生成 HTML。
6. 验证：检查生成的 HTML。
   • HTML 属性中不得使用智能引号（弯引号）
   • 不得有未闭合的标签
   • 不得有相互重叠的节点/元素
   • 如发现问题，请修复并重新验证
7. 指示执行 open {filename}。