SVG UI Templates
SkillMediaGenerate professional SVG UI panels for structured information display. Use when presenting lists, task checklists, pipeline/dependency status diagrams, or rich-text report layouts as SVG images. Covers four templates - list-panel, checklist-panel, pipeline-status, richtext-layout. Style is professional, business-oriented, academic-grade with Material Design color palette.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the SVG UI Templates skill
What this skill tells your AI
The instructions your AI receives, as published by zaoqu-liu/scienceclaw in skills/medge-svg-ui-templates/SKILL.md and read by ahel’s review.
Generate professional-grade SVG information panels optimized for horizontal (landscape) display.
Templates
| Template | File | Use Case |
|---|---|---|
| list-panel | assets/list-panel.svg | 数据表格、参数列表、对比表 |
| checklist-panel | assets/checklist-panel.svg | 任务清单、进度追踪、TODO |
| pipeline-status | assets/pipeline-status.svg | 流程依赖图、阶段状态、里程碑 |
| richtext-layout | assets/richtext-layout.svg | 图文混排、报告摘要、数据简报 |
Workflow
- Read the appropriate template SVG from
assets/ - Replace
{{PLACEHOLDER}}tokens with actual content - Adjust row count / node count by duplicating elements with y-offset
- Adjust
viewBoxheight if content exceeds default - Save final SVG → convert to PNG with cairosvg for messaging platforms
For detailed placeholder lists, color system, and extension methods: read references/template-guide.md
Key Rules
- viewBox width = 1200 (landscape, ~16:9). Adjust height as needed.
- Font stack:
'Inter','Helvetica Neue','Microsoft YaHei',sans-serif— never change order. - Status colors: Green=#43A047, Amber=#FF8F00, Grey=#90A4AE, Red=#E53935
- Shadow filter on all cards:
filter="url(#cardShadow)"or equivalent id. - Row spacing: duplicate row blocks with +56px (list) or +60px (checklist) y-offset.
- PNG conversion:
python3 -c "import cairosvg; cairosvg.svg2png(url='in.svg', write_to='out.png', output_width=2400)" - When sending via Feishu/WeChat, always convert to PNG first (SVG not rendered inline).
- 飞书图文卡片集成: 生成 PNG 后，使用
feishu-rich-cardskill 将图片嵌入飞书交互式卡片，实现图文混排汇报。参见../feishu-rich-card/SKILL.md。
Signals
- GitHub stars
- 60
- Forks
- 14
- Last commit
- Mar 2026
Advanced
- Catalog kind
- skill
- Gateway key
svg-ui-templates- Source
- github.com/zaoqu-liu/scienceclaw