用途
minimalist-ui 是一份面向前端工程的高级设计指令协议,全称“Premium Utilitarian Minimalism & Editorial UI”。其目标是指导 AI 在编写前端代码(HTML、React、Tailwind、Vue)或设计布局时,产出高度精炼、超极简的“文档式”网页界面,风格类比顶级工作区平台,并明确拒绝常见的通用 SaaS 设计套路。
主要能力与规则
禁用要素
协议列出一系列绝对负面约束:不使用 Inter、Roboto、Open Sans 字体;不使用 Lucide、Feather、标准 Heroicons 等细线图标库;不使用 Tailwind 默认重阴影(shadow-md/lg/xl),阴影须近乎不存在或极低透明度(低于 0.05);不对大区块使用主色背景;不使用渐变、霓虹色和 3D 玻璃拟态(细微导航栏模糊除外);不对大容器、卡片或主按钮使用 rounded-full 胶囊形;禁止在任何代码、文本、标题或 alt 文本中使用 emoji;禁止 John Doe、Acme Corp、Lorem Ipsum 等占位名;禁止 Elevate、Seamless、Unleash 等 AI 套话。
字体架构
正文与 UI 使用 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 等等宽字体。正文禁用纯黑,改用 #111111 或 #2F3437,行高 1.6;次要文本为灰色 #787774。
配色
画布为纯白 #FFFFFF 或暖骨白 #F7F6F3 / #FBFBFA;卡片表面 #FFFFFF 或 #F9F9F8;分隔线与边框为极浅灰 #EAEAEA 或 rgba(0,0,0,0.06)。强调色仅用于标签、行内代码背景或图标底色,使用去饱和粉彩:浅红 #FDEBEC(文字 #9F2F2D)、浅蓝 #E1F3FE(文字 #1F6C9F)、浅绿 #EDF3EC(文字 #346538)、浅黄 #FBF3DB(文字 #956400)。
组件规范
Bento 网格采用非对称 CSS Grid;卡片边框恰为 1px solid #EAEAEA,圆角最大 8px 或 12px,内边距 24px 至 40px。主按钮为 #111111 底、#FFFFFF 字、4px 至 6px 圆角、无阴影,悬停变为 #333333 或 scale(0.98)。标签为胶囊形、极小字号、大写宽字距,底色使用指定粉彩。FAQ 手风琴去除容器盒,仅用底边框分隔,配清晰加减号图标。快捷键用 kbd 标签呈现为实体键样式。模拟软件界面时用白色顶栏加三个浅灰圆点仿 macOS 窗口控件。
图标与图像
图标使用 Phosphor Icons(Bold 或 Fill)或 Radix UI Icons,统一描边宽度。插画为白底单色连续线稿,配一个偏移的粉彩几何形状。照片使用高品质、低饱和、暖色调图像,叠加不透明度 0.04 的暖颗粒;缺资源时可用 https://picsum.photos/seed/{context}/1200/800 占位。区块背景通过低透明度全幅图、暖色径向光斑(不透明度 0.03)或极简几何线纹增加层次。
动效
滚动入场用 translateY(12px) 加透明度渐显,600ms、cubic-bezier(0.16, 1, 0.3, 1),基于 IntersectionObserver 而非滚动事件。卡片悬停以极轻阴影过渡,按钮按下 scale(0.98)。列表与网格项以 calc(var(--index) * 80ms) 级联延迟入场。可选背景环境动效为单个极慢漂移光斑(20s 以上、不透明度 0.02 至 0.04),须置于 fixed、pointer-events: none 的图层。仅对 transform 与 opacity 做动画,避免触发布局的属性。
执行流程
先建立区块间大垂直留白(如 Tailwind 的 py-24 或 py-32),主内容宽度限制在 max-w-4xl 或 max-w-5xl,立即应用字体层级与单色变量,确保所有卡片、分隔线与边框遵守 1px solid #EAEAEA,为主要内容块添加入场动画,并通过图像、环境渐变或纹理赋予区块深度。
适用场景
适合需要杂志编辑感、文档式排版、高对比字体层级与克制配色的前端界面设计与代码生成,例如工作区类产品页面、内容型站点与品牌展示页。
限制
该资料为设计指令协议,未提供独立安装命令、价格、平台支持或效果数据,相关事实暂未提供。其约束针对前端设计与代码生成,不涵盖后端或非界面领域。