SuperAPI AI 工具集

minimalist-ui

通用与其它

查看项目

更新于 10-15 23:45

技能介绍

用途:minimalist-ui 是一份前端工程指令协议,名为“Premium Utilitarian Minimalism & Editorial UI”,用于生成高度精炼、超极简、文档式网页界面,风格类比顶级工作台平台。它主动拒绝通用 SaaS 设计套路。

主要能力与规则:

  • 色彩:暖色单色调,画布用 #FFFFFF 或 #F7F6F3/#FBFBFA,卡片 #FFFFFF/#F9F9F8,边框 #EAEAEA 或 rgba(0,0,0,0.06);点缀仅用低饱和柔和色,如淡红 #FDEBEC(文字 #9F2F2D)、淡蓝 #E1F3FE(#1F6C9F)、淡绿 #EDF3EC(#346538)、淡黄 #FBF3DB(#956400)。正文不用纯黑,用 #111111 或 #2F3437,行高 1.6,次要文字 #787774。
  • 字体:正文用 'SF Pro Display'、'Geist Sans'、'Helvetica Neue'、'Switzer';标题与引语用 'Lyon Text'、'Newsreader'、'Playfair Display'、'Instrument Serif',字距 -0.02em 至 -0.04em,行高 1.1;代码用 'Geist Mono'、'SF Mono'、'JetBrains Mono'。
  • 组件:便当网格用非对称 CSS Grid,卡片 1px 实线边框、圆角 8px 或 12px、内边距 24–40px;主按钮 #111111 底白字、圆角 4–6px、无阴影,悬停变 #333333 或 scale(0.98);标签为胶囊形、小号大写宽字距、柔和底色;手风琴仅用底边框分隔,配 +/− 图标;快捷键用 <kbd> 呈现;软件模拟用带三个浅灰圆点的白色顶栏。
  • 图标与图像:用 Phosphor Icons(Bold/Fill)或 Radix UI Icons,统一描边;插画为单色线稿加一块柔和几何色块;照片低饱和暖调,可加 0.04 暖颗粒;无真实素材时用 https://picsum.photos/seed/{context}/1200/800。
  • 动效:滚动进入用 translateY(12px)+opacity 0,600ms,cubic-bezier(0.16,1,0.3,1),用 IntersectionObserver;卡片悬停阴影 0 2px 8px rgba(0,0,0,0.04);列表错峰延迟 calc(var(--index) * 80ms);仅动画 transform 与 opacity。

禁用项:不得用 Inter、Roboto、Open Sans;不得用 Lucide、Feather、Heroicons;不得用 Tailwind 默认重阴影(shadow-md/lg/xl);不得用大面积主色背景、渐变、霓虹、3D 玻璃拟态;大容器与主按钮不得用 rounded-full;不得用 emoji;不得用 John Doe、Acme Corp、Lorem Ipsum 等占位名;不得用 Elevate、Seamless、Unleash 等 AI 套话。

使用方式:在编写 HTML、React、Tailwind、Vue 或设计布局时套用该协议,先建立宏观留白(如 py-24/py-32),正文宽度限制在 max-w-4xl 或 max-w-5xl,再应用字体层级与单色变量,确保所有卡片、分隔线、边框遵循 1px solid #EAEAEA,并为主要区块添加滚动进入动画。

适用场景:需要高端、克制、编辑风的前端界面生成与布局设计。限制:资料未提供安装命令、收费、平台支持或效果数据,暂未提供。