# Page Gen

> Generate an academic paper project webpage from PDF using parse_paper, match_template, render_html, review_html_visual, and extract_table_html.

- Skill: `zhihaoairobotic/page-gen` (Agent Skill)
- Install (CLI): `npx skillmds@latest add zhihaoairobotic/page-gen`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zhihaoairobotic/page-gen/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Docs & Writing
- Author: zhihaoairobotic (https://skillmd.com/u/zhihaoairobotic)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/zhihaoairobotic/page-gen

---


# Academic Page Generation

Turn a paper PDF into a polished HTML project page with iterative visual refinement.

## Available Tools

| Tool | Purpose |
|---|---|
| `parse_paper` | Parse PDF into markdown (pymupdf4llm) + extract complete figures with captions as screenshots |
| `match_template` | Rank page templates by style preferences (reads tags.json) |
| `render_html` | Render local HTML into PNG screenshot (Playwright) |
| `review_html_visual` | Vision-based review of rendered screenshot |
| `extract_table_html` | Convert table image to semantic HTML table |

## Workflow (follow in order)

### Step 1 - Parse

Call `parse_paper` with the user PDF path.

- The tool returns `markdown_path` and a `figures` array.
- Each figure has: `num` (Figure number), `caption` (full caption text from the paper), and `path` (high-res screenshot of the complete figure region).
- Read the markdown file to understand the paper content.
- The figures are **page-rendered crops** that exactly match what you see in the PDF — not raw embedded bitmaps.

### Step 2 - Plan content

From parsed markdown:

1. Remove references section.
2. Keep only figures/tables that support understanding of method/results.
3. Produce section plan:
   - `title`
   - `authors`
   - `affiliation`
   - dynamic sections based on paper content
4. Generate concise, web-first content for each section.

### Step 3 - Select template

Call `match_template` with the user's style preferences (or defaults).

The tool returns ranked template candidates with paths. **You MUST use these templates.**

### Step 4 - Read template and generate HTML

**CRITICAL: Do NOT write HTML/CSS from scratch. You MUST base your page on the selected template.**

1. Read the top-ranked template's `index.html` using `read_file` to understand its full structure.
2. Read the template's CSS file(s) (usually in `assets/` subfolder) to understand its styling.
3. Copy the template directory structure into the output folder:
   - Copy CSS/JS/font files from the template to the output folder.
   - Copy figure images from `figures_dir` (returned by parse_paper) into the output folder.
4. Generate a new `index.html` that:
   - **Reuses the template's HTML structure** (header, nav, sections, footer layout).
   - **References the same CSS file(s)** — do NOT inline CSS.
   - Fills in the paper content (title, authors, abstract, method, results, figures).
   - For each figure, use the `caption` from parse_paper output and set `<img src>` to the figure file.
   - Updates image `src` paths to use relative paths.
   - Keeps all media paths relative.

### Step 5 - Visual review loop (max 2 rounds)

1. Call `render_html` on generated page.
2. Call `review_html_visual` on screenshot.
3. Apply targeted revisions from review.
4. Repeat if necessary, max 2 rounds.

### Step 6 - Table replacement

If table images are present:

1. Call `extract_table_html` per table image.
2. Replace corresponding `<img ...>` with generated `<table>...</table>`.
3. Re-render once to confirm final visual quality.

### Step 7 - Human feedback

Ask user for final adjustments. If feedback is provided:

1. Apply requested edits.
2. Re-render and confirm.

## Important Rules

- **NEVER generate HTML/CSS from scratch.** Always base the page on a real template.
- Keep all outputs under workspace paths.
- Never destroy existing template files; write to a new project output folder.
- Use simple, robust HTML/CSS changes over risky rewrites.
- Prefer readability and information hierarchy over flashy layout.