将任何概念、想法或描述转换为精美的静态 HTML 视觉效果，然后将其导出为 PNG 或 SVG 图像。每当用户想要创建想法的视觉表示并需要图像文件输出（PNG 或 SVG）时，请使用此技能。这包括：信息图表、概念图、流程图、比较图表、流程视觉效果、教育图表、社交媒体图形、数据可视化、海报、卡片、徽章、图标、徽标草图或任何可以通过 HTML/CSS/SVG 而不是摄影 AI 生成来实现的“让我成为 X 的图像”请求。当用户拥有现有的 HTML 视觉效果并希望将其导出/转换为 PNG 或 SVG 时也会触发。触发短语包括：“创建图像”、“制作视觉效果”、“设计图形”、“导出为 PNG”、“另存为 SVG”、“概念转图像”、“将其转换为图像”、“截取此 HTML”、“生成信息图”或将概念描述与图像输出相结合的任何请求。
通过命令行快速安装 concept-to-image AI 技能到你的开发环境
来源：mathews-tom/praxis-skills。
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）时，请使用此技能。这包括：信息图表、概念图、流程图、比较图表、流程视觉效果、教育图表、社交媒体图形、数据可视化、海报、卡片、徽章、图标、徽标草图或任何可以通过 HTML/CSS/SVG 而不是摄影 AI 生成来实现的“让我成为 X 的图像”请求。当用户拥有现有的 HTML 视觉效果并希望将其导出/转换为 PNG 或 SVG 时也会触发。触发短语包括：“创建图像”、“制作视觉效果”、“设计图形”、“导出为 PNG”、“另存为 SVG”、“概念转图像”、“将其转换为图像”、“截取此 HTML”、“生成信息图”或将概念描述与图像输出相结合的任何请求。 来源：mathews-tom/praxis-skills。
为搜索与 AI 引用准备的稳定字段与命令。
npx skills add https://github.com/mathews-tom/praxis-skills --skill concept-to-image将任何概念、想法或描述转换为精美的静态 HTML 视觉效果，然后将其导出为 PNG 或 SVG 图像。每当用户想要创建想法的视觉表示并需要图像文件输出（PNG 或 SVG）时，请使用此技能。这包括：信息图表、概念图、流程图、比较图表、流程视觉效果、教育图表、社交媒体图形、数据可视化、海报、卡片、徽章、图标、徽标草图或任何可以通过 HTML/CSS/SVG 而不是摄影 AI 生成来实现的“让我成为 X 的图像”请求。当用户拥有现有的 HTML 视觉效果并希望将其导出/转换为 PNG 或 SVG 时也会触发。触发短语包括：“创建图像”、“制作视觉效果”、“设计图形”、“导出为 PNG”、“另存为 SVG”、“概念转图像”、“将其转换为图像”、“截取此 HTML”、“生成信息图”或将概念描述与图像输出相结合的任何请求。 来源：mathews-tom/praxis-skills。
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/mathews-tom/praxis-skills --skill concept-to-image 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
https://github.com/mathews-tom/praxis-skills