# Photo Homework A4

> 将用户拍照上传的手写作业清单照片识别、整理，并生成一页 A4 纸即可打印的精美 HTML 作业清单页面（含科目卡片、分类标签、统计条、学生/家长签名区）。当用户上传作业照片并要求"识别作业/整理作业/做作业清单/生成可打印的作业单"时使用本技能。触发词：作业照片、拍照作业、作业清单、作业单、A4打印作业。

- Skill: `wwwzhouhui/photo-homework-a4` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add wwwzhouhui/photo-homework-a4`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wwwzhouhui/photo-homework-a4/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: wwwzhouhui (https://skillmd.com/u/wwwzhouhui)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/wwwzhouhui/photo-homework-a4

---


# Photo Homework A4（拍照作业 → A4 打印清单）

## Overview

本技能将手写作业清单照片转化为一份版面固定的 A4 单页 HTML 作业清单。核心资产是 `assets/homework-a4-template.html` 模板文件：复制模板 → 填入识别结果 → 交付，无需每次重新设计版式。

## 工作流程

### 第 1 步：识别照片内容

- 使用 Read 工具读取用户上传的作业照片，逐条识别手写内容。
- 按科目分组（常见科目：语文、数学、英语、物理、化学、历史、生物、政治、地理等）。
- 识别不确定的字迹时，结合上下文推断（如"群内/群中材料"是常见表述），并在交付时提醒用户核对存疑条目。
- 提取日期信息：优先从照片或用户消息中获得日期；无法获得时使用当天日期。

### 第 2 步：给作业项分类打标

每项作业归入以下类别之一，并使用对应标签（标签样式已内置于模板 CSS）：

| 类别 | 标签 class | 颜色 | 判断标准 |
|------|-----------|------|---------|
| 背诵类 | `tag-recite` | 橙色 | 含"背""朗读""默写"等 |
| 书面类 | `tag-write` | 蓝色 | 书面练习、练习册、试卷；"阅读"用 `tag-read`（青色） |
| 材料类 | `tag-material` | 绿色 | "群内材料""材料纸""群中材料"等 |

### 第 3 步：基于模板生成 HTML

1. 复制 `assets/homework-a4-template.html` 到工作区，命名为 `作业清单-A4打印版.html`（或含日期的名称）。
2. 替换模板中所有 `{占位符}`：
   - 页眉日期与星期。
   - 概览统计条 5 个数字：科目数、作业总数、背诵类、书面类、材料类（"阅读"并入书面类计数）。
   - 每个科目一张 `.subject` 卡片，替换示例卡片并按科目数量增删；`subject-count` 填该科作业项数。
   - 底部温馨提示中的分类数量。
3. **配色板**（每个科目一套 `--accent` 主题色 + `--accent-bg` 浅色底，科目重复时循环取色）：
   - 蓝 `#4f6ef7` / `#e8f0fe`、绿 `#2fbf9b` / `#e6f7f1`、紫 `#9b59f5` / `#f3ebfe`
   - 橙 `#e67e22` / `#fdf0e0`、红 `#c0392b` / `#fbe9e7`、青 `#16a085` / `#e0f5f1`
4. **科目图标**：物理🧪 数学📐 化学⚗️ 英语🔤 历史🏛️ 语文📖 生物🧬 地理🌏 政治⚖️。
5. 完成后删除模板中多余示例卡片与 HTML 注释。

### 第 4 步：版面约束（必须遵守，保证一页 A4）

- `@page { size: A4 portrait; margin: 0; }` 与 `.page { width: 210mm; min-height: 296mm; }` 不可改动。
- 科目 ≤ 6 个：保持双列网格与默认字号（作业项 10.5pt）。
- 科目 7-8 个或单项作业过长时：将 `.grid` gap 收窄至 3mm、作业项字号降至 9.5-10pt、li padding 降至 1.2mm。
- 内容极端多时允许将 `.grid` 改为单列，但必须确保总高度 ≤ 297mm。
- 生成后自查：总页高不超过一页；每张卡片 `page-break-inside: avoid` 已内置，勿删除。

### 第 5 步：交付

- 用 present_files 展示生成的 HTML 文件，并在回复中告知打印方法：`Ctrl + P`，纸张 A4、纵向、边距"无/默认"。
- 回复中附一份简明的作业内容表格（科目 → 条目），便于用户直接核对识别结果。

### 可选扩展：交互打卡版

若用户未明确只要打印版，可额外生成一个屏幕交互版（点击打勾 + 进度条，用 localStorage 或内存状态实现）。交互版不做 A4 尺寸约束，可使用渐变背景、卡片阴影等更丰富的视觉。两个版本内容必须一致。

## Resources

### assets/
- `homework-a4-template.html` — A4 单页打印版完整模板。所有版式、CSS、签名区、统计条均已定型，只需替换 `{占位符}` 内容与增删科目卡片。**不要凭空重写版式，一律基于此模板修改。**