Zurück zu den Videos

Webflow

Create & manage Agent Instructions — Webflow Lesson

Plattform
YouTube
Länge
4:49
Gesprochene Sprache
Englisch (Vereinigte Staaten)
Aufrufe
1829
Median-Schnitt
4.91s
Gesicht im Bild
28%
Dunkle Bilder
54%
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:00
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:00
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:01
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:01
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:04
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:04
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:07medium presenter
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:07
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:08medium presenter
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:08
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:18
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:18
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:21
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:21
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:22
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:22
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:23
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:23
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:23
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:23
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:24
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:24
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:25
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:25
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:29medium presenter
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:29
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:34
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:34
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:36
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:36
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:49medium presenter
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:49
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:52
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:52
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:54
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:54
Webflow Create & manage Agent Instructions — Webflow Lesson at 0:56
WebflowCreate & manage Agent Instructions — Webflow Lesson
0:56
Webflow Create & manage Agent Instructions — Webflow Lesson at 1:06
WebflowCreate & manage Agent Instructions — Webflow Lesson
1:06
Webflow Create & manage Agent Instructions — Webflow Lesson at 1:06
WebflowCreate & manage Agent Instructions — Webflow Lesson
1:06
Webflow Create & manage Agent Instructions — Webflow Lesson at 1:08
WebflowCreate & manage Agent Instructions — Webflow Lesson
1:08
Webflow Create & manage Agent Instructions — Webflow Lesson at 1:11
WebflowCreate & manage Agent Instructions — Webflow Lesson
1:11
Webflow Create & manage Agent Instructions — Webflow Lesson at 1:14
WebflowCreate & manage Agent Instructions — Webflow Lesson
1:14
Webflow Create & manage Agent Instructions — Webflow Lesson at 1:18
WebflowCreate & manage Agent Instructions — Webflow Lesson
1:18
Webflow Create & manage Agent Instructions — Webflow Lesson at 1:24
WebflowCreate & manage Agent Instructions — Webflow Lesson
1:24
Webflow Create & manage Agent Instructions — Webflow Lesson at 1:41medium presenter
WebflowCreate & manage Agent Instructions — Webflow Lesson
1:41
Webflow Create & manage Agent Instructions — Webflow Lesson at 1:46
WebflowCreate & manage Agent Instructions — Webflow Lesson
1:46
Webflow Create & manage Agent Instructions — Webflow Lesson at 1:48
WebflowCreate & manage Agent Instructions — Webflow Lesson
1:48
Webflow Create & manage Agent Instructions — Webflow Lesson at 1:50
WebflowCreate & manage Agent Instructions — Webflow Lesson
1:50
Webflow Create & manage Agent Instructions — Webflow Lesson at 1:54
WebflowCreate & manage Agent Instructions — Webflow Lesson
1:54
Webflow Create & manage Agent Instructions — Webflow Lesson at 1:56medium presenter
WebflowCreate & manage Agent Instructions — Webflow Lesson
1:56
Webflow Create & manage Agent Instructions — Webflow Lesson at 2:01
WebflowCreate & manage Agent Instructions — Webflow Lesson
2:01
Webflow Create & manage Agent Instructions — Webflow Lesson at 2:10
WebflowCreate & manage Agent Instructions — Webflow Lesson
2:10
Webflow Create & manage Agent Instructions — Webflow Lesson at 2:14
WebflowCreate & manage Agent Instructions — Webflow Lesson
2:14
Webflow Create & manage Agent Instructions — Webflow Lesson at 2:17
WebflowCreate & manage Agent Instructions — Webflow Lesson
2:17
Webflow Create & manage Agent Instructions — Webflow Lesson at 2:21
WebflowCreate & manage Agent Instructions — Webflow Lesson
2:21
Webflow Create & manage Agent Instructions — Webflow Lesson at 2:25medium presenter
WebflowCreate & manage Agent Instructions — Webflow Lesson
2:25
Webflow Create & manage Agent Instructions — Webflow Lesson at 2:33
WebflowCreate & manage Agent Instructions — Webflow Lesson
2:33
Webflow Create & manage Agent Instructions — Webflow Lesson at 2:34
WebflowCreate & manage Agent Instructions — Webflow Lesson
2:34
Webflow Create & manage Agent Instructions — Webflow Lesson at 2:38
WebflowCreate & manage Agent Instructions — Webflow Lesson
2:38
Webflow Create & manage Agent Instructions — Webflow Lesson at 2:42
WebflowCreate & manage Agent Instructions — Webflow Lesson
2:42
Webflow Create & manage Agent Instructions — Webflow Lesson at 2:43
WebflowCreate & manage Agent Instructions — Webflow Lesson
2:43
Webflow Create & manage Agent Instructions — Webflow Lesson at 2:46
WebflowCreate & manage Agent Instructions — Webflow Lesson
2:46
Webflow Create & manage Agent Instructions — Webflow Lesson at 2:47
WebflowCreate & manage Agent Instructions — Webflow Lesson
2:47
Webflow Create & manage Agent Instructions — Webflow Lesson at 2:49
WebflowCreate & manage Agent Instructions — Webflow Lesson
2:49
Webflow Create & manage Agent Instructions — Webflow Lesson at 2:54
WebflowCreate & manage Agent Instructions — Webflow Lesson
2:54
Webflow Create & manage Agent Instructions — Webflow Lesson at 2:54medium presenter
WebflowCreate & manage Agent Instructions — Webflow Lesson
2:54
Webflow Create & manage Agent Instructions — Webflow Lesson at 3:00
WebflowCreate & manage Agent Instructions — Webflow Lesson
3:00
Webflow Create & manage Agent Instructions — Webflow Lesson at 3:14
WebflowCreate & manage Agent Instructions — Webflow Lesson
3:14
Webflow Create & manage Agent Instructions — Webflow Lesson at 3:18
WebflowCreate & manage Agent Instructions — Webflow Lesson
3:18
Webflow Create & manage Agent Instructions — Webflow Lesson at 3:22
WebflowCreate & manage Agent Instructions — Webflow Lesson
3:22
Webflow Create & manage Agent Instructions — Webflow Lesson at 3:22
WebflowCreate & manage Agent Instructions — Webflow Lesson
3:22
Webflow Create & manage Agent Instructions — Webflow Lesson at 3:24
WebflowCreate & manage Agent Instructions — Webflow Lesson
3:24
Webflow Create & manage Agent Instructions — Webflow Lesson at 3:26
WebflowCreate & manage Agent Instructions — Webflow Lesson
3:26
Webflow Create & manage Agent Instructions — Webflow Lesson at 3:30
WebflowCreate & manage Agent Instructions — Webflow Lesson
3:30
Webflow Create & manage Agent Instructions — Webflow Lesson at 3:35medium presenter
WebflowCreate & manage Agent Instructions — Webflow Lesson
3:35
Webflow Create & manage Agent Instructions — Webflow Lesson at 3:41
WebflowCreate & manage Agent Instructions — Webflow Lesson
3:41
Webflow Create & manage Agent Instructions — Webflow Lesson at 3:50medium presenter
WebflowCreate & manage Agent Instructions — Webflow Lesson
3:50
Webflow Create & manage Agent Instructions — Webflow Lesson at 3:51
WebflowCreate & manage Agent Instructions — Webflow Lesson
3:51
Webflow Create & manage Agent Instructions — Webflow Lesson at 3:55medium presenter
WebflowCreate & manage Agent Instructions — Webflow Lesson
3:55
Webflow Create & manage Agent Instructions — Webflow Lesson at 4:01
WebflowCreate & manage Agent Instructions — Webflow Lesson
4:01
Webflow Create & manage Agent Instructions — Webflow Lesson at 4:06
WebflowCreate & manage Agent Instructions — Webflow Lesson
4:06
Webflow Create & manage Agent Instructions — Webflow Lesson at 4:06medium presenter
WebflowCreate & manage Agent Instructions — Webflow Lesson
4:06
Webflow Create & manage Agent Instructions — Webflow Lesson at 4:09
WebflowCreate & manage Agent Instructions — Webflow Lesson
4:09
Webflow Create & manage Agent Instructions — Webflow Lesson at 4:11
WebflowCreate & manage Agent Instructions — Webflow Lesson
4:11
Webflow Create & manage Agent Instructions — Webflow Lesson at 4:16medium presenter
WebflowCreate & manage Agent Instructions — Webflow Lesson
4:16
Webflow Create & manage Agent Instructions — Webflow Lesson at 4:23
WebflowCreate & manage Agent Instructions — Webflow Lesson
4:23
Webflow Create & manage Agent Instructions — Webflow Lesson at 4:26
WebflowCreate & manage Agent Instructions — Webflow Lesson
4:26
Webflow Create & manage Agent Instructions — Webflow Lesson at 4:30
WebflowCreate & manage Agent Instructions — Webflow Lesson
4:30
Webflow Create & manage Agent Instructions — Webflow Lesson at 4:32medium presenter
WebflowCreate & manage Agent Instructions — Webflow Lesson
4:32
Webflow Create & manage Agent Instructions — Webflow Lesson at 4:34
WebflowCreate & manage Agent Instructions — Webflow Lesson
4:34
Webflow Create & manage Agent Instructions — Webflow Lesson at 4:38
WebflowCreate & manage Agent Instructions — Webflow Lesson
4:38
Webflow Create & manage Agent Instructions — Webflow Lesson at 4:38
WebflowCreate & manage Agent Instructions — Webflow Lesson
4:38
Webflow Create & manage Agent Instructions — Webflow Lesson at 4:40
WebflowCreate & manage Agent Instructions — Webflow Lesson
4:40
Webflow Create & manage Agent Instructions — Webflow Lesson at 4:43medium presenter
WebflowCreate & manage Agent Instructions — Webflow Lesson
4:43
Webflow Create & manage Agent Instructions — Webflow Lesson at 4:46
WebflowCreate & manage Agent Instructions — Webflow Lesson
4:46

