SVG Design System — Design skill for Claude Code

SVG Design System Skill

[English README](README.en.md)

      

**一个用于生成有真实信息层级的 SVG 图表视觉设计系统。**

`svg-design-system` 是一个同时支持 Codex 和 Claude Code 的 SVG 图表设计系统 Skill。它面向文章可视化、产品分析、业务流程、系统架构、项目汇报和飞书/Lark 文档画板场景，帮助 Agent 生成有信息层级、有统一视觉规则、且可复用的 SVG 图。

这个仓库包含 `LICENSE` 文件。重要变更记录见 [`CHANGELOG.md`](CHANGELOG.md)。

---

版本更新摘要

版本	重点	更新内容
v1.0	SVG 图表设计系统首版	新增核心 Skill 指令、10 组三色命名配色、设计 token、7 类图表生成配方、示例 SVG 卡片、飞书/Lark 画板安全上传流程、独立中英文 README 和 SVG 示例画廊。

---

可选前置条件：飞书/Lark 画板工具

普通 SVG 生成不需要额外依赖；Agent 可以直接在对话中产出 SVG，或在工作区写入 `.svg` 文件。

如果需要把图上传到飞书/Lark 文档画板，建议先检查：

lark-cli --version
lark-cli auth status
npx -y @larksuite/whiteboard-cli@^0.2.11 -v

当飞书/Lark 权限或工具不可用时，Skill 仍然可以生成 board-safe SVG，并列出后续上传步骤。

---

给 AI Agent 的快速安装

把下面这句话发给 Codex 或 Claude Code，让 Agent 自动完成安装或更新：

帮我安装这个 skill：[VioletScar-Hui/Svg-design-system](https://github.com/VioletScar-Hui/Svg-design-system)

如果需要手动执行，或 Agent 需要直接运行命令，可以使用下面的安装脚本。

Codex:

$repoPath = "$env:USERPROFILE\.codex\skill-repos\Svg-design-system"
$skillPath = "$env:USERPROFILE\.codex\skills\svg-design-system"
if (Test-Path $repoPath) {
  Set-Location $repoPath
  git pull
} else {
  git clone https://github.com/VioletScar-Hui/Svg-design-system.git $repoPath
}
New-Item -ItemType Directory -Force $skillPath | Out-Null
Copy-Item -Path "$repoPath\svg-design-system\*" -Destination $skillPath -Recurse -Force

Claude Code:

$repoPath = "$env:USERPROFIL