Stop Making AI Slop Landing Pages

You are helping me turn one specific YouTube video into real, durable learning.

Source video:
- Title: Stop Making AI Slop Landing Pages
- URL: https://www.youtube.com/watch?v=M4DNgmI7MIM
- Topic: Agent Architecture
- My current learning frame: Build a landing page for a made-up brand starting from a URL or screenshot reference plus a design.md, then do three polish passes: swap the font away from Inter, replace gradients and lights with generated images, and adapt one Mobin section into your design.
- Why this matters: New playlist item from DesignCode; queued for transcript-backed review, topic mapping, and a practical learning artifact.

Transcript anchors from this exact video:
- 1:57 / Evidence 1: "file and you can include that in your next prompt. Especially if you're starting from scratch. Then if you want this as part of a workflow, you put these rules into your agents.md file. The agents.mmd file is..."
- 6:41 / Evidence 2: "you want and it's going to do a far better job. Looking at this one, like I said, if the goal is to avoid the AI slop, this is a good starting point. There are other mistakes. For..."
- 11:12 / Evidence 3: "that are already packed with this information that you can use for your designs. every time that you prompt or every time that you feel that the AI is steering away from something that looks good into something..."
- 13:36 / Evidence 4: "inspiration and that's your goal. It's also adapting to the page using the font that is the design system of the page and it's also setting it in dark mode. Now again coming back to point number three,..."
- 16:09 / Evidence 5: "the model, their strength, and their weaknesses. We have to use screenshots and references and URLs of your favorite websites. We want to use skills and design. MD that are highly available across many many websites. And if..."
- 19:01 / Evidence 6: "and then you want to describe your product. So for example, you know, AI gave Verra. So for my uh yoga studio called Verra and then you add this all to the prom which includes the design. MD..."
- 20:43 / Evidence 7: "going to do at. And by the way, you can do also this in codeex or whatever tool that you want to use. But in this case, you can reference a skill like this. And you can search..."

Video-aware target:
- Prompt lane: Design system
- Mechanism to extract: Extract how the video turns visual references or component systems into usable constraints for agents.
- Artifact to produce: A design-system adoption brief with source references, tokens/components, agent handoff rules, and visual QA checks.
- Artifact must include: references; tokens/components; handoff artifact; implementation rule; visual QA

Your task:
1. Use the transcript anchors above as the primary source packet. If you add outside context, label it clearly as outside context and keep it secondary.
2. Create a source-check table with columns: timestamp, claim, transcript support, what the demo proves, confidence, and what still needs verification.
3. Extract the actual teachable mechanism from the video: Extract how the video turns visual references or component systems into usable constraints for agents. Do not invent claims that are not supported by the title, lesson frame, or transcript anchors.
4. Build a reusable learning artifact: A design-system adoption brief with source references, tokens/components, agent handoff rules, and visual QA checks.
5. Include:
   - a plain-English definition of the core idea
   - a diagram or structured model using this sequence: Reference -> Tokens -> Components -> Usage rules -> Agent prompt context -> Implementation -> Visual QA
   - answers to these source questions: What design source is reused? | How is it translated into agent context? | What review catches generic output?
   - 3 concrete examples that apply the video idea to real agentic work, such as Figma-to-shadcn workflow; design.md brief; UI reference library remix
   - 2 failure modes the video helps prevent, chosen from the transcript evidence and these likely risks: copying visuals without rules; generic generated UI; no visual QA screenshot pass
   - a checklist for the next real workflow, focused on: references, tokens, components, handoff, QA
   - one practical exercise with a clear done signal: Turn one screen reference into five constraints a coding agent must follow.
6. Add a "learning transfer" section: what changes in my workflow tomorrow if I actually learned this?
7. Add a "source check" section that cites which transcript anchor supports each major takeaway.

Quality bar:
- Make this specific to "Stop Making AI Slop Landing Pages", not a generic Agent Architecture essay.
- Cite transcript anchors for every claim about design context, UI generation, preview, critique, or handoff.
- Prefer operational examples, failure modes, and reusable artifacts over broad definitions.
- Call out uncertainty instead of smoothing over weak evidence.
- Avoid these generic drifts: generic design inspiration; component lists without usage rules; no screenshot review.
- If evidence is weak or missing, stop and say what transcript segment or timestamp needs review instead of guessing.
- Finish with a concise artifact I could paste into my learning app.