The Plateau of Sad Gray Icons
1. The Homogeneous Design Problem of AI Agents
- When an AI agent such as Claude Code generates a prototype with only a minimal design system, it tries to fill in the missing UI patterns itself and repeats patterns like "large generic icons inside soft gray boxes" across the interface.
- This is not merely a matter of visual taste. It happens because the AI agent does not understand the domain and work context of the UI it is creating.
- When AI receives qualitative written principles such as "do not use meaningless colors or boxes," it applies them too rigidly and treats even essential status badges and background colors as rule violations or decoration.
2. A Four-Step Process for Structuring Judgment
The author systematized a process that helps AI agents make consistent design decisions.
1) Classify the Surface Type
- Begin by defining the kind of work the user performs in that region, rather than starting with a route or an individual component.
- Orienting: "What should I focus on right now?" (overview/dashboard)
- Index reference: Search and compare multiple records before opening a detail page
- Bulk editing: Enter and immediately edit many values
- Resource detail: Read and edit the details of an individual record
2) Classify the Semantic Role
- Clearly identify each element as an Identifier, Status Indicator, Control, or Container.
3) Apply Specific Rules Based on Density
- On high-density surfaces such as menus and tables, use small outline icons sized to match the text line height instead of large icons, and remove decorative background containers.
- Define interaction behavior as well as visual treatment according to the surface role, such as whether editing should open a modal or happen in an in-page sheet.
4) Map Canonical Product References
- When an appropriate best-practice reference exists, follow its composition first.
3. Key Findings and Implications
- Real product references are far more effective than written guidance: Abstract principles give human designers room for creativity, while AI agents produce their strongest UI results when they can imitate well-designed, real product implementations.
- Design systems need a feedback loop: Traditional design systems mainly push guidance into products. Going forward, the judgment and trusted solutions accumulated during product development must flow back into the design system as context for AI.
