mcpField
S
svg-precision

svg-precision

github.com/dkyazzentwatwaデザイン・UI124188 回インストール29 週間前に更新
リポジトリ

svg-precision について

svg-precision は、JSON のシーン仕様から SVG を生成し、検証や PNG プレビューの描画を行うスキルです。明示的な構築と出力チェックが必要な SVG 制作に適しています。

主な機能

  1. 01JSON シーン仕様から SVG を生成
  2. 02生成した SVG ファイルを検証
  3. 03PNG プレビューを描画
  4. 04描画画像を比較
  5. 05テンプレートとレイアウトレシピ

活用シーン

  1. 01アイコン、図表、UI モックアップの作成
  2. 02SVG 出力の構造上の問題を確認
  3. 03SVG を PNG プレビューとして表示

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/svg-precisionを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

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-precision

厳格な JSON 仕様（シーングラフ）から構造的に正しい SVG を生成し、検証して、必要に応じて PNG プレビューをレンダリングします。

簡単な手順

  1. ユーザーのリクエストを仕様 JSONに変換します（references/spec.md のテンプレートを使用します）。
  2. SVG を作成します：
    • python scripts/svg_cli.py build spec.json out.svg
  3. 検証します：
    • python scripts/svg_cli.py validate out.svg
  4. （任意）PNG プレビューをレンダリングします（CairoSVG が必要です）：
    • python scripts/svg_cli.py render out.svg out.png --scale 2

仕様の設計ルール（精度向上のため）

  • canvas.viewBox と明示的な canvas.width／canvas.height を必ず設定します。
  • 絶対座標を優先し、複雑さを軽減できる場合にのみ変換を使用します。
  • 数値は適切な範囲に収めます。NaN／inf は使用せず、小数点以下 3～4 桁に丸めます。
  • 再利用する項目は defs（マーカー、グラデーション、clipPaths）に配置し、id で参照します。
  • ビューアー間で予測可能な結果を得るには、必要な場合を除き、特殊なフィルターを避けます。
  • テキストの表示はフォントやビューアーによって異なります。ピクセル単位で完全に一致させる必要がある場合は、テキストをリスク要因として扱い、図形を優先します。

同梱スクリプトの使用

CLI
  • python scripts/svg_cli.py build <spec.json> <out.svg>
  • python scripts/svg_cli.py validate <svg>
  • python scripts/svg_cli.py render <svg> <out.png> [--scale N]
  • python scripts/svg_cli.py diff <a.svg> <b.svg> <diff.png> [--scale N]（レンダリングして画像を比較します）
ライブラリとして使用（Python）
from svg_skill import build_svg, validate_svg
svg_text = build_svg(spec_dict)
report = validate_svg(svg_text)

リクエストが曖昧な場合

  1. SVG の種類を特定します：アイコン／図／チャート／UI／技術図。
  2. references/spec.md からテンプレートを選び、具体的な数値を入力します。
  3. 寸法が不明な場合は、用途に合った既定値を選びます：
    • アイコン：24x24 または 32x32
    • UI モックアップ：1440x900 または 390x844（モバイル）
    • チャート：800x450
    • 図：1200x800
    • 技術図面：単位（mm/in）と縮尺を指定します

参考資料

  • references/spec.md - スキーマと SVG の種類ごとにすぐコピーできるテンプレート
  • references/recipes.md - 一貫してレンダリングされるレイアウトとスタイルのパターン

コメント

Markdown 対応