Tool tree
Interactive web style visualization tool: choose a design style, switch site UI live, fine‑tune parameters, and export CSS.
Implementation
gradeNot graded
gradeNot graded
list_stylesAnswer
List the built-in design style presets (id, name, category, description).
View tool JSON
{
"name": "list_styles",
"kind": "answer",
"impl": "imperative",
"description": "List the built-in design style presets (id, name, category, description).",
"inputSchema": {
"type": "object",
"properties": {}
},
"page": "/Web_Style_Visualization/"
}get_current_styleAnswer
Get the active style, its resolved CSS variables, and any overrides applied on top of the preset.
View tool JSON
{
"name": "get_current_style",
"kind": "answer",
"impl": "imperative",
"description": "Get the active style, its resolved CSS variables, and any overrides applied on top of the preset.",
"inputSchema": {
"type": "object",
"properties": {}
},
"page": "/Web_Style_Visualization/"
}get_variable_definitionsAnswer
List every CSS variable a style can set, with its value type (color, size, number, font) and meaning.
View tool JSON
{
"name": "get_variable_definitions",
"kind": "answer",
"impl": "imperative",
"description": "List every CSS variable a style can set, with its value type (color, size, number, font) and meaning.",
"inputSchema": {
"type": "object",
"properties": {}
},
"page": "/Web_Style_Visualization/"
}apply_styleAction
Switch the whole page to a preset style. Clears previous overrides.
View tool JSON
{
"name": "apply_style",
"kind": "act",
"impl": "imperative",
"description": "Switch the whole page to a preset style. Clears previous overrides.",
"inputSchema": {
"type": "object",
"properties": {
"styleId": {
"type": "string",
"enum": [
"brutalism",
"claymorphism",
"dark-mode",
"editorial",
"flat",
"glassmorphism",
"liquid-glass",
"material",
"neumorphism",
"retro"
],
"description": "Preset id from list_styles"
}
},
"required": [
"styleId"
]
},
"page": "/Web_Style_Visualization/"
}set_variablesAction
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.
View tool JSON
{
"name": "set_variables",
"kind": "act",
"impl": "imperative",
"description": "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.",
"inputSchema": {
"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"
]
},
"page": "/Web_Style_Visualization/"
}reset_styleAction
Drop all overrides and restore the current preset's defaults.
View tool JSON
{
"name": "reset_style",
"kind": "act",
"impl": "imperative",
"description": "Drop all overrides and restore the current preset's defaults.",
"inputSchema": {
"type": "object",
"properties": {}
},
"page": "/Web_Style_Visualization/"
}export_cssAction
Export the current look as a :root { ... } CSS variables block ready to paste into a project.
View tool JSON
{
"name": "export_css",
"kind": "act",
"impl": "imperative",
"description": "Export the current look as a :root { ... } CSS variables block ready to paste into a project.",
"inputSchema": {
"type": "object",
"properties": {}
},
"page": "/Web_Style_Visualization/"
}get_share_urlAnswer
Get a URL that reopens this page with the exact current style.
View tool JSON
{
"name": "get_share_url",
"kind": "answer",
"impl": "imperative",
"description": "Get a URL that reopens this page with the exact current style.",
"inputSchema": {
"type": "object",
"properties": {}
},
"page": "/Web_Style_Visualization/"
}