SuperAPI AI 工具集

minimalist-ui

设计与创作

查看项目

更新于 10-16 09:30

技能介绍

用途:minimalist-ui 是一份前端设计与编码风格协议,名为“高级实用极简与编辑式 UI”。当用户明确要求这种美学时,用它来生成类似顶级工作区平台的“文档式”网页界面。它保留用户品牌、真实内容、现有组件与已授权素材,仅将下述规则作为风格默认值。

主要能力与风格规则:采用高对比暖色调单色配色(画布纯白 #FFFFFF 或暖白 #F7F6F3 / #FBFBFA,边框 #EAEAEA 或 rgba(0,0,0,0.06)),仅用低饱和柔和彩色作标签或图标底色的点缀。排版强调编辑感对比:正文用几何或无衬线字体,大标题用衬线字体并收紧字距与行高,代码与元数据用等宽字体;正文不用纯黑,用 #111111 或 #2F3437,次要文字用 #787774,行高 1.6。布局使用大量垂直留白、内容宽度约 max-w-4xl 或 max-w-5xl、非对称 CSS Grid 便当式卡片,卡片统一 1px 边框、圆角 8px 或 12px、内边距 24px 至 40px。主按钮为实底 #111111、白字、圆角 4px 至 6px、无阴影,悬停微调色或 scale(0.98)。标签与状态徽章为胶囊形、小字号、大写宽字距并使用柔和底色。FAQ 手风琴去掉容器框,仅用底部分隔线,配清晰的 + / - 图标。快捷键用 kbd 标签呈现为物理按键。模拟软件时使用带三个灰色圆点的极简窗口条。

明确禁止:不得使用 Inter、Roboto、Open Sans;不得使用 Lucide、Feather、标准 Heroicons 等细线图标库;不得使用 Tailwind 默认重投影;不得用主色大面积背景;不得用渐变、霓虹、3D 玻璃拟态;大容器卡片主按钮不用胶囊圆角;任何位置不得用 emoji;不得用 John Doe、Acme Corp、Lorem Ipsum 等占位名;不得用“Elevate、Seamless、Unleash”等套话。图标建议 Phosphor Icons 或 Radix UI Icons,插画为单色线稿配单块柔和色几何形状,照片去饱和暖调并叠加 0.04 颗粒。

动效:应几乎不可察觉。可选滚动入场用 translateY(12px) 加透明度,600ms、cubic-bezier(0.16, 1, 0.3, 1),使用 IntersectionObserver 而非 scroll 监听;悬停卡片只有极轻阴影位移,按下 scale(0.98);可选交错延迟;装饰性交错在减少动态偏好下省略;背景纹理保持静态,性能上优先 transform 与 opacity。

使用方式:在编写 HTML、React、Tailwind、Vue 或设计布局时应用本协议,先建立留白再套用字体与颜色变量,并核查减少动态、键盘触控与无 JavaScript 状态。限制:这是风格默认值,需在用户明确要求该美学时使用;不负责具体业务逻辑或品牌替换;官方文档未提供安装命令与版本信息。