出海数字营销宝典 Logo
出海数字营销宝典evaoo.com
Back to AI Image Hub

Prompt Aesthetics Decoded × Neo-Brutalism: Anti-AI Signal! From Web Rebellion to 3 Prompt Dimensions

Style Guide: Neo-Brutalism Anti-AI# Style Guide8 minAuthor: 阿哲Phil @Formulasearch
提示词美学解码 × 新粗野主义:反AI味!
点击放大查看原图
阿哲Phil
阿哲Phil认证作者
@Formulasearch
2026年7月 · 原帖 1.2万+ 浏览 · 75+ 书签收藏

现在很多官网长得越来越像同一个模板:柔和渐变、圆角卡片、玻璃拟态。

虽然看起来精致,如果只看一张截图,很难分清是哪家产品。更有甚者,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:诚实、手作感、极具记忆点
1

一、新粗野主义的两次转折

2014 · 网页设计里的反抗

Deville 与 Brutalist Websites

2014 年,设计师 Pascal Deville 建了 Brutalist Websites,专门收录一批「反常规」的网页设计,两年后这个说法开始流行。

Deville 的形容是「一种不在乎自己看起来舒不舒服的粗粝感」——是对当时主流网页设计的反抗:太多网站为了讨好用户,把界面做得过度轻盈讨喜,个性被磨平了。这批网站故意保留原始的 HTML 排版感,不加圆角,不加阴影,拒绝模板化精修。

2014 网页粗野主义反抗BrutalistWebsites 2014
2021 · 产品界面里的系统化

Gumroad 重构与 Neubrutalism 定名

2021 年 Gumroad 的改版,让这套视觉变成今天能一眼认出的样子:创始人 Sahil Lavingia 把界面推倒重做,粗黑边框、扁平高饱和主色、向右下偏移的硬投影。

几个月内,Figma 社区冒出大量同款风格的 UI 组件库。2022 年,设计师 Michał Malewicz 写文章把这套视觉正式命名为 Neubrutalism。新粗野主义的粗糙是被重新设计过的,边框多粗、阴影多硬、色块怎么撞,都是精确控制的结果,目的是让用户第一眼觉得这个产品诚实、直接、能用。

2021 Gumroad 改版Gumroad Redesign 2021

“网页粗野主义展示真实态度,新粗野主义让 UI 展现出新的表达风格。”

— 摘自阿哲Phil《提示词美学解码 × 新粗野主义》

2

二、方向 A:文章封面 / 观点封面

文章封面不用做成完整 UI,借大标题、粗黑边框、碰撞色块和组件感,让一个抽象观点看起来像可点击的具象工具。非常适合用 AI 绘图模型(Midjourney / FLUX / DALL-E)进行文生图——巨大文字,重边框,硬阴影。

01 爆裂式断裂网格 标题「新粗野主义」Case 01 · 爆裂式断裂网格

01|本文封面|爆裂式断裂网格|标题「新粗野主义」

以不对称倾斜的黑色几何板块打破规则网格,中央嵌入巨型加粗无衬线标题,四周环绕波普风格黄色卡片。

02 AI Agent 自动化 标题「Loop Engineer」Case 02 · 破损开关与系统告警

02|AI Agent 自动化|破损开关 + 系统告警贴纸|标题「Loop Engineer」

将自动化循环解构成物理世界中的大型机械拨动开关,搭配斜切的危险警示胶带与多层级浮动贴纸。

03 Prompt 方法论 标题「提示词」Case 03 · 网页界面式构图

03|Prompt 方法论 / 提示词工程|网页界面式构图|标题「提示词」

以浏览器窗口作为海报外框,内部堆叠搜索输入栏、参数标签与巨型汉字标题,形成“观点即软件”的视觉隐喻。

04 内容资产系统 标题「资产」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.
3

三、方向 B:AI 工具 / 产品视觉

在产品与 AI 工具界面中,新粗野主义把复杂的仪表盘(Dashboard)和功能页抽象成具有高辨识度的物理色块卡片。以下是行业经典代表与官方演示站:

Example Showcase

示例|AI 提示词管理工具定价页|标题「PROMPT OS」

AI 工具概念设计
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.
4

四、方向 C:开发者 / 开源项目

对于开源项目、CLI 命令行工具、API 开发文档,新粗野主义天然自带极强的黑客极客感与实用主义信任感。

CLI & Developer Tools

示例|开源 CLI 工具主页|标题「TERMINAL KIT」

开源项目封面
开源 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.
5

五、出图判断:反精致不等于乱

表面可以粗,结构不能乱

信息层级多、要讲清楚多步流程时别用新粗野主义——它负责建立记忆点和态度,不负责装下所有密集琐碎的信息。

Anti-AI Signal:为什么新粗野主义能对抗同质化?

neubrutalism.com 把它现在的状态总结成一个词:Anti-AI Signal——手作感、原始感的视觉,本身就是对抗 AI 同质化的强烈信号。

