用途:用于构建和审计高质量 UI,强调克制而非堆砌,追求细节不可见却可感知的精致感。
主要能力: 颜色系统:只定义基础色、强调色、对比度三个基础变量,表面、文字、图标、边框均由透明度派生;使用 LCH/OKLCH 感知均匀色彩空间;以单色为主,颜色仅用于语义(错误、成功、选中、品牌强调);禁止硬编码十六进制,仅用 CSS 变量/设计令牌。 表面与层级:用轻微背景位移而非重阴影分层,层级为背景→卡片→浮层→对话框;深色模式下阴影转为低透明度边框;浮层用 backdrop-blur;通过对比度变量支持高对比模式。 动效:颜色/透明度过渡 150ms ease-out,布局过渡 200ms ease-in-out;弹窗入场用弹簧缓动(Framer Motion stiffness 400 damping 30,或 cubic-bezier(0.34,1.56,0.64,1));列表错峰 30-50ms;骨架屏用流光;退出也要有动画;不加人为延迟。 布局架构:三栏布局(可折叠侧边栏 240-280px + 主内容 + 可选详情面板);可拖拽调整宽度并记住偏好;粘性头部;sheet 用于上下文详情、modal 用于聚焦任务;Cmd+K 命令面板为主导航。 键盘优先:命令面板必配;单键快捷键;列表 j/k 或方向键导航;Shift+Click 范围选择;焦点管理与快捷键提示展示;Escape 关闭所有浮层。 渐进披露:行操作、元数据、批量操作栏仅在悬停或选中时出现;右键菜单含快捷键;子菜单设安全三角区。 信息密度:紧凑行高 1.25-1.4;表格数字用 tabular-nums;ID、代码用等宽字体;数字右对齐。 组件:仅用 shadcn/ui 与 Lucide 图标,不用 emoji 和装饰性 AI 图标;纯图标按钮必须带 Tooltip;统一圆角。 间距:4px 基准,禁止任意值;无孤立元素;能用间距替代的分隔线就删掉。 打磨:不用 console.log、不用 z-[9999]、不用 !important、不硬编码颜色;标签切换更新 URL;移动端侧边栏收起为图标或抽屉。
审计输出:逐条给出文件路径与行号、问题一句话、修复方式;按颜色/表面→动效→布局→键盘→渐进披露→密度→交互→排版→状态→表格→打磨分组;优先级为破坏性交互>缺失键盘支持>缺失状态>动效缺口>视觉不一致>打磨;末尾列出仍需人类设计判断的部分。
限制:资料未提供该技能的具体安装方式、依赖版本、支持的框架范围、授权与收费信息。使用需自行判断与本项目技术栈的适配性。