I've generated dozens of Figma interfaces with Claude via MCP. After a while, a pattern emerges: the difference between a well-placed component and a hallucination almost never comes down to the model. It comes down to three rules in how the design system is written.
1. Every component has a contextual usage rule
Not just its props: a sentence that says in which context it's used, and in which context it's never used.
Example: in our system, a blocking error uses the Banner component, never a Toast. The agent, though, picks the Toast by default. Because that's the most common choice everywhere else, except in yours.
2. Component combinations have their own rules
When two components appear together, there are rules your team knows by heart but nobody has ever written down. A primary button and a secondary button in the same action bar: the primary one is always on the right. A search field is never followed by a “Filter” button without a separator.
Your team applies them without thinking. The agent, though, doesn't know these rules until you've written them down somewhere. I document them in YAML: a machine reads YAML, it doesn't browse a Notion doc.
3. Context bubbles, not the whole DS at once
Depending on the task (form, table, navigation), the agent only receives the relevant context. Less context, fewer hallucinations.
Do you already have rules like these in your design system, even informally? That's exactly the material you need to write down: the day an AI reads your system, they're what makes the difference.