將任何概念、想法或描述轉換為精美的靜態 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