Transkript von Create & manage Agent Instructions — Webflow Lesson

Von einem Sprachmodell aus dem Ton des Films transkribiert, nicht von der Marke geschrieben. Klicke auf eine Zeile, um an diese Stelle zu springen.

  1. 0:00When you connect an agent to Webflow through the MCP server, it can see what's on your site.
  2. 0:04But that doesn't mean it knows how your team wants the site to be built.
  3. 0:07It won't automatically know why we use certain components in certain situations,
  4. 0:12how our class naming works in practice, or what makes our brand voice sound like us.
  5. 0:17In this video, we'll talk about what skills and rules are, build both a skill and a rule,
  6. 0:23go over references, and look at how to organize, import, and export what we've built.
  7. 0:28But first, what's the difference between a rule and a skill?
  8. 0:32Nothing.
  9. 0:33Except they're completely different.
  10. 0:34Rules give the agent guidance that applies across different kinds of work, like your
  11. 0:38site's accessibility or SEO standards.
  12. 0:42Skills describe how to handle a particular task or workflow, like building with your
  13. 0:46design system or writing in your brand voice.
  14. 0:49If this is confusing, it is.
  15. 0:52Rules apply to every task, but skills are only referenced depending on the task at hand.
  16. 0:57And the two can work together.
  17. 0:59A skill for building with your design system might also reference a rule for naming classes.
  18. 1:04Now let's build some instructions.
  19. 1:06There are a few ways you can do that.
  20. 1:08First, manually.
  21. 1:10If we click the plus button next to the skills or rules, we see the option to start blank.
  22. 1:24We created a few rules manually already, and you can see them here and you can make changes
  23. 1:28to these rules at any time.
  24. 1:30Behind the scenes, the editor uses Markdown, but we can see and work with it intuitively
  25. 1:36in preview mode.
  26. 1:37Markdown, preview mode, markdown, preview mode, markdown, preview mode.
  27. 1:41But with skills, they can also be auto-generated from patterns that already exist in your site.
  28. 1:47When we click, we see options to generate brand guidelines, design system, asset guidelines,
  29. 1:53and CMS guidelines, or all of those at once.
  30. 1:56And that is if our site has a CMS, which it does.
  31. 2:01We can even specify which collections we want the skills to be about.
  32. 2:05Just click generate, and the skills appear in draft right here in the panel.
  33. 2:10And they can even reference our existing components, variables, and other site-specific things.
  34. 2:15And when we're finished, we can make any edits needed, then toggle them on.
  35. 2:20That takes it from a working draft to readable by agents on your site.
  36. 2:24And another option for creating or refining skills and rules.
  37. 2:28We can ask an agent we already use, like Claude connected to the Webflow MCP server, to inspect
  38. 2:34our site and any other resources we want to give it, like brand guidelines, and draft
  39. 2:39an instruction based on what it finds.
  40. 2:41And when it's ready, most agents can draft the instructions for you, right in Webflow.
  41. 2:46But before we move on, let's talk about references.
  42. 2:49Our auto-generated skills already came with some from my site.
  43. 2:53But what are they?
  44. 2:54They connect a value or thing to the actual resource on the site, not just a text description
  45. 2:59of it.
  46. 3:00So instead of referring to something like a brand color as a hex code or a color name,
  47. 3:05we can connect it to the actual color variable.
  48. 3:09That makes the guidance more precise and keeps the reference connected if the variable changes
  49. 3:13later.
  50. 3:14And we can add references to many other things and instructions, from other skills or rules
  51. 3:19or specific pages or locales.
  52. 3:22Now let's look at how to manage what you've built.
  53. 3:24We can organize our rules and skills into different categories.
  54. 3:28We have our rules for accessibility, asset performance, class naming, forms, SEO.
  55. 3:34You and your team get to set rules and skills that work best for you, making it easier for
  56. 3:39teammates to understand what is covered.
  57. 3:41We can delete an instruction and we can organize them into folders or subfolders,
  58. 3:47which helps keep them organized as they grow.
  59. 3:50And as for sharing, we can export all the instructions as a zip file or a single instruction
  60. 3:56as a .md file. That works for one-off sharing, backups, or client handoffs. We can also import
  61. 4:02instructions in a batch or one by one. Agent instructions work just like other library
  62. 4:07resources. What if we wanted to use these agent instructions on another site? We can do that.
  63. 4:12Just install the shared library and manage updates from one place.
  64. 4:16This works especially well when you're managing several client sites or keeping
  65. 4:20brand standards consistent across a portfolio. References to resources in that same shared
  66. 4:26library stay connected to the design system pieces they reference, keeping the materials
  67. 4:31and the guidance together. So that's agent instructions. We went over skills and rules,
  68. 4:35created both a skill and a role, referenced real site resources and instructions,
  69. 4:40and looked at how to organize and share instructions.
  70. 4:43And that's how to create and manage agent instructions in Webflow.
