用 AI 构建极简主义的 Premium Utilitarian UI 界面 #

解决前端开发中常见的"AI 审美平庸"问题：通过一套严格的设计协议，禁止 AI 使用廉价的 SaaS 模板风格，引导其生成具有编辑感、高对比度且细节精致的极简主义 Web 界面。

为什么需要这个技能 #

大多数 AI 生成的 UI 界面倾向于使用过度饱和的颜色、厚重的阴影和泛滥的圆角（Pill shape），导致产品看起来像廉价的模板，缺乏专业感。

真正的“高级感”来源于对克制的掌控。本技能提供了一套名为 $\text{Premium Utilitarian Minimalism}$ 的设计协议，它将 AI 的输出限制在暖色单色调、极致的留白、精致的衬线体排版以及扁平的 Bento 布局中。通过禁止使用常见的 AI 视觉陷阱（如渐变色、浮夸阴影），让 AI 能够像顶尖产品设计师一样思考，构建出类似 Notion 或 Linear 那样干净、专业且具有呼吸感的界面。

适用场景 #

• 需要开发具有“工具属性”或“编辑属性”的 B 端产品界面。
• 想要打造一个极简、纯净且不落俗套的个人作品集或文档中心。
• 厌倦了通用 SaaS 视觉风格，追求极致的排版细节和微交互体验。
• 需要快速原型化一套具有高度审美一致性的前端 UI 方案。

核心工作流 #

1. 建立宏观留白：首先设定巨大的垂直间距（如 Tailwind 的 py-24），确保页面呼吸感，将内容宽度限制在 max-w-5xl。
2. 执行负面约束：明确禁止使用 Inter 等通用字体、厚重的 shadow-lg 以及任何形式的渐变色和 Emoji。
3. 构建色阶与排版：
   • 色彩：使用暖白色（#F7F6F3）作为底色，搭配炭黑（#111111）的正文，仅在标签或状态位使用极低饱和度的淡彩色（Pastels）。
   • 字体：标题采用精致的衬线体（如 Newsreader），正文采用几何无衬线体，代码段使用 Geist Mono。
4. 组件标准化：
   • 所有的卡片和分割线严格执行 1px solid #EAEAEA。
   • 按钮采用实色填充，圆角控制在 4px-6px。
   • 采用非对称的 Bento Grid（便当盒）布局。
5. 注入静谧动效：使用 cubic-bezier 实现轻微的淡入位移，避免任何干扰用户的剧烈动画。

下载和安装 #

下载 minimalist-ui 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要 #

暂无推荐