html

Files (1)

• SKILL.md

SKILL.md (first lines)

# 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`
- 圆角、阴影适度，体现层级关系
- 表单控件使用浏览器原生样式 + 轻微美化

**交互模拟：**

| 交互类型 | 模拟方式 |
|----------|---------|
| 页面跳转 | 真实 `<a href>` 链接到其他 HTML 文件 |
| Tab 切换 | JS 控制显示/隐藏对应内容区 |
| 表单提交 | 点击后显示成功提示，不真实发送 |
| 列表操作 | 使用 Mock 数据填充，删除/编辑用弹窗模拟 |
| 弹窗/抽屉 | JS 控制 display 切换 |
| 加载状态 | 点击后短暂显示 loading 再展示结果 |
| 表单验证 | 简单的必填 + 格式校验提示 |

### Step 4: 生成原型说明

创建 `prototype/{feature}/README.md`：

```markdown
# {Feature} 原型说明

## 查看方式

直接在浏览器中打开 `index.html` 即可预览。

## 页面清单

| 页面 | 文件 | 功能说明 |
|------|------|---------|
| 首页/入口 | index.html | {说明} |
| {页面名} | pages/{name}.html | {说明} |

## 可交互的元素

- {列出哪些按钮/表单/导航可以点击操作}

## 确认要点

请重点确认以下内容：
1. 页面布局是否符合预期？
2. 操作流程是否顺畅？

From chengxuniucode/ForgeTeam, MIT.

More from chengxuniucode/ForgeTeam