前端設計

design-taste-frontend

依頁面類型、受眾與品牌脈絡推導視覺方向,以設計變異、動態與密度三項參數約束版面,並在交付前檢查可及性、響應式與常見 AI 模板痕跡。

查看來源 ↗
作者/來源Leonxlnx★ 85,636 GitHub Stars
測試版本ccbc15639c97更新日期:2026-08-24T15:23:56Z
支援平台OpenAI · Claude本次實測平台
安裝方式npx skills add leonxlnx/taste-skill --skill design-taste-frontend
公平比較方式

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

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

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

雨港夜航時刻頁

測試問題

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

載入前 · 0 個 Skill載入後 · 版本已核對再次確認 · 0 個 Skill已確認模型套用 Skill三個環境皆已清理
未載入 Skill2950 tokens · 58412 ms
Design Read:以「雨夜港燈」為視覺語彙,將今晚末三班放在首屏中央,時間最大、航向次之、營運狀態一眼可辨。 設計參數:① 深海藍+航標橙 ② 手機優先、首屏完整呈現 ③ 時刻字級 44–64px、資訊對比至少 4.5:1。 精簡方向:移除導覽、促銷與非必要操作,只保留品牌、天候/行駛狀態及三班時刻。 ```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="#071b2c"> <title>雨港夜航|今晚最後三班船</title> <style> :root { --navy: #071b2c; --navy-soft: #0d2a40; --paper: #f3f0e8; --ink: #102536; --muted: #61717c; --line: #cfd5d4; --orange: #ff9d42; --green: #85d7ad; } * { box-sizing: border-box; } html { color-scheme: dark; } body { min-height: 100svh; margin: 0; color: #fff; background: radial-gradient(circle at 84% 9%, #174562 0, transparent 26rem), linear-gradient(145deg, var(--navy-soft), var(--navy) 55%); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; } body::before { position: fixed; inset: 0; z-index: -1; content: ""; opacity: .1; background: repeating-linear-gradient( 112deg, transparent 0 22px, rgba(255,255,255,.8) 23px, transparent 24px 47px ); pointer-events: none; } .page { width: min(100% - 32px, 1080px); min-height: 100svh; margin: auto; padding: 28px 0 24px; display: grid; align-content: center; gap: 24px; } header { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: flex; align-items: center; gap: 12px; } .mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: var(--orange); font-size: 21px; background: rgba(255,255,255,.06); } .brand strong { display: block; font-size: 19px; letter-spacing: .14em; } .brand small { display: block; margin-top: 2px; color: #a9bbc7; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } .status { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .pill { padding: 8px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #dbe6ec; background: rgba(3,17,28,.34); font-size: 13px; font-weight: 650; } .pill.running { color: #d9f7e8; border-color: rgba(133,215,173,.45); } .dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(133,215,173,.12); } .intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; } .eyebrow { margin: 0 0 7px; color: var(--orange); font-size: 12px; font-weight: 800; letter-spacing: .2em; } h1 { margin: 0; font-size: clamp(32px, 5vw, 58px); line-height: 1; letter-spacing: -.04em; } .hint { margin: 0 0 3px; color: #a9bbc7; font-size: 14px; } .schedule { overflow: hidden; color: var(--ink); background: var(--paper); border: 1px solid rgba(255,255,255,.28); border-radius: 22px; box-shadow: 0 24px 64px rgba(0,0,0,.28); } .trip { min-height: 132px; padding: 24px 30px; display: grid; grid-template-columns: minmax(150px, .7fr) 1.6fr auto; align-items: center; gap: 26px; border-bottom: 1px solid var(--line); } .trip:last-child { border-bottom: 0; background: #fff7e9; } time { font-size: clamp(44px, 6vw, 68px); font-weight: 850; line-height: .9; letter-spacing: -.055em; font-variant-numeric: tabular-nums; } .route { display: flex; align-items: center; gap: 14px; font-size: clamp(19px, 2.5vw, 28px); font-weight: 760; } .arrow { position: relative; width: clamp(38px, 6vw, 68px); height: 1px; background: #98a4aa; } .arrow::after { position: absolute; top: -4px; right: 0; width: 8px; height: 8px; content: ""; border-top: 1px solid #98a4aa; border-right: 1px solid #98a4aa; transform: rotate(45deg); } .tag { padding: 7px 10px; border: 1px solid #d7a369; border-radius: 999px; color: #9a541b; font-size: 12px; font-weight: 800; letter-spacing: .08em; } .trip:not(:last-child) .tag { visibility: hidden; } footer { display: flex; justify-content: space-between; color: #8fa5b3; font-size: 12px; letter-spacing: .05em; } @media (max-width: 650px) { .page { width: min(100% - 24px, 480px); padding: 18px 0; gap: 18px; } header, .intro { align-items: flex-start; flex-direction: column; gap: 14px; } .status { align-self: stretch; } .pill { flex: 1; text-align: center; } .hint { display: none; } .trip { min-height: 116px; padding: 20px; grid-template-columns: 1fr auto; gap: 12px 16px; } .route { grid-column: 1 / -1; grid-row: 2; gap: 11px; } .tag { grid-column: 2; grid-row: 1; } .arrow { flex: 1; } footer span:last-child { display: none; } } </style> </head> <body> <main class="page"> <header> <div class="brand"> <div class="mark" aria-hidden="true">≈</div> <div> <strong>雨港夜航</strong> <small>Keelung Night Ferry</small> </div> </div> <div class="status" aria-label="目前營運狀態"> <span class="pill">小雨</span> <span class="pill running"><span class="dot"></span>正常行駛</span> </div> </header> <section class="intro" aria-labelledby="schedule-title"> <div> <p class="eyebrow">TONIGHT · 今晚</p> <h1 id="schedule-title">最後三班船</h1> </div> <p class="hint">認清時間與方向,即刻出發。</p> </section> <section class="schedule" aria-label="今晚最後三班渡輪時刻"> <article class="trip"> <time datetime="21:10">21:10</time> <div class="route"> <span>正濱</span><span class="arrow" aria-hidden="true"></span><span>八斗子</span> </div> <span class="tag" aria-hidden="true">末班</span> </article> <article class="trip"> <time datetime="22:05">22:05</time> <div class="route"> <span>八斗子</span><span class="arrow" aria-hidden="true"></span><span>正濱</span> </div> <span class="tag" aria-hidden="true">末班</span> </article> <article class="trip"> <time datetime="23:20">23:20</time> <div class="route"> <span>正濱</span><span class="arrow" aria-hidden="true"></span><span>八斗子</span> </div> <span class="tag">今夜末班</span> </article> </section> <footer> <span>基隆夜間渡輪時刻服務</span> <span>RAIN PORT · NIGHT SAILING</span> </footer> </main> </body> </html> ```
已載入 Skill +3945 tokens · 86076 ms
Design Read:Reading this as: 夜間渡輪服務首頁 for 臨時出發的通勤者, with a 高辨識、低干擾的港口資訊語言, leaning toward 原生 CSS 的公共運輸資訊系統。 設計參數:`DESIGN_VARIANCE: 5`、`MOTION_INTENSITY: 2`、`VISUAL_DENSITY: 5` 精簡方向:班次先於品牌,以超大時間、清楚方向與單一綠色狀態,讓今晚最後三班在首屏完成判讀。 ```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="#101c23"> <title>雨港夜航|今晚最後三班</title> <meta name="description" content="基隆夜間渡輪今晚最後三班:小雨,正常行駛。"> <style> :root { color-scheme: dark; --bg: #101c23; --panel: #16262f; --panel-2: #1b2e38; --text: #f2f5f4; --muted: #a9b7bc; --line: #38505b; --accent: #75d7a0; --accent-ink: #0c2618; --radius: 14px; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { min-height: 100dvh; background: radial-gradient(circle at 88% 10%, rgba(117,215,160,.08), transparent 25rem), linear-gradient(145deg, #13242d 0%, var(--bg) 55%, #0d181e 100%); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; -webkit-font-smoothing: antialiased; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .14; background-image: repeating-linear-gradient( 112deg, transparent 0 18px, rgba(214,231,237,.22) 19px, transparent 20px 43px ); mask-image: linear-gradient(to bottom, #000, transparent 48%); } .shell { width: min(1180px, calc(100% - 40px)); min-height: 100dvh; margin: auto; padding: 22px 0 28px; display: flex; flex-direction: column; position: relative; } header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; } .brand strong { font-size: 1.12rem; letter-spacing: .08em; } .brand span { color: var(--muted); font-size: .82rem; } .service { display: flex; align-items: center; gap: 10px; font-weight: 750; white-space: nowrap; } .status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(117,215,160,.13); } main { flex: 1; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(250px, .72fr); gap: clamp(28px, 6vw, 82px); align-items: center; padding: clamp(34px, 6vh, 68px) 0; } .schedule h1 { margin: 0 0 10px; font-size: clamp(2rem, 5vw, 4.6rem); line-height: .98; letter-spacing: -.055em; } .schedule-intro { margin: 0 0 clamp(26px, 4vh, 42px); color: var(--muted); font-size: clamp(.98rem, 1.4vw, 1.08rem); } .departures { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .departure { display: grid; grid-template-columns: clamp(110px, 18vw, 200px) 1fr auto; align-items: center; gap: clamp(16px, 3vw, 36px); padding: clamp(18px, 3vh, 29px) 0; border-bottom: 1px solid var(--line); } time { font-size: clamp(2.35rem, 6vw, 5.7rem); line-height: .82; font-weight: 800; letter-spacing: -.065em; font-variant-numeric: tabular-nums; } .route { display: flex; align-items: center; min-width: 0; font-size: clamp(1.05rem, 2.2vw, 1.65rem); font-weight: 720; letter-spacing: -.02em; } .arrow { flex: 0 1 64px; min-width: 24px; height: 1px; margin: 0 clamp(10px, 2vw, 22px); background: var(--muted); position: relative; } .arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid var(--muted); border-right: 1px solid var(--muted); transform: rotate(45deg); } .order { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .08em; white-space: nowrap; } .departure:last-child time { color: var(--accent); } .departure:last-child .order { color: var(--accent-ink); background: var(--accent); border-radius: var(--radius); padding: 7px 10px; } aside { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 34px; padding: clamp(22px, 3vw, 34px); border-radius: var(--radius); background: rgba(27,46,56,.78); border: 1px solid var(--line); } .weather-label, .note-label { margin: 0 0 10px; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .1em; } .weather { margin: 0; font-size: clamp(2.3rem, 4vw, 4rem); font-weight: 780; letter-spacing: -.05em; } .weather-note { margin: 10px 0 0; color: var(--muted); line-height: 1.65; } .operation { padding-top: 22px; border-top: 1px solid var(--line); } .operation strong { display: block; color: var(--accent); font-size: 1.25rem; } .operation span { display: block; margin-top: 7px; color: var(--muted); font-size: .88rem; line-height: 1.5; } footer { display: flex; justify-content: space-between; gap: 24px; color: var(--muted); font-size: .78rem; } @media (max-width: 760px) { .shell { width: min(100% - 28px, 620px); } header { min-height: 68px; } .brand span { display: none; } main { grid-template-columns: 1fr; gap: 24px; align-items: start; padding: 32px 0 24px; } .departure { grid-template-columns: 96px 1fr; gap: 14px; } .route { font-size: 1rem; } .order { grid-column: 2; } .arrow { margin: 0 9px; } aside { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 18px; } .operation { padding: 0 0 0 18px; border-top: 0; border-left: 1px solid var(--line); } footer { flex-direction: column; gap: 6px; } } @media (max-width: 390px) { .service { font-size: .86rem; } .departure { grid-template-columns: 82px 1fr; } aside { grid-template-columns: 1fr; } .operation { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); } } @media (prefers-reduced-transparency: reduce) { aside { background: var(--panel-2); } } </style> </head> <body> <div class="shell"> <header> <div class="brand"> <strong>雨港夜航</strong> <span>基隆夜間渡輪</span> </div> <div class="service" aria-label="目前正常行駛"> <span class="status-dot" aria-hidden="true"></span> 正常行駛 </div> </header> <main> <section class="schedule" aria-labelledby="schedule-title"> <h1 id="schedule-title">今晚最後三班</h1> <p class="schedule-intro">依開航時間排序,請提早抵達碼頭。</p> <ol class="departures"> <li class="departure"> <time datetime="21:10">21:10</time> <div class="route"><span>正濱</span><i class="arrow"></i><span>八斗子</span></div> <span class="order">倒數第三班</span> </li> <li class="departure"> <time datetime="22:05">22:05</time> <div class="route"><span>八斗子</span><i class="arrow"></i><span>正濱</span></div> <span class="order">倒數第二班</span> </li> <li class="departure"> <time datetime="23:20">23:20</time> <div class="route"><span>正濱</span><i class="arrow"></i><span>八斗子</span></div> <span class="order">末班船</span> </li> </ol> </section> <aside aria-label="今晚航行資訊"> <div> <p class="weather-label">港區天候</p> <p class="weather">小雨</p> <p class="weather-note">候船時請留意濕滑地面。</p> </div> <div class="operation"> <p class="note-label">航行狀態</p> <strong>正常行駛</strong> <span>三班船皆按表定時間開航。</span> </div> </aside> </main> <footer> <span>雨港夜航</span> <span>正濱碼頭 ⇄ 八斗子碼頭</span> </footer> </div> </body> </html> ```
02
實務題

