Give marketeers control over image framing.

Reframe lets marketeers move and scale images inside fixed frames without changing the layout. Built for SML, but simple enough to integrate into other controlled Webflow component systems.

Explore Reframe

Give Claude the rules of the system.

SML makes Claude a layout builder inside Webflow. Not by generating code. Not by guessing from a prompt. Claude builds with predefined structure, components, variants, and properties.

Explore the SML skill

Let marketeers control image framing

Reframe lets marketeers move and scale images inside fixed frames without changing the layout. The frame stays defined by the component. Reframe only changes how the image sits inside it.

Each image keeps its own framing settings, so the same component can be used with different images without losing control of the layout.
‍

Built for controlled components

Reframe is native to SML, where the required image structure, properties, and CSS are already in place.

‍Installation

Install Reframe by Small Medium Large from the Webflow Marketplace and open it from the Apps panel in the Webflow Designer.

To use Reframe

1. Open the app in the Webflow Designer.
2. Select a component on the canvas that has the required image properties available.
3. Select an image in the app using the image selector.
4. Adjust its horizontal position, vertical position, and/or scale.
5. Reframe writes the values to the Reframe settings property of that image.

Use Reset to return an image to its default framing.

‍Build with the SML skill
The SML skill is the part that makes the workflow controlled. It gives Claude the rules for how layouts should be interpreted, structured, and built inside Webflow.

Before using Claude with SML, download and install the SML skill in Claude.

Every layout follows the same hierarchy. Sections contain rows. Rows contain columns. Columns contain content. Components expose only the properties that are safe to change.

This keeps the output predictable, native to Webflow, and still editable after the build.

Without the skill, Claude is just an assistant. With the skill, it can build inside a controlled system.

This is what makes SML different from a normal AI-assisted workflow. Claude is not free-writing a page. It is working inside a system.

Create the registry
Claude starts by creating the registry for the current Webflow project. This is a one-time setup that maps the available components, variants, slots, and properties.

Prompt Claude with:
‍
Initialize the SML registry for Webflow site ID...

The registry makes the project readable for Claude. From that point on, it does not build from memory or assumptions. It works from the actual structure of the project.

Execute from approved designs
Once the registry is in place, Claude can build from an approved design directly inside Webflow.

Upload the visual and prompt Claude with:

Using the attached screenshot as the visual reference, recreate the design as SML sections for Webflow site ID...
‍
The build happens section by section. Claude interprets the design, maps each part to the closest SML structure, and assembles it with the components and properties available in the project.