

现在很多官网长得越来越像同一个模板:柔和渐变、圆角卡片、玻璃拟态。
虽然看起来精致,如果只看一张截图,很难分清是哪家产品。更有甚者,vibe 一个界面就拿出来了,丑得让人看不下去。
而另一批 AI 工具、开发者产品和内容封面却走向另一个风格:粗黑边框、硬投影、撞色色块、巨大的标题字。界面充满了“不规范”的奔放风格,反而更容易被记住。
这套视觉语言的名字借自半个多世纪前的建筑学——粗野主义(Brutalism)。从建筑到平面、网页、产品界面,发展至今,已经形成了其独特的当代风格。
视觉演变:传统粗野主义 vs SaaS同质化 vs 新粗野主义
| 视觉维度 | 建筑与网页粗野 (1950/2014) | 主流 SaaS 模板 (2020s) | 现代新粗野主义 (2021+) |
|---|---|---|---|
| 边框轮廓 | 无修饰纯 HTML 细线 / 粗糙混凝土缝 | 浅灰半透明 1px 细线或无边框 | 2px~4px 极粗纯黑描边 (Stark Outline) |
| 阴影光影 | 完全无阴影 (Reject Shadow) | 大范围高斯漫反射柔和模糊 | 向右下偏移 4px 零模糊硬投影 (Hard Shadow) |
| 色彩系统 | 默认超链接蓝 + 黑白灰底 | 低饱和马卡龙、蓝紫渐变、玻璃拟态 | 高饱和平铺撞色(亮黄/薄荷绿/钴蓝) |
| 排版字体 | Times / Courier 原始衬线或等宽 | Inter / SF Pro 等均质无衬线体 | 超大加粗无衬线大字 + 趣味药丸标签 |
| 精神内核 | 反抗讨好,不在乎舒服 | 安全、温和、易被遗忘的工具感 | Anti-AI Signal:诚实、手作感、极具记忆点 |
一、新粗野主义的两次转折
Deville 与 Brutalist Websites
2014 年,设计师 Pascal Deville 建了 Brutalist Websites,专门收录一批「反常规」的网页设计,两年后这个说法开始流行。
Deville 的形容是「一种不在乎自己看起来舒不舒服的粗粝感」——是对当时主流网页设计的反抗:太多网站为了讨好用户,把界面做得过度轻盈讨喜,个性被磨平了。这批网站故意保留原始的 HTML 排版感,不加圆角,不加阴影,拒绝模板化精修。
BrutalistWebsites 2014Gumroad 重构与 Neubrutalism 定名
2021 年 Gumroad 的改版,让这套视觉变成今天能一眼认出的样子:创始人 Sahil Lavingia 把界面推倒重做,粗黑边框、扁平高饱和主色、向右下偏移的硬投影。
几个月内,Figma 社区冒出大量同款风格的 UI 组件库。2022 年,设计师 Michał Malewicz 写文章把这套视觉正式命名为 Neubrutalism。新粗野主义的粗糙是被重新设计过的,边框多粗、阴影多硬、色块怎么撞,都是精确控制的结果,目的是让用户第一眼觉得这个产品诚实、直接、能用。
Gumroad Redesign 2021“网页粗野主义展示真实态度,新粗野主义让 UI 展现出新的表达风格。”
— 摘自阿哲Phil《提示词美学解码 × 新粗野主义》
二、方向 A:文章封面 / 观点封面
文章封面不用做成完整 UI,借大标题、粗黑边框、碰撞色块和组件感,让一个抽象观点看起来像可点击的具象工具。非常适合用 AI 绘图模型(Midjourney / FLUX / DALL-E)进行文生图——巨大文字,重边框,硬阴影。
Case 01 · 爆裂式断裂网格01|本文封面|爆裂式断裂网格|标题「新粗野主义」
以不对称倾斜的黑色几何板块打破规则网格,中央嵌入巨型加粗无衬线标题,四周环绕波普风格黄色卡片。
Case 02 · 破损开关与系统告警02|AI Agent 自动化|破损开关 + 系统告警贴纸|标题「Loop Engineer」
将自动化循环解构成物理世界中的大型机械拨动开关,搭配斜切的危险警示胶带与多层级浮动贴纸。
Case 03 · 网页界面式构图03|Prompt 方法论 / 提示词工程|网页界面式构图|标题「提示词」
以浏览器窗口作为海报外框,内部堆叠搜索输入栏、参数标签与巨型汉字标题,形成“观点即软件”的视觉隐喻。
Case 04 · 混乱到有序04|内容资产系统|混乱到有序的转化|标题「资产」
左侧错位倾倒的文件碎片与右侧规整的硬边框卡片形成强烈对比,超大汉字「资产」压迫感十足。
文章主题或摘要:
{输入文章标题、摘要,或直接粘贴文章内容}
用途:
{例如:文章封面}
画幅:
横版 16:9(固定)
指定主标题文字:
{可选;没有就写:自动判断}
特殊要求:
{指定颜色、图形隐喻,或不能出现的元素;没有就写:无}
Create a neo-brutalist article cover poster.
Aspect ratio: 16:9 landscape banner.
Main visual:
One dominant object or interface-like metaphor (a button, a toggle, a broken grid fragment, a card shape), surrounded by offset sticker-like UI cards, tags, and small warning-style labels.
Style lock:
neo-brutalist digital graphic design, thick black borders, hard offset drop shadows, flat bold color blocks, broken grid layout, oversized typography, sticker-like interface elements, raw web aesthetic, anti-polish, playful but structured.
Typography:
One large bold headline, using the text specified above (if left as "自动判断", match the language of the topic/summary given above). Add at most one small supporting label. Do not create fake or unreadable UI text.
Composition:
Asymmetrical layout, one dominant object, overlapping smaller cards and stickers, visible grid disruption, strong negative space, hard-edged geometry.
Color:
High-contrast flat colors — pick 3-4 from off-white, black, cobalt blue, bright yellow, red, purple. No gradients.
Texture:
Slight print grain, matte digital poster feel.
Avoid:
glassmorphism, soft gradient SaaS look, glossy 3D, realistic scene, full complex dashboard, stock-photo style.三、方向 B:AI 工具 / 产品视觉
在产品与 AI 工具界面中,新粗野主义把复杂的仪表盘(Dashboard)和功能页抽象成具有高辨识度的物理色块卡片。以下是行业经典代表与官方演示站:
厚黑边框、硬偏移阴影、扁平撞色块、超大标题,被多篇设计指南称为 neubrutalism 的「海报儿童」。
NeoBrutalism React + Tailwind 组件库官方演示站,纯粹的复古工业组件集合。
开发者向构建时样式库官网,块状营销页 + 原始硬朗美学的工业设计范例。
可直接拿来搭页面的开源 UI 组件库与画廊
示例|AI 提示词管理工具定价页|标题「PROMPT OS」

