SuperAPI AI 工具集

minimalist-ui

前端与建站

查看项目

更新于 10-16 03:38

技能介绍

用途:minimalist-ui 是一份前端工程指令/设计协议,用于在编写 HTML、React、Tailwind、Vue 或设计布局时,产出类似高端工作台平台的文档式极简界面,强调编辑感和实用性。

主要能力与规则:采用暖色单色画布(#FFFFFF、#F7F6F3、#FBFBFA),正文用近黑 #111111 或 #2F3437,次要文字 #787774;分隔线统一为 1px solid #EAEAEA。字体要求主无衬线(如 'SF Pro Display'、'Geist Sans')、编辑衬线标题(如 'Newsreader'、'Playfair Display')和等宽字体(如 'Geist Mono'、'SF Mono');禁止使用 Inter、Roboto、Open Sans。点缀色仅限低饱和粉彩,如淡红 #FDEBEC、淡蓝 #E1F3FE、淡绿 #EDF3EC、淡黄 #FBF3DB,并配对应深色文字。组件层面使用非对称 bento 网格、8px 或 12px 圆角、24–40px 内边距;主按钮为 #111111 背景、白字、4–6px 圆角、无阴影。标签为胶囊形、小字号大写并带字距。手风琴只用下边框分隔,加号/减号切换。快捷键用 <kbd> 呈现。图标建议 Phosphor Icons 或 Radix UI Icons,禁用 Lucide、Feather、Heroicons。

动效:滚动入场用 IntersectionObserver,translateY(12px)+透明度在 600ms 内过渡,缓动 cubic-bezier(0.16, 1, 0.3, 1);网格条目使用 calc(var(--index) * 80ms) 级联延迟;仅动画 transform 与 opacity。

执行流程:先建立大留白,使用较大垂直内边距(如 py-24 或 py-32),正文宽度限制在 max-w-4xl 或 max-w-5xl,再套用字体与单色变量,最后补滚动动画,并为区块加入低透明度背景图、径向光斑或纹理。

限制与禁用项:禁止渐变、霓虹色、3D 玻璃拟态(导航栏轻微模糊除外)、大容器胶囊圆角、重投影、彩色大区块背景、emoji 与无意义占位文案(John Doe、Acme、Lorem Ipsum),也不使用“Elevate”“Seamless”等 AI 套话。

适用场景:需要高级、克制、编辑式观感的落地页、文档站、工作台类产品界面。暂未提供安装命令、价格、平台支持与效果评测等信息。