包豪斯
Bauhaus
别名:包豪斯包豪斯风格几何构成主义红黄蓝几何风原色几何设计圆三角方构成Bauhaus DesignGeometric Abstraction
这是什么
用基础几何与三原色做构成游戏的视觉语言：圆 三角 方三种形状，红 黄 蓝 三原色加黑，不对称但平衡的构图，装饰服从功能。每一块色面与线条都参与 结构，海报像一场几何关系的研究。
开发规格
字体
包豪斯几何无衬线，大写
色彩
米底 × 红 #E23B2E 蓝 #21409A 黄 #F2B705
边框
0 圆角，细黑边框
阴影
无阴影
间距
几何构图留白
动效
100ms 内完成的原色切换，无缓动位移
状态反馈
hover 切换到另一原色；focus 用 2px 黑色可见外框；active 反色块；disabled 降为灰阶；error 用红 #E23B2E
风格演示
同一张页面，直接操作进入工坊后选择红圆、蓝方或黄角并放置到画布，最多 12 个图形，可清空重做；形式、色彩、工坊导航各有对应内容。
整页预览 · 直接交互
使用时关注什么
- 01逐一操作 BAUHAUS 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。
- 02完成上述 BAUHAUS 操作后修改输入或撤销，检查结果与状态同步。
- 03用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。
✓ 适用场景
- 品牌 海报 活动页，需要强烈的图形识别与艺术气质
- 教育 创意工具类产品，传达"创造与构成"的气质
- 大面积视觉主视觉区，元素少而冲击力要求高
✕ 不适用场景
- 信息密集的界面，几何装饰会干扰数据可读性
- 需要长时间阅读的产品场景
- 品牌色板已被锁定，无法让位于三原色
常见形式
魏玛时期
Weimar
表现主义余温，Itten 色彩理论影响
德绍时期
Dessau
最经典阶段——理性几何与红黄蓝
当代包豪斯
Contemporary Bauhaus
网页化的构成主义，更大胆的留白与动效
实现要点
background: #D93025clip-pathborder-radius: 50%gridmix-blend-mode用三原色建立固定角色：红为主视觉面，黄做暖点缀，蓝做冷点缀，黑承担 文字与结构线。构图用非对称平衡：一大几何形 + 一两条结构线 + 一个小 实体，元素之间保持接触或穿插而非悬空。形状可用 border-radius 50% 与 clip-path 三角形实现，避免图片素材。留白同样是构图材料。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
用当前风格完成 BAUHAUS 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。 保留 BAUHAUS 米色首屏、红色主操作及红/蓝/黄三卡。主视觉使用 StyleSignatureArt 中原创 SVG：大红圆、蓝色矩形、黄色三角、黑色轴线与细测量框互相接触，取消漂浮小图形和阴影；标题收紧字距。工坊以四等分网格、空画布十字、明确选中描边与 0 / 12 计数延续构成秩序。 复用当前 preview.tokens：背景 #F4EFE6；前景 #141414；强调 #E23B2E / #000；卡面 #FFFFFF；边框 #141414；圆角 0px；字体 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif；卡影 none。 dark 与 variants 复用已有工作区 token；主视觉与页面共用 StyleSignatureArt 和 style-signatures.css，保留各自纸张、几何或电台材质。窄屏按内容重排。 完整页面操作： 进入工坊后选择红圆、蓝方或黄角并放置到画布，最多 12 个图形，可清空重做；形式、色彩、工坊导航各有对应内容。 静态封面、详情演示与 /style-scenes/bauhaus/（英文 /en/style-scenes/bauhaus/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。 操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。 提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。 不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
以客观网格与排版传达信息的视觉语言：严密的数学网格、无衬线字体、左对齐、 黑白加一个强调色（经典为红），用留白与字号对比建立秩序。装饰被视为噪音， 设计的目标是让信息以最短的路径被读懂。
风格相似概念反功能主义的后现代视觉语言：波浪线 圆点 锯齿 斑点等天真涂鸦元素，与高饱和 撞色、黑色粗描边一起铺满画面，故意打破网格与秩序。它拥抱廉价与热闹，用 "丑得快乐"对抗优雅的现代主义。
风格相似概念拒绝一切拟真修饰的视觉语言：纯色块、几何形状、无渐变无投影无纹理，靠颜色、 形状与排版建立层级。它是拟物化的反面——界面不再模仿实物，而是承认自己 是一块发光的平面，用清晰与直接换取效率与一致性。
风格相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件