htmllisted
Install: claude install-skill chengxuniucode/ForgeTeam
# HTML Prototype Skill
## 目标
在 propose → plan 之间插入**可视化确认**环节：将需求规格转化为可在浏览器中直接打开的静态 HTML 原型，让用户通过视觉和交互确认功能设计，消除文本描述的理解偏差。
## 核心原则
1. **零依赖** — 纯 HTML + CSS + 内联 JS，无需安装任何工具，直接浏览器打开
2. **快速迭代** — 原型生成速度优先于视觉完美度
3. **交互可感知** — 关键交互用 JS 模拟（点击、切换、表单验证提示），让用户"感受"流程
4. **一次性产物** — 原型是确认工具，不是最终代码；确认后进入正式开发阶段
## 执行步骤
### Step 1: 读取需求规格
从 `specs/active/` 读取 propose 阶段产出的需求文档，提取：
| 提取项 | 说明 |
|--------|------|
| 页面列表 | 需要展示哪些页面/视图 |
| 核心交互 | 按钮点击、表单提交、导航跳转、状态切换 |
| 数据展示 | 列表、表格、卡片、详情等数据呈现方式 |
| 用户流程 | 关键操作路径（如：登录 → 列表 → 详情 → 编辑 → 提交） |
| 约束条件 | 终端类型（PC/移动端）、风格偏好 |
### Step 2: 生成原型结构
创建 `prototype/{feature}/` 目录：
```
prototype/{feature}/
├── index.html # 入口页（含导航到各页面）
├── pages/
│ ├── page-1.html # 各功能页面
│ ├── page-2.html
│ └── ...
└── README.md # 原型说明（如何查看、反馈方式）
```
### Step 3: 编写 HTML 原型
**技术要求：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{页面标题} - 原型预览</title>
<style>
/* 内联 CSS，不依赖外部文件 */
/* 使用系统字体栈 */
/* 响应式基础布局 */
</style>
</head>
<body>
<!-- 顶部提示条：这是原型 -->
<div class="prototype-banner">
⚠️ 这是功能原型，用于确认交互和布局，非最终视觉效果
</div>
<!-- 页面内容 -->
<script>
// 内联 JS：模拟交互
</script>
</body>
</html>
```
**视觉风格：**
- 使用简洁的线框风格，重功能布局而非视觉装饰
- 颜色：主色 `#2563eb`、成功 `#16a34a`、警告 `#f59e0b`、错误 `#dc2626`、背景 `#f8fafc`
- 圆角、阴影适度，体现层级关系
- 表单控件使用浏览器原生样式 + 轻微美化
**交互模拟：**
| 交互类型 | 模拟方式 |
|----------|---------|
| 页面跳转 |