不仅是孤立的单体卡片,而是将整个产品架构具象化:三个并列定价方案卡片、高对比度“START FREE”物理大按钮、顶部黄色浮动胶囊导航,极具视觉说服力。
产品或主题说明:
{输入产品名、功能介绍,或文章主题}
用途:
{例如:官网首屏 / Dashboard 概念图 / Pricing 页}
画幅:
横版 16:9(固定)
指定标题文字:
{可选;没有就写:自动判断}
特殊要求:
{指定颜色、组件、不能出现的元素;没有就写:无}
Create a neo-brutalist SaaS landing page hero illustration.
Aspect ratio: 16:9 landscape banner.
Main visual:
Turn the product/theme into a product page, tool interface, dashboard fragment, or pricing block, with several input fields, buttons, toggles, tabs, status labels, or pricing cards overlapping in a broken-grid layout — not just one isolated element.
Style lock:
neo-brutalist UI illustration, raw interface blocks, thick black outlines, hard offset drop shadows, flat bold color blocks, broken grid, oversized buttons, sticker-like tags, high contrast, playful but structured, anti-polish.
Typography:
Large bold title, using the headline text specified above (if left as "自动判断", match the language of the product/theme description given above), plus 2-3 short supporting labels (e.g. button or tab text). Do not create fake UI labels or unreadable microcopy.
Composition:
Asymmetrical layout, multiple overlapping cards and blocks, visible grid disruption, one dominant element, deliberate not messy.
Color:
Bright flat colors — pick 3-4 from off-white, black, signal yellow, cobalt blue, red, purple, green. No gradients.
Texture:
Slight print grain, matte digital poster feel.
Avoid:
glassmorphism, soft shadows, glossy 3D, Apple-style clean UI, blue-purple gradient SaaS look, cinematic lighting, realistic office scene, generic laptop mockup, stock-photo style.四、方向 C:开发者 / 开源项目
对于开源项目、CLI 命令行工具、API 开发文档,新粗野主义天然自带极强的黑客极客感与实用主义信任感。
示例|开源 CLI 工具主页|标题「TERMINAL KIT」

