用途:该技能用于在构建仪表盘、后台管理界面及各类 Web 应用时,强制执行一套精确、克制、有意图的设计系统,目标是让每个界面都经过打磨,并贴合其具体产品语境。
主要能力:要求在写代码前先确定设计方向,包括思考产品用途、用户类型、情绪目标与记忆点;从 Precision & Density、Warmth & Approachability、Sophistication & Trust、Boldness & Clarity、Utility & Function、Data & Analysis 中选择或混合一种个性;选择色彩基础(暖色、冷色、纯中性、带色调,以及明暗模式与单一强调色);选择布局方式(密集网格、宽松间距、侧边导航、顶部导航、分栏面板);选择字体(系统字体、几何无衬线、人文无衬线、等宽影响)。
核心工艺原则:所有间距基于 4px 网格;内边距需对称;圆角遵循 4px 网格并保持系统一致;深度策略需在纯边框、单层阴影、分层阴影、表面色差中择一并坚持;卡片内部布局可因内容而异,但表面处理需统一;控件需容器化,避免使用原生表单元素,自定义下拉触发器需用 display: inline-flex 与 white-space: nowrap;排版层级、等宽字体呈现数据、图标使用 Phosphor Icons、动画时长 150ms 至 250ms 且缓动为 cubic-bezier(0.25, 1, 0.5, 1)、四级对比层级、颜色仅用于传达含义、导航需提供位置与用户语境、暗色模式优先用边框而非阴影。
限制与反模式:禁止夸张投影、小元素使用 16px 以上圆角、无理由的非对称内边距、彩色背景上的纯白卡片、装饰性粗边框、超过 48px 的区块间距、弹簧动画、装饰性渐变、单一界面多个强调色。
适用场景:企业软件、SaaS 仪表盘、后台管理界面、数据密集型分析界面及一般 Web 应用。
暂未提供:具体安装命令、依赖版本、平台支持范围与收费信息。