奇 奇连 AI
学习路线图课程工具计算器企业服务关于加入会员

minimalist / brutalist / soft：三种视觉方向的硬参数对照

2026-08-09

本文所有仓库信息核对日为 2026-08-09，以上游仓库最新内容为准。

taste-skill 的 skills/ 目录里有三个体量非常接近的 skill：minimalist-skill 85 行、brutalist-skill 92 行、soft-skill 98 行。最长的和最短的只差 13 行，但它们在圆角、阴影、基底色这几件事上给出的是互相打架的硬规定。搞不清这一点，最容易犯的错就是三个一起装，然后指望模型”综合一下”。

一、先把这三行认准

这个仓库最容易踩的坑是文件夹名和 install name 大面积不一致，这三个恰好全中：

文件夹install name行数
minimalist-skillminimalist-ui85
brutalist-skillindustrial-brutalist-ui92
soft-skillhigh-end-visual-design98

README 给的单装命令形如 npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"，--skill 后面要填的是 install name，也就是上表右边那一列，不是你在 GitHub 目录树上看到的左边那一列。十三个 skill 的完整对照表我们另有一篇专门做，这里只列与本篇相关的三行——因为下面每一条参数都要靠 install name 才能定位到具体是谁在管。

另外一个前提：skills/llms.txt 里 brutalist-skill 那行标了 (Beta)。这是项目方自己留的余地，选型时该算进去。

二、它们各自要的是什么

minimalist-ui 的 description 原话是：干净的 editorial 风界面、暖色单色调色板、排版对比、扁平 bento 网格、柔和粉彩，无渐变、无重阴影。

industrial-brutalist-ui 的 description 是：原始机械界面，融合瑞士印刷排版与军用终端美学，刚性网格、极端字号对比、实用主义配色、模拟信号劣化效果，面向需要”像解密蓝图”的数据密集仪表盘、作品集或 editorial 站点。

high-end-visual-design 的 description 是：教 AI 像高端 agency 那样设计，定义让网站”贵”起来的确切字体、间距、阴影、卡片结构和动画。它 §1 给的 Persona 叫 Vanguard_UI_Architect，目标原文是工程化 $150k+ agency 级的数字体验。

三句话就能看出，它们不是”三档强度”，而是三个不同的审美流派。

三、硬参数摆在一起看

字体

  • minimalist-ui §2 明禁 Inter、Roboto、Open Sans；§3 给的正文栈是 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif，editorial 衬线栈是 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif，配 -0.02em 到 -0.04em 字距和 1.1 行高。
  • high-end-visual-design §2 的 “ABSOLUTE ZERO” 里禁的是 Inter、Roboto、Arial、Open Sans、Helvetica，假定可用 Geist、Clash Display、PP Editorial New、Plus Jakarta Sans。
  • industrial-brutalist-ui §3.1 列的宏观排版最佳网页字体是 Neue Haas Grotesk (Black)、Inter (Extra Bold/Black)、Archivo Black、Roboto Flex (Heavy)、Monument Extended。

也就是说，同一个仓库里，两个 skill 把 Inter 列进封杀名单，第三个把它列进推荐字体。这是可核实的差异，说到这里就停；我们不推断哪一份”更对”、也不去猜有没有同步的问题。要留意的只是一件事：如果你把三个一起挂上，模型面对的就是相互矛盾的输入。

圆角

这是三者冲突最直白的一处：

  • minimalist-ui：卡片圆角”利落”，最大 8px 或 12px；主 CTA 按钮 4px 到 6px；大容器、卡片、主按钮不用 rounded-full（只有标签和状态徽章例外，用 border-radius: 9999px）。
  • industrial-brutalist-ui §5：绝对拒绝 border-radius，所有角必须是精确 90 度，理由是强化机械刚性。
  • high-end-visual-design §4：主卡片用 “Double-Bezel” 嵌套架构，外壳 rounded-[2rem]，内核用数学计算出的更小圆角 rounded-[calc(2rem-0.375rem)] 以形成同心曲线；主交互按钮必须是全圆胶囊 rounded-full 配 px-6 py-3。

0px、≤12px、2rem 且 CTA 强制胶囊——这三条没有任何折中空间。

