वीडियो पर वापस

Webflow

Agent Instructions in action — Webflow lesson

प्लैटफ़ॉर्म
YouTube
अवधि
3:40
बोली जाने वाली भाषा
अमेरिकी अंग्रेज़ी
व्यूज़
1.4 हज़ार
औसत कट
4.37s
स्क्रीन पर चेहरा
20%
गहरे फ़्रेम
34%
Webflow Agent Instructions in action — Webflow lesson at 0:00
WebflowAgent Instructions in action — Webflow lesson
0:00
Webflow Agent Instructions in action — Webflow lesson at 0:00
WebflowAgent Instructions in action — Webflow lesson
0:00
Webflow Agent Instructions in action — Webflow lesson at 0:01
WebflowAgent Instructions in action — Webflow lesson
0:01
Webflow Agent Instructions in action — Webflow lesson at 0:02
WebflowAgent Instructions in action — Webflow lesson
0:02
Webflow Agent Instructions in action — Webflow lesson at 0:02
WebflowAgent Instructions in action — Webflow lesson
0:02
Webflow Agent Instructions in action — Webflow lesson at 0:04
WebflowAgent Instructions in action — Webflow lesson
0:04
Webflow Agent Instructions in action — Webflow lesson at 0:07medium presenter
WebflowAgent Instructions in action — Webflow lesson
0:07
Webflow Agent Instructions in action — Webflow lesson at 0:10
WebflowAgent Instructions in action — Webflow lesson
0:10
Webflow Agent Instructions in action — Webflow lesson at 0:11
WebflowAgent Instructions in action — Webflow lesson
0:11
Webflow Agent Instructions in action — Webflow lesson at 0:15
WebflowAgent Instructions in action — Webflow lesson
0:15
Webflow Agent Instructions in action — Webflow lesson at 0:19medium presenter
WebflowAgent Instructions in action — Webflow lesson
0:19
Webflow Agent Instructions in action — Webflow lesson at 0:20
WebflowAgent Instructions in action — Webflow lesson
0:20
Webflow Agent Instructions in action — Webflow lesson at 0:22
WebflowAgent Instructions in action — Webflow lesson
0:22
Webflow Agent Instructions in action — Webflow lesson at 0:22
WebflowAgent Instructions in action — Webflow lesson
0:22
Webflow Agent Instructions in action — Webflow lesson at 0:23
WebflowAgent Instructions in action — Webflow lesson
0:23
Webflow Agent Instructions in action — Webflow lesson at 0:26
WebflowAgent Instructions in action — Webflow lesson
0:26
Webflow Agent Instructions in action — Webflow lesson at 0:30
WebflowAgent Instructions in action — Webflow lesson
0:30
Webflow Agent Instructions in action — Webflow lesson at 0:32
WebflowAgent Instructions in action — Webflow lesson
0:32
Webflow Agent Instructions in action — Webflow lesson at 0:33
WebflowAgent Instructions in action — Webflow lesson
0:33
Webflow Agent Instructions in action — Webflow lesson at 0:34
WebflowAgent Instructions in action — Webflow lesson
0:34
Webflow Agent Instructions in action — Webflow lesson at 0:34
WebflowAgent Instructions in action — Webflow lesson
0:34
Webflow Agent Instructions in action — Webflow lesson at 0:35
WebflowAgent Instructions in action — Webflow lesson
0:35
Webflow Agent Instructions in action — Webflow lesson at 0:40
WebflowAgent Instructions in action — Webflow lesson
0:40
Webflow Agent Instructions in action — Webflow lesson at 0:43medium presenter
WebflowAgent Instructions in action — Webflow lesson
0:43
Webflow Agent Instructions in action — Webflow lesson at 0:45
WebflowAgent Instructions in action — Webflow lesson
0:45
Webflow Agent Instructions in action — Webflow lesson at 0:47
WebflowAgent Instructions in action — Webflow lesson
0:47
Webflow Agent Instructions in action — Webflow lesson at 0:51
WebflowAgent Instructions in action — Webflow lesson
0:51
Webflow Agent Instructions in action — Webflow lesson at 0:52
WebflowAgent Instructions in action — Webflow lesson
0:52
Webflow Agent Instructions in action — Webflow lesson at 1:02medium presenter
WebflowAgent Instructions in action — Webflow lesson
1:02
Webflow Agent Instructions in action — Webflow lesson at 1:08
WebflowAgent Instructions in action — Webflow lesson
1:08
Webflow Agent Instructions in action — Webflow lesson at 1:10
WebflowAgent Instructions in action — Webflow lesson
1:10
Webflow Agent Instructions in action — Webflow lesson at 1:14
WebflowAgent Instructions in action — Webflow lesson
1:14
Webflow Agent Instructions in action — Webflow lesson at 1:22
WebflowAgent Instructions in action — Webflow lesson
1:22
Webflow Agent Instructions in action — Webflow lesson at 1:26
WebflowAgent Instructions in action — Webflow lesson
1:26
Webflow Agent Instructions in action — Webflow lesson at 1:30
WebflowAgent Instructions in action — Webflow lesson
1:30
Webflow Agent Instructions in action — Webflow lesson at 1:34
WebflowAgent Instructions in action — Webflow lesson
1:34
Webflow Agent Instructions in action — Webflow lesson at 1:37medium presenter
WebflowAgent Instructions in action — Webflow lesson
1:37
Webflow Agent Instructions in action — Webflow lesson at 1:51
WebflowAgent Instructions in action — Webflow lesson
1:51
Webflow Agent Instructions in action — Webflow lesson at 1:53
WebflowAgent Instructions in action — Webflow lesson
1:53
Webflow Agent Instructions in action — Webflow lesson at 1:59
WebflowAgent Instructions in action — Webflow lesson
1:59
Webflow Agent Instructions in action — Webflow lesson at 2:02medium presenter
WebflowAgent Instructions in action — Webflow lesson
2:02
Webflow Agent Instructions in action — Webflow lesson at 2:10
WebflowAgent Instructions in action — Webflow lesson
2:10
Webflow Agent Instructions in action — Webflow lesson at 2:18
WebflowAgent Instructions in action — Webflow lesson
2:18
Webflow Agent Instructions in action — Webflow lesson at 2:22medium presenter
WebflowAgent Instructions in action — Webflow lesson
2:22
Webflow Agent Instructions in action — Webflow lesson at 2:28
WebflowAgent Instructions in action — Webflow lesson
2:28
Webflow Agent Instructions in action — Webflow lesson at 2:34
WebflowAgent Instructions in action — Webflow lesson
2:34
Webflow Agent Instructions in action — Webflow lesson at 2:34
WebflowAgent Instructions in action — Webflow lesson
2:34
Webflow Agent Instructions in action — Webflow lesson at 2:38medium presenter
WebflowAgent Instructions in action — Webflow lesson
2:38
Webflow Agent Instructions in action — Webflow lesson at 2:42
WebflowAgent Instructions in action — Webflow lesson
2:42
Webflow Agent Instructions in action — Webflow lesson at 2:50
WebflowAgent Instructions in action — Webflow lesson
2:50
Webflow Agent Instructions in action — Webflow lesson at 2:50medium presenter
WebflowAgent Instructions in action — Webflow lesson
2:50
Webflow Agent Instructions in action — Webflow lesson at 2:56
WebflowAgent Instructions in action — Webflow lesson
2:56
Webflow Agent Instructions in action — Webflow lesson at 3:02medium presenter
WebflowAgent Instructions in action — Webflow lesson
3:02
Webflow Agent Instructions in action — Webflow lesson at 3:06
WebflowAgent Instructions in action — Webflow lesson
3:06
Webflow Agent Instructions in action — Webflow lesson at 3:10
WebflowAgent Instructions in action — Webflow lesson
3:10
Webflow Agent Instructions in action — Webflow lesson at 3:13medium presenter
WebflowAgent Instructions in action — Webflow lesson
3:13
Webflow Agent Instructions in action — Webflow lesson at 3:16
WebflowAgent Instructions in action — Webflow lesson
3:16
Webflow Agent Instructions in action — Webflow lesson at 3:18
WebflowAgent Instructions in action — Webflow lesson
3:18
Webflow Agent Instructions in action — Webflow lesson at 3:22
WebflowAgent Instructions in action — Webflow lesson
3:22
Webflow Agent Instructions in action — Webflow lesson at 3:24
WebflowAgent Instructions in action — Webflow lesson
3:24
Webflow Agent Instructions in action — Webflow lesson at 3:26
WebflowAgent Instructions in action — Webflow lesson
3:26
Webflow Agent Instructions in action — Webflow lesson at 3:27
WebflowAgent Instructions in action — Webflow lesson
3:27
Webflow Agent Instructions in action — Webflow lesson at 3:30
WebflowAgent Instructions in action — Webflow lesson
3:30
Webflow Agent Instructions in action — Webflow lesson at 3:34medium presenter
WebflowAgent Instructions in action — Webflow lesson
3:34
Webflow Agent Instructions in action — Webflow lesson at 3:36
WebflowAgent Instructions in action — Webflow lesson
3:36

