mcpField
S
svg-illustrator

svg-illustrator

github.com/zxhfighter创意与媒体047 次安装35 周前更新
代码仓库

关于 svg-illustrator

svg-illustrator 是一项使用原生 SVG 将文字概念转化为视觉插画的技能,适用于文档与 Markdown 内容创作。它提供三种视觉风格,并强调嵌入式呈现、响应式尺寸和图形布局规范。

主要功能

  1. 01将概念转化为 SVG 插画
  2. 02提供三种视觉设计哲学
  3. 03插入 Markdown 文档
  4. 04响应式 viewBox 尺寸建议
  5. 05强调标注与图形间距

适用场景

  1. 01为架构图和技术文档制作插画
  2. 02为生活感悟内容设计极简图像
  3. 03呈现投资或成长趋势概念

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/zxhfighter/skills-hub --skill svg-illustrator

安装后在 Claude Code 中输入/svg-illustrator确认已加载。

详细介绍

来自项目 README

SVG Illustrator Skill

核心使命

通过原生 SVG 技术,将抽象的文字概念转化为具有高度审美价值的视觉艺术。生成的作品应直接嵌入 Markdown,无需外部文件,且具备极致的超清渲染效果。

视觉哲学 (Visual Philosophies)

创作时必须遵循以下三大哲学之一,或根据需求进行融合:

1. Systemic Vision (系统化视野)
  • 适用场景:架构图、技术文档、复杂系统分析。
  • 视觉特征:深色背景网格、极细的逻辑线、高亮的发光节点。
  • 颜色:深灰/黑背景,荧光蓝/金/白线条。
2. Warm Minimalist (温暖极简主义)
  • 适用场景:生活感悟、治愈系内容、极简笔记。
  • 视觉特征:柔和的有机线条、大面积留白、温暖的莫兰迪色调。
  • 颜色:奶油白、麦芽色、陶土红、森林绿。
3. Geometric Growth (几何增长)
  • 适用场景:投资理财、自我成长、复利模型、趋势分析。
  • 视觉特征:分形几何、斐波那契螺旋、水平积蓄与垂直喷发的对比。
  • 颜色:沉稳的炭灰底色,活泼的翡翠绿/日落金渐变。

工作规范

1. 渲染兼容性 (Critical)
  • 禁用 Callout 包裹:绝对不要将 <svg> 代码包裹在 > [!info] 等引用块中,否则在 Obsidian 中可能无法渲染。
  • 独立段落:SVG 代码块前后必须保留至少一个空行。
  • 响应式尺寸:通常使用 viewBox="0 0 800 300",确保在不同屏幕上等比例缩放。
2. 设计规范
  • 禁止重叠:确保所有图形、文字标签有足够的呼吸空间。
  • 临床级标注:使用极细的等宽字体(monospace)添加微小的技术标签,提升“专家级手感”。
  • 动画增强:适当使用 SMIL 动画(如 <animate>)为核心节点添加微弱的脉冲或流动效果。

执行步骤

  1. 意图识别:阅读用户提供的文档或概念,确定其核心灵魂。
  2. 选择哲学:匹配最合适的视觉哲学,并告知用户你的设计逻辑。
  3. 编写代码:直接在文档对应位置插入 <svg> 代码。
  4. 添加释义:在插画下方添加简短、有深度的“寓意解说”。

禁止行为

  • ❌ 严禁生成低质量、卡通化、业余美感的图标。
  • ❌ 严禁在代码块中展示 SVG(这将导致它不渲染)。
  • ❌ 严禁使用复杂的外部滤镜,优先保证性能。

评论

支持 Markdown