html-to-image
✓HTML/CSS を使用して、完璧なタイポグラフィーと正確な幾何学的なレイアウトを備えた鮮明で高品質の画像を生成します。ソーシャル カード、図、証明書、UI モックアップ、コード スクリーンショット、または鮮明なテキスト レンダリング、正確な配置、ベクトルのような精度が必要な画像を作成するときに使用します。 AI は、ラスター イメージを直接生成するよりも、対称的でピクセル完璧なレイアウトを HTML として設計することに優れています。 Tailwind CSS、Google Fonts、アイコン ライブラリ、およびあらゆる Web ベースのデザイン リソースをサポートします。
インストール
SKILL.md
| 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 |
HTML/CSS を使用して、完璧なタイポグラフィーと正確な幾何学的なレイアウトを備えた鮮明で高品質の画像を生成します。ソーシャル カード、図、証明書、UI モックアップ、コード スクリーンショット、または鮮明なテキスト レンダリング、正確な配置、ベクトルのような精度が必要な画像を作成するときに使用します。 AI は、ラスター イメージを直接生成するよりも、対称的でピクセル完璧なレイアウトを HTML として設計することに優れています。 Tailwind CSS、Google Fonts、アイコン ライブラリ、およびあらゆる Web ベースのデザイン リソースをサポートします。 ソース: html2png/skills。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/html2png/skills --skill html-to-image- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
html-to-image とは？
HTML/CSS を使用して、完璧なタイポグラフィーと正確な幾何学的なレイアウトを備えた鮮明で高品質の画像を生成します。ソーシャル カード、図、証明書、UI モックアップ、コード スクリーンショット、または鮮明なテキスト レンダリング、正確な配置、ベクトルのような精度が必要な画像を作成するときに使用します。 AI は、ラスター イメージを直接生成するよりも、対称的でピクセル完璧なレイアウトを HTML として設計することに優れています。 Tailwind CSS、Google Fonts、アイコン ライブラリ、およびあらゆる Web ベースのデザイン リソースをサポートします。 ソース: html2png/skills。
html-to-image のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/html2png/skills --skill html-to-image インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/html2png/skills
詳細
- カテゴリ
- *クリエイティブ
- ソース
- skills.sh
- 初回登録
- 2026-02-01