Design Frameworks — Agent's Perspective

FrameworkAtomic Design (Brad Frost)

Core IdeaInterface UI as a hierarchy of composition: atoms → molecules → organisms → templates → pages, where each level builds on the previous one.

PrinciplesSingle responsibility per component, no skipping levels, reusable building blocks, predictable nesting depth, naming conventions that encode level.

Agent AngleGives an AI a tree structure to traverse — the same kind of structure an AST parser recognizes in code. The agent can compute composition completeness, detect orphan atoms, and flag level-skipping violations.

Computable RulesComponent nesting depth consistency, level-skipping detection (atom→organism without molecule), reuse ratio per atom across molecules, naming convention parsing, composition completeness score.

SourceFrost, Brad. Atomic Design. atomicdesign.bradfrost.com

FrameworkDesign Tokens (W3C Design Tokens Community Group / Salesforce Lightning)

Core IdeaAll visual design properties (color, spacing, typography) are abstracted into named, platform-agnostic variables organized by semantic purpose, not value.

PrinciplesSemantic naming over literal naming, global → alias → component token hierarchy, platform-agnostic representation, single source of truth for every design decision.

Agent AngleThe closest thing to a machine-readable design spec. An agent can read intent directly from variable names, detect token drift, validate contrast at the token level, and trace the dependency chain from global tokens to component tokens.

Computable RulesSemantic naming compliance (purpose-based vs value-based), token coverage percentage (tokens used vs hardcoded values), token hierarchy validation, contrast ratio preservation across token aliases.

SourceW3C Design Tokens Community Group. design-tokens.gitbook.io. Also see Four Design Trends Through an Agent's Eyes on this blog.