70 Zeilen · 816 Wörter

More from Webflow

All of Webflow →

The rest of their work we have taken apart.

This is brand-first commerce. This is Webflow Ecommerce.313K views
Webflow
This is brand-first commerce. This is Webflow Ecommerce.
1:1231 frames2.6s cut0% face
MCP 2.0: Don't Just Build Fast. Build for What's Next.136K views
Webflow
MCP 2.0: Don't Just Build Fast. Build for What's Next.
1:2734 frames13.2s cut0% face
Introducing Source by WebflowLaunch5K views
Webflow
Introducing Source by Webflow
1:3255 frames2.1s cut11% face
Welcome to Webflow: Build, Launch, Optimize3K views
Webflow
Welcome to Webflow: Build, Launch, Optimize
3:10147 frames2.8s cut4% face

Cut at the same speed

Films whose median shot runs closest to 4.91s.

Comment Edenred maîtrise le cycle de la vie de sa connaissance grâce à Mayday ?43K views
Mayday
Comment Edenred maîtrise le cycle de la vie de sa connaissance grâce à Mayday ?
1:2940 frames4.9s cut60% face
Introducing AI Token Spend Management | Product DemoLaunch900 views
Ramp
Introducing AI Token Spend Management | Product Demo
1:0335 frames4.9s cut37% face
⚠️ Raycast can now see your screen10K views
Raycast
⚠️ Raycast can now see your screen
4:28179 frames4.9s cut53% face
Nikita Bier - Today we're announcing Live Studio, a brand new livestreaming command...Launch2.4M views
Nikita Bier
Nikita Bier - Today we're announcing Live Studio, a brand new livestreaming command...
0:5223 frames5.0s cut9% face
Introducing Grok 4.5: Fast, affordable intelligenceLaunch18K views
Grok
Introducing Grok 4.5: Fast, affordable intelligence
0:5622 frames4.9s cut0% face
Meet Figure 02 - the world's most advanced AI hardware1.7M views
Figure
Meet Figure 02 - the world's most advanced AI hardware
2:03101 frames5.0s cut0% face
Figma Make → GitHub rolling out next week90K views
Figma
Figma Make → GitHub rolling out next week
2:36204 frames5.0s cut99% face
How to Add Dynamic Captions in Premiere Pro & DaVinci Resolve with FireCut91 views
FireCut
How to Add Dynamic Captions in Premiere Pro & DaVinci Resolve with FireCut
1:4849 frames4.8s cut100% face
Google I/O '24 in under 10 minutesLaunch
Google
Google I/O '24 in under 10 minutes
9:58172 frames4.8s cut44% face
User Guide | Smart Multicolour Ceiling Light681 views
Nanoleaf
User Guide | Smart Multicolour Ceiling Light
0:5826 frames5.0s cut0% face
HDR with Ray3 unlocks dynamic control for color. Maintain fine detail...68K views
Luma
HDR with Ray3 unlocks dynamic control for color. Maintain fine detail...
0:209 frames5.0s cut0% face
Talent = Capability x Taste x Agency @ivanhzhao & @tim at @LDNTe...44K views
Notion
Talent = Capability x Taste x Agency @ivanhzhao & @tim at @LDNTe...
0:4421 frames5.0s cut86% face

