INTERNAL BRIEF · 設計 HARNESS · v1.0 · skills.tenten.co

skills.tenten.co 設計自動化 Harness

以 Codex CLI 驅動的自走迴圈，對 skills.tenten.co 執行截圖、評分、修改、部署， 反覆迭代直到通過雙閘門。兩道閘門（量表 + 指標）、八個評分向度、十輪硬上限， 無需人工介入。

目標站skills.tenten.co
設計準則DeepMind × Tenten Editorial
鎖定2026 年 5 月 13 日 · v1.0.0
正式跑前三件確認,見 §07
§01

Harness 運作流程說明。

使用者在本機執行一條指令。Harness 以 headless 瀏覽器開啟 skills.tenten.co、 跨三種解析度截圖、執行 Lighthouse 與 axe，將結果交給 Claude，依八個向度的 設計評分量表打分。量表分數與客觀指標雙雙通過閾值時，迴圈停止。

未通過時，Harness 產出一份聚焦的修改指令，內容包含分數最低的三個向度、對應準則、及待修項目說明，交給 OpenAI Codex CLI。Codex 修改 repo、commit、 push 到 main。Vercel 部署完成後，Harness 執行 smoke test，進入下一輪。上限十輪。

每一輪成功 push 均即時反映至線上 production。若 smoke test 偵測到異常輸出， 該輪在下一輪開始前自動執行 git revert。Harness 結束時（通過閘門、撞上限或手動中止）， 輸出最終報告，記錄 diff 歷程、每輪分數及所有 revert 記錄。

CAPTURE Playwright Lighthouse · axe SCORE Claude 評審 8 向度 · 0–10 GATE 雙雙過? CODEX CLI 完全放權 吃指令 · 吐 diff PUSH · DEPLOY · SMOKE git push origin main Vercel · 自動 revert 迴圈至雙雙過 · 或撞 10 輪上限 停
Harness 迴圈流程圖：五個階段、一道閘門、一個出口。
§02

八項設計決策，前置確認。

以下八項在前置設計階段透過四輪 Q&A 確認。迴圈執行中不重新討論。 審閱後若有任何一項需要修正，請修改規格文件，而非調整正在執行的 agent。

01 · 停止條件

Hybrid 雙閘門

兩道閘門都得過。量表 AND 指標。

02 · 目標站

skills.tenten.co

單目標設計。Vercel 部署。

03 · 執行環境

OpenAI Codex CLI,本機

使用者啟動才跑,不掛 daemon。不怕睡眠。

04 · 設計準則

DeepMind × Tenten Editorial

編輯式骨架配 Tenten 外衣。見 §03。

05 · 改動範圍

完全放權

可加新頁、新功能、新互動。代價已記錄。

06 · 部署

直 push main

每一輪即時反映到線上。Fire-and-forget。

07 · 量表

平衡,八向度

各向度等權。無單一軸線主導。

08 · 護欄

Smoke test + 10 輪上限

失敗自動 revert。無 diff 大小上限。

§03

設計準則：結構與視覺表層。

DeepMind 提供結構紀律：單色畫布、科學式克制、編輯式分段流。 Tenten Editorial 定義視覺表層：warm paper、Instrument Serif 配 DM Sans、sodium-vapor amber 節制使用、grain 紋理。結構層引用 DeepMind 編輯風格，視覺層對應 Tenten 品牌識別。

第一面 · 骨架

DeepMind 編輯式結構層。

頁面骨架的設計原則，獨立於視覺表現。

  • i單色畫布優先。色彩只在有意義的時刻出現。預設底色中性,從不裝飾性。
  • ii大方留白。Section padding 桌機 ≥ 96px、手機 ≥ 64px。長文寬度落在 680–820px 之間。
  • iii強層級。Display、Headline、Subhead、Body、Caption，五個明確的字型階層。不使用介於之間的字級。
  • iv編輯式分段流。每段回答一個問題並乾淨交棒給下一段。不准無限滾動湯。
  • v科學式克制。不要漸層、陰影、glassmorphism,除非它們因為承載意義而存在。
  • vi資訊密度傾向。一頁密實有組織,勝過五頁稀薄。
第二面 · 外衣

Tenten Editorial 視覺表層。

套用於結構層之上的品牌視覺規格。

  • iInstrument Serif + DM Sans。Serif 給 display,sans 給 body 與 UI。zh-Hant 換 Noto Serif TC。
  • iiWarm paper #f6f4f0。主導視覺配色。色值介於白色與奶油色之間，對應紙張質感。
  • iii暗場要有光。Hero 與對比區用近黑底加柔和的 radial amber glow。從不純黑。
  • ivSodium-vapor amber。每個 viewport 僅用於一個元素，例如 CTA、status pill 或 inline emphasis。不用於內文。
  • vStaggered fadeUp。第一次渲染時兄弟元素間隔 ~80ms。沒有 scroll-triggered 編舞。
  • viHero 區掛 grain。低透明度 SVG noise 疊層。有紋理,不裝飾。
§04

八個評分向度，等權。

Claude 依多解析度截圖對每個關鍵頁的每個向度給 0–10 分。量表閘門通過條件： 平均 ≥ 8.0 且 每個向度個別 ≥ 6.0。 平均 8.5 但 Accessibility 僅 4 分時，閘門不通過。

i

Hierarchy & Structure

視覺層級清晰度、段落順序、頁面可掃描性。

ii

Typography

Instrument Serif & DM Sans 正確使用。字級比例、行高、不出現介於之間的字級。

