mcpField
S
swiss-bauhaus-design

swiss-bauhaus-design

github.com/editframe设计与 UI1972 次安装2 周前更新
代码仓库

关于 swiss-bauhaus-design

这是一套为 Editframe 落地页制定 Swissted 风格视觉规范的设计技能，为开发者和 Agent 提供颜色、字体、布局及设计检查规则。

主要功能

  1. 01高饱和通栏色彩方案
  2. 02全大写标题字体
  3. 03区块颜色与叙事顺序
  4. 04内容直接置于底色上的扁平布局
  5. 05设计令牌与对比度检查

适用场景

  1. 01构建或调整落地页区块
  2. 02检查 CSS 令牌和色彩对比度

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/editframe/skills --skill swiss-bauhaus-design

安装后在 Claude Code 中输入/swiss-bauhaus-design确认已加载。

附带文件examples.md

详细介绍

Swissted 设计系统

Editframe 落地页以 Swissted 为蓝本——这是 Mike Joyce 的项目，以瑞士国际主义风格重新演绎朋克／独立音乐会海报。这就是具体的参考方向。不是泛泛的瑞士风格／包豪斯，也不是风格派。

Swissted 的特点：

  • 高饱和度的原色作为满版底色（不柔和，也不“讲究”）
  • 粗重的全大写字体直接置于色彩之上——不用卡片，也不用容器
  • 硬朗的几何线条作为结构分隔
  • 每个区块包含三到四个构图元素，不多不少

质量与完成度

设计质量总是在被说出来之前就能被感受到。开发者打开页面，要么会想“这些人懂行”，要么会感到一种说不出的不安。这种差距——信任与近乎信任之间的距离——正是系统缺少用心之处。

系统在以下情况下会让人觉得完整：

  • 每个令牌都有明确的用途
  • 每种用途都确实得到应用
  • 颜色选择有充分依据，而非随意决定
  • 新 Agent 阅读 CSS 时，能明白该用什么以及为什么

系统在以下情况下会让人觉得被弃置：

  • 定义了令牌，却没有使用
  • 颜色只是因为可用才出现在页面上
  • 规则只有暗示，却从未明文写出

当某处感觉不对时，不要只修补症状。追溯问题，找到用心之处开始缺失的地方，并在那里修复系统。

令牌系统

定义于 telecine/services/web/app/styles/landing.css。

/* PRIMARY — brand moment, hero CTA, primary feature section BG */
--poster-red: #E53935;

/* SECONDARY — emphasis on dark backgrounds, template/data section BG */
/* Never as text on light backgrounds — contrast fails WCAG AA (~2.3:1) */
--poster-gold: #FFB300;

/* TECHNICAL — focus rings, code syntax, architecture diagrams */
/* Not for section backgrounds or CTAs */
--poster-blue: #1565C0;

/* AI/AGENT — PromptToTool section only. Do not use elsewhere. */
--poster-green: #2E7D32;

/* STRUCTURE */
--ink-black: #1a1a1a;
--paper-cream: #FAF8F5;
--warm-gray: #6B6B6B;
--card-dark-bg: #1a1a1a;

CSS 中定义了 --poster-pink，但已移除其用法。无用令牌会让调色板看起来比实际更大，也显得不够审慎。

浅色背景上的金色： --poster-gold（#FFB300）在奶油色或白色背景上的对比度不符合 WCAG AA 标准。浅色背景上的金色文字应使用 #B45309（对白色的对比度约为 4.5:1）。

区块架构

每个区块都有明确的底色和主题依据。颜色选择有充分理由，而非随意决定。

区块底色主要强调色依据
Hero--paper-cream--poster-red品牌亮相，第一印象
CodeExamples--card-dark-bg--poster-gold工艺／代码——金色在暗色背景上醒目
TemplatedRendering--poster-gold黑色数据驱动模板——金色就是内容
RenderAnywhere--poster-red白色核心能力主张
Architecture--paper-cream--poster-blue / 金色技术图示
GettingStarted白色--poster-red行动——红色能激发行动
PromptToTool--poster-green白色 / 金色AI／Agent——绿色专用于此处

叙事顺序：奶油色 → 深色 → 金色 → 红色 → 奶油色 → 白色 → 绿色。新增区块必须符合此顺序，并在注释中说明其主题依据。

