SuperAPI AI 工具集

basic-design-principles

设计与创作

查看项目

更新于 10-16 02:29

技能介绍

用途:在构建仪表盘、后台管理界面或企业级 Web 应用时,强制执行一套精确、极简且有意图的设计体系,面向企业软件、SaaS 仪表盘与管理后台。

主要能力:先确定设计方向(如 Precision & Density、Warmth & Approachability、Sophistication & Trust、Boldness & Clarity、Utility & Function、Data & Analysis),据此选择色彩基础(暖色、冷色、纯中性、带色调)、明暗模式与单一强调色,并确定布局方式、字体与深度策略。工艺层规定 4px 基础网格、对称内边距、圆角一致性、深度与层级策略(纯边框、单层阴影、多层阴影、表面色差,须择一并统一)、卡片内部布局可差异但表面处理需一致、独立控件需容器化并避免使用原生表单元素、字体层级与等宽数字、图标使用 Phosphor Icons、动画时长与缓动、四级前景对比体系、颜色仅用于语义、导航上下文与暗色模式处理。

使用方式:作为技能加载后,在编写 UI 代码前先声明设计方向;遵循 4px 网格与内边距对称等规则。示例样式:padding: 16px;padding: 12px 16px(仅在水平需要更多空间时);边框示例 border: 0.5px solid var(--border);单层阴影示例 --shadow: 0 1px 3px rgba(0, 0, 0, 0.08)。自定义选择器触发器需使用 display: inline-flex 与 white-space: nowrap。

适用场景:企业软件、SaaS 仪表盘、管理后台、数据密集界面。

限制:明确列出反模式(如夸张投影、小元素大圆角、无理由的非对称内边距、彩色背景上的纯白卡片、装饰性粗边框、区块间距超过 48px、弹性动画、装饰性渐变、多强调色),并强调不做默认设计;具体实现细节与安装方式暂未提供。