swiss-editorial-minimalist (SKILLS.md v3.1)

一个由模型构建的页面通常看起来像它见过的所有页面的平均值：渐变英雄区、带有emoji图标的圆角卡片行、每个按钮下方的阴影，以及加载了一套彩虹颜色的Tailwind CDN。这其中没有一样是错的，但也没有一样是经过深思熟虑的。

此文件用决策取代了这些默认设置。它涵盖了三件事：内部风格（展示什么、省略什么）、使其成立的技术规则（令牌、比例、断点、可访问性），以及在交付前检查结果的关卡。

请按书面规则执行。当请求与规则冲突时，第0节说明了应如何处理。

0. 元规则（先阅读）

收到此文件时应做什么

在编写任何代码之前，请通读整个文件。 这些规则相互依赖。
不要向此文件已决定的任何内容寻求澄清。 基于合理的假设执行，并用一句话说明这些假设。
如果请求与内部风格冲突（例如“色彩丰富”、“俏皮”、“渐变英雄区”、“emoji图标”、“20px圆角卡片”），请在继续之前确认一次：

该请求违反了SKILLS.md第X节。我将以瑞士编辑极简主义风格进行解读，除非您想放弃此指南。

等待回答，然后构建。
默认输出是一个完整的HTML文件，包含内联的<style>和<script>。除非用户要求，否则不要交付代码片段。
始终以第12节的:root块开始CSS。

如何命名此风格

使用这些术语以保持词汇一致。不要单独使用“现代”、“干净”或“时尚”，它们没有具体含义。

“瑞士编辑极简主义”：默认风格，如本文所述。
“柔和粗野主义”：更粗的边框和更粗糙的网格。
“新粗野主义编辑风”：添加一种强调色和硬偏移阴影。默认风格中禁止阴影，因此仅在用户明确要求时才使用此名称。
“单色杂志”：以排版为主导，没有插图卡片。

1. 设计理念

三个原则，均不可协商：

内容为王；排版是骨架。 没有装饰性插图。大标题是主要的视觉元素。
结构保持可见。 边框、网格和段落编号如实展现。它们不会被隐藏。
单色优先，之后再考虑颜色。 默认是黑色、白色和灰色。颜色仅出现在暗色模式或作为极少的点缀。

页面应感觉平静、坚定、聪明且富有编辑感，就像一本由工程师制作的印刷杂志。

2. 调色板

亮色模式（默认）

:root {
  --bg:     #f5f5f5; /* 主背景，非纯白 */
  --ink:    #111111; /* 主文本，非纯黑 */
  --muted:  #666666; /* 次要文本 */
  --line:   #e0e0e0; /* 边框和分隔线 */
  --card:   #eeeeee; /* 卡片背景 */
  --accent: #d4d4d4; /* 中性强调色 */
  --dark:   #0a0a0a; /* 高对比度区域（声明、页脚） */
  --white:  #ffffff;
}

暗色模式

body.dark {
  --bg:     #121212;
  --ink:    #f0f0f0;
  --muted:  #999999;
  --line:   #333333;
  --card:   #1e1e1e;
  --accent: #2a2a2a;
  --dark:   #050505;
  --white:  #181818;
}

颜色规则（强制）

主体背景永远不是#fff。 使用米白色#f5f5f5。
文本永远不是#000。 使用#111。
品牌色每页最多出现一两次，并且总是通过CSS变量，never hardcoded。
禁止使用明亮色彩表示状态、图标和文本。以下例子是被禁止的：emerald-500, green-600, red-500, blue-500, yellow-400, #27c93f, #ff5f56, #ffbd2e。将它们替换为var(--ink)或var(--muted)中的单色符号（●, ▲, ✕, →）。
高对比度区域（声明、号召性用语、页脚）使用var(--dark)配合浅色文本。
必须支持暗色模式。 默认遵循prefers-color-scheme，并让用户覆盖，将选择保存在localStorage中。切换开关使用第5节（“主题切换”）中的强制标记。

3. 排版

字体搭配

标题：     'Space Grotesk'  (或 Inter Tight, General Sans, Neue Montreal)
正文：     'DM Sans'        (或 Inter, Satoshi, IBM Plex Sans)
等宽：     'JetBrains Mono' (或系统等宽字体)

正文中不要使用装饰性、手写体或衬线字体。仅允许在引用或签名（例如Georgia, italic）中使用衬线字体。