iii

Spacing & Rhythm

白空間的大方程度、垂直節奏、桌機 section gap ≥ 96px。

iv

Color & Material

Paper 底色主導。Amber 用得克制。暗區用 radial glow,不用純黑。

v

Motion & Feel

Staggered fadeUp 有調過。Hero 有 grain。動態克制。

vi

Accessibility

WCAG AA 對比、semantic HTML、鍵盤導航、focus state、alt text。

vii

Brand Fidelity

讀起來具體是 Tenten Editorial,不是泛編輯感。與 tenten.co 對照。

viii

Information Clarity

IA 邏輯、文案具體不空洞、CTA 顯眼、無行銷話術。

§05

兩道閘門，同時通過。

單一量表無法攔截 a11y 退化的頁面；單一指標無法攔截視覺失格的高分頁面。混合停止條件（量表 AND 指標）是雙閘門設計的依據。

閘門 01 · 主觀

量表閘門。

Claude 依準則對截圖評分。兩條條件同時成立方通過。

八向度平均≥ 8.0
任一向度個別≥ 6.0
評分的 viewport手機 · 平板 · 桌機
評分的頁面所有 KEY_URLS
視覺合格但 Accessibility 不足的頁面無法通過此閘門。
閘門 02 · 客觀

指標閘門。

部署完成後以工具量測線上 URL。涵蓋所有 KEY_URLS、所有 viewport。

Lighthouse Performance≥ 90
Lighthouse Accessibility≥ 95
Lighthouse Best Practices≥ 95
Lighthouse SEO≥ 90
axe-core serious 違規= 0
關鍵頁 console 錯誤= 0
Lighthouse 高分但設計不符規格的頁面無法通過此閘門。
§06

已知風險與緩解措施。

完全放權加直 push main 是此 harness 支援的最大授權配置，為前置設計階段主動選定。以下列出各項 trade-off，供執行前審閱。

品質風險高

Codex 可能新增規格外的功能。

完全放權之下，某一輪可能新增客戶證言區、pricing 頁或 chatbot widget，只要 Codex 判斷這對評分準則有幫助。

緩解：每輪結束後檢視 iteration log，以 git revert 移除不需要的 commit。

作業風險中

Codex 產出異常時 production 即受影響。

直接 push 到 main 表示 Vercel 編譯完成後，任何輪次的輸出均即時上線，包含渲染失敗的情況。

緩解：每次部署後執行 smoke test。非 200、缺少關鍵元素、頁面 JS 錯誤，任一條件觸發均在下一輪開始前自動執行 git revert。

品牌漂移中

Codex 輸出可能偏移至泛編輯感，失去 Tenten 品牌識別。

Codex 可能採用 Inter、Space Grotesk、off-white、navy 等泛模板配色，字面符合準則描述，但偏離 Tenten Editorial 指紋。

緩解：Brand Fidelity 為八個評分向度之一，評審時以 tenten.co 為對照參考。v1.1 版本將把 tenten.co 校準截圖明確納入評審 prompt。

無 diff 上限已承擔

單一輪次可能修改大範圍的程式碼。

設計上不對單輪 diff 大小設上限。Codex 的推理能力需要完整的重構空間；設置上限會使其轉為保守的小幅修補，降低整體效果。

緩解：Smoke test 加 10 輪上限加跑完後人工 review。若某輪變更範圍過大但 smoke test 通過，可手動 revert。

無指標退化中止已承擔

Lighthouse 指標中途退化時，迴圈不會自動中止。

若第 7 輪將 Accessibility 從 98 降至 64，迴圈繼續執行，停止條件僅因閾值未達而不通過。後續輪次不保證修復。

緩解：10 輪上限為兜底機制。若實際執行中此情況頻繁出現，v1.1 版本補上指標退化中止邏輯。

§07

執行前的三項確認。

啟動前須完成以下三項確認，合計約三十分鐘，分兩個時間點執行：一次在啟動前，一次在 baseline 結果回來後。

檢閱 §03 設計準則。

逐條確認十二條設計原則的方向與閾值是否符合 skills.tenten.co 的規格需求。若有需要修正的項目，在第一次正式執行前直接修改 SKILL.md。

時機：第一次正式執行前 · 產出：確認通過或含修訂的準則文件。

確認 baseline 評分結果合理。

正式 push 前，harness 執行一次 baseline 模式：僅擷取現況截圖並評分，不觸發 Codex 也不 push。輸出結果為八向度分數卡加截圖。若任一向度評分明顯偏嚴、偏鬆或有誤判，在正式執行前修訂評審 prompt。

時機：D-2 baseline 執行後 · 產出：待調整的評審 prompt 段落。

複閱 §06 風險，確認配置決策。

直接 push 到 production 是不可逆的配置選擇。若複閱後認為需要調整，例如改為先 push 到長期分支、加入 diff 大小上限或加入指標退化中止邏輯，請在第一次執行前直接修改 SKILL.md 配置。v1.0 版本已鎖定，尚未執行。

時機：第一次正式執行前 · 產出：確認接受，或一項具體的配置調整。

下一步

確認完成後，啟動。

§07 三項確認完成後，執行一次 baseline 模式擷取截圖，再啟動第一輪正式迭代。第一輪 push 完成後，production 即同步更新。

Skill 規格
skills-tenten-design-harness.skill.md
版本
v1.0.0 — 鎖於 2026 年 5 月 13 日
負責
Tenten