All courses
Design systems for teams & AI agents
Login with your Webflow account to track your progress

Design systems for teams & AI agents

Set up variables, components, templates, and Shared Libraries so your team and agents build consistently.

A design system gives your team shared pieces to build with, from brand styles to components, and the decisions behind them. AI agents connected through the Webflow MCP can build with the same pieces, guided by instructions on what to create, reuse, or change.

You'll see how the parts work together and what updates across your site when you edit them. You'll set up variables, make components flexible and safe for marketers to reuse, and create templates your team can build from. You'll also improve an existing site gradually, share your system across sites, and guide agents and review their work.

Clone the site

Most lessons in this course follow examples from the fictional company Ordinant Carbon’s marketing site. Clone the site, explore its design system, and follow along.

Table of contents

1

Getting started

Coming soon

1

Background & preview
3:00
Background & preview
Coming soon

1

Intro to design systems in Webflow
8:40
Intro to design systems in Webflow
Coming soon

1

How the parts work together
3:30
How the parts work together
Coming soon

2

Styles & variables

Coming soon

2

Intro to variables
5:48
Intro to variables
Coming soon

2

Styles, variables, & naming
3:00
Styles, variables, & naming
Coming soon

2

Variables as a system
8:33
Variables as a system
Coming soon

2

Build a flexible variable system
2:30
Build a flexible variable system
Coming soon

3

Components

Coming soon

3

Intro to components
5:03
Intro to components
Coming soon

3

Build flexible components
3:00
Build flexible components
Coming soon

3

Properties, variants, & slots
4:28
Properties, variants, & slots
Coming soon

3

Components for teams & AI agents
3:00
Components for teams & AI agents
Coming soon

4

Pages & CMS content

Coming soon

4

Page templates
3:00
Page templates
Coming soon

4

Create a static page template
3:08
Create a static page template
Coming soon

4

Add components to CMS rich text
2:25
Add components to CMS rich text
Coming soon

4

Components in CMS rich text
2:30
Components in CMS rich text
Coming soon

5

Share & maintain your system

Coming soon

5

Shared Libraries
8:59
Shared Libraries
Coming soon

5

Bring in an existing site
4:00
Bring in an existing site
Coming soon

5

Use your system with AI
3:00
Use your system with AI
Coming soon

5

Best practices & resources
2:00
Best practices & resources
Coming soon

Progress

0%

Details

Intermediate
1h 20m
19
Lessons

Assets & links

Assessment