← WebMCP Directory

jarvisluk.github.io

jarvisluk.github.io

live Unverified (seed import) Developer Tools 8 tools imperative implementation

Interactive web style visualization tool: choose a design style, switch site UI live, fine‑tune parameters, and export CSS.

First seen 2026-11-05 · Last seen 2026-11-05 · Source: webmcp.com

Answer 4 · Act 4 · Transact 0 · Score: Not yet scored

Tool inspector

set_variables

act imperative

Override CSS variables on top of the current style to create a custom look. Only listed variables change. Colors: hex/rgb()/hsl()/oklch(); sizes need units (px, em, rem, %). Invalid values are rejected and reported.

Page: /Web_Style_Visualization/

Input schema

PropertyTypeRequiredDescription
variables object yes —
Raw JSON schema
{
  "type": "object",
  "properties": {
    "variables": {
      "type": "object",
      "properties": {
        "--color-primary": {
          "type": "string",
          "description": "Primary brand color (buttons, links, highlights) (color)"
        },
        "--color-primary-hover": {
          "type": "string",
          "description": "Hover state for primary color (color)"
        },
        "--color-bg": {
          "type": "string",
          "description": "Page background color (color)"
        },
        "--color-surface": {
          "type": "string",
          "description": "Card / panel surface color (color)"
        },
        "--color-text": {
          "type": "string",
          "description": "Primary text color (color)"
        },
        "--color-text-secondary": {
          "type": "string",
          "description": "Secondary / muted text color (color)"
        },
        "--color-accent": {
          "type": "string",
          "description": "Accent color for badges, alerts, highlights (color)"
        },
        "--color-border": {
          "type": "string",
          "description": "Default border color (color)"
        },
        "--border-radius": {
          "type": "string",
          "description": "Corner radius (e.g. 8px, 16px) (size)"
        },
        "--border-width": {
          "type": "string",
          "description": "Border thickness (e.g. 1px, 2px) (size)"
        },
        "--border-color": {
          "type": "string",
          "description": "Explicit border color override (color)"
        },
        "--shadow-x": {
          "type": "string",
          "description": "Box-shadow horizontal offset (size)"
        },
        "--shadow-y": {
          "type": "string",
          "description": "Box-shadow vertical offset (size)"
        },
        "--shadow-blur": {
          "type": "string",
          "description": "Box-shadow blur radius (size)"
        },
        "--shadow-spread": {
          "type": "string",
          "description": "Box-shadow spread radius (size)"
        },
        "--shadow-color": {
          "type": "string",
          "description": "Box-shadow color (color)"
        },
        "--font-family": {
          "type": "string",
          "description": "Font stack (e.g. 'Inter', sans-serif) (font)"
        },
        "--font-weight": {
          "type": "string",
          "description": "Normal font weight (100–900) (number)"
        },
        "--font-weight-bold": {
          "type": "string",
          "description": "Bold font weight (100–900) (number)"
        },
        "--font-size-base": {
          "type": "string",
          "description": "Base font size (size)"
        },
        "--font-size-sm": {
          "type": "string",
          "description": "Small font size (size)"
        },
        "--font-size-lg": {
          "type": "string",
          "description": "Large font size (size)"
        },
        "--font-size-xl": {
          "type": "string",
          "description": "Extra-large font size (size)"
        },
        "--font-size-xxl": {
          "type": "string",
          "description": "2x extra-large font size (size)"
        },
        "--line-height": {
          "type": "string",
          "description": "Line height multiplier (number)"
        },
        "--backdrop-blur": {
          "type": "string",
          "description": "Backdrop blur amount (e.g. 12px) (size)"
        },
        "--bg-opacity": {
          "type": "string",
          "description": "Surface opacity (0–1); below 1 reveals the ambient backdrop (number)"
        },
        "--glow-intensity": {
          "type": "string",
          "description": "Glow / neon intensity (0–1) (number)"
        },
        "--glow-color": {
          "type": "string",
          "description": "Glow / neon color (color)"
        }
      },
      "additionalProperties": false
    }
  },
  "required": [
    "variables"
  ]
}

Similar websites

morphus.myles4miles.chatgpt.site

morphus.myles4miles.chatgpt.site

Morphus is an AI-native workspace for designing worlds and generating playable game experiences.

live Unverified Developer Tools Transact tools
154 tools A23 / Act124 / T7 Not yet scored Seen 2026-11-05
list_nodes get_scene_settings get_node_details get_terrain_state get_forest_state
Inspect tools
damnpdfs.com

damnpdfs.com

Install the DamnPDFs Codex plugin, pair a browser workspace and use PDF, image and file tools from your coding agent. Includes setup and privacy limits.

live Unverified Developer Tools Transact tools
81 tools A3 / Act77 / T1 Not yet scored Seen 2026-11-05
scan_to_pdf workflow merge_pdf alternate_mix_pdf compress_pdf
Inspect tools
insignifi4nt.github.io

insignifi4nt.github.io

broCAD/M: local-first CAD and CAM for parametric design, wire EDM planning, simulation and controller export.

live Unverified Developer Tools Transact tools
80 tools A29 / Act49 / T2 Not yet scored Seen 2026-11-05
edm_inspect_approach edm_describe_edits edm_get_context edm_list_projects edm_get_project
Inspect tools
cabinet.varera.studio

cabinet.varera.studio

The Cartographer's Cabinet

live Unverified Developer Tools Transact tools
64 tools A10 / Act50 / T4 Not yet scored Seen 2026-11-05
inspect_daylight inspect_cartographers_project list_project_hierarchy inspect_open_map search_project_objects
Inspect tools

Related on Influzer