重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
npx skills add https://github.com/somtougeh/dotfiles --skill technical-svg-diagrams<quick_start>
references/svg-patterns.md 以获取模板和配色方案agent-browser)或 WebP(通过 cairosvg)</quick_start><design_system>
| 用途 | 颜色 | 十六进制码 |
|---|---|---|
| 背景 | 浅灰色 | #fafafa |
| 网格线 | 柔和灰色 | #e5e5e5 |
| 主要文本 | 深灰色 | #333 |
| 次要文本 | 中灰色 | #666 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 弱化文本 | 浅灰色 | #999 |
| 边框/箭头 | 灰色 | #ccc |
| 成功/积极 | 绿色 | #27ae60 |
| 错误/消极 | 红色 | #e74c3c |
| 主要强调色 | 蓝色 | #3498db |
| 警告/沙箱 | 橙色 | #f39c12 |
| 流程步骤 | 紫色 | #9b59b6 |
monospace[ LIKE_THIS ]网格背景:
<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="#e5e5e5" stroke-width="0.5"/>
</pattern>
箭头标记:
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<path d="M0,0 L0,6 L9,3 z" fill="#ccc"/>
</marker>
节点(带内点的圆):
<circle cx="X" cy="Y" r="35" fill="none" stroke="#ccc" stroke-width="2"/>
<circle cx="X" cy="Y" r="18" fill="#COLOR"/>
方形容器:
<rect x="X" y="Y" width="W" height="H" fill="none" stroke="#ccc" stroke-width="2"/>
虚线容器(沙箱/隔离):
<rect x="X" y="Y" width="W" height="H" fill="none" stroke="#f39c12" stroke-width="2" stroke-dasharray="5,3"/>
标签框:
<rect x="X" y="Y" width="W" height="H" fill="none" stroke="#ccc" stroke-width="1"/>
<text x="CX" y="CY" font-family="monospace" font-size="11" fill="#666" text-anchor="middle">LABEL_NAME</text>
</design_system>
<diagram_types>
展示系统组件的水平从左到右流程图。
适用于: 前后对比、系统概览、数据流
结构:
尺寸: 800x350 到 800x400
展示流程步骤的垂直从上到下流程图。
适用于: 执行流程、请求生命周期、分步流程
结构:
尺寸: 600x700(根据步骤调整高度)
聚焦展示单个组件内部结构。
适用于: 展示内部结构、嵌套元素、详细分解
结构:
确定类型和尺寸
设置 SVG 结构
<svg viewBox="0 0 WIDTH HEIGHT" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- 网格图案 --> <!-- 根据需要添加箭头标记 --> </defs> <!-- 背景 --> <rect width="WIDTH" height="HEIGHT" fill="#fafafa"/> <rect width="WIDTH" height="HEIGHT" fill="url(#grid)"/> <!-- 标题 --><text x="40" y="40" font-family="monospace" font-size="14" fill="#333" font-weight="bold">TITLE</text> <text x="X" y="40" font-family="monospace" font-size="12" fill="#888">[ TAG ]</text>
<!-- 内容 --> <!-- 底部注释 --><text x="CENTER" y="BOTTOM" font-family="monospace" font-size="10" fill="#999" text-anchor="middle">summary note</text> </svg>
使用 references/svg-patterns.md 中的模式添加组件
用箭头连接
添加标签
使用描述性文件名保存
diagram-before.svg, diagram-after.svgdiagram-flow.svg, diagram-architecture.svg<success_criteria> 图表完成标准:
创建 SVG 后,根据需要导出为栅格格式。
使用真实的浏览器引擎实现像素级完美渲染。需要 agent-browser 技能。
步骤 1:创建 HTML 包装器
bun run scripts/create-html.ts --svg diagram.svg --output diagram.html
选项:
--padding <px> — SVG 周围的边距(默认:40)--background <color> — 覆盖自动检测的背景色步骤 2:捕获高分辨率 PNG
agent-browser set viewport 3840 2160
agent-browser open "file://$(pwd)/diagram.html"
agent-browser wait 1000
agent-browser screenshot --full diagram.png
agent-browser close
步骤 3:清理
rm diagram.html
轻量级,无需浏览器。在 agent-browser 不可用时最佳。
uvx --from cairosvg cairosvg diagram.svg -o diagram.png --output-width 1600
uvx --with pillow python -c "from PIL import Image; Image.open('diagram.png').save('diagram.webp', 'WEBP', lossless=True)"
rm diagram.png
注意:对于图表,lossless=True 是最佳选择——比有损压缩更小且质量完美。
替代工具(如果可用):
# ImageMagick
convert -background none -density 150 diagram.svg diagram.webp
# librsvg + cwebp
rsvg-convert -w 1600 diagram.svg -o diagram.png && cwebp diagram.png -o diagram.webp
平台说明:
brew install cairoapt install libcairo2-dev每周安装数
68
仓库
首次出现
2026年2月8日
安全审计
安装于
codex68
gemini-cli67
github-copilot67
amp67
kimi-cli67
opencode67
<quick_start>
references/svg-patterns.md for templates and color paletteagent-browser) or WebP (via cairosvg) as needed </quick_start><design_system>
| Purpose | Color | Hex |
|---|---|---|
| Background | Light gray | #fafafa |
| Grid lines | Subtle gray | #e5e5e5 |
| Primary text | Dark gray | #333 |
| Secondary text | Medium gray | #666 |
| Muted text | Light gray | #999 |
| Borders/arrows | Gray | #ccc |
| Success/positive | Green | #27ae60 |
| Error/negative | Red | #e74c3c |
| Primary accent | Blue | #3498db |
| Warning/sandbox | Orange | #f39c12 |
| Process step | Purple | #9b59b6 |
monospace for all text[ LIKE_THIS ]Grid background:
<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="#e5e5e5" stroke-width="0.5"/>
</pattern>
Arrow marker:
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<path d="M0,0 L0,6 L9,3 z" fill="#ccc"/>
</marker>
Node (circle with inner dot):
<circle cx="X" cy="Y" r="35" fill="none" stroke="#ccc" stroke-width="2"/>
<circle cx="X" cy="Y" r="18" fill="#COLOR"/>
Box container:
<rect x="X" y="Y" width="W" height="H" fill="none" stroke="#ccc" stroke-width="2"/>
Dashed container (sandbox/isolation):
<rect x="X" y="Y" width="W" height="H" fill="none" stroke="#f39c12" stroke-width="2" stroke-dasharray="5,3"/>
Label box:
<rect x="X" y="Y" width="W" height="H" fill="none" stroke="#ccc" stroke-width="1"/>
<text x="CX" y="CY" font-family="monospace" font-size="11" fill="#666" text-anchor="middle">LABEL_NAME</text>
</design_system>
<diagram_types>
Horizontal left-to-right flow showing system components.
Use for: Before/after comparisons, system overviews, data flow
Structure:
Dimensions: 800x350 to 800x400
Vertical top-to-bottom showing process steps.
Use for: Execution flows, request lifecycles, step-by-step processes
Structure:
Dimensions: 600x700 (adjust height for steps)
Focused view of a single component's internals.
Use for: Showing internal structure, nested elements, detailed breakdowns
Structure:
Determine type and dimensions
Set up SVG structure
<svg viewBox="0 0 WIDTH HEIGHT" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- Grid pattern --> <!-- Arrow markers as needed --> </defs> <!-- Background --> <rect width="WIDTH" height="HEIGHT" fill="#fafafa"/> <rect width="WIDTH" height="HEIGHT" fill="url(#grid)"/> <!-- Title --><text x="40" y="40" font-family="monospace" font-size="14" fill="#333" font-weight="bold">TITLE</text> <text x="X" y="40" font-family="monospace" font-size="12" fill="#888">[ TAG ]</text>
<!-- Content --> <!-- Bottom note --><text x="CENTER" y="BOTTOM" font-family="monospace" font-size="10" fill="#999" text-anchor="middle">summary note</text> </svg>
Add components using patterns from references/svg-patterns.md
Connect with arrows
Add labels
Save with descriptive filename
diagram-before.svg, <success_criteria> Diagram is complete when:
After creating the SVG, export to raster formats as needed.
Uses a real browser engine for pixel-perfect rendering. Requires the agent-browser skill.
Step 1: Create HTML wrapper
bun run scripts/create-html.ts --svg diagram.svg --output diagram.html
Options:
--padding <px> — padding around SVG (default: 40)--background <color> — override auto-detected backgroundStep 2: Capture high-resolution PNG
agent-browser set viewport 3840 2160
agent-browser open "file://$(pwd)/diagram.html"
agent-browser wait 1000
agent-browser screenshot --full diagram.png
agent-browser close
Step 3: Clean up
rm diagram.html
Lightweight, no browser needed. Best when agent-browser is unavailable.
uvx --from cairosvg cairosvg diagram.svg -o diagram.png --output-width 1600
uvx --with pillow python -c "from PIL import Image; Image.open('diagram.png').save('diagram.webp', 'WEBP', lossless=True)"
rm diagram.png
Note: lossless=True is best for diagrams — smaller than lossy AND perfect quality.
Alternative tools (if available):
# ImageMagick
convert -background none -density 150 diagram.svg diagram.webp
# librsvg + cwebp
rsvg-convert -w 1600 diagram.svg -o diagram.png && cwebp diagram.png -o diagram.webp
Platform notes:
brew install cairo if cairosvg failsapt install libcairo2-dev if neededWeekly Installs
68
Repository
First Seen
Feb 8, 2026
Security Audits
Gen Agent Trust HubWarnSocketPassSnykPass
Installed on
codex68
gemini-cli67
github-copilot67
amp67
kimi-cli67
opencode67
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
53,200 周安装
diagram-after.svgdiagram-flow.svg, diagram-architecture.svg