AI Integration
SML can be used with AI agents through Webflow's Model Context Protocol (MCP).
By combining the framework's component system with a dedicated SML skill, Claude can recreate approved designs using existing components, variants, and properties.
The developer prepares the system. Claude uses it to build sections.
How it works
SML's AI workflow consists of three parts:
Part
Purpose
Webflow MCP
Connects Claude to the Webflow project.
SML skill
Provides the instructions for interpreting and building layouts with SML.
Site registry
Identifies the components, variants, slots, and properties available in a specific project.
The skill defines how to build with SML. The registry tells Claude what it can use.
This allows the same skill to work across different SML projects, each with its own configured components and variables.
The site registry
Every Webflow project has its own collection of components, properties, and variants.
The registry records these along with their identifiers, allowing Claude to work with the actual components available in the project.
For example, the registry identifies:
- The Section, Row, and Column components.
- Their available properties and valid options.
- Available component variants and slots.
- The identifiers needed to configure component instances through MCP.
The registry is generated from the Webflow project rather than maintained manually.
If a component or property isn't present, Claude will identify that limitation instead of assuming it exists.
Building with the SML skill
Start with a Webflow project containing SML.
Configure the framework's variables to match the approved design and extend existing components where necessary.
Any required component expansion should be completed before starting the AI-assisted build.
See the Getting Started and Components documentation.
1. Prepare the project
Sections, rows, and columns provide the foundation for arranging content.
Sections contain the main content container, rows control how elements are arranged, and columns provide responsive width settings.
These elements can be combined as needed. A simple layout might only require a section, while more complex layouts use rows and columns.
2. Generate the registry
Ask Claude to initialize the registry for your Webflow project:
Initialize the SML registry for Webflow site ID [SITE ID].
Claude uses the SML skill to inspect the project and generate its registry.
This is typically a one-time setup. Regenerate the registry when relevant components or properties have changed.
3. Provide the Figma design
Export a screenshot of the approved design from Figma and attach it to your conversation with Claude.
Use the following prompt:
Using the attached screenshot as the visual reference, recreate the design as SML sections for Webflow site ID [SITE ID].
Claude interprets the screenshot and translates the design into the available SML components and properties.
The registry provides the necessary information to assemble the section using the project's actual structure.
4. Review the DSL
Before building, Claude presents a Domain-Specific Language (DSL) representation of the section.
The DSL describes which SML components will be used, how they're nested, and which properties will be applied.
Review the proposed structure and request changes if necessary. Once approved, Claude proceeds with the build.
5. Build and fine-tune
Claude builds the section on the Components page within the Stylesheets, using Webflow MCP to insert SML component instances and configure their properties.
The build is performed section by section.
Review the completed section in Webflow Designer and make any necessary adjustments.
Because the section consists of existing SML components, it remains fully editable through their properties.
Working within the framework
The SML skill is specifically designed to assemble sections using existing components.
It will not create new classes, invent styling rules, or rebuild elements already available through SML.
When a requested feature isn't supported by the project's components, Claude identifies what is missing.
The developer can then decide whether the component system needs to be extended before continuing.
This keeps AI-assisted development aligned with the same structure and conventions used when building manually.
An evolving workflow
SML's integration with AI will continue to develop alongside Webflow's available tools.
The current skill focuses on building sections from approved designs. The combination of predefined components, explicit properties, and a project-specific registry provides a foundation for expanding these capabilities.
The objective remains the same: let AI handle the assembly while the developer controls the system.
