包豪斯几何设计

这里的几何是构建系统，而非装饰。页面上的每个形状都必须有实际作用，并且移除形状后页面必须仍然可用。几何绝不能妨碍页面的主要功能。请按以下顺序执行工作流。

1. 按页面类型路由

从页面必须实现的功能开始，而非外观。阅读对应的指南，其中设定了几何强度限制和验收清单。

页面类型	阅读	强度限制
主页、品牌、发布、落地页、编辑页	page-storefront.md	3
分类、搜索结果、目录	page-plp.md	1
产品详情	page-pdp.md	1，或图库后方2
购物车、结账	page-checkout.md	0
仪表盘、管理、账户、设置	page-app.md	0 到 1

品牌简报不会提高此限制。商店的主页可以是一张海报，而其结账页面则不能。对于整个站点，在设计任何页面之前，先为每个页面设定限制。

然后考虑页面需要达到的规模：9个产品和900个产品需要不同的结构。根据真实的目录规模构建，并用最大预期规模进行测试。

2. 设定简报

在编写标记之前决定这三件事。从项目中推断它们；只有当品牌确实未明确要求时才询问。

几何强度。 默认使用最低级别来表达品牌，同时不超过页面限制。

级别	名称	几何覆盖范围	适用场景
0	类型	无。仅依靠字号和灰度值完成工作	宣言、法律、长文阅读
1	标记	小形状编码类别或状态	SaaS、仪表盘、科学、金融
2	结构	网格可见；每屏一个构图	工作室、文化、编辑页
3	海报	在一个区域中有一个主导构图	发布、活动、品牌页面

一个页面最多只能有一个级别3的区域。

深度层级。 D0为默认值。只有当“部件组装”或“分层”确实是传达的信息时才添加深度。

层级	技术	成本	用途
D0	平面瓦片和线条	仅CSS	几乎处处可用
D1	硬偏移（`.bh-offset`）	仅CSS	按钮、卡片、强调
D2	斜角挤出（`.bh-extrude`）	CSS滤镜	图标集、象形图
D3	等距平板（`.bh-iso`）	CSS 3D	主视觉、流程、产品架构
D4	WebGL（`bh-three.js`）	three.js、GPU	仅限一个交互核心部件

调色板。 在 <html> 或任何区域上设置 data-bh-palette：primary、mono、signal、ember、pop、lab、night。对于品牌，覆盖六个角色令牌（--bh-bg、--bh-fg、--bh-a1 到 --bh-a4）并在步骤5中运行对比度检查。红色、蓝色和黄色是历史惯例，并非要求。

3. 先放置，再绘制

在放置任何形状之前阅读 placement.md。 它将每个页面槽位映射到应放置的内容，并给出数值预算：每页一个构图、每个区块一个形状族、一种瓦片尺寸、跨边缘连接的形式、无孔洞、图形中不嵌套图形、数据在艺术之外。瓦片列表说明存在什么；此文件说明它们放在哪里。

对于主视觉，在此选择一种艺术模式（块、堆叠、饰带、线条或单元格）。默认使用 composeBlock 构建的块：

node scripts/generate.mjs block --cols 3 --rows 4 --seed 7 --colors fg,a1,a3,a2

对于其他区域，composition.md 给出了每种原型的规则和失败模式。许多是海报方法，因此首先检查槽位映射。

如果用户提供了参考，在构建之前用 reference-decoding.md 中的方法测量它们，然后用相同的数字比较你的页面。

当用户需要原理说明、决策有争议或需要撰写设计说明时，阅读 theory.md 中的理论。

4. 加载部件

从 assets/ 复制到项目中。不要凭记忆重写它们。

bauhaus-geometry.css：令牌、瓦片、字段、深度、动效。始终包含。它位于级联层中，所有内容都以 bh- 为前缀，因此可以安全地与现有设计系统共存。
bauhaus-ui.css：小部件和区域。当项目有自有组件时跳过此文件，并将瓦片和令牌应用于这些组件。
bauhaus-commerce.css 配合 bh-commerce.js：列表、筛选器、产品页面、购物车和结账。适用于任何商店。
bh-shapes.js：自定义形状数据，包括 <bh-shape>。
bh-geometry.js：生成器和可选的自定义元素 <bh-field>、<bh-bundle>、<bh-construct>。
bh-three.js：仅D4。templates/construct-webgl.html 显示了接线方式。
templates/landing.html：一个完整的营销页面，可作为起点。
bh-audit.js：用于步骤6的浏览器内检查。

优先使用静态标记，以便页面无需运行时JS：

node scripts/generate.mjs field --preset bloom --cols 6 --rows 3 --seed 4
node scripts/generate.mjs bundle --preset u --n 9 --gap 5
node scripts/generate.mjs construct --preset pinwheel
node scripts/generate.mjs shape --name bean --size 64

尝试多个种子并保留最佳结果；生成的字段是草稿，因此在构图薄弱的地方手动替换单个瓦片。

5. 构建

瓦片是原子。一个元素、一个图元、一个四分之一圈旋转：

