動画一覧へ戻る

Webflow

Agent Instructions in action — Webflow lesson

プラットフォーム
YouTube
長さ
3:40
話されている言語
アメリカ英語
再生数
1379
カット間隔の中央値
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