粗野直给 (Brutalist Raw Interface)
更硬、更直给、更像宣言或海报化网页的反精致方向,靠边框、对比和不讨好建立态度,而不是靠细腻润色。
创作者发布实验品牌宣言页
真实网站参考 / Real References
先看这些真实网站 / Open these real sites first
长这样 / Looks Like
- 硬边界
- 高对比
- 直给排版
- 不讨好但可读
适合做 / Good For
- 创作者发布
- 实验品牌
- 宣言页
不适合做 / Not For
- 静奢品牌
- 严肃知识库
- 复杂后台工具
Skill 包含什么 / What The Skill Controls
截图、排版和规则来自同一套风格包 / The screenshots, layout, and rules come from the same skill packet
配色系统 / Color System
- 高对比黑白优先
- 允许一两个 punch 色
- 颜色是态度不是装饰
排版系统 / Typography
- 标题更硬更直给
- 字距和边界有存在感
- 宁可少字也不要软糯说明
版式规则 / Layout Rules
- 边框和块面要明确
- 局部冲撞但整体仍可读
- 首屏能直接定下态度
图片处理 / Image Treatment
- 图片和图形可以更硬切
- 允许更粗糙的展示感
- 不要混进温和生活方式图
交互节奏 / Motion
- hover 可更强
- 切换要干脆
- 不要优雅慢动作
AI Prompt / AI Prompt
复制后直接粘贴给 Cursor / Claude / Paste directly into Cursor / Claude
请参考粗野直给(Brutalist Raw Interface)风格建站:
视觉特征:硬边界 / 高对比 / 直给排版 / 不讨好但可读
适合场景:创作者发布 / 实验品牌 / 宣言页
不适合:静奢品牌 / 严肃知识库 / 复杂后台工具
推荐页面组织:沉浸舞台型 / Immersive Stage / 目录索引型 / Catalog Explorer
历史来源:粗野主义 / 新粗野主义 / Brutalism / Neo-Brutalism / 后现代 / 孟菲斯 / Postmodern / Memphis
参考网站:Gumroad: https://gumroad.com/ / Bureau Borsche: https://bureauborsche.com/ / Memphis Milano: https://memphis.it/en/
配色系统:高对比黑白优先 / 允许一两个 punch 色 / 颜色是态度不是装饰
排版系统:标题更硬更直给 / 字距和边界有存在感 / 宁可少字也不要软糯说明
版式规则:边框和块面要明确 / 局部冲撞但整体仍可读 / 首屏能直接定下态度
图片处理:图片和图形可以更硬切 / 允许更粗糙的展示感 / 不要混进温和生活方式图
风格要求:Use a brutalist raw interface family: hard borders, assertive contrast, visible structure, little polish, and enough attitude to break away from safe template aesthetics without losing readability.
历史来源 / Historical Roots
这部分放在最后看,用来补背景,而不是先决定风格。 / Use this section to add background after the direction is already clear.
1950s roots / 2010s-2020s web revival
粗野主义 / 新粗野主义 (Brutalism / Neo-Brutalism)
结构裸露、边界鲜明、不讨好。网页里的 neo-brutalism 往往更鲜艳、更可用。
1981-1988 and beyond
后现代 / 孟菲斯 (Postmodern / Memphis)
反对过度理性和过度秩序,强调图案、冲突、俏皮和反规范的组合方式。