// **确保使用此技能** 当用户需要「生成HTML原型」「创建可分享原型」「需求转原型页面」「复刻已有页面为原型」「/htmlproto」或任何涉及生成轻量级HTML原型页面的请求时。特别适用于需要与 kt-agent-framework 管理后台风格一致的原型，以及需要在已有页面上新增功能的场景。 本技能生成独立HTML文件，风格与实际项目页面一致，可直接在浏览器打开分享，无需构建工具。 **触发关键词**: 生成原型、创建原型、需求转原型、复刻页面、原型页面、/htmlproto、改造原型、页面原型、HTML原型
[HINT] Download the complete skill directory including SKILL.md and all related files
| name | html-prototype-generator |
| description | **确保使用此技能** 当用户需要「生成HTML原型」「创建可分享原型」「需求转原型页面」「复刻已有页面为原型」「/htmlproto」或任何涉及生成轻量级HTML原型页面的请求时。特别适用于需要与 kt-agent-framework 管理后台风格一致的原型，以及需要在已有页面上新增功能的场景。 本技能生成独立HTML文件，风格与实际项目页面一致，可直接在浏览器打开分享，无需构建工具。 **触发关键词**: 生成原型、创建原型、需求转原型、复刻页面、原型页面、/htmlproto、改造原型、页面原型、HTML原型 |
生成与 kt-agent-framework 管理后台风格一致的独立HTML原型页面。产物为单个HTML文件，可直接在浏览器打开，方便分享。
三种工作模式：
原型的核心价值是「与真实页面尽可能一致」。以下是必须遵守的设计规范：
| 用途 | 色值 | 背景色 |
|---|---|---|
| Primary | #3e8dff | #d6e7ff |
| Success | #00e5c7 | #effffb |
| Danger | #ff8b78 | #fff5f3 |
| Warning | #ffb71d | #fff2d6 |
| Default | #bfc6d1 | #f5f6f9 |
| Ant Blue | #1890ff | - |
每个列表页遵循：筛选栏 + 操作按钮 + 表格 + 抽屉 模式，对应项目的 tl 布局系统。
详细组件规范见 docs/design-guide.md。
| 用户意图 | 模式 | 第一步 |
|---|---|---|
| 提到已有页面路径、复制页面、在现有页面上加功能 | 复刻模式 | 读取 .vue 源文件 |
| 提到需求文档、新建页面 | 需求模式 | 读取需求文档 |
| 提到调整已有原型 | 对话模式 | 读取原型HTML |
D:\workspace\Document\input\kt-agent-framework\admin_frontend\src\pages\ 中搜索）data.ts、子组件.vue → HTML 映射规则：
<tl> → 整个页面容器<tl-main> → 主内容区（flex: 1, overflow auto）<tl-filter> → 筛选区卡片<tl-filter-left> → 筛选区内容（flex wrap）<yc-form v-bind="searchVBind" /> → 根据 searchSchema 生成筛选字段<tl-table> → 表格卡片容器（白色背景 + 圆角 + shadow）<a-table> → Ant Design 表格（HTML版）<tl-drawer> → 右侧抽屉<action-group> → 操作按钮组（a-space + link buttons）<yc-status> → 状态标签（使用项目配色，带圆点/背景色）useDrawer → JS 控制抽屉开关（openDrawer/closeDrawer）useTable → 静态表格数据 + 分页hasButtonPerm() → 移除权限判断，直接展示按钮| 序号 | 页面名称 | 页面类型 | 功能描述 | 优先级 |
|---|
生成前检查现有页面：
.dev/prototype/ 目录查找现有原型每个页面调用 scripts/generate_page.py 生成：
python scripts/generate_page.py --input '{
"page_name": "角色列表",
"page_type": "list",
"scenario": "clone",
"source_vue": "src/pages/role/index.vue",
"output_path": ".dev/prototype",
"clarification": {
"layout": {},
"data": {},
"interactions": {},
"modifications": "新增启用/禁用开关列"
}
}'
多页面使用批量生成：
python scripts/batch_generate.py --config pages.json
输出目录： .dev/prototype/
命名规则：
prototype-{YYYYMMDD}-{页面名称}.htmlprototype-{YYYYMMDD}-{页面名称}-v{N}.html页面结构：
display:none / JavaScript 控制显示隐藏| 类型 | 说明 | 典型组件 |
|---|---|---|
| list | 列表页 | 筛选区、表格、分页、操作按钮、抽屉 |
| form | 表单页 | 表单字段、提交/取消 |
| detail | 详情页 | 信息分组、描述列表 |
| dashboard | 仪表盘 | 统计卡片、图表、快捷入口 |
antd.min.css CDNdocs/design-guide.md — 完整设计规范和组件HTML示例docs/output-format.md — HTML输出格式详细规范scripts/generate_page.py — 单页面生成scripts/batch_generate.py — 多页面批量生成scripts/clone_page.py — .vue 文件结构提取项目前端源码参考： D:\workspace\Document\input\kt-agent-framework\admin_frontend\src\
.dev/prototype/