Machine Experience (MX) Design
Machine experience (MX) design is designing products so both humans and AI systems can read structure, meaning, and relationships—not only pixels.
As agents browse sites and UIs are generated at runtime, semantic structure becomes part of discoverability.
Share
What it means
Semantic HTML, meaningful component metadata, design tokens that describe roles, and documentation that explains when to use each pattern—not just how it looks.
Why designers should care
Poor MX means agents mis-parse your product, wrong components get generated, and AI search cites the wrong pages. Good MX improves human UX and machine readability.
Example
A design system documents each component with “use when” notes and pairs Figma components with role-based tokens agents can map to code.
Common mistakes
- • Div-only layouts with no heading hierarchy for key answers.
- • Components named Button2/Frame447 without semantic purpose.
- • SEO and MX treated as engineering-only concerns.