用途:面向 UI/UX 的设计与实现,用于规划、构建、评审和改进界面代码,覆盖落地页、仪表盘、SaaS 产品和响应式移动应用。核心主张是“什么都做全”正是 AI 生成感的来源,设计的关键在于决定舍弃什么。
主要能力:给出五条行动原则(动手前先质疑必要性、每个区块只设一个主角、避免所有元素同等存在感、多提删除建议、先指出至少三个问题再提改进);定义“高级感公式”Premium = 图像质量 × 尺寸 + 留白 − 装饰;提供图像尺寸与宽高比、间距令牌(--space-section 112px、--space-group 64px、--space-element 24px)、栅格与视觉层级核对清单。
可访问性(最优先):按 WCAG 2.1,正文小于 18px 对比度至少 4.5:1,大字至少 3:1,UI 与图标至少 3:1;要求使用项目 globals.css 中定义的令牌而非 Tailwind 默认色;给出徽章、禁用态、多语言排版的字号令牌(如 .text-hero 英文 96px、日文 80px)与用法。
使用方式:遵循 globals.css 令牌与圆角令牌(--radius-sm/md/lg/full);使用给定按钮(主 CTA 白底黑字、次按钮白描边)、卡片与玻璃卡样式;图标用 Lucide,禁用 emoji;可用 grep 检查圆角与颜色的 Tailwind 直接指定,并用 Lighthouse 检查可访问性:npm run dev、lighthouse http://localhost:3000 --only-categories=accessibility --view。
适用场景:需要避免模板化 AI 观感的界面重构与评审。限制与说明:文中部分内容以特定项目(如 MUEDear)为例,属示例而非通用要求;具体功能、收费、价格、平台与效果等资料中暂未提供。