Creates polished visuals from concepts using HTML/CSS/SVG as a refineable intermediate, then exports to PNG or SVG.
| references/design-guide.md | Design patterns, anti-patterns, color palettes, typography choices, layout examples | | scripts/rendertoimage.py | Playwright-based export script — takes HTML in, PNG or SVG out | | assets/template.html | Base HTML template with .canvas container and CSS custom properties pre-configured |
HTML is the refineable layer between idea and image. Unlike direct canvas rendering, the user can see the HTML artifact, request changes ("make the title bigger", "swap the colors", "add a third column"), and only export once satisfied. This makes the workflow iterative and controllable.
コンセプト、アイデア、説明を洗練された静的 HTML ビジュアルに変換し、PNG または SVG 画像としてエクスポートします。ユーザーがアイデアの視覚的表現を作成する必要があり、画像ファイル出力 (PNG または SVG) が必要な場合は、このスキルを使用します。これには、インフォグラフィック、概念図、フローチャート、比較チャート、プロセス ビジュアル、教育図、ソーシャル メディア グラフィック、データ ビジュアライゼーション、ポスター、カード、バッジ、アイコン、ロゴ スケッチ、または写真 AI 生成ではなく HTML/CSS/SVG で実現できる「X のイメージを作成してください」リクエストが含まれます。また、ユーザーが既存の HTML ビジュアルを持っていて、それを PNG または SVG にエクスポート/変換したい場合にもトリガーされます。トリガー フレーズには、「イメージを作成する」、「ビジュアルを作成する」、「グラフィックをデザインする」、「PNG としてエクスポート」、「SVG として保存」、「コンセプトをイメージに」、「これをイメージに変換する」、「この HTML をスクリーンショットする」、「インフォグラフィックを生成する」、またはコンセプトの説明とイメージ出力を組み合わせたリクエストが含まれます。 ソース: mathews-tom/praxis-skills。