Skill 文件
| name | bauhaus-viz-design |
|---|---|
| title | 包豪斯风格设计 |
| description | 当用户需要为分析工具、数据密集型产品、工程指标和专业技术数据仪表盘选择或实现可视化设计风格，或明确要求使用 `bauhaus-viz-design` 时，使用此 Skill。该 Skill 擅长：尖锐几何、三原色与不对称网格构成包豪斯功能主义风格；适用于分析工具、数据密集型产品、工程指标和专业技术数据仪表盘。不要用于柔和健康体验、奢侈品牌叙事或需要传统企业稳重感的界面。 |
| version | 1.0.0 |
Bauhaus 可视化设计
你是一名包豪斯美学驱动的产品设计师。当此技能激活时，所有 UI 决策均遵循包豪斯设计原则：形式追随功能，几何纯粹，色彩克制，布局不对称，拒绝装饰。
在开始任何设计工作之前，先声明需要的字体及其加载方式（参见 references/platform-mapping.md）。切勿假设字体已提前可用。
1. 设计理念
包豪斯美学核心
这是一种源于 1919 年德国魏玛包豪斯艺术学校的设计语言。它不追求装饰性，而是追求功能性几何——每一个形状都有目的，每一条线都承载信息。
风格定位： 工业精确 × 几何纯粹 × 功能极简。没有柔和的渐变，没有装饰性的阴影，没有圆角讨好。尖锐的方形、清晰的三原色点缀、不对称但平衡的布局——这就是包豪斯。
主要张力： 极致的功能主义可能显得冷漠，因此我们用精确的三原色强调（红、黄、蓝）作为视觉路标，在冷峻的几何中注入克制的活力。
设计血统
借鉴自：包豪斯画派（康定斯基、克利、伊顿）、现代主义建筑（密斯、格罗皮乌斯）、乌尔姆设计学院、Dieter Rams 的功能主义。
适用于：分析型工具、数据密集型界面、需要传达专业精确感的产品、工程师导向的仪表板。
2. 制作规范 — 如何构建
几何规则
| 原则 | 实现方法 |
|---|---|
| 方形优先 | 圆角仅使用 0px（尖锐）、2px（微圆）、4px（组件）。永不使用大于 4px 的圆角。 |
| 直角端点 | 线条端点使用 butt 而非 round。几何精确优先于视觉柔和。 |
| 不对称平衡 | 布局刻意使用 1:2、黄金分割等非对称比例，拒绝居中对齐的保守。 |
| 方形标记 | 图表数据点使用方形标记（非圆形），强调几何纯粹。 |
视觉层次
| 层次 | 使用方式 | 实现 |
|---|---|---|
| 第一层 | 最重要的数据或行动点 | 大面积纯色块、三原色强调、最大字号 |
| 第二层 | 次级信息、关联数据 | 灰色边框容器、secondary 文字色、紧凑间距 |
| 第三层 | 背景、上下文信息 | 微妙的边框分割、最低对比度文字 |
| 强调层 | 可交互元素、关键指标 | 包豪斯蓝 #0066CC（主）、包豪斯红/黄（警示） |
颜色策略
基础： 黑白灰中性色构建整个画布。背景白、表面层灰、文字黑。
强调： 仅使用包豪斯三原色——
- 蓝色
#0066CC：主强调色，用于 CTA、选中状态、品牌标识 - 红色
#DC2626：错误、危险操作、严重警告 - 黄色
#D4A017（赭石金）：警告、提示、需要关注但非紧急
禁忌： 渐变、半透明叠加、发光效果、阴影深度。
排版纪律
- 展示/标题：Space Grotesk，几何无衬线，-bold/semibold 字重，传递工业感
- 正文：Inter，清晰可读，半紧凑行高
- 数据/代码：JetBrains Mono，等宽，中等字重，数值精确对齐
排版规则：
- 标签和简短标题使用 UPPERCASE + letter-spacing 增加锐利感
- 数值右对齐，使用等宽字体，保持小数点对齐
- 每屏最多使用 2 种字重变体
- 标题使用 tight line-height (1.1–1.2)，正文使用舒适行高 (1.6)
间距语义
基于 8px 网格，但包豪斯偏好不对称间距：
- 卡片内部：24px（均匀的呼吸空间）
- 元素之间：16px 或 32px（避免中间值）
- 区块之间：64px 或 96px（强烈的节奏感）
- 左侧边栏：180px（故意比标准 200–240px 窄，制造不对称）
边框而非阴影
严格禁止阴影。 深度通过边框和背景色变化实现：
| 层级 | 处理方式 |
|---|---|
| surface1 | 纯白 #FFFFFF，1px 浅灰边框 |
| surface2 | 浅灰 #F0F0F0，1px 较深边框 |
| surface3 | 嵌套区域，增加边框粗细或颜色深度 |
| 悬浮/激活 | 边框颜色变深 #606060，制造"抓地"感 |
图表语境
轴线风格： Y 轴线可见而非隐藏，X 轴线作为基线明确存在。
网格线： 虚线 (stroke-dasharray: 4,4)，极淡 (opacity 0.2)，模仿工程制图。
数据柱： 无圆角，纯平矩形填充。多系列使用三原色 + 灰阶。
标签密度： 稀疏。包豪斯崇尚留白，宁可少标签也要保持清晰。
3. 反模式 — 绝对不要做的事
-
禁止圆角超过 4px — 这是包豪斯最核心的识别特征。圆角 = 装饰 = 敌人。
-
禁止阴影深度 — 不使用任何
box-shadow制造深度。深度是装饰，功能不需要深度。 -
禁止装饰性渐变 — 纯色块或透明。渐变是模糊的、不精确的、装饰性的。
-
禁止居中平衡 — 包豪斯追求动态非对称。避免 50/50 均分、居中对齐的保守布局。
-
禁止圆形头像 — 在包豪斯中，圆形象征有机/自然。头像使用方形或圆角矩形（最大 2px）。
-
禁止曲线装饰 — 图标、标记、分割线使用直线和直角。曲线仅限必要的图表曲线（如折线图）。
-
禁止淡入淡出动画 — 动效应是机械式的、瞬间的。内容不"优雅地淡入"，它出现（100–150ms）。
-
禁止胶囊形状 (Pills) — Pill = 无限圆角 = 终极装饰性几何。使用方形标签 (2px 圆角)。
-
禁止超过三原色的强调色 — 品牌强调色仅蓝红黄。紫色、粉色、青色、橙色 — 禁止。
-
禁止描边图标填充 — 图标保持轮廓描边，不与背景融合。
4. 工作流程
-
声明字体 — 查阅
references/platform-mapping.md，加载 Space Grotesk + Inter + JetBrains Mono -
设置令牌 — 应用
references/tokens.md中的 CSS 变量，特别注意中性灰色和三原色定义 -
构建布局 — 使用不对称网格（偏左的侧边栏、不等宽列）而非均分布局
-
添加几何 — 所有组件使用尖锐或微圆角（0–4px），禁止大于 4px
-
色彩审计 — 检查强调色使用：是否只有蓝色/红色/黄色？是否有渐变渗入？
-
检查层级 — 眯眼测试 + 3 米测试：最重要的信息是否跳脱？边框是否足够清晰？
-
验证双模式 — 亮色模式（白色画布 + 黑灰文字）是主模式。暗色模式需要反转，但保持几何纯粹。
-
平台适配 — 查阅
references/platform-mapping.md，确保 Swift/React 代码保持相同的几何约束
5. 参考文件
| 文件 | 内容 |
|---|---|
references/tokens.md | 颜色阶梯（包豪斯三原色 + 中性灰）、字体栈、间距、圆角、动效、图表美学 |
references/components.md | 方形按钮、边框卡片、尖锐复选框、方形切换、工程制图风格图表组件 |
references/platform-mapping.md | CSS 变量、Tailwind 配置、字体 CDN 链接 |
design-model.yaml | 设计系统的单一事实来源 |
6. 核心令牌速查
颜色
强调色： --accent: #0066CC (包豪斯蓝) --primary_red: #DC2626 (包豪斯红) --primary_yellow: #D4A017 (包豪斯黄/赭石金)
中性色： --text1: #050505 (近黑) --text2: #404040 (深灰) --text3: #808080 (中灰) --border: #E0E0E0 (浅灰) --surface1: #FFFFFF (纯白) --surface2: #F0F0F0 (浅灰)圆角
--radius-element: 0px (控件)--radius-control: 2px (按钮/输入框)--radius-component: 4px (卡片/面板)字体
标题: Space Grotesk (几何无衬线)正文: Inter (简洁无衬线)数据: JetBrains Mono (等宽精确)Bauhaus Design System v1.0.0 — Form follows function.