mcpField
S
svg-precision-skill

svg-precision-skill

github.com/dkyazzentwatwa设计与 UI124276 次安装29 周前更新
代码仓库

关于 svg-precision-skill

svg-precision-skill 指导 Agent 根据明确的场景规格构建 SVG，并在交付前进行验证。适用于需要精确尺寸、坐标和视觉预览的任务。

主要功能

  1. 01按规格构建 SVG
  2. 02参考模板与布局方案
  3. 03构建和验证 SVG
  4. 04按需渲染 PNG 预览

适用场景

  1. 01创建尺寸和坐标固定的 SVG
  2. 02交付前验证 SVG 输出
  3. 03查看快速 PNG 预览

安装

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

$npx skills add https://github.com/dkyazzentwatwa/chatgpt-skills --skill svg-precision-skill

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
references/
recipes.md
spec.md
scripts/
requirements.txt
self_test.py
svg_cli.py
scripts/examples/
bar_chart.json
diagram.json
icon_check.json
technical_dim.json
ui_card.json
scripts/svg_skill/
__init__.py
core.py
render.py
validate.py

详细介绍

SVG 精确绘制技能

根据明确的场景规格构建 SVG，并在交付前进行验证。

工作流

  1. 将请求转换为具体规格，设定固定尺寸和坐标。
  2. 使用 references/spec.md 中的模板，以及 references/recipes.md 中的稳定布局模式。
  3. 使用 scripts/svg_cli.py build 构建 SVG。
  4. 使用 scripts/svg_cli.py validate 验证。
  5. 用户需要快速检查视觉效果时，渲染 PNG 预览。

规则

  • 明确设置 viewBox、宽度和高度。
  • 优先使用绝对坐标和简单形状。
  • 对精确渲染要求较高时，谨慎处理文本。
  • 除非确有必要且可测试，否则避免使用特殊滤镜。

评论

支持 Markdown