配色基底

  • minimalist-ui §4：画布纯白 #FFFFFF 或暖骨白 #F7F6F3 / #FBFBFA，卡片 #FFFFFF 或 #F9F9F8，边框极浅灰 #EAEAEA 或 rgba(0,0,0,0.06)；强调色只用高度去饱和的粉彩，给了四组配对：Pale Red #FDEBEC（文字 #9F2F2D）、Pale Blue #E1F3FE（文字 #1F6C9F）、Pale Green #EDF3EC（文字 #346538）、Pale Yellow #FBF3DB（文字 #956400）。正文颜色绝不用纯黑 #000000，用 #111111 或 #2F3437，次要文字 #787774。
  • industrial-brutalist-ui §4 是二选一：Swiss Industrial Print（浅）背景 #F4F4F0 或 #EAE8E3、前景 #050505 到 #111111；Tactical Telemetry（深）背景 #0A0A0A 或 #121212（原文明写避免纯 #000000）、前景 #EAEAEA。两条路的强调色都是 #E61919 或 #FF2A2A，且原文写明这是唯一的强调色；终端绿 #4AF626 可选，但只能给单个特定 UI 元素当状态指示或数据读数，绝不作通用文字色。§4 里另有一句全大写的 CRITICAL：每个项目选一种基底色板并一贯到底，绝不在同一界面里混浅色与深色基底。
  • high-end-visual-design §3 是三选一的调性原型：Ethereal Glass（最深 OLED 黑 #050505 + 径向 mesh 渐变 + backdrop-blur-2xl）、Editorial Luxury（暖奶油 #FDFBF7 + 胶片颗粒叠层 opacity-[0.03]）、Soft Structuralism（银灰或纯白 + 高度扩散的环境阴影）。

顺带注意一个共同点：minimalist-ui 和 industrial-brutalist-ui 都明确写了不要用纯黑 #000000，只是替代值不同。这类”方向一致、数值不同”的条目，才是三份文件里少数可以彼此印证的部分。

阴影

  • minimalist-ui：禁 Tailwind 默认重投影 shadow-md / shadow-lg / shadow-xl，阴影要”几乎不存在”，或大幅定制成极度扩散、不透明度 < 0.05。悬停时卡片从 0 0 0 过渡到 0 2px 8px rgba(0,0,0,0.04)，200ms。
  • industrial-brutalist-ui：§4 直接把渐变、柔和投影、现代半透明列为严格禁止。
  • high-end-visual-design：禁的是通用 1px 实灰边框和生硬深投影（shadow-md、rgba(0,0,0,0.3)），但它要的不是”没有阴影”，而是把光影做进嵌套结构里——内核带自己的内高光 shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]。

三者都在打同一个靶子（Tailwind 默认阴影一把梭），但落点完全不同：一个要淡到看不见，一个要彻底不要，一个要换成结构性的光。

动效

  • minimalist-ui §7 的定调是动效应当”看不见”：滚动入场 translateY(12px) + opacity: 0，600ms，cubic-bezier(0.16, 1, 0.3, 1)；错峰揭示 animation-delay: calc(var(--index) * 80ms)；可选的背景环境动效 animation-duration: 20s+、opacity: 0.02-0.04，且必须放在 position: fixed; pointer-events: none 层上。
  • high-end-visual-design §5 的量级明显更重：自定义缓动示例是 transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]；入场是 translate-y-16 blur-md opacity-0 解算到 translate-y-0 blur-0 opacity-100，800ms+；导航链接展开要逐项错峰 delay-100 / delay-150 / delay-200。
  • industrial-brutalist-ui 这一侧没有列出对应的动效规格，它 §7 给的是纹理与后处理：CRT 扫描线用 repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)，半调与 1-Bit 抖动，以及 DOM 根上的全局低不透明度噪点滤镜。

这里有一条难得的一致规定：minimalist-ui 和 high-end-visual-design 都写了同一条性能护栏——只通过 transform 和 opacity 做动画，不碰 top / left / width / height，will-change: transform 省着用且只给正在动画的元素；滚动揭示都要求用 IntersectionObserver（high-end-visual-design 还允许 Framer Motion 的 whileInView），绝不用 window.addEventListener('scroll')。这两条你可以放心当成跨方向通用的做法。

间距与容器

