Tools

Page2img

Name: Page2img
Rating: 3.5 (1 reviews)
Author: laosuan

By laosuan 👁 12 views ▲ 0 votes

Turn any document into a beautiful mobile-friendly webpage with HD long screenshot. AI agent plugin for Claude Code, OpenCode, and OpenClaw.

Homepage GitHub

Install

npm install github:laosuan/page2img#main

Configuration Example

{
  "plugins": ["github:laosuan/page2img#main"]
}

README

# page2img

Turn any document into a beautiful mobile-friendly webpage with HD long screenshot.

AI agent plugin for **Claude Code**, **OpenCode**, and **OpenClaw**.

## What it does

1. Read any file or content (markdown, text, structured data)
2. Generate a mobile-optimized HTML page with your chosen design style
3. Capture a high-resolution (3x retina) full-page screenshot
4. Output both `index.html` and `screenshot-hd.png`

## Design Styles

| Style | Description |
|-------|-------------|
| **mckinsey** | Deep blue + gold, Georgia serif, numbered sections, consulting report (default) |
| **minimal** | Clean white, system fonts, generous whitespace |
| **dark-tech** | Dark background, monospace headings, cyan/green accents |
| **academic** | Cream paper, Times New Roman, footnote-style |
| **startup** | Gradient hero, Inter font, card-based, modern SaaS |

## Installation

### Claude Code

```bash
claude plugin marketplace add laosuan/page2img
claude plugin install page2img@page2img
```

Then use `/page2img` in any conversation.

### OpenCode

Add to your `opencode.json`:
```json
{
  "plugins": ["github:laosuan/page2img#main"]
}
```

### OpenClaw

```bash
npm install github:laosuan/page2img#main
```

## Usage

```
/page2img report.md --style mckinsey
```

Or just tell your agent:
> "Turn this file into a beautiful webpage with a McKinsey style and take a screenshot"

## Requirements

- Chrome or Chromium (for screenshots)
- No API keys, no server, fully offline

## Project Structure

```
page2img/
├── claude-plugin/        # Claude Code plugin (hooks + skills)
├── opencode-plugin/      # OpenCode plugin (TypeScript SDK)
├── openclaw-plugin/      # OpenClaw plugin (extension)
├── site/                 # Marketing site (GitHub Pages)
└── README.md
```

## License

MIT

tools