Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    spotkit

    2

    Generate deterministic, abstract SVG product illustrations from feature descriptions using a fixed geometric language.

    $5

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned
    spotkit

    spotkit

    Example session with this skill installed

    Generate an abstract SVG illustration for a 'Smart Filtering' feature. It should show a list being reduced to a few specific items. Use a single blue accent.

    • Read your context and instructions
    • Compiled the spotkit

    I have interpreted 'Smart Filtering' as a

    Gating metaphor. Using the

    Split layout, I've created an illustration where a dense list of placeholder bars is filtered into a single, highlighted card.

    Smart Filtering Illustration

    <svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
  <style>
    .bg { fill: #F9FAFB; }
    .panel { fill: #FFFFFF; stroke: #E5E7EB; stroke-width: 0.5; }
    .bar { fill: #D1D5DB; }
    .accent { fill: #3B82F6; }
    .shadow { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05)); }
  </style>
  <!-- Backdrop Plate -->
  <rect x="20" y="30" width="120" height="100" rx="4" class="bg" />
  <!-- Main Panel -->
  <rect x="30" y="40" width="100" height="80" rx="3" class="panel" />
  <!-- Filtered Rows -->
  <rect x="40" y="55" width="80" height="4" rx="1" class="bar" opacity="0.4" />
  <rect x="40" y="65" width="60" height="4" rx="1" class="bar" opacity="0.4" />
  <!-- Floating Highlighted Card (The Result) -->
  <g class="shadow">
    <rect x="35" y="75" width="90" height="24" rx="2" class="panel" />
    <rect x="45" y="85" width="12" height="4" rx="1" class="accent" />
    <rect x="62" y="85" width="45" height="4" rx="1" class="bar" />
  </g>
  <!-- Faded Bottom Row -->
  <rect x="40" y="108" width="80" height="4" rx="1" class="bar" opacity="0.1" />
</svg>

    Next steps

    1. Review the elevation on the highlighted card to ensure it meets your depth requirements.
    2. Inline this SVG into your component to allow the .accent class to inherit your site's primary color.
    3. Run python3 check.py filter.svg to verify hairline alignment.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Generating consistent UI illustrations for documentation or landing pages is a slow, manual process that often leads to visual drift. spotkit solves this by treating product illustrations as deterministic code rather than subjective art. It transforms feature descriptions into minimal, abstract SVG illustrations that represent software interfaces through geometric primitives.

    What it does

    • Abstracts interfaces by reducing complex software features into recognizable geometric metaphors like grouping, connecting, or sequencing.
    • Generates deterministic SVGs using precise math, hairline borders, and exact radii to ensure every graphic in a set looks identical in treatment.
    • Enforces layout consistency by adapting twelve pre-defined, balanced compositions rather than inventing new arrangements.
    • Maps features to metaphors using a catalog of common SaaS relationships to ensure users understand the concept instantly without reading text.
    • Provides icon integration using specific Phosphor paths to maintain a unified visual language across all primitives.

    How it works

    1. Interpret the feature by defining the core action in one sentence and selecting a corresponding relationship metaphor.
    2. Select primitives (cards, rails, placeholders) and one of the twelve core layouts that best represents that relationship.
    3. Adapt the SVG geometry from the SPEC.md templates, modifying only the content while keeping fixed panel, backdrop, and float positions.
    4. Apply thematic tokens for strokes, fills, and elevations to ensure the graphic follows the project-wide style spec.

    Frameworks & tools

    This skill produces raw SVG markup and utilizes Python-based generation scripts (build.py) and linting tools (check.py). It relies on CSS custom properties for theming and Phosphor icon geometry.

    Why this beats prompting it yourself

    Generic image models fail at the geometric precision and cross-set consistency required for professional UI documentation. This skill uses a logic-first approach that guarantees every illustration shares the exact same stroke weights, radii, and elevation model, which is impossible to maintain via natural language prompting alone.

    Use cases

    • Creating a consistent family of feature icons for a technical documentation portal.
    • Designing abstract "empty state" graphics for a web application.
    • Building a hero illustration set for a SaaS landing page that needs to look "product-like" without using screenshots.
    • Retrofitting an existing icon set to a new brand palette or dark mode theme.

    Known limitations

    Output is strictly limited to an abstract, geometric UI style. It does not support organic shapes, complex illustrations, or text-heavy graphics. SVGs require inlining to support dynamic theming.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scanned

    Verified clean 8 days ago

    • Passed all security checks, Safe to install

    Requires

    GitHub

    Listed8 days ago

    What's inside

    Frequently Asked Questions