前端設計

frontend-design

依產品主題建立具辨識度的前端視覺方向,先規劃色彩、字體、版面與代表性元素,再檢查模板感、響應式、鍵盤焦點及減少動態需求。

查看來源 ↗
作者/來源anthropics★ 173,050 GitHub Stars
測試版本53048666b05b更新日期:2026-09-01T18:30:38Z
支援平台OpenAI · Claude本次實測平台
安裝方式npx skills add anthropics/skills --skill frontend-design
公平比較方式

三個問題,分別測載入前與載入後。

每次回答都在全新環境中產生。兩邊使用相同模型與設定,唯一差別是右側載入了這個 Skill。

模型版本gpt-5.6-sol帳號方案ChatGPT Plus思考強度medium執行工具codex-cli-native-skill
真實測試使用本機已登入的 ChatGPT Plus 實際執行,完成於 2026年9月2日。所有檢查通過後才公開,回答未經人工改寫。
三階段測試3 個問題全部完成版本核對3/3 通過環境清理9/9 通過測試隔離每回合全新環境
01
基礎題

雨港夜航時刻頁

測試問題

請為『雨港夜航』基隆夜間渡輪時刻服務設計單頁首頁。受眾是下班後臨時決定搭船的通勤者;頁面唯一任務是讓人 10 秒內找到今晚最後三班船。固定內容:21:10 正濱→八斗子、22:05 八斗子→正濱、23:20 正濱→八斗子;天候狀態為小雨、正常行駛。請先給精簡設計方向(色彩 hex、字體角色、版面與一個代表性元素),再輸出可直接儲存為 index.html 的完整 HTML/CSS。不得使用外部圖片或 JavaScript。

