name: ecommerce-content-wireframe description: 當用戶希望基於明確的產品資訊，梳理電商商品詳情頁內容、生成詳情頁內容結構、詳情頁文案、手機長圖 HTML 黑白線框稿時使用。

電商詳情頁內容黑白線框稿

觸發條件

當用戶希望梳理電商商品詳情頁內容時，使用本 skill。

只要使用者的需求涉及以下任一方向，就應觸發：

• 想為某個商品整理詳情頁內容結構
• 想把產品資訊轉成詳情頁文案
• 想生成手機長圖形式的詳情頁 HTML
• 想看到一版低保真黑白線框稿效果
• 想圍繞核心價值、使用者痛點、產品賣點、使用場景、購買理由來組織詳情頁
• 想把商品資訊整理成可交給運營、設計、內容團隊繼續執行的詳情頁策劃稿

核心原則

• 先收集精準資訊，再生成詳情頁內容。
• 不使用“隨便輸入也先出初稿”的邏輯。
• 使用者必須先提供完整產品資訊表，再進入內容生成。
• 如果資訊不完整，先讓使用者補齊關鍵欄位。
• 按固定步驟推進，不讓使用者選擇先精修哪一層。
• 每一步都給多個選擇，並告訴使用者如何選擇、融合、修改或補充資訊。
• 使用者確認或選擇後，再進入下一步。
• 所有確認內容最終先整理成一個完整的詳情頁內容文件。
• 內容文件確認後，再生成一份完整可執行的 HTML 黑白線框稿。

觸發後的開始語

觸發後不要直接生成內容，先使用以下固定開始語收集產品資訊：

我會先基於完整產品資訊，幫你一步步梳理電商詳情頁內容；確認內容後，再整理成詳情頁內容文件，並生成一份可執行的手機長圖 HTML 黑白線框稿。

這份黑白線框稿用於快速預覽詳情頁內容結構、模組順序和轉化邏輯，方便你和運營、設計、內容團隊對齊方向後再進入視覺設計。

請先補充產品資訊，包括但不限於：

【產品名】：[填寫你的產品名]
【產品定位】：[填寫產品定位]
【目標人群】：[填寫目標人群]
【核心場景】：[填寫目標場景]
【核心賣點】：[列出所有核心賣點]

如果你暫時不確定某一項，可以先寫“待定”，但產品名、目標人群和核心賣點建議儘量具體，這會直接影響詳情頁內容的準確度。

必要輸入

開始前，先要求使用者填寫以下產品資訊表：

產品資訊如下：
【產品名】：[填寫你的產品名]
【產品定位】：[填寫產品定位]
【目標人群】：[填寫目標人群]
【核心場景】：[填寫目標場景]
【核心賣點】：[列出所有核心賣點]

如果使用者沒有提供完整資訊，不要直接生成 HTML。先提示使用者補齊：

請先補充完整產品資訊，我會基於這些資訊一步步生成詳情頁內容。

產品資訊如下：
【產品名】：[填寫你的產品名]
【產品定位】：[填寫產品定位]
【目標人群】：[填寫目標人群]
【核心場景】：[填寫目標場景]
【核心賣點】：[列出所有核心賣點]

工作流程

收到完整產品資訊後，按以下順序推進：

1. 核心價值承諾層
2. 痛點錨定層
3. 賣點強化層
4. 使用場景層
5. 產品基礎資訊補充
6. 決策收口層
7. 整理詳情頁內容大文件
8. 生成完整 HTML 黑白線框稿

不要跳步。不要讓使用者選擇先做哪一層。

每一步的固定節奏是：

1. 基於使用者提供的產品資訊和上一輪確認內容進行分析。
2. 給多個可選方案。
3. 用清晰話術指引使用者選擇、融合、修改或補充資訊。
4. 使用者確認後，記錄該步驟結果。
5. 自動進入下一步。

1. 核心價值承諾層

目標：將產品的所有賣點提煉成一句有差異點和共鳴感的核心價值承諾，適合放在電商詳情頁第一屏。

要求：

• 用詞精練有力
• 朗朗上口
• 能激發目標人群共鳴
• 適合做第一屏關鍵定義
• 不虛構產品沒有提供的資訊

輸出 10 句話備選。

輸出格式：

核心價值承諾備選：
1.
2.
...
10.

你可以這樣回覆我：
- 直接選一個編號，例如：選 3
- 選多個讓我融合，例如：3 和 8 結合
- 說明你想要的方向，例如：更高階、更直接、更有情緒、更專業、更像天貓首屏
- 如果都不滿意，告訴我“不滿意 + 原因”，我會重新生成一組