Agent Instructions in action — Webflow lesson की ट्रांसक्रिप्ट

फ़िल्म के अपने ऑडियो से एक स्पीच मॉडल द्वारा लिखा गया, ब्रांड द्वारा नहीं। उस पल पर जाने के लिए किसी भी पंक्ति पर क्लिक करें।

  1. 0:00Agent instructions give your agent context about your site, how your team builds, what your brand
  2. 0:05sounds like, which components to use, and which standards to follow. Once they're set up, an agent
  3. 0:10connected through MCP, like Claude, Cursor, or another supported agent can read those instructions
  4. 0:16and use them while it works. In this video, we'll see how those instructions shape a real task,
  5. 0:23what the agent does with them during a session, and how to troubleshoot a result when it doesn't
  6. 0:29quite match what we expected.
  7. 0:30Now, we already have a few instructions in place.
  8. 0:33There's a class naming rule that applies
  9. 0:35whenever the agent creates new classes.
  10. 0:37And there's a design system skill that tells the agent
  11. 0:41how to work with our components and variables.
  12. 0:43Let's put those instructions to work.
  13. 0:45We'll open the session with our agent, Claude,
  14. 0:48and give it a realistic task.
  15. 0:50On the homepage, add a feature section
  16. 0:52with three features below the hero.
  17. 0:55Use our existing design system components and variables
  18. 0:58and use placeholder copy for the headings and descriptions.
  19. 1:02This is normal specific prompt.
  20. 1:04We're telling the agent what to build and where to build it,
  21. 1:08while our instructions handle the component choices,
  22. 1:10variables, implementation details, and class naming.
  23. 1:14That's shaping a real task.
  24. 1:16Let's look at what an agent does with them during a session.
  25. 1:19Before the agent builds anything, it calls the guide tool,
  26. 1:22which prompts it to our stored instructions.
  27. 1:25instructions.
  28. 1:25The agent then reads our instructions and builds the section.
  29. 1:29It uses the Feature Card component, selects the correct variants, and names the classes
  30. 1:35according to our rule.
  31. 1:37And all of that happens without us repeating those requirements in the prompt.
  32. 1:40And the important thing here is that the agent isn't making those decisions by guessing.
  33. 1:45It reads our instructions at the start of the session and uses them alongside the prompt
  34. 1:49to decide how it should work.
  35. 1:52That's the value of agent instructions.
  36. 1:53They help the agent make better decisions without us repeating the same context every time.
  37. 1:59Now, one thing to keep in mind, the agent may not always load our instructions automatically.
  38. 2:05The guide tool is designed to encourage that, but different agents can handle it differently.
  39. 2:10This is a great example.
  40. 2:12Claude's results don't really reflect the standards in this instance.
  41. 2:15Maybe it uses the wrong component, ignores a naming convention, or writes copy that doesn't
  42. 2:21sound like our brand.
  43. 2:22It's definitely worth taking a closer look.
  44. 2:25We can start by asking the agent directly.
  45. 2:28Claude, did you use my agent instructions for this task?
  46. 2:32If it didn't, we can ask it to reload them and try again.
  47. 2:35And we can always proactively ask the agent to use them in future prompts.
  48. 2:40If we keep running into these issues, we can go back to the instruction itself, make the
  49. 2:45guidance more specific, point to the exact resource, or add an example.
  50. 2:50But even with solid guidance, the agent may still give us a different result.
  51. 2:54That's just part of working with AI.
  52. 2:56You can also help to ask the agent what it found on the site.
  53. 2:59If a component was renamed, a variable changed, or there are several similar patterns to choose from,
  54. 3:06the instruction may be accurate but out of date, or the site itself may be giving the agent mixed
  55. 3:12signals. The best agent instructions aren't written once and then left alone.
  56. 3:15When the agent makes a choice we wouldn't have made, we can use that as feedback and
  57. 3:20improve the instructions over time.
  58. 3:21The agent can be a partner in this.
  59. 3:23OK, we saw how agent instructions shape a real task, how the agent uses them during
  60. 3:28a session, and what to check when the result doesn't match what we expected.
  61. 3:33And that's agent instructions in action in Webflow.