載入前 · 0 個 Skill載入後 · 版本已核對再次確認 · 0 個 Skill已確認模型套用 Skill三個環境皆已清理
未載入 Skill3215 tokens · 62834 ms
## 精簡設計方向 - 色彩:深海軍藍 `#071827`、港灣藍 `#0E3047`、雨霧白 `#EAF4F6`、航標黃 `#FFD166`、狀態綠 `#63D6A4` - 字體角色:系統無襯線字體;時間使用粗體與等寬數字,站名保持清晰醒目 - 版面:首屏直接呈現「今晚最後三班」,依時間垂直排列;最末班以航標黃突出 - 代表性元素:純 CSS 燈塔光束,作為雨夜港口的視覺導引 ```html <!DOCTYPE html> <html lang="zh-Hant"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="theme-color" content="#071827"> <title>雨港夜航|今晚最後三班船</title> <style> :root { --navy: #071827; --harbor: #0e3047; --mist: #eaf4f6; --muted: #9fb7c2; --beacon: #ffd166; --green: #63d6a4; --line: rgba(234, 244, 246, 0.15); } * { box-sizing: border-box; } html { color-scheme: dark; } body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--mist); background: radial-gradient(circle at 85% 12%, rgba(255, 209, 102, 0.08), transparent 24rem), linear-gradient(160deg, var(--harbor) 0%, var(--navy) 55%, #04111c 100%); font-family: Inter, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif; } body::before { position: fixed; inset: 0; z-index: -1; content: ""; pointer-events: none; opacity: 0.2; background-image: repeating-linear-gradient( 112deg, transparent 0 20px, rgba(234, 244, 246, 0.22) 21px, transparent 22px 36px ); animation: rain 8s linear infinite; } .page { width: min(100% - 32px, 1040px); min-height: 100vh; margin-inline: auto; padding: 28px 0 40px; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: clamp(48px, 9vh, 94px); } .brand { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 1rem; font-weight: 750; letter-spacing: 0.14em; } .brand-mark { position: relative; width: 18px; height: 25px; border-bottom: 4px solid var(--beacon); border-radius: 2px; background: linear-gradient( to bottom, var(--beacon) 0 5px, transparent 5px 9px, var(--mist) 9px ); } .brand-mark::after { position: absolute; top: 1px; left: 14px; width: 48px; height: 13px; content: ""; opacity: 0.32; transform: skewX(-20deg); transform-origin: left center; background: linear-gradient(90deg, var(--beacon), transparent); } .status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; color: var(--muted); font-size: 0.86rem; } .status span { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(7, 24, 39, 0.5); backdrop-filter: blur(8px); } .status .running { color: var(--green); border-color: rgba(99, 214, 164, 0.25); } .status .running::before { display: inline-block; width: 7px; height: 7px; margin-right: 7px; content: ""; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(99, 214, 164, 0.8); } main { display: grid; grid-template-columns: minmax(220px, 0.72fr) minmax(420px, 1.28fr); gap: clamp(36px, 7vw, 90px); align-items: start; } .intro { position: sticky; top: 28px; padding-top: 10px; } .eyebrow { margin: 0 0 14px; color: var(--beacon); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } h1 { max-width: 7em; margin: 0; font-size: clamp(2.4rem, 6vw, 5rem); line-height: 0.98; letter-spacing: -0.055em; } .intro p:last-child { max-width: 22em; margin: 24px 0 0; color: var(--muted); font-size: 0.98rem; line-height: 1.7; } .schedule { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); } .sailing { position: relative; display: grid; grid-template-columns: 126px 1fr; gap: 24px; align-items: center; min-height: 126px; padding: 26px 8px; border-bottom: 1px solid var(--line); } .time { color: var(--mist); font-size: clamp(2.1rem, 5vw, 3.7rem); font-variant-numeric: tabular-nums; font-weight: 850; line-height: 1; letter-spacing: -0.055em; } .route { display: flex; align-items: center; gap: 13px; min-width: 0; font-size: clamp(1.05rem, 2.4vw, 1.45rem); font-weight: 700; } .arrow { flex: 1; min-width: 36px; height: 1px; color: var(--muted); background: currentColor; } .arrow::after { display: block; width: 7px; height: 7px; margin-top: -3px; margin-left: auto; content: ""; transform: rotate(45deg); border-top: 1px solid currentColor; border-right: 1px solid currentColor; } .terminal { white-space: nowrap; } .last { margin-top: 12px; padding-inline: 20px; overflow: hidden; border: 1px solid rgba(255, 209, 102, 0.35); border-radius: 18px; background: linear-gradient(100deg, rgba(255, 209, 102, 0.1), transparent 68%), rgba(7, 24, 39, 0.56); box-shadow: 0 22px 70px rgba(0, 0, 0, 0.2); } .last .time, .last .arrow { color: var(--beacon); } .last::after { position: absolute; top: 13px; right: 15px; content: "末班"; padding: 5px 8px; color: var(--navy); border-radius: 6px; background: var(--beacon); font-size: 0.69rem; font-weight: 900; letter-spacing: 0.1em; } .note { display: flex; align-items: center; gap: 10px; margin: 20px 4px 0; color: var(--muted); font-size: 0.82rem; line-height: 1.5; } .note::before { width: 20px; height: 1px; content: ""; background: var(--beacon); } footer { margin-top: clamp(56px, 10vh, 110px); padding-top: 18px; color: rgba(159, 183, 194, 0.7); border-top: 1px solid var(--line); font-size: 0.72rem; letter-spacing: 0.06em; } @keyframes rain { from { background-position: 0 0; } to { background-position: -120px 240px; } } @media (max-width: 720px) { .page { width: min(100% - 28px, 560px); padding-top: 20px; } .topbar { align-items: flex-start; margin-bottom: 48px; } .status { max-width: 170px; } main { display: block; } .intro { position: static; margin-bottom: 38px; padding: 0; } h1 { max-width: none; font-size: clamp(2.8rem, 14vw, 4.3rem); } .intro p:last-child { margin-top: 16px; } .sailing { grid-template-columns: 105px 1fr; gap: 16px; min-height: 112px; padding-block: 22px; } .last { padding-inline: 14px; } .route { gap: 9px; } } @media (max-width: 410px) { .topbar { display: block; } .status { justify-content: flex-start; max-width: none; margin-top: 18px; } .sailing { grid-template-columns: 1fr; gap: 12px; } .time { font-size: 2.7rem; } .last::after { top: 20px; } } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } </style> </head> <body> <div class="page"> <header class="topbar"> <p class="brand"> <span class="brand-mark" aria-hidden="true"></span> 雨港夜航 </p> <div class="status" aria-label="今晚航行狀態"> <span aria-label="天候:小雨">☂ 小雨</span> <span class="running">正常行駛</span> </div> </header> <main> <section class="intro" aria-labelledby="page-title"> <p class="eyebrow">Tonight · Keelung</p> <h1 id="page-title">今晚最後三班</h1> <p>下班後,往港邊走。以下為今晚剩餘夜航班次。</p> </section> <section aria-label="今晚最後三班渡輪"> <ol class="schedule"> <li class="sailing"> <time class="time" datetime="21:10">21:10</time> <div class="route"> <span class="terminal">正濱</span> <span class="arrow" aria-hidden="true"></span> <span class="terminal">八斗子</span> </div> </li> <li class="sailing"> <time class="time" datetime="22:05">22:05</time> <div class="route"> <span class="terminal">八斗子</span> <span class="arrow" aria-hidden="true"></span> <span class="terminal">正濱</span> </div> </li> <li class="sailing last"> <time class="time" datetime="23:20">23:20</time> <div class="route"> <span class="terminal">正濱</span> <span class="arrow" aria-hidden="true"></span> <span class="terminal">八斗子</span> </div> </li> </ol> <p class="note">小雨不影響航班,請提早抵達候船。</p> </section> </main> <footer>基隆夜間渡輪時刻服務</footer> </div> </body> </html> ```
已載入 Skill +4101 tokens · 84272 ms
## 精簡設計方向 - 色彩:港夜藍 `#071A26`、深水藍 `#0D2B3A`、霧白 `#E9F1F2`、航標黃 `#FFD166`、正常綠 `#83D6B4` - 字體角色:品牌名用宋體營造港城年代感;班次時間用等寬字體快速掃讀;其餘資訊用系統黑體。 - 版面:單欄滿版資訊板,狀態置頂,中央只呈現今晚末三班;手機與桌面皆不需捲動即可看到完整班次。 - 代表性元素:一條貫穿三班船的「發光航跡」,兼作時間軸與航向指示。 ```html <!doctype html> <html lang="zh-Hant"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="theme-color" content="#071A26"> <meta name="description" content="雨港夜航基隆夜間渡輪時刻:今晚最後三班,小雨、正常行駛。" > <title>雨港夜航|今晚最後三班渡輪</title> <style> :root { --night: #071A26; --water: #0D2B3A; --mist: #E9F1F2; --beacon: #FFD166; --safe: #83D6B4; --muted: #9BB0B8; --line: rgba(233, 241, 242, 0.18); --panel: rgba(13, 43, 58, 0.76); --display: "Songti TC", "Noto Serif TC", "PMingLiU", serif; --body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; --data: "SFMono-Regular", "Roboto Mono", "Cascadia Mono", "Liberation Mono", monospace; } * { box-sizing: border-box; } html { min-height: 100%; background: var(--night); } body { min-height: 100vh; margin: 0; color: var(--mist); background: radial-gradient( circle at 78% 8%, rgba(57, 116, 137, 0.25), transparent 34rem ), repeating-linear-gradient( 106deg, transparent 0 22px, rgba(205, 230, 235, 0.025) 23px, transparent 24px 39px ), linear-gradient(155deg, var(--water), var(--night) 58%); font-family: var(--body); } body::before { position: fixed; inset: 0; z-index: -1; background: linear-gradient( 180deg, transparent 66%, rgba(131, 214, 180, 0.035) ), repeating-linear-gradient( 0deg, transparent 0 31px, rgba(233, 241, 242, 0.025) 32px ); content: ""; pointer-events: none; } .page { width: min(100% - 32px, 920px); min-height: 100vh; margin-inline: auto; padding: clamp(22px, 4vw, 48px) 0 28px; display: flex; flex-direction: column; } .masthead { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .brand { margin: 0; font-family: var(--display); font-size: clamp(1.25rem, 3vw, 1.65rem); font-weight: 700; letter-spacing: 0.18em; } .location { margin: 5px 0 0; color: var(--muted); font-size: 0.76rem; letter-spacing: 0.18em; } .weather { flex: none; display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 9px 12px; border: 1px solid rgba(131, 214, 180, 0.32); border-radius: 999px; color: var(--safe); background: rgba(131, 214, 180, 0.07); font-size: 0.82rem; font-weight: 700; white-space: nowrap; } .weather::before { width: 8px; height: 8px; border-radius: 50%; background: var(--safe); box-shadow: 0 0 12px rgba(131, 214, 180, 0.8); content: ""; } main { flex: 1; display: grid; align-content: center; padding: clamp(34px, 6vh, 72px) 0; } .eyebrow { margin: 0 0 8px; color: var(--beacon); font-family: var(--data); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } h2 { margin: 0; font-family: var(--display); font-size: clamp(2rem, 6vw, 4.25rem); font-weight: 700; line-height: 1.05; letter-spacing: 0.04em; } .intro { margin: 11px 0 clamp(24px, 4vw, 40px); color: var(--muted); font-size: 0.9rem; } .sailings { position: relative; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .sailings::before { position: absolute; top: 50%; right: 23px; left: 23px; z-index: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255, 209, 102, 0.12) 12%, rgba(255, 209, 102, 0.75) 50%, rgba(255, 209, 102, 0.12) 88%, transparent ); box-shadow: 0 0 14px rgba(255, 209, 102, 0.25); content: ""; transform: rotate(-2deg); pointer-events: none; } .sailing { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(110px, 0.72fr) minmax(220px, 1.6fr); align-items: center; min-height: clamp(104px, 15vh, 140px); overflow: hidden; border: 1px solid var(--line); border-radius: 4px 24px 4px 4px; background: var(--panel); box-shadow: 0 15px 45px rgba(0, 0, 0, 0.14); backdrop-filter: blur(10px); } .sailing:last-child { border-color: rgba(255, 209, 102, 0.46); background: linear-gradient( 90deg, rgba(255, 209, 102, 0.08), transparent 45% ), var(--panel); } .time-wrap { align-self: stretch; display: grid; place-content: center; padding: 18px clamp(16px, 4vw, 32px); border-right: 1px solid var(--line); } .time { color: var(--mist); font-family: var(--data); font-size: clamp(2.25rem, 7vw, 4.7rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.075em; font-variant-numeric: tabular-nums; } .sailing:last-child .time { color: var(--beacon); text-shadow: 0 0 22px rgba(255, 209, 102, 0.16); } .route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(10px, 2vw, 22px); min-width: 0; padding: 20px clamp(16px, 4vw, 34px); } .port { min-width: 0; } .port:last-child { text-align: right; } .port-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; } .port-name { display: block; font-size: clamp(1.1rem, 3vw, 1.65rem); font-weight: 750; white-space: nowrap; } .direction { position: relative; width: clamp(42px, 7vw, 78px); height: 15px; color: var(--beacon); } .direction::before { position: absolute; top: 7px; right: 3px; left: 0; height: 1px; background: currentColor; content: ""; } .direction::after { position: absolute; top: 3px; right: 2px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; content: ""; transform: rotate(45deg); } footer { display: flex; justify-content: space-between; gap: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.72rem; letter-spacing: 0.05em; } footer p { margin: 0; } .service-note { color: var(--safe); font-weight: 700; } @media (max-width: 580px) { .page { width: min(100% - 24px, 920px); padding-top: 18px; } .masthead { gap: 12px; } .brand { letter-spacing: 0.11em; } .weather { padding: 8px 10px; font-size: 0.76rem; } main { align-content: start; padding: 30px 0 26px; } .intro { margin-bottom: 20px; } .sailing { grid-template-columns: 106px minmax(0, 1fr); min-height: 104px; border-radius: 3px 18px 3px 3px; } .time-wrap { padding: 16px 12px; } .time { font-size: clamp(2.15rem, 12vw, 3.1rem); } .route { gap: 8px; padding: 16px 14px; } .port-label { margin-bottom: 5px; font-size: 0.6rem; } .port-name { font-size: clamp(0.95rem, 4.5vw, 1.2rem); } .direction { width: 25px; } footer { display: block; } footer p + p { margin-top: 5px; } } @media (max-height: 690px) and (min-width: 581px) { main { padding: 24px 0; } .intro { margin-bottom: 18px; } .sailing { min-height: 92px; } } </style> </head> <body> <div class="page"> <header class="masthead"> <div> <h1 class="brand">雨港夜航</h1> <p class="location">基隆夜間渡輪</p> </div> <p class="weather" aria-label="天候小雨,渡輪正常行駛"> 小雨・正常行駛 </p> </header> <main> <p class="eyebrow">Tonight · Last 3 sailings</p> <h2>今晚末三班</h2> <p class="intro">依開船時間排列,請預留登船時間。</p> <ol class="sailings" aria-label="今晚最後三班渡輪"> <li class="sailing"> <div class="time-wrap"> <time class="time" datetime="21:10">21:10</time> </div> <div class="route" aria-label="正濱前往八斗子"> <div class="port"> <span class="port-label">出發</span> <span class="port-name">正濱</span> </div> <span class="direction" aria-hidden="true"></span> <div class="port"> <span class="port-label">抵達</span> <span class="port-name">八斗子</span> </div> </div> </li> <li class="sailing"> <div class="time-wrap"> <time class="time" datetime="22:05">22:05</time> </div> <div class="route" aria-label="八斗子前往正濱"> <div class="port"> <span class="port-label">出發</span> <span class="port-name">八斗子</span> </div> <span class="direction" aria-hidden="true"></span> <div class="port"> <span class="port-label">抵達</span> <span class="port-name">正濱</span> </div> </div> </li> <li class="sailing"> <div class="time-wrap"> <time class="time" datetime="23:20">23:20</time> </div> <div class="route" aria-label="正濱前往八斗子"> <div class="port"> <span class="port-label">末班出發</span> <span class="port-name">正濱</span> </div> <span class="direction" aria-hidden="true"></span> <div class="port"> <span class="port-label">抵達</span> <span class="port-name">八斗子</span> </div> </div> </li> </ol> </main> <footer> <p class="service-note">● 航班正常</p> <p>港邊濕滑,候船請留意腳步。</p> </footer> </div> </body> </html> ```
02
實務題

精密校準工作台

測試問題

設計一個桌上型與手機都可用的『N7 扭力校準工作台』畫面。使用者是工廠品管員;單一任務是判斷本次 42.0 N·m 校準能否放行。固定資料:實測 42.3、允差 ±0.5、環境 23.8°C、上次校準 2026-08-21、儀器 TQ-017,結論 PASS。請先提出具產品脈絡的 token/版面計畫並自我檢查是否落入常見 AI 模板,再輸出完整 HTML/CSS;資料標籤不得只靠顏色區分。

