粗野直给 (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)

反对过度理性和过度秩序,强调图案、冲突、俏皮和反规范的组合方式。