---

name: svg-ui-templates

description: Generate 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.

svg-ui-templates

Generate 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.

Star: 617
分类: 前端与设计
最近提交: 2026年3月12日

安装

将下方内容发给 Claude Code、Codex 或 Cursor。智能体先检查 Skill 内容，经你确认后安装。

读取 https://funcoding.ai/skills/xjtulyc/medgeclaw/svg-ui-templates/install.md ，按里面的步骤帮我安装这个 Skill。

Star 趋势对比

近 7 天: 0
近 30 天: 0

618

2026年2月24日2026年11月8日

Star 趋势
2026年2月24日	4
2026年7月16日	604
2026年7月22日	607
2026年7月28日	608
2026年8月3日	609
2026年8月9日	610
2026年8月15日	610
2026年8月21日	610
2026年8月27日	611
2026年9月2日	612
2026年9月8日	613
2026年9月14日	613
2026年9月20日	613
2026年9月26日	614
2026年10月2日	616
2026年10月8日	617
2026年10月14日	618
2026年10月20日	618
2026年10月26日	618
2026年11月1日	617
2026年11月7日	616
2026年11月8日	617

来源仓库

xjtulyc/MedgeClaw

Open-source AI research assistant for biomedicine — chat to run RNA-seq, drug discovery, clinical analysis, and more. Built on Claude Code with 140 K-Dense scientific skills, real-time dashboard, and RStudio/JupyterLab integration. | 开源生物医学 AI 研究助手，对话即可驱动转录组、药物发现、临床分析等工作流，集成 140 个科学技能与实时研究看板。

在 GitHub 上查看项目主页

README 徽章

仓库作者可以把它放进 README。

同仓库的其他 Skill6

查看全部

skills/svg-ui-templates/SKILL.md

SVG UI Templates

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 viewBox height 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-card skill 将图片嵌入飞书交互式卡片，实现图文混排汇报。参见 ../feishu-rich-card/SKILL.md。