SuperAPI AI 工具集

ui-principles

设计与创作

查看项目

更新于 10-15 17:21

技能介绍

用途:在构建仪表盘、管理后台、SaaS 界面和 Web 应用时,强制执行一套精确、克制的设计系统,风格参考 Linear、Notion、Stripe,强调“有意图的极简”而非套模板。

主要能力与要求:写代码前必须先确定设计方向(如 Precision & Density、Warmth & Approachability、Sophistication & Trust、Boldness & Clarity、Utility & Function、Data & Analysis),并据此选择配色基础(暖中性、冷中性、纯中性或带色调)、明暗模式、单一强调色、布局方式(密集网格、宽松间距、侧边栏、顶部导航、分栏)与字体(系统字体、几何无衬线 Geist/Inter、人文无衬线 SF Pro/Satoshi、等宽)。

核心工艺标准:所有间距基于 4px 网格(4/8/12/16/24/32px);TLBR 内边距对称,例外仅限横向需要更多空间;圆角遵循 4px 网格并保持系统一致;深度策略需在纯边框、单层阴影、分层阴影、表面色差中选一种并贯彻;卡片内部布局可因内容而异,但表面处理(边框、阴影、圆角、内边距、字体)保持一致。

控件与细节:日期选择器、筛选器、下拉框需做容器化处理,不使用原生 select、date 等无法定制的表单元素,改为自定义组件;自定义 select 触发器需用 display: inline-flex 配合 white-space: nowrap。图标使用 Phosphor Icons(@phosphor-icons/react),仅用于澄清含义而非装饰。动画时长 150ms(微交互)到 200–250ms(较大过渡),缓动 cubic-bezier(0.25, 1, 0.5, 1),不用弹簧/弹跳效果。颜色仅用于表达状态、操作、错误、成功等含义,结构由灰色承担。文本层级建立 foreground→secondary→muted→faint 四级体系。界面需有导航与位置指示,提供用户上下文。深色模式多用边框而非阴影,语义色需适度去饱和。

限制与反模式:禁止夸张投影、小元素大圆角(16px+)、无理由的非对称内边距、彩色背景上的纯白卡片、粗装饰边框、超过 48px 的区块间距、弹簧动画、装饰性渐变、同一界面多个强调色。官方未提供安装命令、收费信息或具体平台支持信息,暂未提供。