工業互動設計師作品集

測試問題

為工業互動設計師林映辰設計單頁作品集,受眾是醫療與製造業的設計主管。固定案例:手術室腳踏控制器(降低誤踩 31%)、扭力校準工作台(任務時間縮短 24%)、倉儲穿戴掃描器(手套操作成功率 97%)。頁面要專業、精密但不冷漠,不能使用外部圖片或 JavaScript。請先給一行 Design Read、三項設計參數與字體/色彩/版面策略,再輸出不超過 220 行的完整 HTML/CSS;三個案例不可做成三張等寬通用卡片。

載入前 · 0 個 Skill載入後 · 版本已核對再次確認 · 0 個 Skill已確認模型套用 Skill三個環境皆已清理
未載入 Skill3742 tokens · 72803 ms
Design Read:以「臨床級精度 × 現場同理心」為核心,透過儀器刻度、非對稱案例編排與溫暖紙色,呈現林映辰能把高風險操作轉化為可靠體驗。 設計參數: 1. 字體|系統無襯線字體搭配等寬數據字,建立清晰、可稽核的技術語氣。 2. 色彩|暖白與石墨黑為主,輔以醫療青綠和安全橘,專業但不顯冷峻。 3. 版面|12 欄精密網格;案例分別採主視覺剖面、橫向流程帶與偏移式穿戴模組,避免等寬通用卡片。 ```html <!doctype html> <html lang="zh-Hant"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>林映辰|工業互動設計師</title> <style> :root{ --paper:#f3f1ea;--ink:#18201f;--muted:#66706d; --line:#c9ceca;--teal:#176c65;--orange:#d86b3b;--white:#fbfaf6; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--paper);color:var(--ink); font-family:Inter,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; line-height:1.65; } a{color:inherit;text-decoration:none} .wrap{width:min(1180px,calc(100% - 48px));margin:auto} .mono,.metric strong,.eyebrow,.index{ font-family:"SFMono-Regular",Consolas,monospace;letter-spacing:.04em } nav{ height:76px;display:flex;align-items:center;justify-content:space-between; border-bottom:1px solid var(--line);font-size:13px; } .logo{font-weight:700;letter-spacing:.08em} .navlinks{display:flex;gap:28px;color:var(--muted)} .navlinks a:hover{color:var(--teal)} .hero{ min-height:690px;display:grid;grid-template-columns:7fr 5fr; align-items:center;gap:8%;border-bottom:1px solid var(--line); } .eyebrow{font-size:12px;color:var(--teal);text-transform:uppercase} h1{ margin:24px 0;font-size:clamp(46px,7vw,94px); line-height:.98;letter-spacing:-.065em;font-weight:650; } .lead{max-width:610px;font-size:19px;color:var(--muted)} .hero-note{ align-self:end;margin-bottom:72px;border-top:1px solid var(--ink); padding-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:25px; font-size:13px; } .hero-note span{display:block;color:var(--muted);margin-bottom:5px} .instrument{ aspect-ratio:1;border:1px solid var(--line);border-radius:50%; position:relative;display:grid;place-items:center; background:repeating-conic-gradient(from -2deg,var(--line) 0 1deg,transparent 1deg 10deg); } .instrument:before{ content:"";position:absolute;inset:14%;border-radius:50%;background:var(--paper); border:1px solid var(--line); } .instrument:after{ content:"FIELD / 03";position:relative;font:12px monospace;color:var(--teal); padding:42px 30px;border:1px solid var(--teal);border-radius:50%; } section{padding:110px 0;border-bottom:1px solid var(--line)} .section-head{ display:grid;grid-template-columns:3fr 7fr 2fr;gap:24px; align-items:start;margin-bottom:68px; } .section-head h2{margin:0;font-size:40px;line-height:1.1;letter-spacing:-.04em} .section-head p{margin:0;color:var(--muted)} .index{font-size:12px;color:var(--teal)} .case-title{font-size:clamp(34px,5vw,64px);line-height:1.05;letter-spacing:-.045em;margin:0} .case-copy{color:var(--muted);max-width:610px} .metric{border-left:2px solid var(--orange);padding-left:18px} .metric strong{display:block;font-size:52px;line-height:1;color:var(--orange)} .metric span{font-size:13px;color:var(--muted)} .pedal{display:grid;grid-template-columns:7fr 5fr;gap:7%;align-items:center} .pedal-figure{ min-height:410px;background:var(--ink);position:relative;padding:36px;color:var(--white); display:flex;align-items:end;overflow:hidden; } .pedal-shape{ position:absolute;width:58%;height:46%;left:22%;top:25%; border:2px solid #b7c9c4;border-radius:50% 50% 20% 20%/70% 70% 25% 25%; transform:perspective(500px) rotateX(48deg); } .pedal-shape:before,.pedal-shape:after{ content:"";position:absolute;top:20%;bottom:18%;width:1px;background:#78918c; } .pedal-shape:before{left:33%}.pedal-shape:after{right:33%} .caption{position:relative;font:11px monospace;color:#aebbb7} .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px} .tags span{border:1px solid var(--line);border-radius:20px;padding:5px 11px;font-size:12px} .torque{background:var(--white)} .torque-layout{display:grid;grid-template-columns:4fr 8fr;gap:7%} .timeline{margin-top:65px;border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(4,1fr)} .step{padding:18px 15px 0 0;border-right:1px solid var(--line);min-height:132px} .step:last-child{border-right:0} .step b{display:block;font:12px monospace;color:var(--teal);margin-bottom:10px} .step span{font-size:13px;color:var(--muted)} .torque .metric{margin-top:42px} .wearable{display:grid;grid-template-columns:5fr 7fr;gap:8%;align-items:start} .device{ min-height:520px;border:1px solid var(--line);position:relative; background:linear-gradient(135deg,transparent 49.8%,var(--line) 50%,transparent 50.2%); } .device-body{ position:absolute;width:170px;height:290px;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-12deg); background:var(--ink);border-radius:80px 80px 35px 35px; box-shadow:0 24px 45px #18201f33; } .device-body:before{ content:"SCAN";position:absolute;inset:45px 28px auto;height:72px; border:1px solid #87aaa3;color:#87aaa3;display:grid;place-items:center;font:11px monospace; } .device-body:after{ content:"";position:absolute;width:78px;height:78px;border:2px solid var(--orange); border-radius:50%;left:44px;bottom:42px; } .callout{position:absolute;font:11px monospace;color:var(--muted)} .c1{top:12%;left:7%}.c2{right:6%;bottom:13%} .wearable-copy{padding-top:70px} .wearable-copy .metric{margin:42px 0} .about{display:grid;grid-template-columns:5fr 7fr;gap:8%} .about h2{font-size:50px;line-height:1.05;letter-spacing:-.045em;margin:0} .about p{font-size:18px;margin:0;color:var(--muted)} footer{ min-height:320px;display:flex;align-items:center;justify-content:space-between; } .contact{font-size:clamp(30px,5vw,62px);letter-spacing:-.04em;border-bottom:2px solid var(--ink)} footer small{color:var(--muted);text-align:right} @media(max-width:760px){ .wrap{width:min(100% - 30px,1180px)}.navlinks{display:none} .hero{grid-template-columns:1fr;padding:80px 0}.instrument{width:76%;margin:auto} .hero-note{margin-bottom:35px}.section-head{grid-template-columns:1fr} section{padding:75px 0}.pedal,.torque-layout,.wearable,.about{grid-template-columns:1fr} .pedal-figure{min-height:330px}.timeline{grid-template-columns:1fr 1fr} .step{border-bottom:1px solid var(--line)}.wearable-copy{padding-top:0} footer{align-items:flex-start;justify-content:center;flex-direction:column;gap:40px} footer small{text-align:left} } </style> </head> <body> <header class="wrap"> <nav> <a class="logo" href="#">林映辰 / LIN YING-CHEN</a> <div class="navlinks"><a href="#work">精選案例</a><a href="#about">方法</a><a href="#contact">聯絡</a></div> </nav> <div class="hero"> <div> <div class="eyebrow">Industrial Interaction Designer · Taipei</div> <h1>讓關鍵操作<br>更可靠。</h1> <p class="lead">我設計醫療與製造現場的人機互動,將人體工學、操作回饋與工程限制,整合成能被信任的工作工具。</p> <div class="hero-note"> <div><span>專注領域</span>高風險操作/實體介面</div> <div><span>工作方式</span>研究/原型/現場驗證</div> </div> </div> <div class="instrument" aria-hidden="true"></div> </div> </header> <main id="work"> <section> <div class="wrap"> <div class="section-head"> <span class="index">01 / SURGICAL</span> <h2>從腳下消除<br>不確定性</h2> <p>在視線與雙手都被手術佔用時,腳踏回饋必須比直覺更快。</p> </div> <article class="pedal"> <div class="pedal-figure"> <div class="pedal-shape" aria-hidden="true"></div> <div class="caption">ZONE SEPARATION / TACTILE PROFILE / REV.04</div> </div> <div> <h3 class="case-title">手術室<br>腳踏控制器</h3> <p class="case-copy">透過足部動作觀察與模擬手術測試,重新定義踏板間距、阻力曲線及無視覺辨識特徵。</p> <div class="metric"><strong>−31%</strong><span>誤踩事件</span></div> <div class="tags"><span>情境研究</span><span>人體工學</span><span>可用性驗證</span></div> </div> </article> </div> </section> <section class="torque"> <div class="wrap"> <article class="torque-layout"> <div><span class="index">02 / CALIBRATION</span></div> <div> <h3 class="case-title">扭力校準工作台</h3> <p class="case-copy">把分散的讀值、工具與確認步驟收束到單一工作軸線,降低技師在設備與紀錄之間切換的成本。</p> <div class="metric"><strong>−24%</strong><span>單次校準任務時間</span></div> </div> </article> <div class="timeline" aria-label="校準流程"> <div class="step"><b>01 / IDENTIFY</b><span>自動辨識工具與規格</span></div> <div class="step"><b>02 / POSITION</b><span>治具導引與防錯定位</span></div> <div class="step"><b>03 / CALIBRATE</b><span>即時呈現偏差趨勢</span></div> <div class="step"><b>04 / RECORD</b><span>確認後同步生成紀錄</span></div> </div> </div> </section> <section> <div class="wrap"> <article class="wearable"> <div class="device" aria-hidden="true"> <span class="callout c1">GLOVE CLEARANCE / 14 MM</span> <div class="device-body"></div> <span class="callout c2">TRIGGER FORCE / 2.8 N</span> </div> <div class="wearable-copy"> <span class="index">03 / LOGISTICS</span> <h3 class="case-title">倉儲穿戴<br>掃描器</h3> <div class="metric"><strong>97%</strong><span>戴手套操作成功率</span></div> <p class="case-copy">以冬季手套與連續揀貨為測試基準,調整觸發面積、按壓行程和震動回饋,讓操作確認不再依賴螢幕。</p> <div class="tags"><span>穿戴互動</span><span>觸覺回饋</span><span>現場測試</span></div> </div> </article> </div> </section> <section id="about"> <div class="wrap about"> <h2>精密來自<br>理解現場。</h2> <p>林映辰擅長進入受規範、高負荷的工作環境,從動作、認知與系統限制中找出設計槓桿。每個決策都透過可操作原型與量化指標驗證,同時保留對使用者感受的敏銳度。</p> </div> </section> </main> <footer class="wrap" id="contact"> <a class="contact" href="mailto:hello@linyingchen.design">談一個關鍵操作 ↗</a> <small>林映辰|工業互動設計師<br>醫療設備 · 製造系統 · 人機介面</small> </footer> </body> </html> ```
已載入 Skill +5099 tokens · 101764 ms
Design Read: Reading this as: 單人工業互動設計師作品集,面向醫療與製造業設計主管,以克制、精密且有人性溫度的工業編輯語言,採原生 HTML/CSS 與非對稱工程版面。 設計參數:`DESIGN_VARIANCE: 7`、`MOTION_INTENSITY: 3`、`VISUAL_DENSITY: 5` 字體/色彩/版面策略:採系統無襯線字體搭配等寬數字;冷灰底、石墨文字與單一安全橘重點色,支援系統深色模式;以全幅主案例、錯位雙案例與工程圖式 CSS 視覺建立層級,不使用外部圖片、JavaScript 或等寬通用卡片。 ```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="林映辰,專注醫療與製造現場的人因與工業互動設計師。"> <title>林映辰|工業互動設計</title> <style> :root{ color-scheme:light dark; --bg:#eef0ef; --surface:#e3e6e4; --ink:#1c2221; --muted:#5c6663; --line:#b9c0bd; --accent:#bd512d; --accent-ink:#f8f4f1; --shadow:rgba(27,42,38,.12); --max:1240px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--ink); font-family:ui-sans-serif,system-ui,-apple-system,"PingFang TC","Noto Sans TC",sans-serif; line-height:1.65; text-rendering:optimizeLegibility; } a{color:inherit} a:focus-visible{outline:3px solid var(--accent);outline-offset:4px} .shell{width:min(calc(100% - 48px),var(--max));margin-inline:auto} nav{ min-height:68px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand{font-weight:760;letter-spacing:-.02em;text-decoration:none;white-space:nowrap} .nav-links{display:flex;gap:28px;font-size:.84rem} .nav-links a{text-decoration:none} .nav-links a:hover{color:var(--accent)} .hero{ min-height:calc(100dvh - 69px); display:grid; grid-template-columns:minmax(0,7fr) minmax(300px,5fr); align-items:center; gap:7vw; padding-block:72px; } .eyebrow{ margin:0 0 22px; font:700 .72rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); } h1{ max-width:760px; margin:0; font-size:clamp(3.2rem,7.2vw,7rem); line-height:.96; letter-spacing:-.075em; font-weight:740; } .hero-copy{max-width:480px;margin:28px 0 0;color:var(--muted);font-size:1.08rem} .hero-link{ display:inline-block; margin-top:34px; padding:12px 18px; border:1px solid var(--ink); text-decoration:none; font-weight:700; white-space:nowrap; transition:transform .18s ease,background .18s ease,color .18s ease; } .hero-link:hover{background:var(--ink);color:var(--bg)} .hero-link:active{transform:translateY(1px)} .instrument{ position:relative; min-height:440px; border-left:1px solid var(--line); background:repeating-linear-gradient(0deg,transparent 0 39px,var(--line) 40px); } .instrument::before{ content:""; position:absolute; width:58%; aspect-ratio:1; top:13%; left:20%; border:2px solid var(--ink); border-radius:50%; box-shadow:inset 0 0 0 22px var(--surface),inset 0 0 0 24px var(--line); } .instrument::after{ content:"31 / 24 / 97"; position:absolute; right:0; bottom:0; padding:8px 0 8px 14px; background:var(--accent); color:var(--accent-ink); font:700 .75rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; } .intro{padding:112px 0 68px} .intro h2{ max-width:840px; margin:0; font-size:clamp(2rem,4.4vw,4rem); line-height:1.08; letter-spacing:-.045em; } .intro p{max-width:620px;margin:24px 0 0;color:var(--muted)} .case{border-top:1px solid var(--ink)} .case-head{display:flex;justify-content:space-between;gap:24px;padding:20px 0 32px} .case-type{font-size:.8rem;color:var(--muted)} .metric{ margin:0; font:700 clamp(3.7rem,8vw,7.5rem)/.8 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:-.09em; color:var(--accent); } .metric small{font-size:.18em;letter-spacing:.06em} .case h3{margin:0;font-size:clamp(1.8rem,3vw,3.1rem);line-height:1.08;letter-spacing:-.04em} .case p{color:var(--muted)} .case-main{ display:grid; grid-template-columns:5fr 7fr; gap:6vw; padding-bottom:112px; } .case-copy{display:flex;flex-direction:column;justify-content:space-between;gap:52px} .details{display:grid;grid-template-columns:1fr 1fr;gap:24px} .details strong{display:block;margin-bottom:7px;font-size:.78rem} .diagram{ min-height:520px; position:relative; overflow:hidden; background:var(--surface); box-shadow:0 18px 50px var(--shadow); } .pedal-shape{ position:absolute; width:56%; height:64%; left:22%; top:18%; border:2px solid var(--ink); border-radius:48% 48% 18% 18% / 28% 28% 14% 14%; transform:perspective(700px) rotateX(22deg); } .pedal-shape::before{ content:""; position:absolute; inset:14%; border:1px solid var(--line); background:repeating-linear-gradient(90deg,transparent 0 18px,var(--line) 19px); } .pedal-shape::after{ content:"觸覺分區"; position:absolute; right:-18%; bottom:11%; padding:6px 9px; background:var(--accent); color:var(--accent-ink); font-size:.72rem; } .case-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(260px,4fr); align-items:start; gap:8vw; padding-bottom:120px; } .case-secondary{padding-top:22px} .case-secondary .metric{margin:42px 0 26px} .torque-visual{ height:280px; margin-top:38px; position:relative; background:repeating-linear-gradient(90deg,var(--surface) 0 31px,var(--line) 32px); border-bottom:10px solid var(--ink); } .torque-visual::after{ content:""; position:absolute; width:42%; height:58%; left:29%; bottom:0; border:2px solid var(--ink); background:var(--bg); } .case-tertiary{margin-top:180px;padding:22px 0 0} .case-tertiary .metric{font-size:clamp(3.2rem,6vw,5.6rem);margin:38px 0 22px} .wearable-mark{ width:132px; aspect-ratio:1; margin:44px 0 0 auto; border:18px solid var(--surface); outline:2px solid var(--ink); border-radius:50%; position:relative; } .wearable-mark::after{ content:""; position:absolute; inset:27%; background:var(--accent); border-radius:50%; } .contact{ display:grid; grid-template-columns:7fr 5fr; gap:6vw; padding:92px 0; border-top:1px solid var(--ink); } .contact h2{margin:0;font-size:clamp(2.5rem,5vw,5rem);line-height:1;letter-spacing:-.055em} .contact p{margin:0 0 28px;color:var(--muted)} .contact a{font-weight:750;text-decoration-thickness:2px;text-underline-offset:6px} footer{display:flex;justify-content:space-between;padding:22px 0 36px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)} @media(prefers-color-scheme:dark){ :root{--bg:#171b1a;--surface:#222826;--ink:#e6e9e7;--muted:#abb4b0;--line:#46504c;--accent:#df7049;--accent-ink:#171b1a;--shadow:rgba(0,0,0,.22)} } @media(max-width:767px){ .shell{width:min(calc(100% - 32px),var(--max))} .nav-links{gap:14px;font-size:.75rem} .hero{grid-template-columns:1fr;gap:48px;padding-block:52px} .instrument{min-height:300px;border-left:0;border-top:1px solid var(--line)} .intro{padding:80px 0 52px} .case-head{align-items:flex-end} .case-main,.case-grid,.contact{grid-template-columns:1fr} .case-main{gap:42px;padding-bottom:88px} .diagram{min-height:390px;order:-1} .case-grid{gap:80px;padding-bottom:88px} .case-tertiary{margin-top:0} .contact{gap:36px;padding:72px 0} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} } </style> </head> <body> <header class="shell"> <nav aria-label="主要導覽"> <a class="brand" href="#">林映辰</a> <div class="nav-links"> <a href="#work">案例</a> <a href="#contact">聯絡</a> </div> </nav> </header> <main> <section class="hero shell"> <div> <p class="eyebrow">Industrial interaction design</p> <h1>讓關鍵操作<br>更確定。</h1> <p class="hero-copy">我設計醫療與製造現場中,能被看懂、摸懂並可靠執行的實體互動。</p> <a class="hero-link" href="#work">查看案例</a> </div> <div class="instrument" aria-hidden="true"></div> </section> <section class="intro shell" id="work"> <h2>把人因證據轉成可製造、可驗證的操作決策。</h2> <p>從情境研究、操作架構到原型驗證,讓設計團隊能在安全、效率與工程限制之間做出清楚選擇。</p> </section> <article class="case shell"> <div class="case-head"><span class="case-type">醫療設備|人因與實體控制</span><span>手術室</span></div> <div class="case-main"> <div class="case-copy"> <div> <h3>手術室腳踏控制器</h3> <p>重新劃分腳部定位、觸覺邊界與控制阻力,讓術者不必離開手術視野確認踏板。</p> </div> <div class="details"> <div><strong>設計焦點</strong>盲操作辨識</div> <div><strong>驗證結果</strong>誤踩降低</div> </div> <p class="metric">31<small>%</small></p> </div> <div class="diagram" role="img" aria-label="腳踏控制器的觸覺分區示意"> <div class="pedal-shape"></div> </div> </div> </article> <section class="case-grid shell"> <article class="case case-secondary"> <div class="case-head"><span class="case-type">精密製造|工作站流程</span><span>校準</span></div> <h3>扭力校準工作台</h3> <p>依操作順序重組工具、讀值與工件位置,減少轉身、搜尋與重複確認。</p> <p class="metric">24<small>%</small></p> <p>任務時間縮短</p> <div class="torque-visual" aria-hidden="true"></div> </article> <article class="case case-tertiary"> <div class="case-head"><span class="case-type">物流作業|穿戴互動</span><span>掃描</span></div> <h3>倉儲穿戴掃描器</h3> <p>放大可觸辨的操作區域,調整回饋時機,使厚手套下的觸發仍然明確。</p> <p class="metric">97<small>%</small></p> <p>手套操作成功率</p> <div class="wearable-mark" aria-hidden="true"></div> </article> </section> <section class="contact shell" id="contact"> <h2>一起改善<br>關鍵操作。</h2> <div> <p>適合醫療設備、工業工具與工作站系統的前期定義、原型驗證及跨部門設計協作。</p> <a href="mailto:hello@yingchen.design">hello@yingchen.design</a> </div> </section> </main> <footer class="shell"><span>林映辰|工業互動設計師</span><span>人因研究・實體互動・設計驗證</span></footer> </body> </html> ```
03
壓力題

