標誌主導的網頁設計
將產品自身的標誌轉化為其網站的視覺素材。將插圖、動畫與佈局一同設計，使成果能說明產品並展現其品牌的獨特性。
這是一種設計與實作方法，並非網站範本。結果應從實際的標誌與產品推導而來。不要繼承範例網站的品牌、色板、章節數量、插圖主題、字體或捲動模型。
一個簡單的網站可以有少量區塊與簡短文字，同時其插圖仍保持完整且精心繪製。透過內容選擇來縮小範圍，而非移除讓藝術作品具有辨識度的結構。
了解產品並檢查標誌
使用提供的產品資訊、現有網站、標誌與參考資料。確定產品的本質、主要功能與核心操作。重複使用已知資訊；僅在缺少必要素材或真正關鍵的選擇時才提問。
在設計之前先查看實際的標誌。檢查其輪廓、線條或填充區塊、負空間、節奏、比例、顏色與獨特的連接處。識別哪些元素可以成為有用的視覺素材，以及哪些特徵讓原始標誌具有辨識度。並非每個標誌都應被簡化為線條或拆成三部分。
當提供可用的向量路徑時，從這些路徑開始工作。通常進行簡短的視覺檢查與群組/輪廓檢查就已足夠；不需要透過像素分析重新測量其幾何形狀。
閱讀 design-and-assets.md 了解標誌分析、產品到形狀的對應以及素材產出。
發展品牌特有的視覺故事
將標誌元素轉化為與產品功能相關的構圖。曲線可能變成工作流程，開口可能框住圖片，或填充形狀可能展開成工作區。這些是可能性，並非必須的母題。將完整標誌旋轉後放在不相關的卡片上方並不能完成此任務。
對於每個重要的頁面區塊，定義：
- 訪客應理解什麼，以簡短的產品/功能陳述表達。
- 傳達該資訊的完整插圖，以及標誌衍生形式如何參與其中。
- 在進入下一個狀態時持續存在的有意義物體或視覺關係。
- 在桌面與行動裝置尺寸下，藝術如何與文字及操作共用空間。
規劃哪些標誌衍生元素會持續存在於每個目的地，然後在調整其插值之前先發展目的地藝術。根據標誌的特性使用變形、展開、繪製、遮罩、部件重新排列或材質變化。在呈現為正式品牌的任何地方保持原始標誌完整。若符合故事需求，重新組合成原始標誌可提供一個收尾節奏；下載區段或標誌結尾並非強制。
共同選擇頁面與動畫模型
選擇適合內容與所要求體驗的佈局：一個強烈的動畫主視覺搭配較靜態的區塊、連續的滾動敘事、一個緊湊的序列，或其他合理的構圖。尊重使用者選擇的參考與互動模型。不要強迫將交替的全螢幕章節套用到每個產品。
對於滾動連結的作品，除非設計需求要求其他行為，否則偏好使用原生的文件滾動。為讀者提供清晰、穩定的靜止狀態，並將轉換放置在支援閱讀順序的位置。根據實際佈局來推導時間點，而非強加範例的閾值。
使用簡潔的文字來說明產品是什麼以及使用者可以做什麼。讓插圖與佈局承擔說明的責任。將字體、間距、控制項與裝飾與品牌匹配，而不是在動畫周圍包裹一個通用的行銷範本。
繪製完整的目標畫面，然後編排其轉換
閱讀 design-and-assets.md 的插圖繪製章節，並查看 視覺比較圖；其可編輯原始檔為 illustration-craft.svg。這些範例說明了結構與完成度，並非指定的風格或頁面範本。
將每個重要的目標畫面呈現為實際插圖，存在於工作頁面或可編輯素材中。建立其比例、獨特輪廓、有意義的元件、連接與重疊。在需要的地方加入線條/顏色/材質層次。暫時保持場景靜止以判斷構圖：它應能在不依賴標題來辨識模糊形體的情況下解釋其主題。這是一個工作步驟，並非要求獨立的提案或使用者在每個階段都批准。
分離動畫責任：標誌衍生的結構可以連續變形；附加的元件跟隨該結構；目標畫面特有的內容與完成度可以在其空間存在後展開或出現。這些是角色，並非固定的群組數量。保留豐富的藝術作品，而不強迫每個細節通過相同的插值函數。
讓每個被攜帶的標誌元素在每個目標畫面中贏得其角色。不要強迫一個圖層變成不相關的產品物體，只為了讓它存在於每個區塊中；它可以完成一個轉換，然後作為新的場景內容進入時離開。
使原始到目標的對應關係在幾何或空間交接中可見。淡出整個標誌並顯示一個不相關的符號無法展示所要求的轉換。一旦目標畫面與對應關係建立，便創建過渡姿態並使其與頁面同步。
在所選媒介中實作藝術作品
使用現有的專案技術棧。閱讀 implementation.md 了解如何選擇 SVG/CSS、時間軸函式庫、Canvas/3D 或渲染媒體，以及幾何、同步與響應式構圖的相關內容。
對於精確的標誌衍生形狀，偏好使用原始向量幾何。故意地創建中間藝術作品；當所選的藝術方向確實需要其輸出時，才使用影像或動畫生成工具。生成的影像應支援相同的品牌語法，而非用不相關的裝飾素材來取代所要求的轉換。
製作一個可運作的頁面，而不僅是一個動畫提案。透過連貫的動畫模型來協調幾何、移動、材質與插圖內容。在正式標誌的靜止狀態下，保留可讀的文字、有用的控制項與確切的原始標誌。尊重減少動畫偏好，提供可理解的構圖。
檢視並精煉渲染後的網站
使用 visual-review.md 先檢查已確定的插圖，然後檢查其轉換以及桌面/行動裝置的佈局。區分缺失的視覺結構與輪廓採樣及幀率時間點；提高數值精度無法添加缺失的產品細節。判斷其他品牌是否只需更改標誌與顏色就能獲得相同的頁面：如果是，則重新審視標誌到功能的對應。
對每個重要轉換至少檢查一個中間狀態。如果它看起來像一個意外的混合體，請修正元素對應或創建更清晰的過渡姿態；錯開每個圖層或提高輪廓精度無法修復語意錯誤的變形。精煉所觀察到的問題：重新繪製不美觀的中間姿態、調整衝突的移動路徑、或更改時機不當的顯示。在進行有針對性的修改後，檢視受影響的動畫與附近的狀態，而非重新執行不相關的套件。
交付可運作的預覽、可編輯素材/原始檔以及實際驗證內容的簡要說明。如果要求獨立驗證，請使用真正不同的產品/標誌需求；僅複製原始品牌無法證明通用性。直接報告不可用的驗證結果。
可選的實例研究
僅當類似的連續 SVG 故事有用或使用者要求該案例時，才閱讀 tapestry-case-study.md。資料夾 assets/reference-site 包含可運行的 Tapestry 範例及其標誌/字型素材。這是一個可選的實作範例，並非預設的起始佈局或其他產品的品牌來源。