字号比例（必须使用clamp，使字号无需媒体查询即可缩放）

/* 英雄区H1 */
font-size: clamp(55px, 5.6vw, 94px);   /* 对于窄英雄区，或使用 clamp(32px, 4.3vw, 62px) */
line-height: 1.025;
letter-spacing: -0.07em;               /* 总是负值 */
font-weight: 500;                      /* 不是700，不是400 */

/* 区块H2 */
font-size: clamp(42px, 4.2vw, 69px);
line-height: 1.08;
letter-spacing: -0.06em;
font-weight: 500;

/* 卡片H3 */
font-size: clamp(22px, 2.2vw, 27px);
line-height: 1.2;
letter-spacing: -0.04em;
font-weight: 500;

/* 正文 */
font-size: 16px–18px;
line-height: 1.7–1.8;
color: var(--muted);

/* 微小 / 眉题 / 标签 */
font-size: 12px;
letter-spacing: 0.15em–0.17em;
font-weight: 700;
text-transform: uppercase;

严格排版规则

标题始终使用负字距（在-0.04em到-0.07em之间）。这是该风格的标志性特征。
标题字重为500。粗体700会减弱编辑感。
眉题和微标签始终为全大写并带有宽字距（0.15em或以上）。
段落编号（01, 02, 03）以微标签形式出现。不要隐藏它们。
标题末尾的句号可作为点缀，这是一个可选方案：
```
<h1>标题.<span style="color:var(--muted)">.</span></h1>
```
正文文本左对齐。不要居中显示长段落。

4. 布局和网格

容器

.wrap {
  max-width: 1440px;
  margin: auto;
  padding: 0 clamp(24px, 5vw, 84px);
}

垂直间距

区块之间：桌面端padding: 130px 0，移动端缩小至85px。
头部高度：桌面端88px，移动端75px。
卡片间距：15–16px。保持紧凑，不要24px或更大。

常见网格模式

/* 不对称英雄区 */
.hero { grid-template-columns: 1.04fr .96fr; }

/* 两列区块标题 */
.section-head { grid-template-columns: 1fr 1fr; align-items: end; }

/* 三列功能 */
.features { grid-template-columns: repeat(3, 1fr); gap: 15px; }

/* 声明 */
.statement-grid { grid-template-columns: 1fr 1fr; gap: 60px; }

/* 用户评价（参见第8节） */
.testimonial-grid { grid-template-columns: 1.2fr .8fr; gap: 60px; }

布局规则（强制）

区块之间用1px var(--line)边框分隔，而不是用阴影或不同背景。
避免大border-radius。按钮和卡片最多4px。只有图片和截图可以使用12–22px。
在区块标题上使用align-items: end，使标题和段落位于同一基线上。这是编辑风格的诀窍。
不对称网格（1.04fr / .96fr）看起来比1fr / 1fr更好。
永远不要居中显示正文。始终左对齐。
每个区块需要有1px var(--line)的border-top或border-bottom。

5. 组件

按钮

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-radius: 4px;                 /* 接近方形 */
  padding: 15px 20px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s, background .2s;
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); background: #333333; }
}

/* 变体 */
.btn.outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.light   { background: var(--bg); color: var(--ink); border-color: var(--bg); }

按钮规则：

每个按钮都带有一个箭头图标：外部链接用↗，滚动用↓。
悬停时按钮上移2px，仅限在@media (hover: hover)内。不缩放，不添加阴影。
永远不要对.btn.light使用#fff。使用var(--bg)。

功能卡片

┌─────────────────────────┐
│  [SVG线稿 8:5]          │  ← 抽象单色插图，或留空
├─────────────────────────┤
│  微标签                  │  ← 全大写，宽字距
│  卡片标题.               │  ← Space Grotesk 24–27px
│  1-2句描述               │  ← 淡色，14px
└─────────────────────────┘

背景var(--card)，无border-radius（或最多4px）。
无边框（卡片与背景融合），或1px solid var(--line)。

悬停：transform: translateY(-5px)，仅限在@media (hover: hover)内：

@media (hover: hover) { .card:hover { transform: translateY(-5px); } }

插图是SVG线稿，属性为stroke-width: 1.2px，fill: none，使用墨水色。不是照片，不是渐变，不是emoji。

头部