載入前 · 0 個 Skill載入後 · 版本已核對再次確認 · 0 個 Skill已確認模型套用 Skill三個環境皆已清理
未載入 Skill17119 tokens · 330193 ms
## Token/版面計畫 - 情境:品管員只需核對儀器、實測值與允差,並決定是否放行。 - 色彩:深墨綠工作台、暖白資料面、螢光黃綠表示 PASS;狀態同時使用「✓、PASS、可放行」文字,不只靠顏色。 - 字體:操作文字使用系統無襯線字;測量值使用等寬數字,方便逐位核對。 - 間距:4px 基準,主要使用 8/16/24/32px;觸控目標至少 44px。 - 版面:桌機採量測依據與放行操作雙欄;手機依序顯示任務、結論、讀值、允差、查核資料與操作。 - 無障礙:語意化標題、`dl` 資料結構、文字化刻度說明、鍵盤焦點與減少動效支援。 ## AI 模板自檢 - 無行銷式 Hero、漸層光球、插圖或多餘 KPI。 - 無側欄與多頁 Dashboard,維持單一放行任務。 - 不將所有資料做成等權重圓角卡片,改採工單帶、允差尺與核對表。 - 不虛構趨勢、信心分數或額外資料。 - PASS 由圖示、文字、數值與允差範圍共同表達。 ```html <!doctype html> <html lang="zh-Hant"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="N7 扭力校準工作台"> <title>N7 扭力校準工作台</title> <style> :root { --ink: #14201c; --muted: #56625d; --bench: #10231d; --bench-dark: #091611; --paper: #f4f1e8; --paper-dark: #e7e2d6; --line: #c9c5b9; --pass: #bbf26b; --pass-ink: #263c0e; --warning: #c95c43; --white: #fffef9; --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-width: 320px; color: var(--ink); background: var(--bench-dark); font-family: var(--sans); -webkit-font-smoothing: antialiased; } button, input, a { font: inherit; } a:focus-visible, button:focus-visible, input:focus-visible + .check-box { outline: 3px solid #70a9ff; outline-offset: 3px; } .topbar { min-height: 72px; padding: 12px clamp(20px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--white); background: var(--bench-dark); border-bottom: 1px solid rgba(255,255,255,.14); } .brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; } .brand-mark { width: 44px; height: 44px; display: grid; place-items: center; color: var(--bench-dark); background: var(--pass); border-radius: 4px; font: 800 18px/1 var(--mono); } .brand strong, .brand small { display: block; } .brand strong { font-size: 15px; letter-spacing: .04em; } .brand small { margin-top: 4px; color: #91a299; font: 10px/1.2 var(--mono); letter-spacing: .08em; } .locked { display: flex; align-items: center; gap: 9px; color: #bdc7c2; font-size: 13px; } .locked::before { content: ""; width: 8px; height: 8px; background: var(--pass); border-radius: 50%; box-shadow: 0 0 0 4px rgba(187,242,107,.13); } .workbench { min-height: calc(100vh - 72px); padding: clamp(20px, 3.5vw, 52px) clamp(20px, 4vw, 64px) 24px; background-color: var(--paper); background-image: linear-gradient(rgba(16,35,29,.025) 1px, transparent 1px); background-size: 100% 8px; } .job-strip, .layout, .footer-note { width: min(1240px, 100%); margin-inline: auto; } .job-strip { display: grid; grid-template-columns: minmax(270px, .85fr) 2fr; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); } .job-main { padding: 16px 24px 16px 0; border-right: 1px solid var(--line); } .eyebrow { display: block; color: var(--muted); font: 700 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; } .job-main h1 { margin: 8px 0 0; font: 650 clamp(34px, 4vw, 52px)/1 var(--mono); letter-spacing: -.06em; } .job-main h1 span { color: var(--muted); font: 500 15px/1 var(--sans); letter-spacing: 0; } .facts { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); } .facts div { padding: 16px 24px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); } .facts div:last-child { border-right: 0; } .facts dt { margin-bottom: 8px; color: var(--muted); font-size: 12px; } .facts dd { margin: 0; font: 650 17px/1.2 var(--mono); } .layout { margin-top: clamp(30px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(340px, 4.4fr); gap: clamp(24px, 4vw, 56px); align-items: start; } .heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; } .heading h2 { margin: 8px 0 0; font-size: clamp(25px, 3vw, 38px); line-height: 1.08; letter-spacing: -.035em; } .pass-stamp { min-width: 120px; padding: 12px; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; color: var(--pass-ink); background: var(--pass); border: 2px solid var(--pass-ink); border-radius: 4px; transform: rotate(-1.5deg); } .pass-stamp > span { grid-row: 1 / 3; align-self: center; font-size: 22px; } .pass-stamp strong { font: 800 20px/1 var(--mono); } .pass-stamp small { margin-top: 4px; font-weight: 700; } .reading-block { margin-top: clamp(34px, 5vw, 64px); } .reading-label { margin: 0 0 8px; color: var(--muted); font-size: 13px; } .reading { margin: 0; font: 650 clamp(66px, 10vw, 116px)/.9 var(--mono); letter-spacing: -.09em; } .reading span { margin-left: 6px; color: var(--muted); font: 500 clamp(16px, 2vw, 24px)/1 var(--sans); letter-spacing: 0; } .deviation { margin: 16px 0 0; color: var(--muted); font-size: 14px; } .deviation b { margin-right: 6px; color: var(--ink); } .tolerance { margin: clamp(36px, 5vw, 58px) 0 0; padding-top: 16px; border-top: 1px solid var(--line); } .tolerance figcaption { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; } .tolerance figcaption strong { font-family: var(--mono); } .scale { height: 104px; margin-top: 24px; position: relative; } .zone { height: 16px; position: absolute; top: 18px; } .zone.fail { width: 25%; border-block: 1px solid var(--warning); background: repeating-linear-gradient( 135deg, transparent 0 5px, rgba(201,92,67,.36) 5px 7px ); } .zone.fail.low { left: 0; border-left: 1px solid var(--warning); } .zone.fail.high { right: 0; border-right: 1px solid var(--warning); } .zone.pass { width: 50%; left: 25%; background: rgba(187,242,107,.56); border: 1px solid var(--pass-ink); } .line, .actual { position: absolute; top: 10px; width: 1px; height: 32px; background: var(--ink); } .line.low { left: 25%; } .line.target { left: 50%; background: repeating-linear-gradient( to bottom, var(--muted) 0 4px, transparent 4px 7px ); } .line.high { left: 75%; } .actual { left: 65%; top: 5px; width: 3px; height: 42px; transform: translateX(-50%); } .actual::before { content: ""; width: 13px; height: 13px; position: absolute; top: -5px; left: 50%; background: var(--ink); border-radius: 50%; transform: translateX(-50%); } .tick-label { position: absolute; top: 53px; font: 600 12px/1.1 var(--mono); text-align: center; white-space: nowrap; transform: translateX(-50%); } .tick-label small { color: var(--muted); font: 500 10px/1.2 var(--sans); } .tick-label.min { left: 0; color: var(--muted); transform: none; } .tick-label.low { left: 25%; } .tick-label.target { left: 50%; } .tick-label.actual-value { left: 65%; font-weight: 800; } .tick-label.high { left: 75%; } .tick-label.max { right: 0; color: var(--muted); transform: none; } .evidence { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--line); } .evidence > div { padding: 16px 0; display: flex; align-items: center; gap: 12px; } .evidence > div + div { padding-left: 24px; border-left: 1px solid var(--line); } .evidence-number { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; color: var(--pass-ink); background: var(--pass); border-radius: 50%; font: 700 10px/1 var(--mono); } .evidence p, .evidence strong, .evidence p span { margin: 0; display: block; } .evidence strong { margin-bottom: 3px; font-size: 12px; } .evidence p span { color: var(--muted); font: 13px/1.3 var(--mono); } .release-panel { padding: clamp(24px, 3vw, 40px); color: var(--white); background: var(--bench); border-top: 6px solid var(--pass); border-radius: 0 0 12px 12px; box-shadow: 16px 18px 0 var(--paper-dark); } .release-topline { display: flex; justify-content: space-between; gap: 12px; } .release-panel .eyebrow { color: #a8b8b0; } .code { color: #82938b; font: 10px/1 var(--mono); } .release-panel h2 { margin: 24px 0 16px; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -.05em; } .summary { margin: 0; color: #c1ccc7; font-size: 14px; line-height: 1.7; } .verification { margin: 32px 0; border-top: 1px solid rgba(255,255,255,.17); } .verification div { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.17); } .verification dt, .verification dd { margin: 0; } .verification dt { color: #b9c5bf; font-size: 13px; } .verification dt span { margin-right: 8px; color: var(--pass); font-weight: 900; } .verification dd { font: 650 13px/1 var(--mono); } .confirm { min-height: 44px; display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 12px; color: #d9e1dd; font-size: 13px; line-height: 1.4; cursor: pointer; } .confirm input { width: 1px; height: 1px; position: absolute; opacity: 0; } .check-box { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #819087; border-radius: 4px; } .confirm input:checked + .check-box { color: var(--bench); background: var(--pass); border-color: var(--pass); } .confirm input:checked + .check-box::after { content: "✓"; font-weight: 900; } .release-button { width: 100%; min-height: 56px; margin-top: 16px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; color: var(--bench-dark); background: var(--pass); border: 0; border-radius: 4px; font-weight: 800; cursor: pointer; transition: transform 150ms ease, background 150ms ease; } .release-button:hover { background: #ceff83; transform: translateY(-1px); } .review-link { min-height: 44px; margin-top: 8px; display: grid; place-items: center; color: #b9c5bf; font-size: 12px; text-underline-offset: 3px; } .footer-note { margin-top: clamp(36px, 5vw, 64px); padding-top: 12px; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); border-top: 1px solid var(--line); font: 11px/1.4 var(--mono); } .confirmation { display: none; position: fixed; inset: 0; z-index: 10; place-items: center; padding: 20px; } .confirmation:target { display: grid; } .backdrop { position: absolute; inset: 0; background: rgba(6,15,11,.8); backdrop-filter: blur(4px); } .dialog { width: min(430px, 100%); position: relative; padding: 38px; color: var(--ink); background: var(--paper); border-top: 6px solid var(--pass); border-radius: 0 0 12px 12px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.32); } .dialog-icon { width: 58px; height: 58px; margin: 0 auto 16px; display: grid; place-items: center; color: var(--pass-ink); background: var(--pass); border-radius: 50%; font-size: 28px; font-weight: 900; } .dialog h2 { margin: 12px 0; font-size: 28px; } .dialog p:not(.eyebrow) { color: var(--muted); font: 13px/1.5 var(--mono); } .dialog-close { min-height: 48px; margin-top: 24px; display: grid; place-items: center; color: var(--white); background: var(--bench); border-radius: 4px; font-weight: 700; text-decoration: none; } @media (max-width: 820px) { .job-strip, .layout { grid-template-columns: 1fr; } .job-main { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--line); } .facts div:first-child { padding-left: 0; } .release-panel { box-shadow: 10px 12px 0 var(--paper-dark); } } @media (max-width: 560px) { .topbar { min-height: 64px; padding: 10px 16px; } .brand-mark { width: 40px; height: 40px; } .brand small, .locked span { display: none; } .workbench { padding: 20px 16px 24px; } .facts { grid-template-columns: 1fr 1fr; } .facts div { padding: 14px 12px; } .facts div:nth-child(2) { border-right: 0; } .facts div:last-child { grid-column: 1 / -1; padding-left: 0; border-top: 1px solid var(--line); } .layout { margin-top: 30px; gap: 36px; } .heading { align-items: center; } .heading h2 { font-size: 24px; } .pass-stamp { min-width: 104px; } .reading { font-size: clamp(64px, 22vw, 88px); } .tick-label.min, .tick-label.max { display: none; } .evidence { grid-template-columns: 1fr; } .evidence > div + div { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; } .release-panel { padding: 26px 22px; } .footer-note { flex-direction: column; } .dialog { padding: 30px 22px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .release-button { transition: none; } } </style> </head> <body> <header class="topbar"> <a class="brand" href="#main" aria-label="N7 扭力校準工作台"> <span class="brand-mark" aria-hidden="true">N7</span> <span> <strong>扭力校準工作台</strong> <small>QUALITY CONTROL / STATION 04</small> </span> </a> <div class="locked" role="status"> <span>量測資料已鎖定</span> </div> </header> <main id="main" class="workbench"> <section class="job-strip" aria-labelledby="job-title"> <div class="job-main"> <span class="eyebrow">本次校準</span> <h1 id="job-title">42.0 <span>N·m</span></h1> </div> <dl class="facts"> <div> <dt>儀器</dt> <dd>TQ-017</dd> </div> <div> <dt>環境</dt> <dd>23.8°C</dd> </div> <div> <dt>上次校準</dt> <dd><time datetime="2026-08-21">2026-08-21</time></dd> </div> </dl> </section> <div class="layout"> <section aria-labelledby="measurement-title"> <div class="heading"> <div> <span class="eyebrow">量測結果</span> <h2 id="measurement-title">實測值在允差內</h2> </div> <div class="pass-stamp" role="status" aria-label="結論:PASS,可以放行"> <span aria-hidden="true">✓</span> <strong>PASS</strong> <small>可放行</small> </div> </div> <div class="reading-block"> <p class="reading-label">實測扭力</p> <p class="reading">42.3 <span>N·m</span></p> <p class="deviation"> <b aria-hidden="true">↗</b>高於目標 0.3 N·m </p> </div> <figure class="tolerance"> <figcaption> <span>允差帶</span> <strong>±0.5 N·m</strong> </figcaption> <div class="scale" role="img" aria-label="合格範圍為 41.5 至 42.5 N·m。目標 42.0 N·m,實測 42.3 N·m,位於合格範圍內。"> <span class="zone fail low" aria-hidden="true"></span> <span class="zone pass" aria-hidden="true"></span> <span class="zone fail high" aria-hidden="true"></span> <span class="line low" aria-hidden="true"></span> <span class="line target" aria-hidden="true"></span> <span class="line high" aria-hidden="true"></span> <span class="actual" aria-hidden="true"></span> <span class="tick-label min">41.0</span> <span class="tick-label low">41.5<br><small>下限</small></span> <span class="tick-label target">42.0<br><small>目標</small></span> <span class="tick-label actual-value">42.3<br><small>實測</small></span> <span class="tick-label high">42.5<br><small>上限</small></span> <span class="tick-label max">43.0</span> </div> </figure> <div class="evidence" aria-label="判定依據"> <div> <span class="evidence-number" aria-hidden="true">01</span> <p> <strong>合格區間</strong> <span>41.5–42.5 N·m</span> </p> </div> <div> <span class="evidence-number" aria-hidden="true">02</span> <p> <strong>距上限</strong> <span>尚有 0.2 N·m</span> </p> </div> </div> </section> <aside class="release-panel" aria-labelledby="release-title"> <div class="release-topline"> <span class="eyebrow">最終判定</span> <span class="code">N7 / QC</span> </div> <h2 id="release-title">本次校準<br>可以放行</h2> <p class="summary"> 實測值 42.3 N·m 落在允許範圍內,環境與儀器資訊已列於本工單。 </p> <dl class="verification"> <div> <dt><span aria-hidden="true">✓</span>數值判定</dt> <dd>PASS</dd> </div> <div> <dt><span aria-hidden="true">✓</span>儀器識別</dt> <dd>TQ-017</dd> </div> <div> <dt><span aria-hidden="true">✓</span>環境記錄</dt> <dd>23.8°C</dd> </div> </dl> <form action="#released"> <label class="confirm"> <input type="checkbox" required> <span class="check-box" aria-hidden="true"></span> <span>我已核對實測值、允差與儀器編號</span> </label> <button class="release-button" type="submit"> <span>確認放行</span> <span aria-hidden="true">→</span> </button> <a class="review-link" href="#measurement-title"> 返回檢視量測依據 </a> </form> </aside> </div> <footer class="footer-note"> <span>判定規則:| 實測 − 目標 | ≤ 允差</span> <span>42.3 − 42.0 = 0.3 ≤ 0.5 N·m</span> </footer> </main> <section id="released" class="confirmation" role="dialog" aria-modal="true" aria-labelledby="confirmation-title"> <a class="backdrop" href="#main" aria-label="關閉確認視窗"></a> <div class="dialog"> <span class="dialog-icon" aria-hidden="true">✓</span> <span class="eyebrow">N7 / TQ-017</span> <h2 id="confirmation-title">校準已確認放行</h2> <p>42.3 N·m|允差 ±0.5 N·m|PASS</p> <a class="dialog-close" href="#main">完成</a> </div> </section> </body> </html> ```
已載入 Skill +7156 tokens · 137601 ms
## Token/版面計畫 - 色彩:工作台灰 `#F2F5F7`、儀表白 `#FFFFFF`、主文字 `#17212B`、次文字 `#456170`、PASS 綠 `#176B4D`、允差黃 `#D19A2A`。 - 字體:量測數字使用 `Bahnschrift`;中文介面使用 `Noto Sans TC / PingFang TC`;刻度與設備編號使用等寬字。 - 桌面:左側判定與允差軌,右側追溯資料;底部固定呈現放行操作。 - 手機:依「結論 → 允差 → 判定依據 → 追溯 → 操作」排列。 - 識別元素:仿扭力工具讀值窗的允差軌,直接呈現 41.5、42.0、42.3、42.5 N·m。 - 模板自檢:不使用側欄、統計卡牆、玻璃擬態、裝飾圖表或行銷式大標題。PASS 同時以符號、文字及判定說明呈現,不只依賴綠色。 ```html <!doctype html> <html lang="zh-Hant"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="N7 扭力校準工作台:判斷 42.0 N·m 校準結果是否可以放行。" > <title>N7 扭力校準工作台</title> <style> :root { color-scheme: light; --bench: #f2f5f7; --surface: #ffffff; --surface-muted: #e7edf0; --ink: #17212b; --ink-soft: #456170; --line: #bdc9cf; --line-strong: #6c818c; --pass: #176b4d; --pass-soft: #dcece5; --limit: #d19a2a; --target: #2b5f75; --shadow: 0 1px 2px rgba(23, 33, 43, 0.08), 0 12px 34px rgba(23, 33, 43, 0.08); --radius-sm: 4px; --radius-md: 8px; --page-max: 1180px; --font-ui: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; --font-data: Bahnschrift, "Arial Narrow", "Noto Sans TC", sans-serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; } * { box-sizing: border-box; } html { min-width: 320px; background: var(--bench); } body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--bench); font-family: var(--font-ui); line-height: 1.5; } button { font: inherit; } .app-shell { width: min(100% - 40px, var(--page-max)); margin-inline: auto; padding-block: 28px 36px; } .masthead { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 58px; margin-bottom: 20px; border-bottom: 1px solid var(--line-strong); } .product-id { display: flex; align-items: baseline; gap: 14px; } .product-mark { color: var(--ink); font-family: var(--font-data); font-size: 1.65rem; font-weight: 800; letter-spacing: -0.04em; } .product-name { color: var(--ink-soft); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.08em; } .station-label { color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; } .work-order { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--pass); border-radius: var(--radius-md); box-shadow: var(--shadow); } .decision-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 28px 32px 26px; border-bottom: 1px solid var(--line); } .eyebrow { margin: 0 0 5px; color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } h1 { margin: 0; font-family: var(--font-data); font-size: clamp(1.75rem, 4vw, 2.7rem); font-stretch: condensed; line-height: 1.06; letter-spacing: -0.03em; } .decision-summary { margin: 10px 0 0; color: var(--ink-soft); font-size: 0.94rem; } .status-seal { display: grid; grid-template-columns: auto auto; grid-template-areas: "icon status" "icon label"; align-items: center; column-gap: 12px; min-width: 190px; padding: 14px 18px; color: var(--pass); background: var(--pass-soft); border: 2px solid var(--pass); border-radius: var(--radius-sm); } .status-icon { grid-area: icon; display: grid; width: 38px; height: 38px; place-items: center; color: var(--surface); background: var(--pass); border-radius: 50%; font-size: 1.4rem; font-weight: 900; line-height: 1; } .status-word { grid-area: status; font-family: var(--font-data); font-size: 1.45rem; font-weight: 800; line-height: 1; letter-spacing: 0.04em; } .status-label { grid-area: label; margin-top: 4px; font-size: 0.78rem; font-weight: 800; } .workspace { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(270px, 0.7fr); } .measurement-panel { min-width: 0; padding: 34px 32px 36px; border-right: 1px solid var(--line); } .section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 30px; } .section-heading h2, .trace-panel h2 { margin: 0; font-size: 1rem; letter-spacing: 0.03em; } .tolerance-copy { color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.78rem; white-space: nowrap; } .reading-window { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 38px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); } .reading { min-width: 0; padding: 18px 20px; } .reading + .reading { border-left: 1px solid var(--line); } .reading.is-measured { background: var(--pass-soft); } .reading-label { display: block; margin-bottom: 7px; color: var(--ink-soft); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.05em; } .reading-value { display: flex; align-items: baseline; gap: 5px; font-family: var(--font-data); font-size: clamp(1.8rem, 4.5vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -0.035em; white-space: nowrap; } .reading-unit { color: var(--ink-soft); font-size: 0.75rem; font-weight: 700; letter-spacing: 0; } .tolerance-figure { margin: 0; } .scale-wrap { position: relative; padding: 66px 0 35px; } .scale-track { position: relative; height: 36px; background: var(--surface-muted); border: 2px solid var(--line-strong); border-radius: 3px; } .scale-track::before { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: var(--line-strong); content: ""; } .tick { position: absolute; top: 0; width: 1px; height: 100%; background: var(--line-strong); } .tick-25 { left: 25%; } .tick-50 { left: 50%; } .tick-75 { left: 75%; } .target-pin, .measured-pin { position: absolute; transform: translateX(-50%); } .target-pin { top: -11px; left: 50%; width: 3px; height: 56px; background: var(--target); } .target-pin::after { position: absolute; top: -9px; left: 50%; width: 10px; height: 10px; background: var(--target); border-radius: 50%; content: ""; transform: translateX(-50%); } .measured-pin { top: -49px; left: 80%; z-index: 2; color: var(--surface); background: var(--pass); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 800; white-space: nowrap; } .measured-pin span { display: block; padding: 7px 9px; } .measured-pin::after { position: absolute; top: 100%; left: 50%; width: 3px; height: 49px; background: var(--pass); content: ""; transform: translateX(-50%); } .scale-label { position: absolute; top: 48px; color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; white-space: nowrap; } .scale-label.low { left: 0; transform: translateX(-2px); } .scale-label.target { left: 50%; color: var(--target); transform: translateX(-50%); } .scale-label.high { right: 0; transform: translateX(2px); } .scale-caption { display: flex; align-items: flex-start; gap: 10px; margin-top: 5px; color: var(--ink-soft); font-size: 0.86rem; } .caption-symbol { flex: 0 0 auto; color: var(--pass); font-weight: 900; } .decision-reason { display: grid; grid-template-columns: auto 1fr; gap: 14px; margin-top: 30px; padding: 16px 18px; background: var(--bench); border-left: 4px solid var(--pass); } .reason-code { color: var(--pass); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 800; } .decision-reason p { margin: 0; font-size: 0.9rem; } .decision-reason strong { color: var(--pass); } .trace-panel { padding: 34px 28px; background: #f9fbfc; } .trace-panel h2 { margin-bottom: 24px; } .trace-list { margin: 0; } .trace-item { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); } .trace-item:last-child { border-bottom: 1px solid var(--line); } .trace-item dt { color: var(--ink-soft); font-size: 0.78rem; font-weight: 700; } .trace-item dd { margin: 0; text-align: right; font-family: var(--font-mono); font-size: 0.86rem; font-weight: 800; } .trace-note { margin: 22px 0 0; color: var(--ink-soft); font-size: 0.78rem; line-height: 1.65; } .release-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 32px; background: var(--ink); } .release-copy { min-width: 0; color: var(--surface); } .release-copy strong { display: block; margin-bottom: 3px; font-size: 0.92rem; } .release-copy span { color: #c7d2d8; font-size: 0.78rem; } .release-button { flex: 0 0 auto; min-height: 46px; padding: 0 24px; color: var(--surface); background: var(--pass); border: 2px solid #68aa8f; border-radius: var(--radius-sm); font-weight: 900; letter-spacing: 0.03em; cursor: pointer; } .release-button:hover { background: #125b41; } .release-button:focus-visible { outline: 3px solid var(--limit); outline-offset: 4px; } @media (max-width: 760px) { .app-shell { width: min(100% - 24px, var(--page-max)); padding-block: 16px 24px; } .masthead { min-height: 48px; margin-bottom: 12px; } .product-id { gap: 9px; } .product-mark { font-size: 1.35rem; } .product-name { font-size: 0.76rem; letter-spacing: 0.04em; } .station-label { display: none; } .decision-band { grid-template-columns: 1fr; gap: 20px; padding: 23px 20px; } .status-seal { min-width: 0; width: 100%; } .workspace { grid-template-columns: 1fr; } .measurement-panel { padding: 28px 20px 30px; border-right: 0; border-bottom: 1px solid var(--line); } .section-heading { align-items: flex-start; flex-direction: column; gap: 4px; margin-bottom: 20px; } .reading-window { grid-template-columns: 1fr 1fr; margin-bottom: 32px; } .reading { padding: 15px 14px; } .reading:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--line); } .reading:nth-child(2) { border-left: 0; } .reading-value { font-size: 2rem; } .reading:first-child .reading-value { font-size: 2.65rem; } .scale-wrap { padding-top: 64px; } .measured-pin { left: 80%; } .decision-reason { grid-template-columns: 1fr; gap: 5px; } .trace-panel { padding: 28px 20px; } .release-bar { position: sticky; bottom: 0; z-index: 5; align-items: stretch; flex-direction: column; gap: 14px; padding: 18px 20px; } .release-button { width: 100%; } } @media (max-width: 390px) { .scale-label { font-size: 0.65rem; } .measured-pin { font-size: 0.7rem; } .trace-item { grid-template-columns: 1fr; gap: 5px; } .trace-item dd { text-align: left; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } @media print { body { background: #fff; } .app-shell { width: 100%; padding: 0; } .work-order { box-shadow: none; } .release-button { display: none; } } </style> </head> <body> <main class="app-shell"> <header class="masthead"> <div class="product-id"> <span class="product-mark">N7</span> <span class="product-name">扭力校準工作台</span> </div> <span class="station-label">Quality control · Calibration</span> </header> <article class="work-order" aria-labelledby="page-title"> <header class="decision-band"> <div> <p class="eyebrow">本次校準判定</p> <h1 id="page-title">42.0 N·m 校準可放行</h1> <p class="decision-summary"> 實測偏差 +0.3 N·m,位於 ±0.5 N·m 允差內。 </p> </div> <div class="status-seal" role="status" aria-label="校準結論:PASS,允許放行" > <span class="status-icon" aria-hidden="true">✓</span> <span class="status-word">PASS</span> <span class="status-label">允許放行</span> </div> </header> <div class="workspace"> <section class="measurement-panel" aria-labelledby="measurement-title" > <div class="section-heading"> <h2 id="measurement-title">量測判定</h2> <span class="tolerance-copy">允差範圍 41.5–42.5 N·m</span> </div> <div class="reading-window"> <div class="reading is-measured"> <span class="reading-label">實測值</span> <span class="reading-value"> 42.3 <span class="reading-unit">N·m</span> </span> </div> <div class="reading"> <span class="reading-label">設定值</span> <span class="reading-value"> 42.0 <span class="reading-unit">N·m</span> </span> </div> <div class="reading"> <span class="reading-label">偏差</span> <span class="reading-value"> +0.3 <span class="reading-unit">N·m</span> </span> </div> </div> <figure class="tolerance-figure" aria-labelledby="scale-caption" > <div class="scale-wrap" role="img" aria-label="允差下限 41.5,目標 42.0,實測 42.3,允差上限 42.5 牛頓米;實測值位於允差內" > <div class="scale-track" aria-hidden="true"> <span class="tick tick-25"></span> <span class="tick tick-50"></span> <span class="tick tick-75"></span> <span class="target-pin"></span> <span class="measured-pin"> <span>實測 42.3</span> </span> </div> <span class="scale-label low">下限 41.5</span> <span class="scale-label target">目標 42.0</span> <span class="scale-label high">上限 42.5</span> </div> <figcaption class="scale-caption" id="scale-caption"> <span class="caption-symbol" aria-hidden="true">✓</span> <span> 實測值在允差帶內,距離上限尚有 0.2 N·m。 </span> </figcaption> </figure> <div class="decision-reason"> <span class="reason-code">判定依據</span> <p> 絕對偏差 0.3 N·m ≤ 允許偏差 0.5 N·m, 因此結論為 <strong>PASS,可放行</strong>。 </p> </div> </section> <aside class="trace-panel" aria-labelledby="trace-title"> <h2 id="trace-title">校準追溯</h2> <dl class="trace-list"> <div class="trace-item"> <dt>儀器編號</dt> <dd>TQ-017</dd> </div> <div class="trace-item"> <dt>環境溫度</dt> <dd>23.8°C</dd> </div> <div class="trace-item"> <dt>上次校準</dt> <dd> <time datetime="2026-08-21">2026-08-21</time> </dd> </div> <div class="trace-item"> <dt>本次結論</dt> <dd>PASS/允許放行</dd> </div> </dl> <p class="trace-note"> 放行前請核對儀器編號與現場標籤一致。 </p> </aside> </div> <footer class="release-bar"> <div class="release-copy"> <strong>放行條件已滿足</strong> <span>TQ-017 · 42.3 N·m · PASS</span> </div> <button class="release-button" type="button"> ✓ 確認放行 </button> </footer> </article> </main> </body> </html> ```
03
壓力題

