指南

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

skills.tenten.co 設計自動化 Harness

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

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

閱讀時間
6 分
更新日期
開啟原始報告
本頁章節

01§01

Harness 運作流程 說明。

目標站 skills.tenten.co

設計準則 DeepMind × Tenten Editorial

鎖定 2026 年 5 月 13 日 · v1.0.0

正式跑前 三件確認,見 §07

使用者在本機執行一條指令。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 記錄。

  1. CAPTURE

    • Playwright
    • Lighthouse · axe

  2. SCORE

    • Claude 評審
    • 8 向度 · 0–10

  3. GATE

    • 雙雙過?

  4. CODEX CLI

    • 完全放權
    • 吃指令 · 吐 diff

  5. PUSH · DEPLOY · SMOKE

    • git push origin main
    • Vercel · 自動 revert

迴圈至雙雙過 · 或撞 10 輪上限 · 停 · Harness 迴圈流程圖：五個階段、一道閘門、一個出口。

02§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§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§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§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§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§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 版本已鎖定，尚未執行。

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

08章節

確認完成後， 啟動 。

下一步

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

Skill 規格

skills-tenten-design-harness.skill.md

版本

v1.0.0 — 鎖於 2026 年 5 月 13 日

負責

Tenten

Tenten Digital 內部簡報 請勿外流