高度88px，border-bottom: 1px solid var(--line)。
品牌：34px logo和名称使用Space Grotesk 22px，letter-spacing: -1.1px。
导航：14px，字重600，间距36px。
操作区：主题切换（太阳/月亮图标，下方“主题切换”中的强制标记）、号召性用语按钮，以及移动端的汉堡菜单。
移动端导航在头部下方以绝对定位面板形式打开，按Escape键关闭。
汉堡菜单需要有aria-label，aria-expanded和aria-controls。主题切换需要有aria-label和aria-pressed（见下文）。

主题切换（强制标记）

每个页面都有一个暗色模式切换开关，并且始终使用此标记。不要重绘图标、将它们换成emoji或添加文字标签。SVG路径、id值和aria-label是固定的。

<div class="header-actions">
  <!-- 暗色模式切换按钮 -->
  <button id="theme-toggle" type="button" class="theme-toggle" aria-label="切换暗色/亮色模式" aria-pressed="false">
    <!-- 太阳图标（亮色模式隐藏，暗色模式显示） -->
    <svg id="sun-icon" class="theme-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8" aria-hidden="true">
      <circle cx="12" cy="12" r="5"></circle>
      <path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"></path>
    </svg>
    <!-- 月亮图标（亮色模式显示，暗色模式隐藏） -->
    <svg id="moon-icon" class="theme-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8" aria-hidden="true">
      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
    </svg>
  </button>
  <!-- 号召性用语按钮和汉堡菜单放在此处，位于同一包装器内 -->
</div>

.header-actions { display: flex; align-items: center; gap: 16px; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;                    /* 点击目标 */
  min-height: 44px;
  padding: 8px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s;
}
@media (hover: hover) {
  .theme-toggle:hover { background: var(--card); }
}
.theme-icon { width: 20px; height: 20px; }

/* 图标状态跟随 body.dark，因此JavaScript中无需交换类 */
#sun-icon  { display: none; }
#moon-icon { display: block; }
body.dark #sun-icon  { display: block; }
body.dark #moon-icon { display: none; }

<!-- <body>内部第一个元素，以便在首次绘制前应用已保存的主题 -->
<script>
  (function () {
    var KEY = 'theme';
    var saved = null;
    try { saved = localStorage.getItem(KEY); } catch (e) {}
    var dark = saved ? saved === 'dark'
                     : window.matchMedia('(prefers-color-scheme: dark)').matches;
    document.body.classList.toggle('dark', dark);

    document.addEventListener('DOMContentLoaded', function () {
      var btn = document.getElementById('theme-toggle');
      if (!btn) return;
      btn.setAttribute('aria-pressed', String(document.body.classList.contains('dark')));
      btn.addEventListener('click', function () {
        var isDark = document.body.classList.toggle('dark');
        btn.setAttribute('aria-pressed', String(isDark));
        try { localStorage.setItem(KEY, isDark ? 'dark' : 'light'); } catch (e) {}
      });
    });
  })();
</script>

主题切换规则：

保持包装器（.header-actions）、按钮id="theme-toggle"以及图标idsun-icon和moon-icon完全按原样编写。脚本和检查清单会查找它们。
月亮在亮色模式下显示（点击进入暗色）。太阳在暗色模式下显示（点击进入亮色）。默认状态为亮色，除非prefers-color-scheme: dark或已保存的选择另有规定。
按钮仅从变量中获取颜色：图标和文本使用var(--ink)，边框使用var(--line)，悬停背景使用var(--card)。永远不要硬编码颜色。
border-radius最多4px，点击目标至少44×44px，悬停状态位于@media (hover: hover)内。
图标大小为20px，属性为stroke="currentColor"，stroke-width="1.8"，fill="none"，带有aria-hidden="true"。按钮携带aria-label。
在此按钮上使用aria-pressed。aria-expanded用于汉堡菜单，而不是主题切换。
将选择保存在localStorage中，使用键theme，值为light或dark。将存储调用包裹在try/catch中。
切换开关无需Tailwind即可工作。原始代码片段使用了Tailwind工具类（flex items-center gap-4, p-2, w-5 h-5, hidden/block），这些在此处已被上述原生CSS取代，因为Tailwind CDN被禁止（第10节）。如果项目已经通过构建步骤运行Tailwind，则可以保留工具类，但颜色必须写成text-[var(--ink)]。text.var(--ink)这种形式是拼写错误，无效。

