Designer Style Tool
style_toolCreate, retrieve, and update CSS styles for Webflow sites to manage design consistency across breakpoints and pseudo-classes.
Instructions
Designer Tool - Style tool to perform actions like create style, get all styles, update styles
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| siteId | Yes | The ID of the site. DO NOT ASSUME site id. ALWAYS ask user for site id if not already provided or known. use sites_list tool to fetch all sites and then ask user to select one of them. | |
| actions | Yes |
Implementation Reference
- src/tools/deStyle.ts:149-155 (handler)The handler function for the style_tool that processes input, calls the internal RPC proxy (styleToolRPCCall), formats the response, and handles errors.
async ({ siteId, actions }) => { try { return formatResponse(await styleToolRPCCall(siteId, actions)); } catch (error) { return formatErrorResponse(error); } } - src/tools/deStyle.ts:21-147 (schema)Detailed Zod input schema for the style_tool, defining siteId and actions array supporting create_style, get_styles, and update_style operations with properties, breakpoints, pseudos, etc.
inputSchema: z.object({ ...SiteIdSchema, actions: z.array( z.object({ create_style: z .object({ name: z.string().describe("The name of the style"), properties: z .array( z.object({ property_name: z .string() .describe("The name of the property"), property_value: z .string() .optional() .describe("The value of the property"), variable_as_value: z .string() .optional() .describe("The variable id to use as the value"), }) ) .describe( "The properties of the style. if you are looking to link a variable as the value, then use the variable_as_value field. but do not use both property_value and variable_as_value" ), parent_style_name: z .string() .optional() .describe( "The name of the parent style to create the new style in. this will use to create combo class" ), }) .optional() .describe("Create a new style"), get_styles: z .object({ skip_properties: z .boolean() .optional() .describe( "Whether to skip the properties of the style. to get minimal data." ), include_all_breakpoints: z .boolean() .optional() .describe( "Whether to include all breakpoints styles or not. very data intensive." ), query: z .enum(["all", "filtered"]) .describe("The query to get all styles or filtered styles"), filter_ids: z .array(z.string()) .optional() .describe( "The ids of the styles to filter by. should be used with query filtered" ), }) .optional() .describe("Get all styles"), update_style: z .object({ style_name: z .string() .describe("The name of the style to update"), breakpoint_id: z .enum([ "xxl", "xl", "large", "main", "medium", "small", "tiny", ]) .optional() .describe("The breakpoint to update the style for"), pseudo: z .enum([ "noPseudo", "nth-child(odd)", "nth-child(even)", "first-child", "last-child", "hover", "active", "pressed", "visited", "focus", "focus-visible", "focus-within", "placeholder", "empty", "before", "after", ]) .optional() .describe("The pseudo class to update the style for"), properties: z .array( z.object({ property_name: z .string() .describe("The name of the property"), property_value: z .string() .optional() .describe("The value of the property"), variable_as_value: z .string() .optional() .describe("The variable id to use as the value"), }) ) .optional() .describe("The properties to update or add to the style for"), remove_properties: z .array(z.string()) .optional() .describe("The properties to remove from the style"), }) .optional() .describe("Update a style"), }) ), }), - src/tools/deStyle.ts:15-156 (registration)Core registration of the style_tool with MCP server, specifying name, title, description, inputSchema, and handler.
server.registerTool( "style_tool", { title: "Designer Style Tool", description: "Designer Tool - Style tool to perform actions like create style, get all styles, update styles", inputSchema: z.object({ ...SiteIdSchema, actions: z.array( z.object({ create_style: z .object({ name: z.string().describe("The name of the style"), properties: z .array( z.object({ property_name: z .string() .describe("The name of the property"), property_value: z .string() .optional() .describe("The value of the property"), variable_as_value: z .string() .optional() .describe("The variable id to use as the value"), }) ) .describe( "The properties of the style. if you are looking to link a variable as the value, then use the variable_as_value field. but do not use both property_value and variable_as_value" ), parent_style_name: z .string() .optional() .describe( "The name of the parent style to create the new style in. this will use to create combo class" ), }) .optional() .describe("Create a new style"), get_styles: z .object({ skip_properties: z .boolean() .optional() .describe( "Whether to skip the properties of the style. to get minimal data." ), include_all_breakpoints: z .boolean() .optional() .describe( "Whether to include all breakpoints styles or not. very data intensive." ), query: z .enum(["all", "filtered"]) .describe("The query to get all styles or filtered styles"), filter_ids: z .array(z.string()) .optional() .describe( "The ids of the styles to filter by. should be used with query filtered" ), }) .optional() .describe("Get all styles"), update_style: z .object({ style_name: z .string() .describe("The name of the style to update"), breakpoint_id: z .enum([ "xxl", "xl", "large", "main", "medium", "small", "tiny", ]) .optional() .describe("The breakpoint to update the style for"), pseudo: z .enum([ "noPseudo", "nth-child(odd)", "nth-child(even)", "first-child", "last-child", "hover", "active", "pressed", "visited", "focus", "focus-visible", "focus-within", "placeholder", "empty", "before", "after", ]) .optional() .describe("The pseudo class to update the style for"), properties: z .array( z.object({ property_name: z .string() .describe("The name of the property"), property_value: z .string() .optional() .describe("The value of the property"), variable_as_value: z .string() .optional() .describe("The variable id to use as the value"), }) ) .optional() .describe("The properties to update or add to the style for"), remove_properties: z .array(z.string()) .optional() .describe("The properties to remove from the style"), }) .optional() .describe("Update a style"), }) ), }), }, async ({ siteId, actions }) => { try { return formatResponse(await styleToolRPCCall(siteId, actions)); } catch (error) { return formatErrorResponse(error); } } ); - src/tools/deStyle.ts:8-13 (helper)Helper function that proxies the style_tool call to the RPC backend.
const styleToolRPCCall = async (siteId: string, actions: any) => { return rpc.callTool("style_tool", { siteId, actions: actions || [], }); }; - src/mcp.ts:64-64 (registration)Top-level call to registerDEStyleTools within registerDesignerTools, which includes the style_tool.
registerDEStyleTools(server, rpc);