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.