RydzzKen/swiss-editorial-minimalist

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

模型建立的頁面通常看起來就像它看過的所有頁面的平均值：漸層主視覺、一排放置帶 emoji 圖示的圓角卡片、每個按鈕下有陰影，以及載入彩虹色調的 Tailwind CDN。其中沒有什麼是錯的，但也沒有什麼是經過決策的。

這個檔案用決策取代了那些預設值。它涵蓋三件事：風格規則（顯示什麼、省略什麼）、使風格成立的技術規則（代碼、比例、斷點、無障礙性），以及在交付前檢查結果的關卡。

請按照規則執行。若請求與規則衝突，第 0 節說明了該怎麼做。

0. 元規則（請先閱讀）

收到此檔案時該做什麼

1. 在撰寫任何程式碼之前，先閱讀整個檔案。 規則之間相互依存。

2. 不要對此檔案已決定的任何事項要求澄清。 基於合理的假設執行，並在一行內說明你的假設。

3. 若請求與風格規則衝突（例如「色彩豐富」、「活潑」、「漸層主視覺」、「emoji 圖示」、「20px 圓角卡片」），請在繼續之前確認一次：

   此請求違反了 SKILLS.md 的第 X 節。我將以瑞士編輯式極簡風格來解讀它，除非你想離開此指引。

   等待回答，然後建構。

4. 預設輸出為一個完整的 HTML 檔案，包含內嵌 <style> 與 <script>。除非使用者要求片段，否則不要交付片段。

5. CSS 永遠從第 12 節的 :root 區塊開始。

如何命名此風格

使用這些術語以保持詞彙一致。不要單獨使用「現代」、「乾淨」或「時尚」，因為它們並無具體意義。

• 「瑞士編輯式極簡」：預設風格，由本檔案描述。
• 「柔和粗暴主義」：較粗的邊框和更粗糙的網格。
• 「新粗暴主義編輯式」：加入一個強調色和硬偏移陰影。陰影在預設風格中是禁止的，因此僅在使用者明確要求時才使用此名稱。
• 「單色雜誌」：以排版為主，無插圖卡片。

---

1. 設計哲學

三項原則，不可妥協：

1. 內容為王；排版是建築。 沒有裝飾性插圖。大標題是主要的視覺元素。
2. 結構保持可見。 邊框、網格和章節編號原樣呈現。它們不會被隱藏。
3. 單色優先，色彩在後。 預設是黑、白、灰。顏色僅在深色模式或作為極簡強調色時出現。

頁面應感覺平靜、穩固、聰明且具有編輯風格，就像一本由工程師製作的印刷雜誌。

---

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 變數使用，永不硬編碼。
• 禁止使用亮色 於狀態、圖示與文字。禁止範例：emerald-500、green-600、red-500、blue-500、yellow-400、#27c93f、#ff5f56、#ffbd2e。請以 var(--ink) 或 var(--muted) 的單色符號（●、▲、✕、→）取代。
• 對比區域（聲明、CTA、頁尾）使用 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、斜體）使用襯線字型。

字型比例（需要使用 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 標誌和名稱使用 Space Grotesk 22px，letter-spacing: -1.1px。
• 導航：14px，字重 600，間距 36px。
• 操作區：主題切換（太陽/月亮圖示，強制標記見下方「主題切換」）、CTA 按鈕，以及手機上的漢堡選單。
• 手機導航作為頁首下方的絕對定位面板打開，並在按下 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>
  <!-- CTA 按鈕和漢堡選單放在此處，位於同一個包裝器內 -->
</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" 以及圖示 id sun-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) 是拼寫錯誤，無效。

頁尾

…

[已截斷以進行翻譯]