公共服務頁保守改版

測試問題

請改版『海岸災害通報』公共服務首頁。現況是白底、深藍導覽列、單欄內容;必須保留導覽名稱『最新警報/避難地圖/通報災情』、主標『先確認安全,再回報現場』、電話 119 與既有法律文字『資料僅供防災應變參考』。受眾含高齡者,唯一主要操作是『回報災情』。請先做精簡 redesign audit,選擇保守演進或全面重做並說明原因,再給一行 Design Read、三項參數,最後輸出不超過 220 行的完整 HTML/CSS;不得改寫固定文案、使用外部圖片或 JavaScript,焦點與對比需清楚。

載入前 · 0 個 Skill載入後 · 版本已核對再次確認 · 0 個 Skill已確認模型套用 Skill三個環境皆已清理
未載入 Skill2859 tokens · 56270 ms
精簡 redesign audit:選擇「保守演進」。公共防災服務與高齡使用者需要熟悉、低學習成本的資訊架構;保留白底與深藍識別,改以更大字級、明確層級、充足留白及單一高辨識主操作提升緊急情境下的可讀性。 Design Read:沉穩可信的海岸防災入口,以清楚警示、直接聯絡與唯一主操作縮短決策時間。 參數:基準字級 18px|內容最大寬度 1120px|主操作最小高度 64px ```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="海岸災害通報公共服務首頁"> <title>海岸災害通報</title> <style> :root { --navy: #082f49; --navy-dark: #052337; --blue: #075985; --red: #b42318; --red-dark: #8f1c13; --red-soft: #fff1ef; --ink: #17212b; --muted: #4b5b68; --line: #c9d5dc; --surface: #f3f7f9; --white: #fff; --focus: #ffbf47; --radius: 16px; --shadow: 0 10px 28px rgba(8, 47, 73, .12); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--white); color: var(--ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif; font-size: 18px; line-height: 1.65; } a { color: inherit; } a:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; border-radius: 4px; } .skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 10px 16px; background: var(--focus); color: #111; font-weight: 800; transform: translateY(-160%); } .skip-link:focus { transform: translateY(0); } .site-header { background: var(--navy); color: var(--white); } .header-inner, main, .footer-inner { width: min(1120px, calc(100% - 40px)); margin-inline: auto; } .header-inner { display: flex; min-height: 92px; align-items: center; justify-content: space-between; gap: 28px; } .brand { margin: 0; font-size: 1.35rem; font-weight: 900; letter-spacing: .04em; white-space: nowrap; } nav ul { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; } nav a { display: inline-block; padding: 12px 2px; font-weight: 750; text-decoration-thickness: 2px; text-underline-offset: 6px; } nav a:hover { text-decoration: underline; } main { padding-block: 64px 72px; } .hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 48px; align-items: center; } .eyebrow { margin: 0 0 12px; color: var(--blue); font-size: .94rem; font-weight: 850; letter-spacing: .12em; } h1 { max-width: 13em; margin: 0; color: var(--navy-dark); font-size: clamp(2.25rem, 5vw, 4.4rem); line-height: 1.15; letter-spacing: -.035em; } .intro { max-width: 34em; margin: 24px 0 0; color: var(--muted); font-size: 1.15rem; } .report-button { display: inline-flex; min-height: 64px; align-items: center; justify-content: center; margin-top: 32px; padding: 14px 34px; border: 3px solid var(--red); border-radius: 12px; background: var(--red); color: var(--white); box-shadow: 0 6px 0 var(--red-dark); font-size: 1.25rem; font-weight: 900; text-decoration: none; } .report-button:hover { background: var(--red-dark); border-color: var(--red-dark); } .report-button:active { box-shadow: none; transform: translateY(4px); } .emergency-card { padding: 28px; border: 2px solid #e6aaa4; border-radius: var(--radius); background: var(--red-soft); box-shadow: var(--shadow); } .emergency-card p { margin: 0; font-weight: 800; } .phone { display: inline-block; margin-top: 4px; color: var(--red-dark); font-size: clamp(3rem, 8vw, 5rem); font-weight: 950; line-height: 1.1; text-decoration-thickness: 5px; text-underline-offset: 7px; } .steps { margin-top: 68px; padding: 36px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .steps h2 { margin: 0 0 24px; color: var(--navy-dark); font-size: 1.55rem; } .steps ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: steps; } .steps li { position: relative; padding: 58px 0 0; font-weight: 750; counter-increment: steps; } .steps li::before { position: absolute; top: 0; left: 0; display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: var(--navy); color: var(--white); content: counter(steps); font-size: 1.1rem; font-weight: 900; } footer { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); } .footer-inner { padding-block: 26px; } .footer-inner p { margin: 0; font-size: .95rem; font-weight: 650; } @media (max-width: 760px) { .header-inner { align-items: flex-start; flex-direction: column; gap: 4px; padding-block: 20px; } nav ul { gap: 2px 20px; } .hero { grid-template-columns: 1fr; gap: 36px; } main { padding-block: 44px 56px; } .report-button { width: 100%; } .steps { padding: 28px 24px; } .steps ol { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .report-button:active { transform: none; } } </style> </head> <body> <a class="skip-link" href="#main">跳至主要內容</a> <header class="site-header"> <div class="header-inner"> <p class="brand">海岸災害通報</p> <nav aria-label="主要導覽"> <ul> <li><a href="/alerts">最新警報</a></li> <li><a href="/map">避難地圖</a></li> <li><a href="/report">通報災情</a></li> </ul> </nav> </div> </header> <main id="main"> <section class="hero" aria-labelledby="page-title"> <div> <p class="eyebrow">海岸防災公共服務</p> <h1 id="page-title">先確認安全,再回報現場</h1> <p class="intro"> 請先遠離海岸、低窪地區與受損設施,確認自身安全後再提供現場資訊。 </p> <a class="report-button" href="/report">回報災情</a> </div> <aside class="emergency-card" aria-label="緊急聯絡"> <p>如有人員受傷或立即危險,請撥打</p> <a class="phone" href="tel:119" aria-label="撥打 119">119</a> </aside> </section> <section class="steps" aria-labelledby="steps-title"> <h2 id="steps-title">通報前請先確認</h2> <ol> <li>移動到安全且穩固的位置</li> <li>避免靠近浪區、積水與電線</li> <li>記下地點、時間與現場狀況</li> </ol> </section> </main> <footer> <div class="footer-inner"> <p>資料僅供防災應變參考</p> </div> </footer> </body> </html> ```
已載入 Skill +3702 tokens · 79581 ms
### 精簡 redesign audit - 現況優點:深藍導覽具公共服務辨識度,單欄架構容易理解,既有資訊架構與固定文案應完整保留。 - 主要問題:白底內容缺乏層級,緊急電話與主要操作不夠醒目;高齡使用者需要更大的文字、觸控區與明確焦點。 - 決策:採「保守演進」。既有資訊架構清楚且涉及防災信任、使用習慣與法律文字,不宜全面重做;改以版面層級、對比、字級與操作辨識度提升安全性。 **Design Read:**將此視為面向高齡者與一般民眾的公共防災服務首頁,以可信、直接、低認知負擔的語言,採原生 CSS 與政府服務設計原則。 **DESIGN_VARIANCE:3** **MOTION_INTENSITY:2** **VISUAL_DENSITY:5** ```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="海岸災害通報公共服務"> <title>海岸災害通報</title> <style> :root{ color-scheme:light dark; --navy:#063a63; --navy-deep:#032b4b; --accent:#d9472b; --accent-hover:#b9321c; --paper:#f4f7f9; --surface:#fff; --text:#17232c; --muted:#465864; --line:#b9c6ce; --focus:#ffbf47; --radius:12px; --shadow:0 12px 30px rgba(3,43,75,.12); } *{box-sizing:border-box} html{font-size:100%;scroll-behavior:smooth} body{ margin:0; min-width:320px; background:var(--paper); color:var(--text); font-family: system-ui,-apple-system,"Segoe UI","Noto Sans TC", "PingFang TC","Microsoft JhengHei",sans-serif; font-size:1.125rem; line-height:1.7; } a{color:inherit} .skip-link{ position:absolute; top:8px; left:8px; z-index:2; padding:10px 16px; background:var(--focus); color:#17232c; font-weight:800; border-radius:var(--radius); transform:translateY(-150%); } .skip-link:focus{transform:none} .site-header{ background:var(--navy); color:#f9fbfc; border-bottom:5px solid var(--focus); } .nav-wrap{ width:min(1120px,calc(100% - 32px)); min-height:76px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:28px; } .brand{ flex:none; font-size:1.25rem; font-weight:900; letter-spacing:.04em; text-decoration:none; } nav ul{ display:flex; align-items:center; gap:4px; margin:0; padding:0; list-style:none; } nav a{ display:block; min-height:48px; padding:10px 15px; font-weight:750; text-underline-offset:5px; } nav a:hover{text-decoration-thickness:3px} main{min-height:calc(100dvh - 160px)} .hero{ width:min(1120px,calc(100% - 32px)); margin:auto; padding:clamp(42px,7vw,84px) 0 64px; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(270px,.6fr); gap:clamp(30px,6vw,72px); align-items:center; } .hero-copy{max-width:720px} .kicker{ margin:0 0 12px; color:var(--navy); font-size:1rem; font-weight:850; } h1{ max-width:12em; margin:0; color:var(--navy-deep); font-size:clamp(2.35rem,6vw,4.75rem); line-height:1.12; letter-spacing:-.035em; } .intro{ max-width:34em; margin:24px 0 30px; color:var(--muted); font-size:clamp(1.125rem,2vw,1.35rem); } .primary-action{ display:inline-flex; min-width:220px; min-height:64px; align-items:center; justify-content:center; padding:14px 28px; border:3px solid var(--accent); border-radius:var(--radius); background:var(--accent); color:#fff; font-size:1.35rem; font-weight:900; text-decoration:none; box-shadow:var(--shadow); } .primary-action:hover{ border-color:var(--accent-hover); background:var(--accent-hover); } .primary-action:active{transform:translateY(1px)} .emergency{ padding:28px; border:2px solid var(--navy); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); } .emergency h2{ margin:0 0 6px; color:var(--navy-deep); font-size:1.2rem; } .phone{ display:inline-block; margin:0 0 8px; color:var(--accent-hover); font-size:clamp(3rem,8vw,4.75rem); font-weight:950; line-height:1; letter-spacing:.02em; text-decoration-thickness:5px; text-underline-offset:7px; } .emergency p{margin:10px 0 0;color:var(--muted)} .guide{ background:var(--surface); border-top:1px solid var(--line); } .guide-inner{ width:min(1120px,calc(100% - 32px)); margin:auto; padding:38px 0 44px; } .guide h2{ margin:0 0 20px; color:var(--navy-deep); font-size:clamp(1.5rem,3vw,2rem); } .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:0; padding:0; list-style:none; counter-reset:steps; } .steps li{ counter-increment:steps; padding-left:58px; position:relative; font-weight:750; } .steps li::before{ content:counter(steps); position:absolute; top:0; left:0; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--navy); color:#fff; font-weight:900; } footer{ padding:24px 16px; background:var(--navy-deep); color:#f9fbfc; text-align:center; } footer p{margin:0;font-weight:700} :focus-visible{ outline:4px solid var(--focus); outline-offset:4px; } @media (max-width:760px){ .nav-wrap{ padding:14px 0 16px; align-items:flex-start; flex-direction:column; gap:8px; } nav{width:100%;overflow-x:auto} nav ul{width:max-content} nav a{padding-inline:12px} .hero{ grid-template-columns:1fr; padding-top:42px; } .primary-action{width:100%} .steps{grid-template-columns:1fr;gap:28px} } @media (prefers-color-scheme:dark){ :root{ --paper:#101a21; --surface:#172630; --text:#f0f4f6; --muted:#c8d4da; --line:#50636e; --navy:#064e7c; --navy-deep:#082f49; --accent:#d9472b; --accent-hover:#f0654b; } h1,.kicker,.emergency h2,.guide h2{color:#f0f4f6} .phone{color:#ff846d} .emergency{border-color:#80aeca} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} } </style> </head> <body> <a class="skip-link" href="#main">跳至主要內容</a> <header class="site-header"> <div class="nav-wrap"> <a class="brand" href="#" aria-label="海岸災害通報首頁">海岸災害通報</a> <nav aria-label="主要導覽"> <ul> <li><a href="#alerts">最新警報</a></li> <li><a href="#map">避難地圖</a></li> <li><a href="#report">通報災情</a></li> </ul> </nav> </div> </header> <main id="main"> <section class="hero" aria-labelledby="page-title"> <div class="hero-copy"> <p class="kicker">海岸災害通報</p> <h1 id="page-title">先確認安全,再回報現場</h1> <p class="intro">請先遠離危險區域。確認自身安全後,再提供災害位置與現場狀況。</p> <a class="primary-action" id="report" href="/report">回報災情</a> </div> <aside class="emergency" aria-labelledby="emergency-title"> <h2 id="emergency-title">情況緊急,立即撥打</h2> <a class="phone" href="tel:119" aria-label="撥打 119">119</a> <p>人員受困、受傷或有立即危險時,請優先通報。</p> </aside> </section> <section class="guide" aria-labelledby="guide-title"> <div class="guide-inner"> <h2 id="guide-title">安全通報順序</h2> <ol class="steps"> <li>遠離海岸與受災區域</li> <li>確認自己與同行者安全</li> <li>回報位置及現場狀況</li> </ol> <span id="alerts" hidden></span> <span id="map" hidden></span> </div> </section> </main> <footer> <p>資料僅供防災應變參考</p> </footer> </body> </html> ```
測試紀錄

這次測試記錄了什麼?

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

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

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