把终端窗口、抽象化代码条带(Blocky Lines)、操作标签与粗边框状态框有机融为一体,彻底避免了渲染真实代码带来的文字错乱,保持了高度精炼的开发者美学。
项目或教程说明:
{输入开源项目名、API 名称,或技术教程主题}
用途:
{例如:GitHub 封面 / 文档封面 / 技术教程配图}
画幅:
横版 16:9(固定)
指定标题文字:
{可选;没有就写:自动判断}
特殊要求:
{指定颜色、需要保留的品牌标识,或不能出现的元素;没有就写:无}
Create a neo-brutalist website interface concept.
Aspect ratio: 16:9 landscape banner.
Main visual:
A full-screen web layout combining a terminal window or code-card shape with misaligned content cards, navigation tabs, module tags, and status-label blocks. Do not render real, readable code — use abstracted blocky text lines instead.
Style lock:
neo-brutalist web design, thick black outlines, hard offset drop shadows, flat color panels, broken grid, raw HTML-inspired layout, oversized typography, high contrast, deliberately unpolished but usable.
Typography:
Large bold title, using the headline text specified above (if left as "自动判断", match the language of the project/tutorial description given above), monospace-flavored accents allowed for tags/labels only, plus 2-3 short supporting labels.
Composition:
Desktop landing page layout, asymmetrical grid, cards overlapping slightly, one dominant terminal/code block, visible block structure.
Color:
High-contrast flat colors, dark terminal background or off-white/black base allowed — pick 3-4 accent colors, no gradients.
Texture:
Slight print grain, matte digital poster feel.
Avoid:
glassmorphism, soft gradient SaaS look, realistic IDE screenshot, readable real code, glossy 3D, cyberpunk neon, stock-photo style.五、出图判断:反精致不等于乱
表面可以粗,结构不能乱
信息层级多、要讲清楚多步流程时别用新粗野主义——它负责建立记忆点和态度,不负责装下所有密集琐碎的信息。
neubrutalism.com 把它现在的状态总结成一个词:Anti-AI Signal——手作感、原始感的视觉,本身就是对抗 AI 同质化的强烈信号。
当 AI 生成的官网越来越像同一个模板(柔和渐变、圆角毛玻璃、千篇一律的 3D 浮动图标),新粗野主义之所以格外好用,恰恰因为它足够「不像 AI」。
六、独立开发实践案例:Seedo-时间种子
一人公司与独立开发者的实践落地
借此机会,阿哲Phil 也分享了自己在真实独立产品中的落地实测。一款由其独立开发的桌面端时间记录工具👇:
Seedo Desktop UI
Tweet StoryFANzR-arch/Seedo新粗野主义 · 提示词美学工坊
自定义标题、配色板与几何隐喻,实时生成适用于 Midjourney v6 / FLUX.1 的高反差抗 AI 审美提示词。

感谢看到这里,我是阿哲Phil,“一个自由的提示词诗人”
本篇“新粗野主义”分享完,最初起源于半个多世纪前建筑学的“传统粗野主义”(Béton Brut),也将在下篇展开,感谢大家支持!
欢迎关注推特 @Formulasearch,持续分享:用 AI 解码美学 × AI 实践 × 独立增长心得。
关注作者 Twitter