Lit and framed like this

Closest on how much of the running time has a face in it and how dark the frames are.

Want It All | Get It Together | Equinox9K views
Equinox
Want It All | Get It Together | Equinox
0:3090 frames0.2s cut27% face
Introducing our new frontier video model, Runway Gen-4.5. Previously ...Launch854K views
Runway
Introducing our new frontier video model, Runway Gen-4.5. Previously ...
1:2892 frames0.8s cut28% face
every video model in one place. we partnered with the top AI video p...167K views
Krea
every video model in one place. we partnered with the top AI video p...
0:1820 frames0.8s cut30% face
we're launching instant quote weldments you can upload a sheet metal...Launch32K views
Kenneth Cassel
we're launching instant quote weldments you can upload a sheet metal...
1:3459 frames1.4s cut31% face
The right questions, at the right time. That's what sets you apart. ...193K views
Perplexity
The right questions, at the right time. That's what sets you apart. ...
0:5130 frames2.5s cut23% face
Introducing the Multi-Shot App. An easy way to go from a simple promp...Launch192K views
Runway
Introducing the Multi-Shot App. An easy way to go from a simple promp...
1:3540 frames3.0s cut25% face
The next billion dollar company will be powered by Browserbase. We a...382K views
Paul Klein IV
The next billion dollar company will be powered by Browserbase. We a...
1:0443 frames1.5s cut23% face
Create compositing mattes in seconds with Aleph 2.0 Mattes let you i...41K views
Runway
Create compositing mattes in seconds with Aleph 2.0 Mattes let you i...
0:5640 frames2.4s cut33% face
This is GPT-6 Astra. Anything you can do on a computer, Astra can do...30M views
OpenAI
This is GPT-6 Astra. Anything you can do on a computer, Astra can do...
2:43143 frames3.3s cut27% face
Oops, we did it again. You've been asking, and it's finally here Ima...149K views
Magnific
Oops, we did it again. You've been asking, and it's finally here Ima...
0:2721 frames2.5s cut33% face
Perplexity x Lewis HamiltonLaunch24K views
Perplexity
Perplexity x Lewis Hamilton
0:5131 frames2.5s cut23% face
Camera control in AI video is solved. Move your phone → the camera m...18K views
Adil Alimzhanov
Camera control in AI video is solved. Move your phone → the camera m...
0:166 frames33% face

