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.