使用Experience現代化代理程式進行視覺化變更 visual-changes
本指南適用於變更網站外觀的設計師和其他人：顏色、字型、間距及其區塊版面。 您說明在Experience Modernization Console中對Experience Modernization Agent所做的變更，在預覽中將其核取，然後傳送給開發人員進行稽核。 代理程式會寫入程式碼，因此您不需要寫入CSS或JavaScript。 不過，您的變更會透過其Git存放庫觸及該網站，因此您需要基本知識：您將工作推送至分支，並在提取請求中將其移交。 如果您對這些字詞不熟悉，請參閱本指南中的使用字詞。
開始之前 before-you-start
向專案負責人詢問下列事項：
- 存取主控台。 您使用Adobe ID登入。 請參閱開啟Experience Modernization主控台。
- 要處理的網站。 您將網站的Git存放庫連線到主控台工作區，並且需要存放庫的寫入許可權才能執行此操作。 檢視連線您的網站。
- 您工作的一部分。 同意哪些區塊、頁面或樣式是您的檔案，如此一來，其他人都無法同時變更相同的檔案。 請參閱從一個人開始，然後分割工作。
- 如何移交。 大部分團隊都會保護主要分支，讓開發人員得以檢閱每項變更。 詢問您是否使用 建立新的PR 推送。 檢視交出檢閱。
- 若是Figma設計，則是可讀取檔案的Figma座位。 檢視從虛擬設計中工作。
您的工作會保留在您自己的主控台工作區中，直到您推送它為止。 您在預覽中嘗試的任何專案都不會自行到達即時網站。
您可以變更的專案 what-you-can-change
在Edge Delivery Services網站上，由作者撰寫內容，而程式碼會決定內容的外觀。 因此，視覺化變更會變更網站的程式碼（主要是其CSS），並保留作者輸入的內容。 您不需要再次匯入或上傳頁面。
程式碼的每個部分都會到達網站的不同部分。 在要求變更之前，請先決定應到達的距離：
--link-color。變體、區段樣式和範本只有在作者套用時才會生效。 請代理程式將報表套用至您正在處理的頁面，以便您檢視，並告知作者何時可加以使用。
有些請求超出網站的外觀。 新增作者填寫的欄位、變更區塊內容的結構方式，或新增行為（例如輪播）會變更區塊的內容模型或其邏輯。 說明您需要的內容，並將這些決定留給開發人員。 請參閱建立、更新及重構區塊。
限制對部分頁面進行變更 impact
對區塊或全域樣式的變更，會變更使用它們的每個頁面。 在您要求之前，請先詢問代理程式使用區塊或樣式的位置，例如「我工作區中的哪些頁面使用卡片區塊？」
當變更僅套用至某些頁面時，請改為要求下列其中一項：
- 區塊變體，但只有區塊的某些執行個體看起來應該不同。
- 區段樣式，當頁面的某個部分（例如反白區域）需要自己的外觀時。
- 當某個型別的頁面（例如所有產品頁面）需要自己的外觀時，頁面範本。
顯示您的意思 references
圖片通常比描述更精確。 在提示中使用附加檔案 （迴紋針圖示）以附加：
- 您想要的結果或問題的熒幕擷圖，內含要檢視哪些內容的句子。
- 品牌風格指南的頁面，以影像或Word或PowerPoint檔案形式。
您也可以指向看起來正確的網站頁面： 「讓/adventures上的卡片看起來像/magazine上的卡片。」 僅使用您的團隊可以使用的設計和參考網站。
代理程式不記得對話之間的品牌規則。 在規則達成後（例如按鈕樣式或標題大小），請要求代理程式將其寫入專案的指示檔案中，使其在每次交談時都遵循規則。 請參閱專案指示與記憶體。
從圖形設計開始工作 figma
代理程式可以透過Figma匯入附加元件從Figma讀取設計。 它會將設計的顏色、印刷樣式、間距和變數轉換為網站的設計權杖，並將其元件轉換為區塊或區塊變數。
須知事項：
- 一次一個元件或框架。 代理程式會從元件建置一個區塊，或從框架建置一個頁面。 在傳送下一個連結之前檢查每個結果。 請參閱從Figma建立區塊，以及從Figma建立新頁面。
- 您的Token，您的檔案。 個人存取權杖會讀取您可以開啟的每個Figma檔案，而不會讀取其他檔案。 Figma會發佈並設定限制。 每個人都儲存自己的代號。 它與設計代號、代理程式從設計中讀取的顏色和間距無關。
- 您的Figma座位。 您需要開發或完整圖形座位；請參閱圖形與設計系統。 如果主控台報告狀態為429的Figma API錯誤，則權杖已達到Figma的速率限制。
- 附加元件。 Figma匯入是選用功能。 如果您的專案未開啟，代理程式會提供開啟功能。
- 設計權杖。 比較新Token與現有Token。 如果Figma值與現有Token只稍微不同，請決定要保留哪一個，而非同時保留兩個。
有關貴組織在人員使用Figma搭配代理程式之前核准的內容，請參閱Figma和設計系統。
進行第一次變更 first-change
- 在主控台的預覽面板中開啟頁面。
- 在 檢視區 功能表中，選擇您要檢查的寬度： 案頭、平板電腦或行動裝置。
- 使用預覽面板中的選取圖示開啟檢查模式。
- 選取您要變更的元素，例如標題、影像或按鈕。 元素會新增到您的提示中：代理程式會收到其HTML及其在頁面上的位置，並限制其對該元素的變更。
- 描述變更及其觸及的範圍，然後傳送提示。 例如：「請讓此按鈕使用我們的主要樣式，在此，並在每個頁面上使用。」
- 代理程式完成時，如果預覽尚未更新，請選取重新整理預覽。 檢查每個 檢視區 大小的結果。
- 如果發現錯誤，請說出您所看到的內容，例如「在行動裝置上，文字會接觸影像」。 一次要求一個變更，並在要求下一個變更之前先檢查變更。
若要復原變更，請要求代理程式還原變更。 若要將所有未推送的變更拖放到檔案中，請開啟 變更 檢視，並選取檔案旁的捨棄。 請參閱變更動作。
如果代理程式在幾次嘗試後仍沒有收到變更，請詢問您的開發人員，或在功能表列中選取要求支援，並描述您要求的內容以及您看到的內容。 您的請求會傳送到建立代理程式的團隊。 當交談進行得不順利時，主控台也會在「需要幫助？」底下提供協助 請參閱要求支援。
提示範例 example-prompts
- 「讓所有標題都使用附加樣式指南中的標題字型。」
- 「讓卡片區塊中的卡片高度相等，其按鈕對齊底部。」
- 「新增Teaser區塊的
dark變體（在深色品牌顏色上使用白色文字），並將其套用至/adventures上的第二個Teaser。」 - 「新增淺色背景且上下有更多空格的
highlight區段樣式，並用於首頁的Newsletter區段。」 - 「在行動裝置上，棧疊欄並將影像放在文字上方。」
- 「我工作區中的哪些頁面使用主圖區塊？ 向我展示每一項變更之後的面貌。」
- 「將我們協定的按鈕樣式寫入專案的指示檔案中。」
交出前先檢查 check
- 檢查每 檢視區 大小，特別是行動裝置。
- 檢查使用相同區塊、樣式或範本的其他頁面，而不只是您使用的頁面。
- 檢查設計如何處理實際內容：長標題、短標題、缺少影像以及包含許多專案的清單。
- 檢查文字在背景中是否可讀。 您可以詢問代理程式：「根據WCAG AA檢查Teaser區塊中文字的色彩對比。」
- 推送之後，請開啟提取請求中列出的預覽URL，然後檢查那裡的頁面。 檢視主控台預覽與站台不同。
交出以供稽核 hand-over
- 使用 建立新的PR 推送您的程式碼，如推送程式碼變更所述。 僅將屬於您變更的檔案暫存，並以純句子描述，例如「卡片圓角與陰影」。
- 在通知中選取「檢視PR」，並將提取請求的連結傳送給檢閱它的開發人員。
若要進行檢閱者要求的變更，請繼續處理相同分支，並透過推送至目前分支；提取請求會更新。
當開發人員合併已上線的網站時，您的變更會到達該網站。 如果您也變更了頁面上的文字或影像，即為內容變更：它只會在頁面上傳和發佈時到達網站。 同意作者那樣做的觀點。 請參閱協調內容變更。
本指南使用的字詞 glossary
--link-color。main分支。在設定內容結構形狀下更深入地說明區段、區塊和預設內容。