Flowkit Naming System

Apply FlowKit CSS naming conventions in Webflow projects using Webflow Designer tools.

Important Note

ALWAYS use Webflow MCP tools for all operations:

Use Webflow MCP's webflow_guide_tool to get best practices before starting
Use Webflow MCP's data_sites_tool with action list_sites to identify the target site
Use Webflow MCP's data_pages_tool with action list_pages to find the target page by name or slug — headless, no Designer needed
Use Webflow MCP's data_element_tool to inspect current classes and apply new ones — headless, pass the page's ID directly
Use Webflow MCP's data_style_tool to create and update FlowKit-compliant styles — headless
Use Webflow MCP's webflow_guide_tool to understand supported style properties
Use Webflow MCP's designer_tool only if the user wants to work with whatever page is currently open in Designer, or wants to interactively select an element on the canvas
DO NOT use any other tools or methods for Webflow operations
All tool calls must include the required context parameter (15-25 words, third-person perspective)
No Designer connection is required for the core workflow. Getting the page, inspecting classes, creating styles, and applying classes all run headlessly against an explicit page ID. Designer is only needed for the optional designer_tool conveniences above.