SuperAPI AI 工具集

design-principles

设计与创作

查看项目

更新于 10-16 00:29

技能介绍

用途:为构建仪表盘、管理界面或任何企业级 UI 时提供一套精确、精简的设计系统约束,灵感来自 Linear、Notion 与 Stripe,强调 Jony Ive 级别的精确度与有意的个性表达。

使用方式:在编写任何代码前,必须先确定设计方向,不要使用默认样式。先思考产品上下文(产品做什么、用户是谁、情感任务是什么、什么让它令人难忘),再选择一种个性(如精确与密度、温暖与亲和、精致与信任、大胆与清晰、实用与功能、数据与分析),可混合两种但须明确承诺。随后确定色彩基础(暖色/冷色/纯中性/带色调)、明暗模式、单一强调色、布局方式(密集网格、宽松间距、侧边栏、顶部导航、分栏面板)与字体方案。

主要能力与核心工艺原则:所有间距基于 4px 网格(4/8/12/16/24/32px);内边距需对称,上下左右一致,除非内容自然形成视觉平衡;圆角遵循统一体系,不在不同系统间混用;深度策略需选定一种并坚持,包括仅边框(扁平)、单一柔和阴影、分层阴影或表面色差,暗色模式更依赖边框而非阴影;卡片内部布局可因内容而异,但表面处理(边框粗细、阴影深度、圆角、内边距、字体)保持一致;UI 控件需容器化处理,不使用原生 select、date input 等无法样式化的元素,选择器触发器需使用 display: inline-flex 与 white-space: nowrap;字体层级为标题 600 字重、字距 -0.02em,正文 400-500,标签 500;数据类内容使用等宽字体与 tabular-nums;图标使用 Phosphor Icons,仅作说明不作装饰;动画微交互 150ms,较大过渡 200-250ms,缓动 cubic-bezier(0.25, 1, 0.5, 1),企业 UI 不用弹跳效果;建立四级对比度层级(前景、次要、弱化、极弱);颜色仅用于传达含义(状态、操作、错误、成功),灰色构建结构;界面需有导航上下文(导航栏、位置指示、用户上下文);暗色模式需单独调整语义色。

限制与反模式:禁止使用夸张投影、小元素上 16px 以上大圆角、无理由的不对称内边距、彩色背景上的纯白卡片、2px 以上装饰性粗边框、区块间超过 48px 的间距、弹跳动画、装饰性渐变、同一界面多个强调色。原文未提供安装命令、价格、平台或具体使用步骤等信息。