# Clay AI 介面實作指令

語言：繁體中文（台灣用語，zh-TW）。指令重新產出：2026-10-15。對應官網參考日期：2026-10-10。

將同資料夾的 DESIGN.md 與此指令一起交給 AI，並補上自己的產品需求。網站單份下載的品牌檔名也可使用；保留規格中的參考日期與限制。

```text
請先讀取隨附的 Clay 設計規格與專案現有程式碼。以 2026-10-10 的公開首頁研究作為視覺參考，來源為 https://clay.global/，這不代表今日最新官網。

我的需求：請在此填入產品名稱、目標使用者、頁面功能、內容及資料來源。

一、依參考建立視覺結構
本次來源為 [Clay Global](https://clay.global/)，是品牌與 UX 設計代理公司。既有 DESIGN.md 描述 Clay.com 的 GTM 軟體，已原樣保存作為歷史紀錄；該檔的黏土插畫、多彩 SaaS 卡片與產品導向不能作為本次代理公司官網的依據。

現行頁面以淡暖灰首屏、近黑文字、Universal Sans 字型與大量留白建立層級。導覽包含 Work、Clients、Services、Industries、About、Blog 與黑色 Contact 按鈕。主標為「Clay is a 全球品牌與使用者體驗設計公司」，桌面取樣64px、行高70.4px、字重740；390px 窄版取樣40px、行高44px。

首屏與 Showreel 接續品牌／服務介紹，再進入「金融的未來，由智慧驅動」特色區及大型作品展示。桌面以兩欄、錯位與大尺寸圖像呈現14個案例，包括 Slack、STC Bank、Sky、Snapchat、Joe & The Juice、Vantara、Grayscale、Discover、Marqeta、Yahoo! Games、Serena & Lily、Tipalti、Wealth、Art Bridges。作品圖像主導色彩，文字與導覽維持克制。

後段依序有設計創新介紹、團隊／辦公室影像、Featured News、FAQ 與 Let’s Talk 聯絡頁尾。當日新聞標題包括 Tipalti 改版獲得設計獎項與專題報導、網頁設計按鈕完整指南：2026、Clay Global 在威比獎表現亮眼2026。這些日期限定內容以保存的官方 DOM／截圖為依據。

本次透過真實 Google Stitch MCP 產生並完整保留原始輸出，再依公開來源、字型與原始圖像／影片校正。主代理的實際畫面檢查仍發現影片、標誌、捲動顯示及3D時間點差異。首屏與 Fintech 使用明示的實際觀察靜態裁切區，頁尾3D仍缺少；互動尚未通過驗證。

**accepted=false，不宣稱與官方一致。** 本補充由子代理整理來源紀錄；實際畫面最終判讀由主代理負責，未將未看過的畫面描述為已驗證。研究內容免費瀏覽，沒有開啟付費方案、提交聯絡表單或執行交易；不對外部生成服務的帳戶計費狀態作保證。

二、完成符合自己產品的功能
製作創意工作室作品集，採不對稱案例版面與柔和中性色。大型視覺區塊與精簡的專案背景交錯排列，在穩定的頁面結構中讓作品決定配色。
優先實作案例展示卡片，包含專案類型、圖片說明與易讀的文字連結。沿用專案現有技術、路由及元件慣例；先整理色彩、字型、間距、圓角與狀態，再完成頁面。保留規格中實際量測的數值，未知內容明確標示為建議，不自行杜撰來源資料、價格、引言或成功結果。

三、台灣繁體中文與排版
介面文案、按鈕、提示、錯誤訊息、圖片替代文字、設計規格與交付說明，一律使用繁體中文（台灣用語）。保留品牌名稱、字型名稱、檔名、網址、API 識別字與可執行程式碼。HTML 使用 zh-Hant-TW；數字與日期以 zh-TW 格式呈現，幣別及時區依原資料標示，不擅自換算。
採用「專案、元件、資料、建立、預設、載入、登入、連結、儲存、影片」等台灣用語。中文字型缺字時提供可取得的替代字型並說明字寬差異。參考品牌的原始圖片與截圖保留來源內容；你新建立的文案與示範資料使用台灣繁體中文，不將商標或品牌服務當成我自己的產品。

四、操作與檢查
所有可見操作都必須有可理解的結果。依需求支援預設、焦點、已選取、停用、載入、空白與錯誤狀態。使用語意標記、具名稱的控制項、可見鍵盤焦點，以及至少 44px 的主要觸控區域。尊重減少動態效果設定；影片與動畫提供可閱讀的靜態替代。
在 390px、768px、1440px 檢查中文長標題、混合語言、圖片失敗與內容變動。程式碼及資料表可在自己的容器捲動，不讓文件整體被撐開。不要假裝已連接帳戶、付款、模型 API 或其他尚未接上的後端；示範資料須明確標示。

五、保留已知限制
- 實際檢查發現公開影片畫格、商標顯示時間與 3D 狀態有差異。桌面主視覺及金融科技插圖採已觀察區域的靜態裁切替代，未重現即時 3D 動態。
- 頁尾的 3D 圖像缺漏；頁首選單、服務摺疊區、常見問題、聯絡操作及其他介面行為尚未完整驗證。
- 窄版的顯示動畫與標題階段不同，部分已記錄標題的垂直位置相差最多 843.812px。動畫時間與靜態狀態仍有限制，整頁等高不代表視覺驗收通過。
- 已檢視先前 11 張完整比較圖，以及頁首濾鏡與金融科技背景修正後受影響的桌面、窄版畫面。最新本機紀錄綁定目前草稿雜湊；窄版有 17 組配對捲動位置，另有 2 個官網位置因平滑捲動階段而無法配對，並非 41 張完全配對或像素一致的截圖。

六、交付
以繁體中文列出完成的檔案、設計變數、操作方式、實際驗證結果與尚未處理的限制。逐次修改時保留無關路由及資料行為，說明可觀察的修改前後差異，不把尚未檢查項目宣稱為通過。
```