跳转到内容

/* Without measurements, keep document navigation in normal flow so enlarged headings cannot scroll behind an estimated sticky header. */ .site-page-frame > .container-wrapper > header:has([data-docs-site-header]) { position: static !important; } @media (max-width: 63.999rem) { [data-page-frame-layout] { flex-direction: column !important; } .docs-sidebar { width: 100% !important; } .mobile-sidebar-pane { position: static !important; inset: auto !important; display: flex !important; width: 100% !important; max-height: min(60svh, 32rem); border-bottom: 1px solid var(--color-border); } .main-frame { width: 100% !important; } [data-site-contents-command] { display: none !important; } }

Brutalist 原型库

Proto UI 维护的 Neo-Brutalist 风格原型库总览与 0.2.0 可用状态。

Brutalist 是 Proto UI 维护的 Neo-Brutalist 设计语言投射，视觉 recipe 改编自 neobrutalism.dev 3306a802：DM Sans 排版、按组件拥有的圆角几何、2px 结构边框、平面填色与分工明确的硬阴影。语义实现与已说明的扩展仍由 Proto UI 维护，不声称上游 API 兼容或认证。

稳定版 @proto.ui/prototypes-brutalist@0.2.0 package 汇集既有 Base family 投影——Button、Toggle、Switch、Tabs、Hover Card、Dropdown Menu、Select、Dialog、Scroll Area、Separator 与 Textarea——以及直接定义的 styled-only Badge、Card 与 Skeleton 原型。Textarea 是 Base Textarea 上的纯视觉投影。这与 rc.7 准入的已评审 surface 相同，现已在不扩张 surface 的前提下随精确对齐的 40-package 0.2.0 生态发行发布。

下方每张卡片只展示一个基础 Demo，用于快速浏览组件范围与整体视觉；API 文档与代码示例保留在独立组件页。

17 个可预览原型 示例将在接近视口时加载

硬阴影、强边框与高对比操作面。

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。

被动、无角色的高对比标签，提供三种语义色调。

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。

带硬边结构的四部分被动内容分组表面。

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。

带硬阴影与高对比 tick/mixed glyph 的方形勾选面。

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。

带明确按压感的方角切换器。

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。

大胆、直接的布尔状态切换。

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。

方角标签与强调色选中状态。

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。

高对比遮罩与硬边任务面板。

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。

强边框值选择器与选项面板。

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。

作为视觉节拍的明确分割线。

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。

高对比的被动加载占位。

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。

仅工作区可用的 Spinner draft；npm 单包 0.2.0 和 0.3.0-alpha.1 均不含此组件，0.3 生态发行仍为 draft。

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。

可见的轨道、滑块与原生滚动。

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。

继承 Base 的单行纯文本输入。

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。

带方角、硬阴影与原生编辑能力的多行输入。

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。

当前 workspace 的视觉更新属于 0.3.0-alpha.1 train 上的 draft；已发布的 0.2.0 package 与历史视觉证据保持不变。

状态

来源：Neo-Brutalist 设计语言与上游视觉 recipe 并非 Proto UI 原创。本投射采用固定版本 neobrutalism-components 的视觉改编并保留 MIT 署名；Proto UI 维护自己的语义实现与已说明扩展。
语义：Button、Toggle、Switch、Tabs、Hover Card、Dropdown Menu、Select、Dialog、Scroll Area、Separator 与 Textarea 投射各自的 Base 协议。Textarea 只增加 resize-y、圆角中性表面/ink、比例 sans 视觉样式；Badge 与 Card 是没有 Base counterpart 的 direct passive styled-only prototype。Skeleton 是直接定义的 styled-only、passive、contentless 视觉原型，loading、announcement、替换时机与焦点连续性由父级拥有。
发布状态：@proto.ui/prototypes-brutalist@0.2.0 已通过 npm latest 随稳定版 v0.2.0 release 发布；rc.7 仅作为历史 prerelease 证据保留。
生命周期边界：稳定 package 发布不会自动提升其中每个 prototype contract。各 catalog entity 仍保留自身的 active、draft、deprecated 或 removed 状态；适用保证以组件页和所链接的 spec entity 为准。
0.2.0 package surface：root 以及 ./button、./badge、./card、./toggle、./switch、./tabs、./hover-card、./dropdown、./select、./dialog、./scroll-area、./separator、./skeleton、./textarea subpath。
维护：已进入 0.2 launch-commitment set；后续语义变化与长期所有权仍由 Proto UI governance 决定。

被动原子

Text 与 Surface 是当前工作区的 draft 可复用呈现原子。它们保留原有语义 owner，不代表完整家族或原生/Compiler 覆盖。

Collapsible (Draft) 提供共享 Base disclosure 协议的 Root、Trigger、Content 投影。