concept-to-image
CommunityConvert concepts into export-ready PNG or SVG.
AuthorMathews-Tom
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This skill turns conceptual descriptions and HTML visuals into polished, shareable image files so users can iterate visually and produce final PNG or SVG exports without relying on photographic AI generators.
Core Features & Use Cases
- Iterative HTML-first workflow: Generate a self-contained HTML/CSS/SVG artifact that can be refined before export.
- Pixel and vector exports: Use Playwright to produce high-quality PNG screenshots and extract a root SVG when available for true vector output.
- Use Case: Design a system architecture diagram as inline SVG inside a single HTML file, iterate on copy and colors, then export a retina-quality PNG for documentation or a clean SVG for scalable assets.
Quick Start
Produce a self-contained HTML visual with a .canvas element sized to 1200×630 and export it as a PNG using the provided Playwright-based render_to_image.py script.
Dependency Matrix
Required Modules
playwright
Components
scriptsreferencesassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: concept-to-image Download link: https://github.com/Mathews-Tom/praxis-skills/archive/main.zip#concept-to-image Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.