Skill 詳細

html-to-image

Uses HTML/CSS to create image assets, not general HTML authoring.

一致度一致の可能性html 向けにレビュー済み

出典html2png/skills外部ソース

報告インストール数253人気度の参考値

使用前に確認

自動レビューは関連性のみを確認し、安全性や推奨を保証しません。使用前に出典の説明を読んでください。

skills.sh で見る（外部ページ）GitHub で SKILL.md を読む（外部ページ）

保存された出典プレビュー

SKILL.md

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
name: html-to-image
description: Generate crisp, high-quality images with perfect typography and precise geometric layouts using HTML/CSS. Use when creating social cards, diagrams, certificates, UI mockups, code screenshots, or any image requiring sharp text rendering, exact alignment, or vector-like precision. AI excels at designing symmetric, pixel-perfect layouts as HTML rather than generating raster images directly. Supports Tailwind CSS, Google Fonts, icon libraries, and any web-based design resource.
---

# HTML to Image API

Convert HTML/CSS to PNG, WebP, or PDF via `html2png.dev`.

## Endpoint

```
POST https://html2png.dev/api/convert
```

## Request

Send HTML as raw body or JSON:

```bash
curl -X POST "https://html2png.dev/api/convert?width=1200&height=630" \
  -H "Content-Type: text/html" \
  -d '<div style="padding: 40px;">Content</div>'
```

```bash
curl -X POST "https://html2png.dev/api/convert" \
  -H "Content-Type: application/json" \
  -d '{"html": "<div>...</div>", "width": 1200}'
```

## Parameters

| Parameter           | Type   | Default  | Description             |
| ------------------- | ------ | -------- | ----------------------- |
| `html`              | string | required | HTML content            |
| `width`             | int    | 1200     | Width in px             |
| `height`            | int    | 630      | Height in px            |
| `format`            | string | png      | png, webp, pdf          |
| `deviceScaleFactor` | float  | 2        | Retina scale (1-4)      |
| `delay`             | int    | 0        | Wait ms before capture  |
| `selector`          | string | body     | CSS selector to capture |
| `omitBackground`    | bool   | false    | Transparent bg          |
| `colorScheme`       | string | -        | light or dark           |
| `zoom`              | float  | 1        | Viewport zoom           |

## Response

```json
{
  "success": true,
  "url": "https://html2png.dev/api/blob/abc.png",
  "format": "png",
  "cached": false
}
```

## CDN Resources

Use these CDNs for high-quality designs:

**Tailwind CSS (preferred):**

```html
<script src="https://cdn.tailwindcss.com"></script>
```

**Google Fonts:**

```html
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
  rel="stylesheet"
/>
```

**Icons (use instead of inline SVGs):**

- Lucide: `https://unpkg.com/lucide@latest`
- Font Awesome: `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css`

**Images:**

- Unsplash: `https://images.unsplash.com/photo-xxx`
- Any direct image URL

## Example with Tailwind + Fonts + Icons

```html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/lucide@latest"></script>
  </head>
  <body
    class="bg-gradient-to-br from-purple-600 to-blue-600 flex items-center justify-center"
    style="width: 1200px; height: 630px; font-family: 'Inter', sans-serif;"
  >
    <div
      class="bg-white/10 backdrop-blur-lg rounded-2xl p-12 text-white text-center"
    >
      <i data-lucide="sparkles" class="w-16 h-16 mx-auto mb-4"></i>
      <h1 class="text-6xl font-extrabold mb-4">Hello World</h1>
      <p class="text-2xl opacity-90">Beautiful generated image</p>
    </div>
    <script>
      lucide.createIcons();
    </script>
  </body>
</html>
```

Request with delay for resources to load:

```bash
curl -X POST "https://html2png.dev/api/convert?width=1200&height=630&delay=1000&deviceScaleFactor=2" \
  -H "Content-Type: text/html" \
  -d '<!DOCTYPE html>...</html>'
```

## Key Tips

- Always use `deviceScaleFactor=2` or higher for quality
- Use `delay=1000-2000` when loading fonts/icons/images
- Any CSS works: grid, flex, transforms, filters, animations
- JavaScript executes (use delay for rendering)

## Website Screenshot

```
POST https://html2png.de

GitHub で全文を読む