minimalist-ui §8 的执行协议是区块之间 py-24 或 py-32，主排版内容宽度收在 max-w-4xl 或 max-w-5xl。high-end-visual-design §4.C 要求把标准内边距翻倍，区块用 py-24 到 py-40。industrial-brutalist-ui §5 讲的是”双模密度”——在紧凑的等宽元数据簇与大片计算过的负空间之间摆动，没有给固定数值。

四、怎么挑：从你手上的页面倒推

不要从”哪个更高级”选，从页面类型选。三份文件自己都在 description 或章节里划了适用边界：

  • 要做安静的内容型页面（文档站、博客、产品说明、注重可读性的 editorial 布局）：minimalist-ui。它的所有硬参数都朝”减法”走——1px solid #EAEAEA 的统一边框、1.6 行高、粉彩只当稀缺资源。它连按键都规定用 <kbd> 渲染成实体按键。
  • 要做数据密集界面或有强烈作者立场的作品集：industrial-brutalist-ui。但先接受两个代价：一是只用大写（§3.1 宏观排版和 §3.2 微观排版都写了 uppercase only），二是全站零圆角。这两条对通用消费级产品页来说通常太重。另外它在 llms.txt 里标着 Beta。
  • 要做营销落地页、agency 官网这类需要”贵感”的页面：high-end-visual-design。它是三者里动效最重、结构最复杂的，Double-Bezel 嵌套、Button-in-Button 尾部图标、磁吸悬停物理都要写。相应地，它对移动端塌陷写得也最细：768px 以下激进回退到 w-full / px-4 / py-8，全高区块绝不用 h-screen，永远用 min-h-[100dvh]。

有一个判断依据值得单独说：high-end-visual-design §8 给了 11 项输出前清单，其中相当一部分条目是能逐条比对代码的（有没有用被禁字体、区块内边距是否至少 py-24、过渡有没有用自定义 cubic-bezier、backdrop-blur 是不是只加在 fixed/sticky 上、768px 以下是否塌成单列 w-full + px-4），而最后一条写的是”整体观感读起来是 $150k agency build，不是 template with nice fonts”——这一条落在观感上，没法机械判定。你要是打算把这份清单接进自己的检查流程，能自动化的就是前面那些有具体类名和数值的条目，最后一条只能留给人看。

五、为什么不建议混装

industrial-brutalist-ui 自己 §2 就写了：两种视觉原型每个项目挑一个并贯彻，不许在同一界面里交替或混用；§4 又用 CRITICAL 重申了基底色不许混。同一个 skill 内部尚且如此，三个 skill 之间的矛盾只会更硬——圆角 0 / ≤12px / 2rem，阴影禁止 / 近乎透明 / 内高光，字体黑名单里的 Inter 在另一份里是推荐项。

一个可操作的做法是：一个项目只挂一个视觉方向的 skill，需要换风格时换装，而不是叠加。

六、别忘了这些规则的性质

最后必须交代清楚：这三份文件都是 SKILL.md，是写给模型看的提示词约束。仓库里没有 src/、没有构建产物，也没有任何东西会在你的项目里执行这些规则。“绝对拒绝 border-radius” 是一条指令，不是”装了之后代码里就不会出现圆角”的结果。

所以正确的用法是：把其中能机械校验的条目搬进你自己的工程链路——禁用类名（shadow-md / shadow-lg / shadow-xl、h-screen）、hex 白名单、圆角上限、window.addEventListener('scroll') 的出现，这些用 lint 规则或一段 grep 就能查；而”高级感""安静的克制”这类描述，只能靠人看。skill 负责把模型的默认倾向往某个方向推，确定性保障还得你自己加。

本文依据 taste-skill 官方仓库（github.com/Leonxlnx/taste-skill）的 README、CHANGELOG、 skills/ 下的 SKILL.md 与 .claude-plugin/ 清单整理，核对日 2026-08-09。 本文内容为仓库文档口径，我们没有安装或运行过其中任何一个 skill， 文中所有规则均为写给模型的提示词约束，不构成对输出结果的保证。 skill 内容随上游更新而变动，默认 skill 当前自标为 v2 (experimental) 且仍在迭代，请以仓库最新内容为准。

想系统学会用 AI？报名体系课或加入会员，照着学、照着用。

浏览课程 加入会员