Toolverse
Wszystkie skille

svg-precision

autor: dkyazzentwatwa

Generuj poprawne strukturalnie SVG-i z JSON-a – ikony, diagramy i wykresy bez błędów

Instalacja

Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.

Instalacja

Szybkie info

Kategoria
Frontend
Wyświetlenia
466

O skillu

Umiejętność do tworzenia SVG-ów o gwarantowanej poprawności strukturalnej na podstawie specyfikacji JSON. Zamiast ręcznego kodowania SVG-a, opisujesz wizualizację w prostym formacie JSON (scene graph), a narzędzie generuje czysty kod SVG, waliduje go i opcjonalnie renderuje podgląd PNG. Idealne do ikon, diagramów, wykresów, mockupów UI i rysunków technicznych, gdzie liczy się dokładność i zgodność między przeglądarkami.

Jak używać

  1. Zainstaluj svg-precision jako umiejętność w swoim środowisku Claude/Copilot, korzystając z repozytorium https://github.com/dkyazzentwatwa/chatgpt-skills/tree/main/svg-precision-skill.

  2. Przygotuj specyfikację JSON opisującą Twoją wizualizację. Użyj szablonów z pliku references/spec.md w repozytorium – określ typ SVG (ikona, diagram, wykres, UI, rysunek techniczny), wymiary canvas, viewBox oraz wszystkie elementy graficzne z konkretnymi współrzędnymi i parametrami.

  3. Uruchom polecenie budowania: python scripts/svg_cli.py build spec.json out.svg – narzędzie przekonwertuje Twoją specyfikację JSON na gotowy plik SVG.

  4. Zwaliduj wygenerowany SVG poleceniem: python scripts/svg_cli.py validate out.svg – sprawdzisz, czy struktura jest poprawna i zgodna ze standardami.

  5. (Opcjonalnie) Wygeneruj podgląd PNG do szybkiej weryfikacji: python scripts/svg_cli.py render out.svg out.png --scale 2 – wymaga zainstalowania CairoSVG.

  6. Jeśli żądanie użytkownika jest niejasne, najpierw zidentyfikuj typ SVG, wybierz odpowiedni szablon, uzupełnij konkretne liczby i wymiary, a następnie przejdź do kroku 3.

Podobne skille