concept-to-image

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). Сюда входят: инфографика, концептуальные диаграммы, блок-схемы, сравнительные диаграммы, визуальные эффекты процессов, образовательные диаграммы, графика для социальных сетей, визуализация данных, плакаты, карточки, значки, значки, эскизы логотипов или любой запрос «сделай мне изображение X», который может быть достигнут с помощью HTML/CSS/SVG, а не с помощью фотографического искусственного интеллекта. Также срабатывает, когда у пользователя есть существующий визуальный элемент HTML и он хочет экспортировать/преобразовать его в PNG или SVG. Триггерные фразы включают в себя: «создать изображение», «создать визуальное изображение», «создать графику», «экспортировать в формате PNG», «сохранить как SVG», «концепцию в изображение», «превратить это в изображение», «сделать снимок экрана этого HTML», «создать инфографику» или любой запрос, сочетающий описание концепции с выводом изображения. Источник: mathews-tom/praxis-skills.