重新設定網站樣式 restyling
使用Experience現代化代理程式，在移轉期間套用設計或變更現有Edge Delivery Services專案的外觀。 如實複製來源網站的外觀並故意以新設計取代來源網站是不同的要求。 您想要的州。
外觀存在於專案的程式碼中：全域CSS會設定預設內容的外觀，每個區塊都有各自的CSS和JavaScript。 它們可以一起提供相同的語意內容而不需要重新建構它，因為JavaScript可以在瀏覽器中重建標籤；請參閱如何建置和更新您的網站。 因此，純粹的視覺重新樣式會變更Git中的程式碼，並保留編寫的內容。
本指南適用於領導重新造型的人。 如果您是設計人員，要進行開發人員檢閱的個別視覺變更，請從進行視覺變更開始。
同意變更內容與保留內容 prepare
連線專案並確認修改它的許可權。 儲存基準程式碼修訂版本，並在變更前保留受影響的內容。
提供：
- 內容來源：必須保留文字、影像、連結、中繼資料與含義的現有頁面，或已核准的新內容。
- 設計參考：特定的Figma元件或框架、授權參考網站、熒幕擷圖或設計規格。 為版本命名，並命名重要的桌上型電腦和行動裝置狀態。
- 範圍：全域權杖（顏色、印刷樣式和間距的CSS自訂屬性）和預設內容、選取的區塊、頁面或整個網站。
- 不可變更的專案：內容、URL、撰寫模型、協助工具行為以及整合。
- 輸出：作者可以在專案使用的儲存選項中編輯的內容，或是靜態設計原型（如果僅此而已）。
熒幕擷取畫面和參考網站可能會將互動和回應式規則保留為未指定。 先在單一範例頁面上結算這些專案，然後再將其套用至整個網站。
參考、原型和傳送 design-output
代理程式支援來自來源網站、Figma和提供的參考的設計工作。 Figma匯入和引導式重新設計是選用功能，可在要求時為您的專案開啟。 它們有不同的輸入和輸出；請勿假設它們以相同的方式運作。
- 針對一個Figma區塊，提供其元件或節點連結。 針對新頁面，請提供特定框架，而非整個檔案。
- Figma匯入需要Figma存取權杖和讀取檔案的許可權。 檢視從虛擬設計中工作。
- 靜態HTML設計預覽會在您的頁面副本上顯示新設計，這可幫助您選擇方向。 作者無法編輯這些復本；它們不是網站的檔案或Experience Manager頁面。
- 如果作者必須編輯結果，請在專案使用的儲存選項中要求網站內容並封鎖模型，然後依照說明檢查檔案型內容或Experience Manager製作。
引導式重新設計 guided-redesign
引導式重新設計會分階段將網站或一組頁面匯入新設計。 它由Stardust附加元件提供，stardust@excat-extended。 代理程式會擷取目前設計、記錄您想要的方向、建置前後原型以供檢閱，然後將核准的設計轉換為區塊和內容。 使用它跨多個頁面重新設計，而非重新設計一個頁面或區塊的樣式。 代理程式會保留儲存庫中的工作檔案和重新設計進度，讓您在後續對話中繼續進行。
您不需要依名稱知道階段。 描述您想要的結果，例如「以更輕巧、更符合編輯風格的風格重新設計首頁和產品頁面」，然後代理商提出這些步驟。 您也可以直接要求一個步驟：
開啟引導式重新設計也會開啟設計工藝附加元件，將前端設計品質指引套用至每個頁面。 在繼續之前，請檢閱每個階段，並驗證部署的結果，如下所述。
移轉期間重新設定樣式 during-migration
當內容來自現有網站但目標設計不同時，請使用此路徑。
- 完成專案和移轉範圍，包括儲存內容的位置。
- 定義目標設計系統：印刷樣式、顏色、間距、預設內容和可重複使用的區塊。 儘可能重複使用現有的專案慣例。
- 針對Figma，設定存取權，然後從特定元件節點建立所需的區塊或變體。 請參閱使用Figma的區塊重新設計和從Figma建立區塊。
- 將每個範本的範例頁面移轉至該區塊集合中。 將即時網站維持為內容來源，並將圖形或核准的參考維持為設計來源。
- 將內容與來源網站進行比較，並將外觀與目標設計進行比較。 請勿根據舊網站的外觀來判斷重新設計的頁面。
- 檢查作者是否可以編輯結果，以及它是否適用於每個熒幕寬度。 視需要修正內容對應或模型，然後繼續批次。
例如：
移轉
https://www.example.com/products/tents時套用核准的設計於https://www.figma.com/design/AbC123/Brand-Refresh?node-id=12-345。 即時頁面是內容來源；參照會定義新外觀。 保留文字、連結、中繼資料和有意義的影像。 請先核取一個範例頁面。 建立作者可在Experience Workspace中編輯的內容。 請勿上傳、推送或發佈。
將範例URL替換為您自己的，並且對於Experience Manager製作，表示內容儲存在JCR中。
如果新頁面沒有來源網站，請參閱從Figma建立新頁面：特定框架提供文字和資產以及設計。 這與將現有網站內容對應到新設計不同。
重新設定現有網站的樣式 existing-site
不需要新的移轉。
-
連線現有專案和預期分支。 要求代理程式閱讀專案的設計慣例、區塊和製作模型。
-
識別涵蓋受影響範本和變體的基準頁面。 記錄其目前外觀和重要互動。
-
說明變更的範圍以及必須保留的專案。 例如：
在
https://www.figma.com/design/AbC123/Brand-Refresh使用核准的設計重新設定此現有專案的樣式。 在/和/products上變更全域色彩和印刷樣式以及卡片簡報。 保留內容、URL、模型、分析、鍵盤行為和整合。 重複使用我們的Token和區塊。 先顯示建議的範圍；請勿重新匯入內容或上傳、推送或發佈。將範例URL和路徑替換為您自己的路徑。
-
請先更新全域變更所在的共用代號和全域樣式。 僅在需要時套用區塊特定的樣式。
-
預覽所有受影響的範例頁面，而不僅僅是衍生設計的頁面。 包括行動寬度、長標題、遺漏選用內容和不同的變體。 全域權杖變更可能會影響原始範例以外的頁面，因此也請包含這些頁面。
-
如果設計需要結構或模型變更，請另外做出明確的決定。 規劃現有內容如何移動到新結構，而不是無訊息地重寫作者內容。
-
檢閱程式碼比較和專案檢查，然後透過現有專案的工作流程推播和傳遞。 樣式變更是程式碼：分支合併到
main後就會到達即時網站，因此請先檢查分支預覽URL上受影響的頁面。 檢視變更如何上線。
驗證和復原 validate
當內容保持正確、核准的設計可依每個熒幕寬度運作、互動仍可使用，且作者仍可編輯、儲存和重新開啟範例頁面時，就會完成重新造型。 檢查對比度、焦點、閱讀順序、影像含義以及專案的效能需求。 相似性分數不會決定此事項。
如果結果錯誤，請識別受影響的頁面或區塊，以及問題是否為權杖、共用樣式、區塊樣式、結構或內容對應。 請修正該圖層並重新檢查所有受影響的變體。 若為Figma存取錯誤，請檢查節點連結、檔案許可權、Token，並檢查專案的Figma匯入是否已開啟，然後再試一次。
透過專案的Git工作流程還原不需要的程式碼。 分別還原任何變更的遠端內容；程式碼還原不會復原上傳。 保留基準線，直到重新樣式簽核為止。
使用專案移交，將核准的參考及其版本、變更的檔案、受影響的頁面、模型與內容變更、檢查結果、已知間隙，以及如何復原程式碼與內容。