接案一條龍 Agent／內部手冊

網頁修改溝通手冊

網頁是一整條連續畫面，回饋修改時卻需要精準的定位點。這份手冊把「怎麼跟 Claude Code 描述要改哪裡」整理成一套固定協定——不用每次重新想怎麼講。

對應 Skill landing-design 適用所有 index.html 修改回饋版本 v1

為什麼需要一套協定

網頁不像文件有頁碼，捲動起來是一整條連續畫面。回饋「這裡怪怪的」時，你腦中看到的位置跟對方讀到的文字，中間隔著一層轉換——猜錯範圍、漏改、來回確認，都是這層轉換造成的。

解法不是「講更多字」，而是雙方先約定好同一套定位詞彙，讓每次回饋都能直接對應到原始碼裡的位置，不需要臆測。

核心概念：章節地圖

每個網站建置時，每個區塊都會有語意化 id，並在 HTML 最上面留一段對照註解。之後不管頁面多長，都用「地名」溝通，不用座標。

#hero

首屏主視覺主標題＋主 CTA

#pain-value

痛點與價值先講問題，再講解法

#services

服務項目具體項目＋價格

#proof

社會證明真實評價／評論星數

#faq

常見問題處理購買前猶豫

#cta-final

最終 CTA整段只做一件事

#footer

頁尾地址／時間／社群

圖1 — 章節地圖示意：每個 id 都是雙方共用的「地名」，回饋時直接說「#services 的第三張卡片」即可精準定位。

三類修改，三種對應方式

收到修改要求時，先判斷屬於哪一類——這決定了要不要附截圖。

文字／內容

標題、文案、價格、聯絡方式等純文字調整

「[章節] 把『舊文字』改成『新文字』」

不用截圖

視覺／跑版

對齊跑掉、手機版跑版、顏色不對

「[章節]＋描述」＋局部截圖

要附截圖

結構／順序

搬動區塊、加新區塊、調整順序

「把 [章節A] 搬到 [章節B] 前面」

不用截圖

截圖規範：只有「視覺／跑版」才需要

視覺類問題截圖是最快的溝通方式，但截圖本身也有對錯：整頁長截圖圈很多點，反而比文字更難懂。

整頁長截圖＋五個圈

五個問題疊在一張圖，範圍互相重疊，改的時候容易誤判是哪一處、漏改其他幾處。

局部截圖＋一個紅框

只截當下那一屏，一張圖對應一個問題，範圍一目瞭然。

三個要點：一張圖一個問題／只截當下那一屏，不拼接長圖／用 Win+Shift+S 圈出問題處，並標明對照章節地圖的名稱。

制式回饋格式

多項修改一次回饋時，固定用「章節＋類型＋描述」三欄，逐條處理逐條回報，不會混在一起漏改。

1[Hero] 文字：標題改成「XXX」
2[服務項目] 版面：手機版第三張卡片圖片跑出邊界（附圖）
3[FAQ] 內容：新增一題「XXX」，答案「YYY」
4[Footer] 連結：LINE 連結網址錯了，改成 https://...

圖2 — 制式回饋格式範例，已寫入 landing-design skill，建置任何網站時自動套用此協定。

完整流程

從發現問題到驗收完成的六個步驟：

發現問題看網站時

判斷類型文字／視覺／結構

視覺類才截圖局部＋紅框

制式格式送出章節＋類型＋描述

依地圖定位修改只改被指名部分

逐條驗收本機／手機實機

快速對照卡

下次要回饋修改時，直接照這張卡走。

定位用章節地圖 id／中文名稱，不用座標

文字類直接寫「舊文字 → 新文字」

視覺類局部截圖＋一張圖一個紅框

結構類用章節名稱描述搬動方向

多項回饋編號清單，逐條列出

大改版重新跑 new-site 審查清單