less-is-more-ui

少即是多 UI

这项技能通过应用通用设计公理，帮助 AI Agent 设计简洁、实用且宁静的 Web 界面。

目标是创建以精简为首要价值的界面。每个元素都必须有存在的理由，否则就应移除。

本质的支柱

1. 基础（源流）

了解极简设计的哲学根源。详见 docs/principles.md 和 docs/design-manifesto.md。

• 密斯式清晰：移除所有装饰元素，让内容自己说话。
• 沙利文式逻辑：形式追随功能。每个元素都必须体现其用途。
• 维涅里式纪律：将网格、字体、比例和对齐作为完整的视觉系统来运用。
• 拉姆斯式系统简约：好的设计易于理解，且不会喧宾夺主。

2. 方法论（公理）

将这些通用法则（详见 references/axioms.md）作为推理引擎：

1. 合理性：每个像素都必须证明自身存在的价值。
2. 字体主导：字体就是界面。运用字号和字重，而非方框。
3. 材料本真：不使用虚假的纵深、阴影或拟物设计。
4. 邻近与留白：留白是最有力的结构工具。
5. 隐形网格：通过对齐营造秩序，而无需显示边框。
6. 选择悖论：限制选项，以提升清晰度和意图。

3. 界面（实现）

执行“减法检查”，并遵循 docs/design-process.md 中的流程：

1. 识别噪声：查找阴影、渐变、多余图标和装饰性边框。
2. 移除并重新评估：删除噪声。如果界面仍能正常使用，就不要加回来。
3. 优化字体：通过改进字体层级和留白来弥补。

随附资源

• index.html：“本质博物馆”——展示所有原则的实时示例与试验场。
• assets/css/reset.css：所有 CSS 都必须采用的现代主义基础样式。
• assets/css/style.css：系统美学的核心实现。
• references/tokens.css：本质设计系统的令牌。务必使用这些语义变量，不要使用硬编码的十六进制值或通用单位。
• references/axioms.md：设计决策的逻辑基础。
• references/case-studies.md：嘈杂与精简模式的示例。
• references/components.md：使用本质令牌的极简代码片段。
• docs/principles.md：深入探讨哲学基础（密斯、沙利文、维涅里、拉姆斯）。
• docs/design-manifesto.md：关于宁静、理性界面的整体愿景。
• docs/design-process.md：构建极简 UI 的分步方法。
• docs/animations.md：细微且实用的微交互规范。
• docs/accessibility.md：如何在不增加视觉噪声的情况下保持符合 WCAG 标准。
• docs/typography.md：系统字体与开源字体的现代主义搭配指南。
• docs/responsive.md：如何通过精简而非堆叠来适配小屏幕。
• docs/anti-patterns.md：快速检查并移除视觉噪声的清单。
• docs/design-checklist.md：展示 UI 前的最终核对清单。

只加载任务所需的资源。推理时从 references/axioms.md 开始，编写 CSS 前查看 references/tokens.css，实现按钮、表单、卡片、导航或其他界面基础组件前查看 references/components.md。将 index.html 作为预期最终视觉质量的参考。

何时使用这项技能

在注重清晰、克制和专业润色的 UI、前端及 Web 设计任务中使用这项技能。它尤其适用于：

• 构建仪表盘、内部工具或数据密集型视图。
• 创建需要显得专业、目标明确且宁静的落地页。
• 简化复杂的用户流程，或重构“嘈杂”的现有代码库。
• 设计注重清晰度和速度、而非视觉装饰的任何布局。