無障礙空狀態與錯誤狀態

測試問題

為『聲納檔案庫』建立一個深海研究音訊搜尋頁,受眾是海洋生物學家。畫面同時要示範:搜尋結果 0 筆的空狀態、感測器資料載入失敗的錯誤狀態,以及『重新載入』與『清除篩選』操作。請給完整 HTML/CSS,不使用 JavaScript 或外部圖片;必須支援鍵盤清楚焦點、prefers-reduced-motion、窄螢幕,並以明確文字告訴使用者下一步。先說明你把唯一的視覺冒險放在哪裡,以及刪掉了哪些無用裝飾。

載入前 · 0 個 Skill載入後 · 版本已核對再次確認 · 0 個 Skill已確認模型套用 Skill三個環境皆已清理
未載入 Skill5449 tokens · 103977 ms
唯一的視覺冒險放在搜尋區右側的「深海聲納掃描窗」:純 CSS 的同心波紋與掃描線,讓頁面帶有研究儀器感;在 `prefers-reduced-motion` 下會完全停止。其餘無助於判讀的發光粒子、假地圖、裝飾圖示、漂浮卡片與多餘漸層都已刪除,讓錯誤、空狀態及下一步操作成為視覺重點。 ```html <!doctype html> <html lang="zh-Hant"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="color-scheme" content="dark"> <title>搜尋音訊|聲納檔案庫</title> <style> :root { --ocean-950: #06151c; --ocean-900: #08212b; --ocean-850: #0a2a36; --ocean-800: #103744; --line: #28505b; --line-strong: #3d7280; --text: #edf8f7; --muted: #a9c2c3; --cyan: #62e7dc; --cyan-dark: #082d32; --warning: #ffca73; --error: #ff9e8f; --error-bg: #361d21; --focus: #ffe08a; --radius: 0.85rem; --content: 76rem; } *, *::before, *::after { box-sizing: border-box; } html { background: var(--ocean-950); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", sans-serif; line-height: 1.55; } body { min-width: 20rem; margin: 0; background: linear-gradient(180deg, #071b24 0, var(--ocean-950) 35rem); } button, input, select { font: inherit; } button, select { cursor: pointer; } a { color: var(--cyan); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .skip-link { position: fixed; z-index: 100; top: 0.75rem; left: 0.75rem; padding: 0.7rem 1rem; border-radius: 0.45rem; background: var(--focus); color: #172023; font-weight: 800; transform: translateY(-160%); } .skip-link:focus { transform: translateY(0); } .site-header, main { width: min(calc(100% - 2rem), var(--content)); margin-inline: auto; } .site-header { display: flex; align-items: center; justify-content: space-between; min-height: 5rem; border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 0.75rem; color: var(--text); text-decoration: none; } .brand-mark { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--cyan); font-size: 1.25rem; font-weight: 900; } .brand strong { display: block; letter-spacing: 0.08em; } .brand small { display: block; color: var(--muted); font-size: 0.75rem; } .archive-status { margin: 0; color: var(--muted); font-size: 0.875rem; } .archive-status::before { display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.5rem; border-radius: 50%; background: var(--warning); content: ""; } main { padding-block: 3.5rem 5rem; } .intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 0.65fr); gap: 2.5rem; align-items: center; margin-bottom: 2rem; } .eyebrow { margin: 0 0 0.5rem; color: var(--cyan); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } h1 { max-width: 14ch; margin: 0; font-size: clamp(2.3rem, 6vw, 4.8rem); line-height: 0.98; letter-spacing: -0.045em; } .lede { max-width: 43rem; margin: 1.25rem 0 0; color: var(--muted); font-size: 1.05rem; } /* 唯一的視覺裝飾:CSS 聲納掃描窗 */ .sonar { position: relative; aspect-ratio: 1; width: min(100%, 18rem); margin-inline: auto; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 50%; background: radial-gradient(circle, transparent 24%, #418b9628 25% 25.7%, transparent 26%), radial-gradient(circle, transparent 48%, #418b9628 49% 49.7%, transparent 50%), radial-gradient(circle, transparent 72%, #418b9628 73% 73.7%, transparent 74%), linear-gradient(90deg, transparent 49.6%, #418b9635 50%, transparent 50.4%), linear-gradient(transparent 49.6%, #418b9635 50%, transparent 50.4%), #081e27; } .sonar::before { position: absolute; inset: 50% 50% 0; width: 50%; height: 50%; transform-origin: 0 0; background: conic-gradient( from 270deg at 0 0, rgb(98 231 220 / 0.38), transparent 42deg ); content: ""; animation: scan 8s linear infinite; } .sonar::after { position: absolute; top: 31%; left: 65%; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0.35rem rgb(98 231 220 / 0.14); content: ""; } .sonar-label { position: absolute; right: 0; bottom: 12%; left: 0; margin: 0; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; } @keyframes scan { to { transform: rotate(1turn); } } .search-panel { padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--radius); background: rgb(10 42 54 / 0.82); } .search-panel h2, .error-card h2, .empty-state h2 { margin-top: 0; } .field-grid { display: grid; grid-template-columns: minmax(15rem, 2fr) repeat(2, minmax(10rem, 1fr)); gap: 1rem; align-items: end; } .field { display: grid; gap: 0.45rem; } label, legend { color: var(--text); font-size: 0.88rem; font-weight: 750; } input, select { width: 100%; min-height: 3rem; border: 1px solid var(--line-strong); border-radius: 0.5rem; background: var(--ocean-950); color: var(--text); } input { padding: 0.7rem 0.85rem; } select { padding: 0.7rem 2.4rem 0.7rem 0.85rem; } input::placeholder { color: #819fa3; } input:hover, select:hover { border-color: var(--cyan); } fieldset { min-width: 0; margin: 1.25rem 0 0; padding: 0; border: 0; } .depth-options { display: flex; flex-wrap: wrap; gap: 0.65rem 1.25rem; margin-top: 0.55rem; } .check { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); font-weight: 500; } .check input { width: 1.15rem; min-height: auto; height: 1.15rem; accent-color: var(--cyan); } .form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } .button { display: inline-flex; min-height: 2.8rem; align-items: center; justify-content: center; padding: 0.65rem 1rem; border: 1px solid transparent; border-radius: 0.5rem; font-weight: 800; text-decoration: none; } .button-primary { background: var(--cyan); color: #062529; } .button-primary:hover { background: #8af2ea; } .button-secondary { border-color: var(--line-strong); background: transparent; color: var(--text); } .button-secondary:hover { border-color: var(--cyan); background: var(--cyan-dark); } .content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(17rem, 0.7fr); gap: 1.5rem; margin-top: 1.5rem; align-items: start; } .results { min-width: 0; } .results-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; } .results-heading h2 { margin: 0; font-size: 1.25rem; } .results-heading p { margin: 0; color: var(--muted); font-size: 0.9rem; } .empty-state { min-height: 20rem; display: grid; align-content: center; justify-items: start; padding: clamp(1.5rem, 5vw, 3.5rem); border: 1px dashed var(--line-strong); border-radius: var(--radius); background: rgb(8 33 43 / 0.5); } .empty-index { margin: 0 0 1rem; color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.8rem; letter-spacing: 0.08em; } .empty-state h2 { margin-bottom: 0.65rem; font-size: clamp(1.5rem, 3vw, 2.1rem); } .empty-state p { max-width: 37rem; margin: 0; color: var(--muted); } .empty-state .form-actions { margin-top: 1.25rem; } .error-card { padding: 1.25rem; border: 1px solid #9a504b; border-radius: var(--radius); background: var(--error-bg); } .error-label { margin: 0 0 0.6rem; color: var(--error); font-size: 0.76rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; } .error-card h2 { margin-bottom: 0.65rem; font-size: 1.2rem; } .error-card p { margin: 0; color: #efd0cb; font-size: 0.92rem; } .error-detail { margin-top: 0.75rem !important; padding-top: 0.75rem; border-top: 1px solid rgb(255 158 143 / 0.25); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.78rem !important; } .error-card .button { width: 100%; margin-top: 1rem; border-color: var(--error); } .next-step { margin-top: 1rem !important; color: var(--text) !important; font-weight: 700; } .site-footer { padding-top: 2.5rem; color: var(--muted); font-size: 0.8rem; } @media (max-width: 50rem) { .intro { grid-template-columns: 1fr; } .sonar { display: none; } .field-grid, .content-grid { grid-template-columns: 1fr; } h1 { max-width: none; } } @media (max-width: 36rem) { .site-header { align-items: flex-start; gap: 1rem; padding-block: 1rem; } .archive-status { max-width: 8rem; text-align: right; } main { padding-top: 2.25rem; } .depth-options { display: grid; } .form-actions, .form-actions .button { width: 100%; } .results-heading { display: block; } .results-heading p { margin-top: 0.25rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .sonar::before { transform: rotate(32deg); } } @media (prefers-contrast: more) { :root { --line: #7aa3aa; --line-strong: #b3d4d7; --muted: #d0e2e3; } } </style> </head> <body> <a class="skip-link" href="#main-content">跳至主要內容</a> <header class="site-header"> <a class="brand" href="#" aria-label="聲納檔案庫首頁"> <span class="brand-mark" aria-hidden="true">∿</span> <span> <strong>聲納檔案庫</strong> <small>SONAR ARCHIVE</small> </span> </a> <p class="archive-status">部分感測器資料無法使用</p> </header> <main id="main-content"> <section class="intro" aria-labelledby="page-title"> <div> <p class="eyebrow">深海研究音訊索引</p> <h1 id="page-title">尋找水面下的訊號</h1> <p class="lede"> 依物種、海域、深度與錄製日期搜尋水下聲學紀錄。搜尋結果與感測器連線狀態會分開顯示,避免把資料載入失敗誤判為沒有紀錄。 </p> </div> <div class="sonar" aria-hidden="true"> <p class="sonar-label">Hydrophone array 04</p> </div> </section> <form class="search-panel" action="" method="get" role="search"> <h2>搜尋條件</h2> <div class="field-grid"> <div class="field"> <label for="query">關鍵字或物種</label> <input id="query" name="q" type="search" value="抹香鯨 click train" placeholder="例如:抹香鯨、click train、船舶噪音" > </div> <div class="field"> <label for="region">海域</label> <select id="region" name="region"> <option value="">所有海域</option> <option value="okinawa" selected>琉球海溝</option> <option value="mariana">馬里亞納海溝</option> <option value="south-china-sea">南海深海盆地</option> </select> </div> <div class="field"> <label for="date">錄製年份</label> <select id="date" name="year"> <option value="">不限年份</option> <option value="2026" selected>2026</option> <option value="2025">2025</option> <option value="2024">2024</option> </select> </div> </div> <fieldset> <legend>深度範圍</legend> <div class="depth-options"> <label class="check"> <input type="checkbox" name="depth" value="0-200"> 0–200 公尺 </label> <label class="check"> <input type="checkbox" name="depth" value="200-1000"> 200–1,000 公尺 </label> <label class="check"> <input type="checkbox" name="depth" value="1000-plus" checked> 1,000 公尺以下 </label> </div> </fieldset> <div class="form-actions"> <button class="button button-primary" type="submit">搜尋音訊</button> <button class="button button-secondary" type="reset">清除篩選</button> </div> </form> <div class="content-grid"> <section class="results" aria-labelledby="results-title"> <div class="results-heading"> <h2 id="results-title">搜尋結果:0 筆</h2> <p>已套用 4 項篩選條件</p> </div> <div class="empty-state" role="status" aria-live="polite"> <p class="empty-index">ARCHIVE QUERY / 000</p> <h2>找不到符合條件的音訊</h2> <p> 檔案庫目前沒有同時符合「抹香鯨 click train」、「琉球海溝」、「2026」及「1,000 公尺以下」的紀錄。 </p> <p class="next-step"> 下一步:清除篩選,或改用較廣的海域、年份與深度後再次搜尋。 </p> <div class="form-actions"> <button class="button button-primary" type="reset" form=""> 清除篩選 </button> <a class="button button-secondary" href="#query"> 修改搜尋條件 </a> </div> </div> </section> <aside class="error-card" role="alert" aria-labelledby="sensor-error-title" > <p class="error-label">感測器資料載入失敗</p> <h2 id="sensor-error-title">無法取得水聽器陣列狀態</h2> <p> 即時感測器服務暫時沒有回應。既有檔案仍可搜尋,但最近上傳的錄音可能尚未出現在結果中。 </p> <p class="error-detail">來源:Hydrophone Array 04 · 連線逾時</p> <p class="next-step"> 下一步:選擇「重新載入」。若問題持續發生,請稍後再試。 </p> <form action="" method="get"> <input type="hidden" name="q" value="抹香鯨 click train"> <input type="hidden" name="region" value="okinawa"> <input type="hidden" name="year" value="2026"> <input type="hidden" name="depth" value="1000-plus"> <button class="button button-secondary" type="submit"> 重新載入感測器資料 </button> </form> </aside> </div> <footer class="site-footer"> <p>資料時間一律使用 UTC;深度以平均海平面為基準。</p> </footer> </main> </body> </html> ```
已載入 Skill +6004 tokens · 115546 ms
唯一的視覺冒險放在頁首的「聲納剖面帶」:以純 CSS 呈現深度刻度、波形與緩慢掃描線,讓介面具有研究儀器感。其餘區域保持安靜、資料導向。刪除了無用途的氣泡、漸層光暈、裝飾圖示、卡片陰影與多餘動畫,避免干擾錯誤訊息和下一步操作。 ```html <!doctype html> <html lang="zh-Hant"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="color-scheme" content="dark"> <title>搜尋深海音訊|聲納檔案庫</title> <style> :root { --abyss: #071317; --panel: #0c1d22; --panel-raised: #10272d; --line: #31505a; --line-soft: #203a42; --text: #e8f1ef; --muted: #a9bdba; --signal: #72e6c1; --signal-dark: #09241e; --warning: #ffb86b; --warning-bg: #2a1d12; --focus: #ffe68a; --danger-line: #9f7045; --radius: 0.35rem; --content-width: 82rem; } * { box-sizing: border-box; } html { background: var(--abyss); color: var(--text); font-family: Inter, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; line-height: 1.55; } body { min-width: 18rem; margin: 0; background: var(--abyss); } button, input, select { font: inherit; } a { color: inherit; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .skip-link { position: fixed; z-index: 100; top: 0.75rem; left: 0.75rem; padding: 0.65rem 0.9rem; color: #071317; background: var(--focus); font-weight: 800; text-decoration: none; transform: translateY(-200%); } .skip-link:focus { transform: translateY(0); } .site-header { border-bottom: 1px solid var(--line); } .header-inner, .page { width: min(calc(100% - 2rem), var(--content-width)); margin-inline: auto; } .header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 4.5rem; gap: 1rem; } .brand { display: flex; align-items: baseline; gap: 0.75rem; text-decoration: none; } .brand-name { font-family: Georgia, "Noto Serif TC", serif; font-size: clamp(1.2rem, 3vw, 1.55rem); font-weight: 700; letter-spacing: 0.04em; } .brand-code, .utility-label, .depth-scale, .result-count, .chip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .brand-code { color: var(--signal); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; } .collection-status { margin: 0; color: var(--muted); font-size: 0.84rem; } .collection-status::before { display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.5rem; border-radius: 50%; background: var(--signal); content: ""; } .page { padding-block: 2rem 4rem; } .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.78fr); min-height: 17rem; overflow: hidden; border: 1px solid var(--line); background: var(--panel); } .hero-copy { align-self: center; padding: clamp(1.5rem, 5vw, 3.75rem); } .utility-label { margin: 0 0 0.75rem; color: var(--signal); font-size: 0.75rem; letter-spacing: 0.13em; text-transform: uppercase; } h1, h2, h3, p { margin-top: 0; } h1 { max-width: 13ch; margin-bottom: 1rem; font-family: Georgia, "Noto Serif TC", serif; font-size: clamp(2rem, 6vw, 4.4rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; } .hero-copy > p:last-child { max-width: 39rem; margin-bottom: 0; color: var(--muted); } /* 唯一的視覺冒險:模擬研究儀器的聲納剖面帶。 */ .sonar-profile { position: relative; min-height: 17rem; overflow: hidden; border-left: 1px solid var(--line); background: linear-gradient(to right, transparent 49.8%, #72e6c126 50%, transparent 50.2%), repeating-linear-gradient( to bottom, transparent 0, transparent calc(25% - 1px), #31505a 25% ), var(--signal-dark); isolation: isolate; } .sonar-profile::before { position: absolute; z-index: 1; inset: 11% -8% 8% 7%; background: linear-gradient( 165deg, transparent 0 18%, #72e6c11f 18.3% 18.8%, transparent 19.1% 35%, #72e6c147 35.3% 36%, transparent 36.3% 52%, #72e6c120 52.3% 53%, transparent 53.3% ); clip-path: polygon( 0 56%, 8% 45%, 16% 63%, 25% 37%, 33% 52%, 42% 31%, 51% 68%, 59% 46%, 68% 57%, 77% 27%, 86% 50%, 94% 38%, 100% 58%, 100% 63%, 94% 43%, 86% 55%, 77% 32%, 68% 62%, 59% 51%, 51% 73%, 42% 36%, 33% 57%, 25% 42%, 16% 68%, 8% 50%, 0 61% ); background-color: var(--signal); content: ""; opacity: 0.88; } .sonar-profile::after { position: absolute; z-index: 2; inset: 0 auto 0 0; width: 22%; background: linear-gradient( 90deg, transparent, #72e6c11c 65%, #72e6c1 98%, transparent ); content: ""; animation: scan 5.5s linear infinite; } .depth-scale { position: absolute; z-index: 3; inset: 0.75rem 0.85rem auto auto; display: grid; height: calc(100% - 1.5rem); align-content: space-between; color: #c6d8d4; font-size: 0.68rem; letter-spacing: 0.04em; text-align: right; } @keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(520%); } } .workspace { display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); gap: 1.5rem; margin-top: 1.5rem; } .filters, .results { min-width: 0; } .filters { align-self: start; padding: 1.25rem; border: 1px solid var(--line); background: var(--panel); } .section-title { margin-bottom: 1rem; font-size: 1rem; letter-spacing: 0.02em; } .field { margin: 0 0 1rem; } .field label, legend { display: block; margin-bottom: 0.4rem; color: var(--muted); font-size: 0.82rem; font-weight: 700; } fieldset { min-width: 0; margin: 0 0 1rem; padding: 0; border: 0; } input[type="search"], select { width: 100%; min-height: 2.75rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); background: #07171b; padding: 0.65rem 0.75rem; } input[type="search"]::placeholder { color: #819a97; } .checkbox { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 0.55rem; color: var(--text); font-size: 0.9rem; } .checkbox input { width: 1.1rem; height: 1.1rem; margin: 0.18rem 0 0; accent-color: var(--signal); } .button-row { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.25rem; } .button, button { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--signal); border-radius: var(--radius); padding: 0.65rem 0.9rem; color: #061512; background: var(--signal); font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer; } .button:hover, button:hover { background: #9af1d5; } .button-secondary { border-color: var(--line); color: var(--text); background: transparent; } .button-secondary:hover { border-color: var(--muted); background: var(--panel-raised); } .results-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; } .results-header h2 { margin-bottom: 0; font-family: Georgia, "Noto Serif TC", serif; font-size: clamp(1.45rem, 4vw, 2.1rem); font-weight: 500; } .result-count { margin: 0; color: var(--signal); font-size: 0.85rem; white-space: nowrap; } .active-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; } .chip { border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.6rem; color: var(--muted); font-size: 0.72rem; } .state { border: 1px solid var(--line); padding: clamp(1.25rem, 4vw, 2rem); background: var(--panel); } .state + .state { margin-top: 1rem; } .state h3 { margin-bottom: 0.55rem; font-family: Georgia, "Noto Serif TC", serif; font-size: clamp(1.25rem, 3vw, 1.65rem); font-weight: 500; } .state p { max-width: 60ch; color: var(--muted); } .empty-state { min-height: 15rem; display: grid; align-content: center; justify-items: start; background: linear-gradient(90deg, var(--signal) 0 4px, transparent 4px), var(--panel); } .error-state { border-color: var(--danger-line); background: var(--warning-bg); } .error-state .utility-label { color: var(--warning); } .error-detail { margin-bottom: 1.25rem; padding-left: 0.85rem; border-left: 2px solid var(--warning); color: #e6d1b9; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; } .next-step { margin-bottom: 1.25rem; color: var(--text) !important; font-weight: 700; } .site-footer { width: min(calc(100% - 2rem), var(--content-width)); margin-inline: auto; padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 0.78rem; } @media (max-width: 48rem) { .hero, .workspace { grid-template-columns: 1fr; } .sonar-profile { min-height: 10rem; border-top: 1px solid var(--line); border-left: 0; } .results-header { align-items: flex-start; flex-direction: column; gap: 0.25rem; } } @media (max-width: 30rem) { .header-inner { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 0.8rem; } .brand-code { display: block; } .page { padding-top: 1rem; } .hero-copy, .filters, .state { padding: 1rem; } .button-row { align-items: stretch; flex-direction: column; } .button, button { width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .sonar-profile::after { left: 58%; transform: none; } } @media (forced-colors: active) { .collection-status::before { border: 1px solid currentColor; } .empty-state { border-left-width: 4px; background: Canvas; } } </style> </head> <body> <a class="skip-link" href="#main-content">跳到搜尋結果</a> <header class="site-header"> <div class="header-inner"> <a class="brand" href="?" aria-label="聲納檔案庫首頁"> <span class="brand-name">聲納檔案庫</span> <span class="brand-code">Sonar Archive</span> </a> <p class="collection-status">主檔案索引可用</p> </div> </header> <main class="page" id="main-content"> <section class="hero" aria-labelledby="page-title"> <div class="hero-copy"> <p class="utility-label">深海研究音訊搜尋</p> <h1 id="page-title">在黑暗水層裡尋找訊號</h1> <p> 搜尋水下錄音、物種標記與水聽器觀測資料。 目前結果區同時顯示零筆結果與感測器資料連線狀態。 </p> </div> <div class="sonar-profile" role="img" aria-label="抽象聲納剖面圖,深度從 0 公尺延伸至 6000 公尺" > <div class="depth-scale" aria-hidden="true"> <span>0000 m</span> <span>2000 m</span> <span>4000 m</span> <span>6000 m</span> </div> </div> </section> <div class="workspace"> <aside class="filters" aria-labelledby="filter-title"> <h2 class="section-title" id="filter-title">搜尋與篩選</h2> <form action="" method="get" role="search"> <div class="field"> <label for="query">關鍵字、物種或檔案編號</label> <input id="query" name="q" type="search" value="抹香鯨 爆裂脈衝" placeholder="例如:抹香鯨、SA-24018" > </div> <div class="field"> <label for="depth">深度範圍</label> <select id="depth" name="depth"> <option>所有深度</option> <option>0–200 公尺|透光層</option> <option>200–1000 公尺|中層帶</option> <option selected>1000–4000 公尺|深層帶</option> <option>4000 公尺以下|深淵帶</option> </select> </div> <div class="field"> <label for="region">研究海域</label> <select id="region" name="region"> <option>所有海域</option> <option selected>西北太平洋</option> <option>菲律賓海</option> <option>馬里亞納海溝</option> <option>南海</option> </select> </div> <fieldset> <legend>資料類型</legend> <label class="checkbox"> <input type="checkbox" name="type" value="audio" checked> <span>音訊記錄</span> </label> <label class="checkbox"> <input type="checkbox" name="type" value="annotation"> <span>人工註記</span> </label> <label class="checkbox"> <input type="checkbox" name="type" value="sensor" checked> <span>感測器資料</span> </label> </fieldset> <div class="button-row"> <button type="submit">更新搜尋</button> <a class="button button-secondary" href="?">清除篩選</a> </div> </form> </aside> <section class="results" aria-labelledby="results-title"> <header class="results-header"> <h2 id="results-title">搜尋結果</h2> <p class="result-count" aria-live="polite">0 筆記錄</p> </header> <ul class="active-filters" aria-label="目前套用的篩選條件"> <li class="chip">深層帶</li> <li class="chip">西北太平洋</li> <li class="chip">音訊記錄</li> <li class="chip">感測器資料</li> </ul> <section class="state empty-state" aria-labelledby="empty-title"> <p class="utility-label">搜尋完成/0 筆</p> <h3 id="empty-title">沒有符合全部條件的音訊</h3> <p> 檔案庫中沒有同時符合「抹香鯨 爆裂脈衝」、深層帶與西北太平洋的記錄。 </p> <p class="next-step"> 下一步:清除篩選後重新搜尋,或移除一個深度、海域或資料類型條件。 </p> <a class="button button-secondary" href="?">清除篩選</a> </section> <section class="state error-state" role="alert" aria-labelledby="sensor-error-title" > <p class="utility-label">感測器連線失敗</p> <h3 id="sensor-error-title">無法載入即時水聽器資料</h3> <p> 歷史音訊索引仍可搜尋,但 HYD-07 與 HYD-12 的最新深度、溫度及訊號品質資料目前無法取得。 </p> <p class="error-detail"> 最後成功同步:2026-09-02 14:18 UTC+8<br> 受影響來源:HYD-07、HYD-12 </p> <p class="next-step"> 下一步:選擇「重新載入」再次連線;若仍然失敗,請稍後再試並使用歷史音訊資料。 </p> <a class="button" href="">重新載入</a> </section> </section> </div> </main> <footer class="site-footer"> 聲納檔案庫/深海聲學研究資料介面 </footer> </body> </html> ```
測試紀錄

這次測試記錄了什麼?

固定不變兩邊使用相同的模型版本、帳號方案、系統指令、思考強度與測試問題。

分開測試每次回答都使用全新環境。載入前不含任何 Skill,載入後只含本頁指定的 Skill。

完整才公開三題的所有步驟與環境清理都成功後,才顯示結果。若無法確認模型是否套用 Skill,也會清楚標示。