排版

/* Headlines — the Swissted voice */
font-weight: 900;           /* font-black */
letter-spacing: -0.05em;    /* tracking-tighter */
text-transform: uppercase;
line-height: 0.9;

/* Section labels — visually distinct from headlines */
font-size: 0.75rem;         /* text-xs */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;     /* tracking-widest */
color: var(--warm-gray);

/* Body */
font-weight: 400;
color: var(--warm-gray);
line-height: 1.625;         /* leading-relaxed */

全大写标题是这种美学的表达方式，而不是标签样式。不要改成大小写混排。力量来自坚定的坚持。

底色上的文字

底色就是区块背景。文字直接置于其上。

WRONG:  section-bg → white card → shadow → content
RIGHT:  section-bg → content

网格列对齐用于组织元素，线条用于分隔元素。除此之外别无他物。

浅色区块的结构分隔线：

<div class="border-t-4 border-[var(--ink-black)]" />     
<div class="border-r-2 border-[var(--ink-black)]" />

彩色区块（红色、金色、绿色）：

<div class="border-t-2 border-white/40" />               
<div class="border-r-2 border-black/20" />

满版色彩变化本身就表明进入了新区块。无需也不应添加其他提示——无论是标签、阴影还是卡片。

要消除的数字化设计特征

以下 Web UI 惯例会破坏印刷品的质感：

元素问题所在替代方案
box-shadow（任何形式）印刷品是平面的。阴影模拟了印刷品中不存在的 UI 深度。不使用。通过色彩对比来体现层次。
border-radius > 0圆角会让人联想到可交互的 UI 元素。印刷品中的方框是直角的。使用 rounded-none，或完全省略
彩色背景上的卡片红色背景上的白色卡片是 Web 组件，不是海报构图。直接将文字放在版块底色上
浅色边框 rgba(0,0,0,0.12)细微的边框是数字 UI 惯例。使用全粗细规则线（2–4px，不透明度为 100%），或完全不使用
多重层级信号颜色 + 阴影 + 标签 + 卡片 = 用四种信号表示一个过渡选一种即可。颜色已经足够。
非交互元素的悬停状态会让人习惯于期待所有元素都能交互仅对实际可交互元素提供视觉悬停反馈

按钮

不要使用圆角或柔和阴影。采用方正的几何形状，意图清晰。


<a class="px-8 py-4 bg-[var(--poster-red)] text-white font-bold uppercase tracking-wider hover:bg-[var(--ink-black)]">
  Get Early Access
</a>


<a class="px-8 py-4 border-2 border-[var(--ink-black)] font-bold uppercase tracking-wider hover:bg-[var(--ink-black)] hover:text-white">
  Read the Docs
</a>

主要 CTA 始终使用 --poster-red。任何版块都不应使用其他 CTA 背景颜色。

代码块

「不使用卡片」规则的唯一例外是代码块——代码需要容器才能发挥作用。使用既定样式：

<div class="bg-[var(--card-dark-bg)]">
  <div class="flex items-center gap-2 px-4 py-3 border-b border-white/10">
    <div class="w-3 h-3 rounded-full bg-[#ff5f57]" />
    <div class="w-3 h-3 rounded-full bg-[#febc2e]" />
    <div class="w-3 h-3 rounded-full bg-[#28c840]" />
    <span class="ml-4 text-xs text-white/50 font-mono">filename.tsx</span>
  </div>
  <pre class="p-6 font-mono text-sm text-white/90">...</pre>
</div>

语法高亮：关键字 → --poster-red，JSX 标签 → --poster-blue，字符串/值 → --poster-gold。

完成检查

完成任何设计工作前：

  • 每个使用的令牌都有声明的用途（参照上表）
  • 每个版块的颜色选择都有充分理由并附有注释
  • 非代码块元素上没有 box-shadow
  • 版块容器或功能项上没有 border-radius
  • 内容直接放在底色上，而非卡片中
  • 每个版块过渡只使用一种结构信号（即颜色变化）
  • 所有主要 CTA 都使用 bg-[var(--poster-red)]
  • 浅色背景上的金色文字使用 #B45309，而非 --poster-gold
  • 新 Agent 阅读本版块的代码时，无需询问就能理解每种颜色选择的原因

评论

支持 Markdown