html-visual
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseInput
输入
text
$ARGUMENTStext
$ARGUMENTSInstructions
说明
Visualize the user's request as an interactive single HTML file.
First, read to review common rules.
references/common-rules.md将用户的请求生成为交互式单HTML文件。
首先阅读以查看通用规则。
references/common-rules.mdType Determination
类型判定
Determine the type from the first argument ().
$0| Argument | Type | Filename Pattern |
|---|---|---|
| UI mockup (high-fidelity) | |
| Wireframe (low-fidelity, hand-drawn style) | |
| ERD | |
| Flowchart / Sequence diagram | |
| Data chart | |
| Presentation | |
| Architecture diagram | |
| Composite dashboard | |
| Timeline / Gantt chart | |
| Mindmap | |
| Kanban board | |
| Interactive data table | |
No match: Infer the type from the request content. If unable to infer, ask the user.
When inferred, use as the filename.
visual-{name}.html根据第一个参数（）确定类型。
$0| 参数 | 类型 | 文件名格式 |
|---|---|---|
| UI原型（高保真） | |
| 线框图（低保真，手绘风格） | |
| ERD（实体关系图） | |
| 流程图/时序图 | |
| 数据图表 | |
| 演示文稿 | |
| 架构图 | |
| 复合仪表盘 | |
| 时间线/甘特图 | |
| 思维导图 | |
| 看板 | |
| 交互式数据表 | |
无匹配项：从请求内容中推断类型。如果无法推断，请询问用户。
推断类型后，使用作为文件名。
visual-{name}.htmlInput Handling
输入处理
- File path provided: Read and analyze the file, then visualize.
e.g., → Analyze the Prisma schema to auto-generate ERD
/html-visual erd schema.prisma - Existing HTML modification: Read and modify the existing file. Do not recreate from scratch.
- Natural language only: Infer the type, then generate.
- 提供文件路径：读取并分析文件，然后进行可视化。
例如，→ 分析Prisma schema以自动生成ERD
/html-visual erd schema.prisma - 修改现有HTML：读取并修改现有文件，不要从头重新创建。
- 仅自然语言：推断类型，然后生成。
Context Gathering
上下文收集
- Description is sufficient: Generate immediately (e.g., "simple login form mockup")
- Project code reference needed: Read code/schema/API first (e.g., "our project's ERD", "current payment flow")
- Criterion: If the request contains project context references like "our", "current", "project's", read the code first.
- 描述足够：立即生成（例如，"简单登录表单原型"）
- 需要项目代码参考：先读取代码/ schema / API（例如，"我们项目的ERD"、"当前支付流程"）
- 判断标准：如果请求包含"我们的"、"当前"、"项目的"等项目上下文参考，请先读取代码。
Type-Specific Guides
类型特定指南
mockup
mockup（UI原型）
- Device frame: Actual device frame shape for mobile/tablet UI
- Multiple screens: Side-by-side layout + screen labels
- Placeholder data: Realistic data matching project context
- Tab/swipe for screen transitions
- 设备框架：为移动/平板UI使用真实设备框架形状
- 多屏幕：并排布局 + 屏幕标签
- 占位数据：符合项目上下文的真实数据
- 标签页/滑动切换屏幕
wireframe
wireframe（线框图）
- Hand-drawn (sketch) style: Slightly irregular lines, hand-drawn feel
- Black-and-white or grayscale. Minimal color
- Text areas shown as gray blocks (no "Lorem ipsum")
- Focus on layout and information structure, exclude visual details
- 手绘（草图）风格：略带不规则线条，手绘质感
- 黑白或灰度，极少使用颜色
- 文本区域显示为灰色块（不使用"Lorem ipsum"）
- 专注于布局和信息结构，排除视觉细节
erd
erd（实体关系图）
- Entity boxes with attribute lists. Distinguish PK/FK
- Relationship lines: 1:1, 1:N, N:M notation. Auto-track on node drag
- Include relationship type legend
- 带有属性列表的实体框，区分主键(PK)/外键(FK)
- 关系线：1:1、1:N、N:M标记，节点拖动时自动跟踪
- 包含关系类型图例
flow
flow（流程图）
- Node types: Start/End (circle), Process (rectangle), Decision (diamond)
- Directional arrows. Auto-track on node drag
- Display branch conditions on connection lines
- 节点类型：开始/结束（圆形）、流程（矩形）、决策（菱形）
- 有向箭头，节点拖动时自动跟踪
- 在连接线上显示分支条件
chart
chart（数据图表）
- Auto-select appropriate chart type for the data (bar, line, pie, scatter, etc.)
- Axis labels + units, hover tooltips, legend
- Use Chart.js or D3.js
- 根据数据自动选择合适的图表类型（柱状图、折线图、饼图、散点图等）
- 坐标轴标签+单位、悬停提示框、图例
- 使用Chart.js或D3.js
slides
slides（演示文稿）
- Reveal.js CDN-based
- Slide transition animations
- Code block highlighting (highlight.js)
- Speaker notes support (toggle with S key)
- 基于Reveal.js CDN
- 幻灯片切换动画
- 代码块高亮（highlight.js）
- 支持演讲者备注（按S键切换）
arch
arch（架构图）
- Separate system components by layer/zone (Frontend / Backend / DB / External)
- Label communication lines with protocols (HTTP, gRPC, pub/sub, etc.)
- Zoom/pan support
- D3.js force-directed or direct SVG generation
- 按层/区域分离系统组件（前端/后端/数据库/外部系统）
- 在通信线上标注协议（HTTP、gRPC、pub/sub等）
- 支持缩放/平移
- 使用D3.js力导向图或直接生成SVG
dashboard
dashboard（仪表盘）
- Arrange multiple charts/metrics in grid layout
- KPI cards at the top (numbers + change rates)
- Cross-chart interaction: Click one → filter others
- 以网格布局排列多个图表/指标
- 顶部放置KPI卡片（数字+变化率）
- 跨图表交互：点击一个图表→过滤其他图表
timeline
timeline（时间线）
- Horizontal or vertical timeline
- Event nodes + date labels
- Zoom/scroll for period navigation
- Use Mermaid gantt or D3.js
- 水平或垂直时间线
- 事件节点+日期标签
- 支持缩放/滚动查看时间段
- 使用Mermaid甘特图或D3.js
mindmap
mindmap（思维导图）
- Radial expansion from center node
- Node collapse/expand
- Use Mermaid mindmap or direct SVG generation
- 从中心节点放射状展开
- 节点可折叠/展开
- 使用Mermaid思维导图或直接生成SVG
kanban
kanban（看板）
- Columns: TODO / In Progress / Done (customizable)
- Drag and drop cards between columns
- Display labels/tags on cards
- 列：待办/进行中/已完成（可自定义）
- 卡片可在列间拖拽
- 在卡片上显示标签
table
table（交互式数据表）
- Sort by clicking column headers (ascending/descending)
- Search/filter at the top
- Pagination or virtual scroll
- Cell highlight, row selection
- 点击列标题排序（升序/降序）
- 顶部提供搜索/过滤功能
- 分页或虚拟滚动
- 单元格高亮、行选择
Procedure
步骤
- Identify type + target. Ask if ambiguous. Read the file if a path is provided.
- Context gathering decision. Determine if project context is needed. If so, read relevant code/docs.
- Read . Review common principles, aesthetics, CDN, and error prevention rules.
references/common-rules.md - Read . Start from the base HTML template.
references/html-boilerplate.md - Generate HTML following the type-specific guide.
- Validate: Review the generated HTML.
- No smart quotes (curly quotes) in HTML attributes
- No unclosed tags
- No overlapping nodes/elements
- If issues found, fix and re-validate
- Instruct to .
open {filename}
- 确定类型+目标：如果有歧义请询问。如果提供了文件路径，请先读取文件。
- 判断是否需要收集上下文：确定是否需要项目上下文。如果需要，先读取相关代码/文档。
- 读取：查看通用原则、美学规范、CDN和错误预防规则。
references/common-rules.md - 读取：从基础HTML模板开始。
references/html-boilerplate.md - 根据类型特定指南生成HTML。
- 验证：检查生成的HTML。
- HTML属性中不使用智能引号（弯引号）
- 没有未闭合的标签
- 没有重叠的节点/元素
- 如果发现问题，修复后重新验证
- 提示执行。
open {filename}