页脚

背景var(--dark)，文本为var(--bg)。
两列网格：左侧版权/品牌，右侧快速链接。
border-top: 1px solid var(--line)用于页脚顶部分隔线。

6. 反模式检查清单

不要在最终页面中发现以下任何一项。如果发现，删除或替换它们。

反模式	替换方案
曲线/渐变英雄区	大号标题配合全高图片或纯色背景
圆角边框（大于4px，图片/视频/截图除外）	方形按钮和卡片（最多4px）
按钮下方的阴影	像素完美上移（translateY）
emoji图标	单色SVG线稿符号或纯文本符号
品牌色作为背景	仅在`var(--ink)`作为文本、SVG或超小点缀上使用
`#fff` / `#000`	`var(--bg)` / `var(--ink)`
居中正文段落	左对齐正文
毛玻璃效果	纯`var(--card)`背景
复杂的重叠布局	简单的网格，有足够的间距
需要悬停才能看到的文本	始终可见
Tailwind CDN样式	自定义CSS变量（第12节）

7. 交付前检查清单

在交付最终HTML文件之前运行此检查清单。

暗色模式切换存在且功能正常：点击切换。保存。刷新。始终有效。
颜色全部来自CSS变量。没有#000、#fff、#1f2937或#3b82f6。
正文未居中。
标题使用负字距，且在-0.04em到-0.07em之间。
Section编号可见（01, 02, 03…），如果适用。
微标签/眉题使用全大写并带有宽字距。
卡片border-radius最多为4px。图片和截图可能更大。
<style>标签：没有挂起的花括号，没有无效的CSS选择器，CSS变量已正确应用。
DOM中的ID匹配：#theme-toggle、#sun-icon、#moon-icon都存在且未被重命名。
Aria已就绪：theme-toggle上带有aria-pressed，汉堡菜单上带有aria-expanded/aria-controls。
点击目标≥44px（主题切换、汉堡菜单）。
悬停效果包装在@media (hover: hover)中。
无Tailwind CDN。如果使用Tailwind，则通过构建步骤进行。

8. 用户评价部分

可选的用户评价网格模式。

<section class="testimonial testimonial-grid">
  <blockquote>
    <p>“引用文本。最多三到四句话，讲一个微小的故事。”<p>
    <footer>— 姓名, 职位 @ 公司</footer>
  </blockquote>
  <div class="testimonial-visual">
    <!-- 单色SVG肖像或抽象图形 -->
  </div>
</section>

使用<blockquote>。不要使用<div class="quote">。
引用文本为var(--ink)，18px/1.6，正常字重。
作者（<footer>）为var(--muted)，14px，全大写且带有宽字距。
视觉元素为抽象的单色SVG。不要使用圆形头像。
用户评价部分本身顶部和底部有1px var(--line)边框。

9. 动画

默认无动画。

如果用户要求“动画”或“过渡”，则使用仅CSS的滚动触发效果：

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.scroll-in { animation: fadeSlideUp .5s ease-out both; }

不使用IntersectionObserver库。使用intersection-observer polyfill（如果支持）。

10. 技术限制

Tailwind CDN被禁止。如果使用Tailwind，则通过npm运行构建工具。
无外部字体源（例如Google Fonts），除非用户提供。如果允许Google Fonts，则使用display=swap。
无UI框架（如Bootstrap、Material UI）。
<img>标签需要loading="lazy"，首屏图片除外。
无伪造的<meta>主题色。

11. 交付物格式

单个.html文件。
所有样式在<style>标签内。
所有脚本在单个<script>标签内。
无外部依赖，除非用户明确要求。

12. CSS基础`:root`块

始终从此开始。

:root {
  --bg:     #f5f5f5;
  --ink:    #111111;
  --muted:  #666666;
  --line:   #e0e0e0;
  --card:   #eeeeee;
  --accent: #d4d4d4;
  --dark:   #0a0a0a;
  --white:  #ffffff;

  --radius-sm: 4px;
  --radius-lg: 0;
  --shadow-sm: none;
  --shadow-lg: none;
}

此块也充当最终检查点：如果交付的样式不是以:root块开头的，则项目项检查目标未命中。

由瑞士编辑极简主义风格指南驱动。构建看起来像已决定的页面。

在你喜欢的 AI 中提问

文档