svg-illustrator

📁 zxhfighter/skills-hub 📅 3 days ago
4
总安装量
1
周安装量
#51216
全站排名
安装命令
npx skills add https://github.com/zxhfighter/skills-hub --skill svg-illustrator

Agent 安装分布

amp 1
opencode 1
kimi-cli 1
codex 1
github-copilot 1
claude-code 1

Skill 文档

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(这将导致它不渲染)。
  • ❌ 严禁使用复杂的外部滤镜,优先保证性能。