<i class="bh-t" data-s="quarter" data-f="a1" data-g="bg" data-r="90"></i>

data-s 形状：solid disc dot quarter half arch leaf tri peak diamond cross x stair octa ring notch bite bars slash arcs rings burst dots dotfan checker void
data-f 图形和 data-g 背景：bg fg a1 a2 a3 a4，或直接设置 --f 和 --g
data-r：90 180 270
布局：.bh-field 配合 --cols、.bh-cells 用于绘制网格、data-span="2" 用于缩放对比

需要一个列表中不包含的形状？ 首先阅读 shapes.md，然后将其作为数据描述给 bh-shapes.js。不要手工绘制SVG路径或在剪影上添加描边细节。

找到现成的标记，然后调整其中的副本和令牌：

commerce.md：产品卡片及其状态、变体、购物车行、订单摘要、结账字段
sections.md：主视觉、便当盒、统计、流程、行动号召、页脚
widgets.md：卡片、统计、价格方案、图表、图形、手风琴、表单、选项卡
grids.md：模块、布局配方、响应式规则
depth-3d.md：构造、D3和D4的规范格式
motion.md：入场、滚动和动效配方

框架。 类和属性直接移植。在JSX中，使用 className 和 style={{"--cols": 6}}。使用Tailwind时，保留核心样式表并使用布局周围的任意值。尽可能在构建时渲染生成的标记。

6. 验证

在完成之前运行以下检查并修复报告的问题：

node scripts/check-contrast.mjs            # 捆绑的调色板
node scripts/check-contrast.mjs --bg "#f2ede1" --fg "#191816" --a1 "#d3341b" --a2 "#1d4fa3"
node scripts/shape-lint.mjs src/index.html # 任何包含内联SVG的文件

然后，在浏览器中以375px和1280px的宽度运行审计，并按照页面指南的验收清单进行操作：

const { audit } = await import("./assets/bh-audit.js");
console.table(audit({ card: ".bh-product", name: ".bh-product__name", price: ".bh-price" }));

还要检查：

统计主视觉：一个形状族、一种尺寸、无孔洞、连接的形式。将其放在参考旁边，比较数字。
在脑海中移除所有几何：层级结构是否仍然清晰？
每个形状都有可命名的功能：标记、分割、框架、编码、导航或锚点。
装饰性构图带有 aria-hidden="true"；数据形状有文本替代。
没有水平滚动，且瓦片保持正方形。
文本从不置于图案瓦片（bars、arcs、dots、burst）之上。
颜色绝不是意义的唯一载体。除非有标签，否则 a3 和 a4 是装饰性的。
动效在 prefers-reduced-motion 下停止，且每个视口中只有一项循环运动。
交互目标高度至少44px，带有可见的焦点。

硬性规则

权利。 使用风格，而非作品。在命名、添加图像或改编参考之前，阅读 rights.md。

绝不复制特定的艺术品、海报、标志或构图，无论是历史还是当代的。参考图像仅用于启发原则：改变结构，而不仅仅是颜色。
绝不使用1922年包豪斯标识、博物馆徽标或历史建筑、家具或人物的照片，除非用户提供授权文件。
不要将客户的产品标记为“Bauhaus”，或暗示与任何包豪斯机构或公司有关联。
字体：默认使用捆绑的字体堆栈，这些堆栈引用开放许可的Jost、Archivo和Space Grotesk（SIL OFL）。未经许可，不要提供商业复兴字体。

形式。

平面填充、极细线和硬边。图形上无渐变、软阴影、毛玻璃或圆角卡片。曲线来自几何，而非容器上的 border-radius。
非对称布局：左对齐文本和偏中心重量。避免居中的主视觉和周围漂浮的形状。
每个视图中应有一种饱和色调主导。三种等量原色会显得像玩具。
缩放对比是必需的：将非常大的形式与非常小的形式配对。
通过限制词汇来变化。善用五种形状胜过同时使用全部二十五种。

规模。 永远不要仅凭九个项目的演示来评判列表。在宣布完成之前，尝试多个项目、长名称、缺失图像和空结果。

常见失败。

失败	修复
随机形状散落在内容周围	用 `composeBlock` 构建一个块，删除其余部分
图形嵌套在图形中	使对象本身成为形式，跨越2x2
每个区域都有极细线	框选一个区域，其余区域使用空间
像壁纸一样覆盖所有内容的均匀瓦片	添加大跨度、添加空白、减少面积
每个元素都使用原色	使用一种强调色；其余为墨水和纸张色
几何与文案冲突	将强度降低一个级别
到处使用“Bauhaus”字体	文本使用中性怪诞字体，展示使用几何无衬线字体
毫无意义的等距场景	除非部件映射到真实概念，否则使用D0
带有无关小突起的形状	用 `bh-shapes.js` 重建：切割，而非描边
编辑版面应用于商店	按页面类型路由：价格和行动优先
一键添加选择了无人选择的变体	当有多个变体时，链接到选项

bauhaus-geometry