網站簽名
你正在協助某人重新設計他的個人網站。目標成果是：一個在任何其他地方都看不到的首屏畫面，以及一個在小型手機、筆記型電腦、21:9 螢幕和電視上都表現得恰到好處的頁面。
這個 skill 描述了一種決策方式。它不提供任何模板、調色盤或現成場景：所有這些都來自於使用者本人及其內容。
如何決策
四個選擇，按此順序進行，每個選擇都需要在使用者進入下一個之前獲得確認。
- 內容優先。 我們閱讀網站已有的內容，並找出其獨特之處：一句話、一個數字、一段經歷、一個其他網站沒有的區塊。重新設計會給予這些獨特之處更大的空間。
- 一個源自於他生活的場景。 一個使用者非常熟悉的場所、物件或現象，以單一圖形素材呈現為一種氛圍（一個時刻、一種光線、一種深度）。
- 場景中的一個真實數據。 某個經過計算或測量的東西，在你觀看的當下是精確的。正是這個細節讓使用者願意再次造訪。
- 使用範圍，而非固定數值。 每個尺寸都有一個最小值與最大值，頁面會根據其形狀（窄、寬、矮）做出反應。
數字用來排定問題的優先級。由使用者觀看的螢幕截圖則是最終的決定依據。
檔案
references/decouverte.md：識別技術棧、評估現有網站、記錄要保留的內容。務必優先執行。references/scene.md：與使用者一同尋找場景並建構它。references/responsive.md：所有螢幕上的版面與渲染規則。scripts/check-viewports.mjs：將一個 URL 以十種螢幕尺寸進行測試，輸出可測量的缺陷以及每種尺寸的截圖。
如果已安裝 ai-patterns-audit 這個 skill，請在撰寫前端程式碼之前閱讀其 references/regles.md，並在最後執行其審計。
執行流程
- 探索：技術棧、儲存庫結構、開發與部署指令、需要保留的現有功能（參考
references/decouverte.md）。 - 在觸碰任何程式碼前先測量：在線上網站或本地伺服器上執行腳本，並將截圖保存為起點。向使用者總結網站已經做得好與阻礙其發展的部分，並附上數據佐證。
- 找到場景：逐條提問
references/scene.md中的問題，一條一則訊息。然後提出三個方向，每個方向用兩句話說明。在使用者做出選擇前不要撰寫任何程式碼。如果網站已經有屬於自己的場景，請保留它：用四個條件和同一份檔案中的繪圖規則來審視它，只修正缺少的部分（直向裁切、真實數據、離螢幕暫停）。 - 建立首頁：全螢幕場景、姓名、兩句話、連結。其餘內容從首屏下方開始。
- 逐區塊處理頁面其餘部分，參考
references/responsive.md。 - 驗證：在本地伺服器上執行腳本，逐一檢視截圖，然後只用鍵盤導航，最後是減少動態效果模式。展示截圖，由使用者以肉眼判斷。
未經同意不得變動的項目
- 使用者的文字內容。我們可以移動它們並調整層級；重新改寫需要經過請求。
- 數字：必須精確，從不四捨五入或誇大。
- 已經正常運作的部分：語言、淺色與深色主題、表單、網站分析及其同意機制、RSS 訂閱源、API 路由、SEO。
- 已有的技術棧。除非使用者要求，否則不進行更換。
我們禁止做的事
- 抄襲其他網站的場景，即使是備受推崇的網站。任何看似知名參考範例的方向都會被排除。
- 對於專案或文章列表使用統一的卡片網格。每個條目都應該像精心編排的文字一樣被閱讀：大數字或年份、標題、一行結論。
- 在每個區塊上方使用大寫字母且字距較寬的標籤。一個畫面最多只能有一個，且只有在它承載資訊時才能使用。
- 每個區塊都使用相同的淡入上移動畫、懸浮升起效果、脈動光暈效果。
- 在場景之外使用漸層或裝飾性光暈。
- 為場景引入重量級依賴。一個 2D canvas 或一段簡短的著色器程式碼就足夠了；只有在所選方向確實需要立體體積時，才使用 3D 函式庫。
- 在使用者要求之前進行提交、推送或部署。
完成條件
- 腳本在十種尺寸上都沒有報告任何水平溢出問題。
- 在 2560 與 3840 px 寬度下，場景佔滿整個螢幕，且文字保持可讀的行長。
- 在 375 px 寬度下，姓名與標題文字無需滾動即可閱讀，即使可能的橫幅區域已開啟。
- 在
prefers-reduced-motion模式下，場景顯示為一張完整的靜態圖片。 - 在沒有 JavaScript 的情況下，首屏顯示姓名、標題和連結。
- 僅場景本身（不含文字）的截圖可以作為桌布使用。
- 使用者已檢視過截圖，並認出其網站。