61 पंक्तियाँ · 639 शब्द

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
Create & manage Agent Instructions — Webflow Lesson2K views
Webflow
Create & manage Agent Instructions — Webflow Lesson
4:49179 frames4.9s cut28% face

Cut at the same speed

Films whose median shot runs closest to 4.37s.

This is physics & simulations with Ray3. Particles scatter, dust ...375K views
Luma
This is physics & simulations with Ray3. Particles scatter, dust ...
0:178 frames4.4s cut0% face
It used to take a really specific kind of truck to ship giant blocks ...40K views
Runway
It used to take a really specific kind of truck to ship giant blocks ...
0:2815 frames4.4s cut0% face
This is instruction following with Ray3. From the way a scene builds ...25K views
Luma
This is instruction following with Ray3. From the way a scene builds ...
0:179 frames4.4s cut0% face
Create Slides, Docs, and Templates15K views
OpenAI
Create Slides, Docs, and Templates
3:17135 frames4.4s cut90% face
Let's Mayday it! Découvrez la suite logicielle de Mayday en 2026.33 views
Mayday
Let's Mayday it! Découvrez la suite logicielle de Mayday en 2026.
2:49128 frames4.4s cut74% face
Okay I built it! 🍰 Infinite Slop An infinite and interactive AI gen...2.4M views
levelsio
Okay I built it! 🍰 Infinite Slop An infinite and interactive AI gen...
0:5330 frames4.3s cut47% face
This is complex crowds with Ray3. From packed stadiums to bustling st...408K views
Luma
This is complex crowds with Ray3. From packed stadiums to bustling st...
0:188 frames4.3s cut38% face
This is high-octane motion with Ray3. Explosive chaos, fast-paced rap...27K views
Luma
This is high-octane motion with Ray3. Explosive chaos, fast-paced rap...
0:178 frames4.3s cut25% face
Six Claude Code Pro Tips in 2 mins2K views
Sketch Together
Six Claude Code Pro Tips in 2 mins
1:5541 frames4.4s cut100% face
Announcing @Chatbase Backstage: a control center for managing your AI...Launch700K views
Yasser
Announcing @Chatbase Backstage: a control center for managing your AI...
2:36127 frames4.3s cut54% face
Introducing S1, our new foundation model that learns from one example...Launch3.2M views
Skild AI
Introducing S1, our new foundation model that learns from one example...
5:14147 frames4.3s cut20% face
1X World Model77K views
1X
1X World Model
3:10141 frames4.4s cut41% 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.