2. 痛點錨定層

基於使用者選中的核心價值承諾，挖掘使用者的痛點、癢點、爽點。

分析維度：

• 痛點：使用者在此情境中最擔憂或最想解決的問題是什麼？
• 癢點：使用者希望呈現出的理想狀態、身份感或角色投射是什麼？

  7w4.net提供免費和付費技能下載。

• 爽點：使用者在哪一瞬間獲得情緒滿足、輕鬆感或被理解的感受？

然後提煉出適合電商詳情頁的一句話表達，給 10 個選擇。

輸出格式：

痛點：

癢點：

爽點：

詳情頁表達備選：
1.
2.
...
10.

你可以這樣回覆我：
- 直接選擇一句詳情頁表達，例如：選 5
- 讓我融合多個方向，例如：2 和 9 結合
- 告訴我痛點要更尖銳、癢點要更有嚮往感，或爽點要更有被理解的感覺
- 如果你覺得痛點不準，可以補充真實使用者抱怨、差評、諮詢問題或購買前顧慮

3. 賣點強化層

目標：精準翻譯產品賣點，將功能轉化成使用者真正關心的購買理由。

對每一個賣點按以下步驟處理：

1. 提煉賣點：識別最重要的功能、成分、工藝、標準或差異化特徵。
2. 轉化買點視角：說明它能解決什麼問題、帶來什麼好處。
3. 文案再造：寫成一句更有感知力、更有畫面感的詳情頁買點文案，每句控制在 25 字以內。

結構要求：

• 一個核心賣點必須對應詳情頁裡的獨立一屏。
• 不要把多個核心賣點合併到同一屏講。
• 如果一個賣點下面有多個證據點，可以放在同一屏內作為輔助資訊；但該屏只能服務這一個核心賣點。
• 如果使用者給出的賣點過多，先按轉化優先順序排序，並建議哪些賣點進入詳情頁主屏，哪些放到引數、問答或補充資訊區。

輸出格式：

賣點 1
主標題：使用者買點
副標題：產品賣點
對應螢幕：第 X 屏，只講這個賣點

賣點 2
主標題：使用者買點
副標題：產品賣點
對應螢幕：第 X 屏，只講這個賣點

你可以這樣回覆我：
- 確認保留，例如：這組可以
- 指定某個賣點重寫，例如：賣點 2 重寫
- 告訴我某個賣點要更理性、更生活化、更有畫面感或更適合詳情頁大標題
- 如果賣點有證據，例如成分、工藝、認證、資料、材質、使用方法，可以繼續補充，我會把它轉成更有說服力的買點

如果使用者給的賣點沒有證據，不要補造資料。可以用體感、場景或結果表達，但避免虛假承諾。

4. 使用場景層

目標：把產品從抽象賣點落到真實購買和使用情境。

按以下步驟完成：

1. 基於產品資訊和核心賣點，系統拆解可能出現的使用場景。
2. 根據市場大小、品牌優勢和轉化價值，篩選 Top 4 高價值場景。
3. 對 Top 4 高價值場景做極簡概括。

輸出格式：

全量使用場景：
- 場景：
  價值：

Top 4 高價值場景：
1. 場景名：一句話概括
2. 場景名：一句話概括
3. 場景名：一句話概括
4. 場景名：一句話概括

你可以這樣回覆我：
- 確認保留這 4 個場景
- 替換某個場景，例如：把第 3 個換成通勤場景
- 告訴我哪個場景最重要，我會把它放到詳情頁更靠前的位置
- 如果你有真實銷售場景、使用者反饋、直播話術或小紅書種草場景，也可以補充，我會重新篩選 Top 4

5. 產品基礎資訊補充

目標：讓使用者補充產品基礎引數、成分、規格、用法、適用邊界、認證、研發資料等事實性資訊，用於後續整理內容文件和 HTML 線框稿。

這一部分以使用者輸入為準，不由 AI 編造。尤其是兒童、食品、健康相關產品，凡是涉及引數、成分、功效、認證資訊等事實性內容，都必須要求使用者提供或後續自行核查。

可以引導使用者補充：

• 產品規格
• 關鍵成分或配方
• 使用方法
• 適用人群與不適用人群
• 功效、標準、檢測、認證或研發資料
• 包裝、口味、容量、材質等基礎引數
• 需要謹慎表達或不能承諾的邊界

輸出格式：

產品基礎資訊補充：
規格引數：
成分/配方：
使用方法：
適用邊界：
認證/檢測/研發資料：
其他需要進入詳情頁的資訊：

