用途：这是一套前端界面设计准则，用于在构建或评审 Web UI（组件、页面、布局、样式、动画）时应用，目标是做出有辨识度且精致的界面。
主要能力与要点： 方向：动手前先确定明确的审美立场；若仓库有 DESIGN.md，其字体、token、预算与配方优先于本准则。所有改动须用项目已有的样式系统表达，不得引入第二套。避免通用 AI 审美（习惯性字体栈、白底紫渐变、无特色的卡片网格）。 排版：字体与字重少而精，通常不超过两三个字族；层级靠字号与字重；字号取自项目字阶，标题随层级递减；行高按角色（标题约 1.1，正文 1.5–1.6，无单位）；大标题略负字距，小号大写标签略正字距；长文每行 60–75 字符；标题用 text-wrap: balance，描述用 pretty；变化数字用 tabular-nums；正文 ≥16px，对比度 ≥4.5:1；移动端输入框 ≥16px。 表面：嵌套圆角用同心半径（外 = 内 + 内边距）；用分层透明 box-shadow 替代扁平边框；图片加 1px 无色调内描边；图标与文字做视觉对齐；触控热区 ≥44×44px，桌面 ≥40×40px。 动效：交互状态用可中断的过渡/弹簧，关键帧只用于一次性序列；入场拆分并错开约 60–100ms；退场比入场更轻；图标切换原地交叉淡入；按压 active:scale-[0.96]；不用 transition: all；尊重 prefers-reduced-motion。
使用方式：作为构建或评审 UI 时的检查清单逐项核对，包括字体与 token 是否匹配 DESIGN.md、字号是否来自字阶、行高与字距、tabular-nums、同心圆角、分层阴影、图片描边、热区尺寸、入场错开与退场、按压反馈、reduced-motion 等。
适用场景：前端组件、页面、布局、样式与动画的开发与代码评审。
限制：资料未提供具体安装命令、平台支持、收费或价格信息；实际应用需以项目自身的 DESIGN.md 与样式系统为准。