
关于
创建简洁的编辑式界面,采用暖色单色调色板、清晰边框、克制的动效和扁平便当盒布局。
name: minimalist-ui description: "用于创建具有暖色单色调色板、清晰边框、克制动效和扁平便当盒布局的干净编辑式界面。" category: frontend risk: safe source: community source_repo: Leonxlnx/taste-skill source_type: community date_added: "2026-04-17" author: Leonxlnx tags: [frontend, design, minimalism, ui] tools: [claude, cursor, codex, antigravity]
协议:高端实用极简主义 UI 架构师
使用场景
- 当用户想要受 Notion、Linear 或编辑式工作空间产品启发的精致极简 UI 时使用。
- 当设计具有清晰边框、充裕留白、柔和粉彩点缀和安静动效的暖色单色界面时使用。
- 当任务应避免渐变、重阴影、饱和色彩、大量圆角组件和通用 SaaS 视觉效果时使用。
限制
- 当内容密集时,极简主义可能隐藏层级;需用真实内容验证可扫描性、对比度和导航清晰度。
- 此技能假设产品可以支持克制的调色板和排版主导的布局;不要无故覆盖已建立的品牌系统。
- 微妙动效和扁平表面仍需在目标项目中进行响应式、键盘和屏幕阅读器验证。
1. 协议概述
名称:高端实用极简主义与编辑式 UI 描述:一个高级前端工程指令,用于生成高度精致、超极简的"文档风格"Web 界面,类似于顶级工作空间平台。此协议严格执行高对比度暖色单色调色板、定制排版层级、精心的结构性宏留白、便当盒网格布局和超扁平组件架构,配合刻意的柔和粉彩点缀。它主动拒绝标准通用 SaaS 设计趋势。
2. 绝对负面约束(禁止元素)
AI 必须严格避免以下通用 Web 开发默认值:
- 不要使用 "Inter"、"Roboto" 或 "Open Sans" 字体。
- 不要使用通用细线图标库如 "Lucide"、"Feather" 或标准 "Heroicons"。
- 不要使用 Tailwind 默认的重阴影(如
shadow-md、shadow-lg、shadow-xl)。阴影必须几乎不存在或高度自定义为超扩散低透明度(< 0.05)。 - 不要为大型元素或区域使用主色背景(如无亮蓝、绿或红色英雄区域)。
- 不要使用渐变、霓虹色或 3D 玻璃拟态(除了微妙的导航栏模糊)。
- 不要对大容器、卡片或主按钮使用
rounded-full(药丸形状)。 - 不要在代码、标记、文本内容、标题或 alt 文本中使用表情符号。用适当的图标或干净的 SVG 原语替代。
- 不要使用通用占位名如 "John Doe"、"Acme Corp" 或 "Lorem Ipsum"。使用真实的上下文内容。
- 不要使用 AI 文案陈词滥调:"Elevate"、"Seamless"、"Unleash"、"Next-Gen"、"Game-changer"、"Delve"。写简洁、具体的语言。
3. 排版架构
界面必须依赖极端的排版对比和高端字体选择来建立编辑感。
- 主无衬线体(正文、UI、按钮):使用干净、几何或有特色的系统原生字体。目标:
font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif。 - 编辑衬线体(英雄标题和引用):目标:
font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif。应用紧凑字距(letter-spacing: -0.02em到-0.04em)和紧凑行高(1.1)。 - 等宽体(代码、按键、元数据):目标:
font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace。 - 文本颜色:正文文本绝不能是纯黑(
#000000)。使用偏黑/炭灰(#111111或#2F3437),配合充裕的line-height1.6以确保可读性。次要文本应为柔和灰(#787774)。
4. 色彩调色板(暖色单色 + 点缀粉彩)
颜色是稀缺资源,仅用于语义含义或微妙点缀。
- 画布/背景:纯白
#FFFFFF或暖骨色/米白#F7F6F3/#FBFBFA。 - 主表面(卡片):
#FFFFFF或#F9F9F8。 - 结构边框/分隔线:超浅灰
#EAEAEA或rgba(0,0,0,0.06)。 - 点缀色:专门使用高度去饱和、淡化的粉彩用于标签、行内代码背景或微妙图标背景。
- 淡红:
#FDEBEC(文本:#9F2F2D) - 淡蓝:
#E1F3FE(文本:#1F6C9F) - 淡绿:
#EDF3EC(文本:#346538) - 淡黄:
#FBF3DB(文本:#956400)
- 淡红:
5. 组件规范
- 便当盒功能网格:
- 使用非对称 CSS Grid 布局。
- 卡片必须精确使用
border: 1px solid #EAEAEA。 - 圆角必须清晰:最大
8px或12px。 - 内部填充必须充裕(如
24px到40px)。
- 主行动号召(按钮):
- 实心背景
#111111,文本#FFFFFF。 - 轻微圆角
border-radius: 6px。 - 无阴影,悬停时微妙的不透明度变化。
- 实心背景
- 次要按钮:
- 透明背景,
border: 1px solid #EAEAEA。 - 文本
#111111,悬停时背景#F7F6F3。
- 透明背景,
兼容工具
Claude CodeCursor
标签
前端开发