badmuriss/極美網站

極美網站 是做什麼的？

一個關於網站視覺與技術決策的單一事實來源，讓網站看起來像是真實產品團隊所交付的，而不是語言模型猜測的「現代簡潔」。

與 $refero-design 的協調

當 $refero-design 可用時，請先載入它，並讓它負責視覺研究、Refero 工具路由、綜合分析、參考鎖定和決策記錄。在此鎖定之後，使用此技能來負責實作限制：既有系統範圍、表面模式、框架選擇、空間與互動工藝、響應式行為、反樣板檢查和渲染驗證。

順序是固定的：

1. $refero-design 根據任務比例研究風格、螢幕和流程。
2. $refero-design 選擇一個主要方向，並記錄有限的次要影響。
3. 此技能將批准的鎖定轉換為方向合約和生產級 UI。
4. 此技能根據鎖定和支援的平台驗證渲染結果。

不要讓兩個技能作為競爭的品味權威同時運行。Refero 提供產品和視覺證據。此技能提供前端執行紀律。如果 Refero MCP 不可用，$refero-design 會使用其內建的回退方案，然後此技能從產生的鎖定繼續。

預設框架是 React (Vite / Next / vite-react-ssg)。Astro、Vue 和 vanilla CSS/JS 也是一等公民；框架特定的慣用寫法位於 framework-adapters.md。如果未指定，則假設為 React。當既有技術是 Astro 或需求需要 EmDash 時，請保留伺服器渲染並預設使用 Astro 元件，僅在互動真正需要時才添加框架島嶼。

如何使用

0. 閱讀 direction-workflow.md。解決既有系統的真實狀況，然後設定 CHANGE_SCOPE 和 SURFACE_MODE。
1. 根據範圍進行研究。對於 world，完整研究是強制性的；local 繼承周圍的表面。
2. 使用 專案類型預設（第 1 節）來校準領域限制和技術成本，而不是選擇美學。
3. 從證據中推導方向。將氛圍和佈局原型作為詞彙和挑戰者，絕不是必需的選單。
4. 在編寫程式碼之前記錄方向合約，然後從頭開始構建每個部分。
5. 應用間距、動畫、狀態、響應性和無障礙的技術參考。
6. 根據第 14 節和第 13 節的 AI 跡象進行自我審查，然後完成有範圍限制的視覺檢查。

參考文件：

• direction-workflow.md — 目標上下文、CHANGE_SCOPE、SURFACE_MODE、方向合約、合成閘門、有限完成
• foundations.md — 英雄區字型、視口高度、動畫屬性、眉毛和既有系統優先級的權威限制
• spatial-design.md — 4pt 尺寸系統、層級、容器查詢
• motion-design.md — 緩動、持續時間、減少動畫、過渡模式目錄
• interaction-design.md — 8 種狀態、focus-visible、彈出視窗、模態框
• laws-of-ux.md — 帶有名稱研究的構圖啟發法：Hick、Miller、Fitts、Von Restorff、峰終定律、Jakob、認知負荷
• form-validation.md — 驗證時機、輸入狀態機、:user-invalid、錯誤摘要、schema 作為跨堆疊合約
• responsive-design.md — 行動優先、指標查詢、安全區域、srcset
• framework-adapters.md — React / Vue / vanilla 在動畫、狀態、水合方面的等效寫法
• component-libs.md — (僅限 React) 複製貼上的動畫元件：Magic UI、React Bits、透過 shadcn registry 的動畫 Lucide 圖示
• scroll-motion.md — (第 3 層) GSAP ScrollTrigger + Lenis 平滑滾動，附帶效能/無障礙護欄
• design-references.md — (研究，免費) 無 Refero 的研究層：讀取即時網站的真實 Token、DESIGN.md 包、免費圖庫、公開設計系統，以及一個「領域 → 參考資料庫」
• media-pipeline.md — 免費圖庫攝影 (Pexels/Unsplash/Pixabay/公有領域，附帶按來源的託管規則) + Magnific 的授權目錄 (透過 REST) + 生成的靜態影像 (透過兩個對等通道：$image-gen / Magnific MCP)、去背路徑，+ (第 3 層，成本控管) 透過 Magnific 從影像生成影片，附帶 <video> 配方
• style-interview.md — (訪談模式) 何時向使用者詢問方向、回合腳本、如何從研究中建立候選方案，而不是將原型列表作為選單提供
• redesign.md : (重新設計模式) 掃描、診斷、修復；模式檢測 (全新 / 保留 / 全面改版)；什麼永遠不會被悄悄更改
• conversion-diagnosis.md — (登陸頁面) 文案前的交付閘門，以及十層獲取和轉換診斷