当 AI 生成的官网越来越像同一个模板(柔和渐变、圆角毛玻璃、千篇一律的 3D 浮动图标),新粗野主义之所以格外好用,恰恰因为它足够「不像 AI」。

6

六、独立开发实践案例:Seedo-时间种子

一人公司与独立开发者的实践落地

借此机会,阿哲Phil 也分享了自己在真实独立产品中的落地实测。一款由其独立开发的桌面端时间记录工具👇:

风格:薄荷绿为主色 + 新粗野主义 UI
Seedo 时间种子桌面端软件截图Seedo Desktop UI
一人公司还敢天天摸鱼?我 vibe 了个工具来鞭策自己Tweet Story
开源代码仓库已在 GitHub 上线:FANzR-arch/Seedo
查看 GitHub 仓库
Interactive AI Prompt Studio

新粗野主义 · 提示词美学工坊

自定义标题、配色板与几何隐喻,实时生成适用于 Midjourney v6 / FLUX.1 的高反差抗 AI 审美提示词。

实时生成 Midjourney / FLUX 提示词
Prompt (English - Recommended for Midjourney / FLUX)
Create a neo-brutalist article cover poster. Aspect ratio: 16:9 landscape banner. Main visual: One dominant object or interface metaphor (broken grid layout, misaligned offset cards, disrupted geometric structure), 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 (4px offset), flat bold color blocks, broken grid layout, oversized typography, sticker-like interface elements, raw web aesthetic, anti-polish, playful but structured. Typography: Large bold headline "新粗野主义", plus one small supporting label "反AI味!用粗黑边框与高饱和撞色重塑视觉记忆点". Color: canary yellow, stark black, crisp white, high contrast, 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 --ar 16:9
Prompt (中文 - 适用 DALL-E 3 / 即梦)
新粗野主义文章封面海报,横版 16:9 画幅,核心视觉为爆裂式断裂网格 (Broken Grid),围绕错落的复古贴纸卡片与系统告警标签。主标题为「新粗野主义」,副标题为「反AI味!用粗黑边框与高饱和撞色重塑视觉记忆点」。日光亮黄 + 纯黑高反差。风格锁定:新粗野主义平面设计,粗重黑色描边,向右下偏移的硬投影,纯平高反差色块,打破常规网格,超大粗体字排版,拒绝渐变与发光,轻微印刷颗粒质感。
传统粗野主义建筑预告
🥳

感谢看到这里,我是阿哲Phil,“一个自由的提示词诗人”

本篇“新粗野主义”分享完,最初起源于半个多世纪前建筑学的“传统粗野主义”(Béton Brut),也将在下篇展开,感谢大家支持!

欢迎关注推特 @Formulasearch,持续分享:用 AI 解码美学 × AI 实践 × 独立增长心得。

关注作者 Twitter

Explore More Image Guides

Back to Hub
What Colors Tell in Film: Decoding Cinematic Color Storytelling from In the Mood for Love to The Grand Budapest Hotel
Film Essay: Color Storytelling

What Colors Tell in Film: Decoding Cinematic Color Storytelling from In the Mood for Love to The Grand Budapest Hotel

Black bars and teal-orange filters do not automatically create a cinematic feel. Through 10 high-resolution frame comparisons across In the Mood for Love, Moonlight, Raise the Red Lantern, Blade Runner 2049, and The Grand Budapest Hotel, learn how Hue, Value, Saturation, and Dominant/Secondary/Accent color hierarchy work with light, character placement, and spatial scale to tell a story.

南鸢 nuyoah @nanyuan0412
The Order of Color: From Classical Painting to AIGC, Re-understanding "Tonality"
Color Theory: Tonality Order

The Order of Color: From Classical Painting to AIGC, Re-understanding "Tonality"

Tonality goes deeper than color palettes—it is the overarching visual order governed by Value Structure, Chroma Relationship, Temperature Interplay, and Area Proportion. Through Rembrandt, Vermeer, and Hammershøi masterworks, learn how to write true tonal-harmony AIGC prompts.

Zidan 子丹 @liluocheng13
Aesthetic Improvement Handbook in the AI Era (Part 2): Master Observation, Single-Variable Comparison & Real-Space Practice
Style Guide: Aesthetic Practice

Aesthetic Improvement Handbook in the AI Era (Part 2): Master Observation, Single-Variable Comparison & Real-Space Practice

How do you practically cultivate aesthetic judgment? Through 26 high-resolution plates—spanning Ryoan-ji rock garden, Chichu Art Museum, Matthew Butterick typography comparisons, Monet's Wheatstacks, Tadao Ando's Church of Light, Peter Zumthor's Therme Vals, Isamu Noguchi's Akari lantern, Henri Cartier-Bresson, Michael Wolf, and Hiroshi Sugimoto—this handbook builds an actionable aesthetic training loop.

Jaden 抽象日志 @Jaden_riku

Need Autonomous Agents?

Explore multi-agent workflows, enterprise RAG, and local LLMs.

AI Agent Playbook