More social

Same category, other makers, most watched first.

Your ideas, your apps—Base44622M views
Base44
Your ideas, your apps—Base44
0:5651 frames1.1s cut6% face
Turn any idea into an app with Base44538M views
Base44
Turn any idea into an app with Base44
0:5538 frames2.2s cut50% face
Build Your Website with One Sentence | Base44154M views
Base44
Build Your Website with One Sentence | Base44
0:4835 frames0.9s cut31% face
Rip The Script | Nike Football81M views
Nike Football
Rip The Script | Nike Football
6:00310 frames1.1s cut60% face
PetSmart | "Pickup in...STORE!"75M views
PetSmart
PetSmart | "Pickup in...STORE!"
0:1511 frames1.4s cut64% face
NEO The Home Robot Order Today69M views
1X
NEO The Home Robot Order Today
9:53271 frames2.8s cut25% face
Apple Education: Ready for every learning opportunity69M views
Apple
Apple Education: Ready for every learning opportunity
1:4687 frames1.3s cut40% face
Phone calls suck. So, we bought a giant telephone car, raised $65,00...64M views
Bland
Phone calls suck. So, we bought a giant telephone car, raised $65,00...
1:4854 frames4.3s cut81% face
The Impossible Return – OIKOS 15s Commercial 202646M views
OIKOS Protein
The Impossible Return – OIKOS 15s Commercial 2026
0:1517 frames1.0s cut65% face
Oh wait there’s more: we’re building 3D Transforms, here’s a preview ...39M views
Figma
Oh wait there’s more: we’re building 3D Transforms, here’s a preview ...
1:0423 frames4.0s cut78% face
Getting Help is Simple, With Hims36M views
hims
Getting Help is Simple, With Hims
0:3023 frames2.0s cut70% face
Made in Figma (2025) Like this ❤️ we designed it for you36M views
Figma
Made in Figma (2025) Like this ❤️ we designed it for you
0:3872 frames0.5s cut7% face
Browse every frame in the library