此處不審查 SEO、無障礙分數和 Core Web Vitals。 此技能負責構建；對即時 URL 的驗證屬於 site-audit 技能，它負責頁面內 SEO 規則 (標題、meta、canonical、OG、schema、robots、sitemap)、AEO/GEO 層、axe-core 運行和 CWV 預算。按照第 14 節的預檢要求構建，然後將 site-audit 指向已部署的 URL。

在改寫文案之前，先診斷即時登陸頁面。 閱讀 conversion-diagnosis.md，在真實用戶瀏覽器設定檔和渲染的 Googlebot 設定檔中打開已部署的頁面，並確定兩者是否都能接收正常運作的頁面。損壞的腳本、緩慢的首屏、被封鎖的爬蟲、失效的 CTA 或無法使用的表單，其優先級高於文案潤飾。SEO 贏得訪問；而交付的體驗必須將其轉化為潛在客戶。

---

兩種模式：自主（預設）vs 訪談

自主（預設）： 根據你已有的上下文以及從預設中得出的合理假設進行工作。不要問使用者任何問題。缺少細節？假設最可能的值，用一行記錄該假設，然後繼續。當迴路中沒有人類時，這是唯一安全的模式。

訪談： 當呼叫明確要求時觸發 (--interview、"modo entrevista"、"ask me which style")，或者當 CHANGE_SCOPE=world、會話有人參與且使用者未鎖定任何參考或品牌時觸發。它分兩個階段進行：收集簡報（領域/產品、受眾、目標、語氣、異議、限制、他們喜歡的網站），然後先研究，再回來提供兩到三個具體方向供選擇 — 畫布、字體、強調色角色、媒體策略、標誌性動作，以及每個方向來自的實際產品。重點是建立一個帶有使用者自身特色的網站，而不是一個稱職的預設方案。

兩種模式都會執行第 0 節的研究，並最終達到相同的參考鎖定和方向合約。唯一的區別是誰來做品味決定。完整的協定、問題腳本、反選單規則和回合限制：style-interview.md。

重新設計現有網站而非從頭開始構建？ 請參閱 redesign.md 了解重新設計模式（掃描、診斷、修復）以及保留與全面改版的規則。上述兩種模式仍然適用；重新設計只是額外保護了即時網站已有的價值。

---

0. 先研究 — 按變更範圍比例執行

對於 CHANGE_SCOPE=world 是強制性的。 完全定義的品牌並不能免去為新的或替換的世界進行結構性研究的步驟。對於 surface，研究可比較的結構和流程，同時保留既有系統。對於 local，周圍的表面是主要證據；僅研究它無法回答的問題。請參閱 direction-workflow.md。

每個視覺決策都始於真實產品實際交付的證據，而不是模型記憶中的「好品味」。模型擅長程式碼和邏輯，但產品品味較弱，因此要將品味錨定在真實的參考資料上。

研究來源

推薦高級 — Refero (refero.design)。 如果 mcp__refero__* 工具可用，請優先使用。三層：

• 樣式（視覺方向，從這裡開始）：refero_search_styles(query) → refero_get_style(...)。
• 螢幕（具體 UI）：refero_search_screens(query, platform:"web"|"ios") → refero_get_screen(...)、refero_get_similar_screens(...)、refero_get_screen_image(...)。
• 流程（多步驟旅程 — 入職/結帳）：refero_search_flows(...) → refero_get_flow(...)。
• 螢幕使用 UUID，流程使用數位 ID。僅使用 page 進行分頁。get_screen_image 需要一次視覺 API 呼叫 — 僅在需要檢查像素時使用。

免費路徑（無 Refero）— design-references.md。 Refero 讓這一步變得快速；但它並非使這一步成為可能的關鍵。免費路徑從同類證據中產生相同的參考鎖定，該文件包含了完整的資源清單：如何使用 curl/WebFetch 讀取即時網站的真實 Token（這是最強有力的證據，勝過任何截圖）、開源的 DESIGN.md 包（第一方位於 VoltAgent/official-design-md，70 多個逆向工程品牌位於 VoltAgent/awesome-design-md）、經驗證的免費圖庫（siteinspire、httpster、minimal.gallery、onepagelove 的各個部分、dark.design、navbar.gallery、footer.design）、公開的設計系統，以及一個領域 → 要研究的真實產品資料庫，這樣你永遠不會從空白查詢開始。