你可以這樣回覆我：
- 直接補充具體資訊，例如：規格是 250ml，適合 3 歲以上兒童
- 某一項沒有就寫“暫無”或“待核查”
- 如果有檢測報告、研發資料、認證資訊，可以直接貼出來，我只基於你提供的內容整理
- 如果涉及兒童、食品、健康相關表述，請優先提供真實研發資料和可核查資訊

6. 決策收口層

目標：在詳情頁底部完成購買理由總結，降低使用者猶豫。

可以從以下方向收口：

• 安心感
• 專業感
• 場景必要性
• 價效比
• 禮贈價值
• 低試錯成本
• 長期使用價值

輸出 3 到 5 組收口方案。

輸出格式：

決策收口備選：
1. 主標題：
   副標題：
   行動提示：

2. 主標題：
   副標題：
   行動提示：

你可以這樣回覆我：
- 直接選擇一組，例如：選 2
- 讓我融合兩組，例如：1 和 4 結合
- 告訴我收口方向，例如：更強轉化、更剋制、更高階、更有安全感、更突出價效比
- 如果使用者下單前還有具體顧慮，例如價格、規格、適用人群、效果擔心、售後問題，可以補充，我會把它寫進收口層

最終交付：內容文件與 HTML

當六層內容都確認後，必須先整理完整的詳情頁內容文件。

內容文件包括：

• 產品資訊
• 核心價值承諾
• 痛點、癢點、爽點
• 詳情頁表達句
• 每個賣點的產品賣點、使用者買點、主標題、副標題
• Top 4 使用場景
• 產品基礎資訊補充
• 決策收口方案

內容文件輸出後，用以下話術引導使用者確認：

你可以這樣回覆我：
- 回覆“確認”，我會繼續生成完整 HTML
- 指定修改某一層，例如：核心價值承諾層再改一下
- 告訴我 HTML 呈現偏好，例如更像天貓詳情頁、更像小紅書種草長圖、更像品牌官網低保真稿
- 如果不需要 HTML，也可以讓我只保留內容文件

內容文件確認後，再生成完整可執行的 HTML 黑白線框稿。

HTML 要求：

• 手機長圖詳情頁形式，豎向滾動
• 每個核心賣點必須拆成獨立一屏，按“一個賣點一屏”組織內容
• 單個賣點屏只承載一個核心賣點，標題、副標題、證據點和線框元素都服務該賣點
• 不要把兩個或多個核心賣點壓縮排同一屏；如需合併，必須先向使用者說明原因並獲得確認
• 主容器寬度控制在 375px 左右並居中展示
• 白底、黑字、淺灰模組
• 低保真黑白線框稿風格
• 每一屏之間用細黑線分隔
• 標題大、粗、短句化
• 用灰色卡片、圓形節點、簡單線條圖、流程圖表達內容
• 不依賴外部圖片、字型、CDN 或第三方庫
• CSS 寫在同一個 HTML 檔案內

輸出 HTML 前，用一句話說明：

本框架圖僅作為內部探討示例，AI生成的內容都可能有問題。尤其是兒童、食品、健康相關產品，凡是涉及引數、成分、功效、認證資訊等這類事實性內容，應該以你的研發資料為準，做好事實核查。

下面是根據已確認內容生成的完整 HTML，可直接儲存為 .html 檔案執行。

預設處理方式

• 缺少產品資訊表：先讓使用者補齊，不直接生成。
• 缺少關鍵欄位：先追問，不跳到內容生成。
• 缺少非關鍵細節：可以做輕量假設，但必須標註“假設”。
• 使用者中途要求重寫某一層：只重寫該層，並說明最終內容文件和 HTML 會同步更新。
• 使用者要求直接生成 HTML：如果產品資訊完整，可以直接生成；如果資訊不完整，先補齊關鍵欄位。

質量標準

• 內容必須基於使用者提供的產品資訊。
• 文案必須回到商品價值、人群需求、平臺場景和轉化路徑。
• 不寫泛泛的電商理論。
• 不堆空泛欄位。
• 不編造未經核驗的資料、政策、案例、認證或競品事實。
• 頁面結構要清楚，模組要像可交給設計師繼續細化的低保真線框稿。

這個 Skill 質量不錯，專門幫人做電商詳情頁內容策劃。它先把產品資訊收集齊全，再按核心價值、痛點、賣點、場景等層次一步步梳理內容，確認後生成可執行的 HTML 線框稿。每一步都給你多個選擇，流程清晰不跳步。不足的是目前沒有使用示例和快速上手指南，新使用者可能需要花時間閱讀完整說明才能上手。整體而言，這是一個工作流程規範、內容安全意識強的電商內容策劃工具。