Nike Football x LEGO® Collection66K views
Nike
Nike Football x LEGO® Collection
0:4079 frames0.4s cut20% face
Seedance 2.0 is now available in 1080p on Runway. More pixels, more d...Launch62K views
Runway
Seedance 2.0 is now available in 1080p on Runway. More pixels, more d...
0:5937 frames2.9s cut22% face
Tesla Home: Home Energy Management, Powered by AI130K views
Tesla
Tesla Home: Home Energy Management, Powered by AI
1:0966 frames1.6s cut23% face
🌟 Passed 2000+ concurrent viewers! 🫟 ✅ Switched to portrait videos ...198K views
levelsio
🌟 Passed 2000+ concurrent viewers! 🫟 ✅ Switched to portrait videos ...
1:1426 frames23% face
Pinterest | Get Away958 views
Pinterest
Pinterest | Get Away
0:3022 frames1.2s cut18% face
The classroom changed. The homework changed. How we learn changed. 1...75K views
Replit
The classroom changed. The homework changed. How we learn changed. 1...
0:3343 frames0.5s cut16% face
Introducing Pika Audio ModelsLaunch163 views
Pika Labs
Introducing Pika Audio Models
1:1565 frames0.4s cut17% face
Introducing iPhone AirLaunch
Apple
Introducing iPhone Air
2:3070 frames3.1s cut16% face
I analyzed 60+ startup launch videos that went viral on x this month...137K views
Eddy thakur
I analyzed 60+ startup launch videos that went viral on x this month...
0:0930 frames0.4s cut23% face
Travis is back.743K views
a16z
Travis is back.
1:55103 frames0.6s cut25% face
NEO Factory | Hayward, California99K views
1X
NEO Factory | Hayward, California
2:50163 frames1.9s cut18% face
Raycast AI: The magic of AI, right on your MacLaunch42K views
Raycast
Raycast AI: The magic of AI, right on your Mac
5:52128 frames10.4s cut24% 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