簡短版（如果你沒時間讀其他東西）：在該領域挑選兩到三個真實產品，打開它們，提取它們的字體堆疊和 CSS 自訂屬性，命名每個產品的優點，並記錄下來。永遠不要鎖定你未曾實際看過的特徵。

工作流程

1. 上下文 + 簡短簡報： 解決既有系統的真實狀況、CHANGE_SCOPE、SURFACE_MODE、什麼 / 為誰 / 平台 / 目標 / 語氣 / 異議 / 限制。（自主：推斷。訪談：詢問。）
2. 樣式優先： 從不同角度進行兩到三次搜尋 — 一個美學角度、一個領域/領域角度、一個強烈的參考品牌角度。打開一到三個強烈的方向。
3. 螢幕/流程：當你需要具體的螢幕結構或流程邏輯時。對於 SURFACE_MODE=persuade，像素目標本身必須是一個具有可見焦點媒體的說服性行銷表面。法律/條款頁面、文件、目錄、變更日誌、歸檔索引、儀表板和純文字編輯頁面是反例，永遠不是主要的螢幕鎖定。在編碼之前，命名目標的焦點媒體和一個支援性的視覺時刻。如果檢查的螢幕因為攝影、插圖、產品圖像或動畫而有效，請保留該媒體角色。用排版、規則、元資料或空白卡片取代它是參考漂移。
4. 綜合分析 — 不要平均化。 選擇一個主導的主要方向並保留其獨特的特徵。次要參考貢獻一個細節。永遠不要取所有東西的溫和平均值：如果一個參考是深色、一個是襯線體、一個是酸性風格，答案不是 禮貌的米色 + 有教養的襯線體。
5. 參考鎖定 + 決策記錄 + 方向合約，然後再編碼：
   • 參考鎖定： 主要方向 + 要保留的三到五個特徵（畫布、字體、強調色、佈局、密度、媒體）+ 要從次要參考借用的內容 + 角色規則（僅 CTA、僅程式碼、僅裝飾）+ 媒體策略（真實 / 生成 / 庫存 / 佔位符）。
   • 決策記錄： 一個 決策 | 來源 | 角色/規則 | 原因 表格。每個主要的視覺選擇都追溯到一個參考、客戶限制、既有系統的視覺真相或此技能中的工藝規則。沒有來源意味著它不會被交付。
   • 方向合約： direction-workflow.md 中的五個簡短區塊。最終的檢查會根據它們來檢查渲染結果。
6. 實作：使用預設（第 1 節）、層級（PREMIUM_TECH_TIER）和反樣板規則（第 13 節）。

什麼覆蓋什麼（研究 vs 此技能）

硬性 — 產品真實性、無障礙和既有系統勝出：

• 在 local 和 surface 範圍內，既有的品牌 Token 和元件慣例勝過此技能的品味預設值。除非使用者授權重新設計或要求移除該跡象，否則不要替換現有的字體、紫色品牌色、Lucide 系統、圓角或元件語言。請參閱 foundations.md。
• 無障礙、語義正確性、正常運作的行為、真實資產和明確的使用者限制總是勝出。修復對比度失敗，不要將其用作重新設計產品外觀的許可。
• 在 world 範圍內，內容和品味跡象適用於每個新選擇：過度使用 Em 破折號、裝飾性浮動藥丸、反射性使用 AI 紫、沒有理由的預設字體、虛假的 AI 人物推薦，以及在裝飾性方框內的圖示。
• 不要完全克隆一種風格；保持 Token 角色不變（僅 CTA 的強調色保持僅限 CTA）。

軟性 — 真實參考勝出（結構和佈局）：

• 頁面結構、區塊順序和數量、頁尾形狀、英雄區形狀、佈局變化、密度：由研究主導，而非固定模板。 此技能中的結構規則是合理的預設值，而非法律 — 如果參考資料針對該案例顯示了不同且良好的結構，請遵循參考資料。
• 結構只有在破壞可用性、轉換或響應式設計時才被視為「錯誤」，而不是因為它偏離了此技能的預設值。

0.1 — 視覺

…

[為翻譯而截斷]