包豪斯
Bauhaus
别名:包豪斯包豪斯风格几何构成主义红黄蓝几何风原色几何设计圆三角方构成Bauhaus DesignGeometric Abstraction
这是什么
用基础几何与三原色做构成游戏的视觉语言：圆 三角 方三种形状，红 黄 蓝 三原色加黑，不对称但平衡的构图，装饰服从功能。每一块色面与线条都参与 结构，海报像一场几何关系的研究。
开发规格
字体
包豪斯几何无衬线，大写
色彩
米底 × 红 #E23B2E 蓝 #21409A 黄 #F2B705
边框
0 圆角，细黑边框
阴影
无阴影
间距
几何构图留白
动效
100ms 内完成的原色切换，无缓动位移
状态反馈
hover 切换到另一原色；focus 用 2px 黑色可见外框；active 反色块；disabled 降为灰阶；error 用红 #E23B2E
风格演示
先看整页效果，再试交互场景整页预览
FORM &
FUNCTION
几何与三原色的秩序。
圆 · 三角 · 方块
进入工坊 →统一的起点
功能的稳定
能量的指向
交互场景
正在加载演示…
✓ 适用场景
- 品牌 海报 活动页，需要强烈的图形识别与艺术气质
- 教育 创意工具类产品，传达"创造与构成"的气质
- 大面积视觉主视觉区，元素少而冲击力要求高
✕ 不适用场景
- 信息密集的界面，几何装饰会干扰数据可读性
- 需要长时间阅读的产品场景
- 品牌色板已被锁定，无法让位于三原色
常见形式
魏玛时期
Weimar
表现主义余温，Itten 色彩理论影响
德绍时期
Dessau
最经典阶段——理性几何与红黄蓝
当代包豪斯
Contemporary Bauhaus
网页化的构成主义，更大胆的留白与动效
实现要点
background: #D93025clip-pathborder-radius: 50%gridmix-blend-mode用三原色建立固定角色：红为主视觉面，黄做暖点缀，蓝做冷点缀，黑承担 文字与结构线。构图用非对称平衡：一大几何形 + 一两条结构线 + 一个小 实体，元素之间保持接触或穿插而非悬空。形状可用 border-radius 50% 与 clip-path 三角形实现，避免图片素材。留白同样是构图材料。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
在当前项目中用包豪斯风格（Bauhaus）实现一个几何构成主视觉区块。 先检查现有 Design Token 与色彩体系，三原色做成独立变量不污染品牌色。 要求： - 圆 三角 方与红 黄 蓝 黑构成非对称平衡的主视觉 - 几何形用 CSS（border-radius/clip-path）实现，不引入图片素材 - 文字与几何穿插接触，构图重心平衡 - 无渐变 无投影 无纹理 - 支持深色模式 - 不新增任何依赖 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
以客观网格与排版传达信息的视觉语言：严密的数学网格、无衬线字体、左对齐、 黑白加一个强调色（经典为红），用留白与字号对比建立秩序。装饰被视为噪音， 设计的目标是让信息以最短的路径被读懂。
风格相似概念反功能主义的后现代视觉语言：波浪线 圆点 锯齿 斑点等天真涂鸦元素，与高饱和 撞色、黑色粗描边一起铺满画面，故意打破网格与秩序。它拥抱廉价与热闹，用 "丑得快乐"对抗优雅的现代主义。
风格相似概念拒绝一切拟真修饰的视觉语言：纯色块、几何形状、无渐变无投影无纹理，靠颜色、 形状与排版建立层级。它是拟物化的反面——界面不再模仿实物，而是承认自己 是一块发光的平面，用清晰与直接换取效率与一致性。
风格相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件