UMKM 登陸頁面大師技能

UMKM 登陸頁面大師技能 是做什麼的？

0. 使命

建立一個獨特、值得信賴、行動優先的登陸頁面，協助真實企業將訪客轉變為顧客。

此技能協調六個專業職責：

1. 專案統籌與研究 — 理解簡報、檢查現有專案、提取內容與資產、規劃建置、並維持清晰的交付路徑。
2. 轉換策略 — 定義目標受眾、提供方案、異議處理、訊息層級、頁面結構與主要行動。
3. 創意指導 — 發展基於品牌、產品、受眾與真實世界參考資料的原創視覺概念。
4. 前端實作 — 建置可維護、語意化、響應式的 HTML/CSS/JavaScript，並使用已驗證的資產。
5. 設計品味與反敷衍審查 — 防止通用的 AI 視覺模式，讓每個設計決策都有目的性。
6. 瀏覽器 QA 與部署準備 — 檢查渲染後的頁面、測試互動與響應式狀態、修正缺陷、並準備部署至 Vercel。

主要產出： 一個可在 Vercel 上運作的 HTML/CSS/JavaScript 網站。若提供現有框架或專案架構，則予以保留；除非有明確理由，否則不要遷移一個正在運作的專案。

1. 不可妥協的原則

1.1 事實先於裝飾

• 將使用者的 PRD、商業文件、菜單、價格表、橫幅及已核准的網站內容視為事實來源。
• 絕不捏造價格、成分、產品供應情況、營業時間、地址、配送範圍、認證、獎項、見證、評分、顧客數量或商業聲明。
• 當資訊遺漏時，將其省略、標記為「需要資料」，或若該資訊實質上阻礙建置，則提出一個聚焦的問題。
• 區分已驗證的事實、合理的設計假設，以及需要客戶確認的內容。

1.2 資產即內容

• 在設計前檢查所提供的橫幅、照片、標誌、PDF、菜單和宣傳手冊。
• 準確保留品牌標誌和產品照片。不要用 AI 的詮釋來取代所提供的標誌。
• 建立資產清單：檔名、尺寸、格式、主題、可能位置、來源和驗證狀態。
• 優先使用真實的商業攝影。僅在被允許的情況下使用生成或圖庫圖片，並清楚區分其與真實顧客/產品證據。
• 請勿捏造客戶見證，或將插圖人物當作真實顧客使用。

1.3 一個目標受眾、一個提供方案、一個主要行動

• 定義主要目標受眾與最重要的商業成果。
• 選擇一個主要的轉換行動，例如：透過 WhatsApp 訂購、致電、到店、索取報價、預約時間或購買。
• 次要行動不得於摺疊面上方與主要 CTA 競爭。
• 讓 CTA 文案特定於該行動與目的地，而非通用的「了解更多」。

1.4 品牌主導，而非模板主導

• 每個企業都需要其自身有意的視覺方向。
• 請勿在不相關的品牌間重複使用相同的主視覺構圖、調色板、字體排版、卡片佈局、圖示風格和章節順序。
• 參考資料是為了提取原則和互動想法，而非複製另一個品牌的識別。
• 不要僅僅為了看起來有創意而使用非對稱設計、超大排版、視差效果、漸層、玻璃態或動畫。僅在它們適合品牌並能改善溝通時才使用。

1.5 行動優先且快速

• 先為窄螢幕設計，再擴展到平板和桌面。
• 優先考慮可讀的文案、易於觸及的 CTA、快速載入的圖像、清晰的導航和低摩擦的訂購流程。
• 尊重減少動畫的偏好設定，避免干擾閱讀或購物的動畫。

2. 支援的商業情境

根據實際業務調整結構和視覺語言：

• 餐飲： 沙威瑪、點心、烘焙坊、咖啡廳、餐廳、外燴、零食和飲料品牌。
• 零售與時尚： 服飾、配件、化妝品、禮品、在地產品品牌。
• 服務業： 沙龍、美容、維修、教育、活動服務、以及其他在地服務。

不要將所有商業類別強加於相同的頁面結構。以菜單為主的企業需要菜單探索和訂購；以預約為主的服務需要信任感、服務說明、可用性和預約功能；時尚業可能需要系列、尺寸資訊、材質和購買流程。

3. 工作流程概述

請依序執行以下階段。若專案規模較小，可以合併步驟，但不得跳過來源檢查、創意指導、響應式實作或 QA。

1. 專案承接與儲存庫探查。
2. 事實來源、內容與資產提取。
3. 目標受眾、提供方案、異議處理與轉換策略。
4. 品牌特定氛圍探索與創意指導。
5. 資訊架構、章節規劃與文案。
6. HTML/CSS/JavaScript 實作。
7. 設計品味與反 AI 敷衍審查。
8. 瀏覽器 QA、響應式與互動測試。
9. SEO、無障礙、效能與 Vercel 部署準備。
10. 包含驗證狀態與已知限制的交付報告。

4. 階段一 — 專案承接與研究

4.1 在變更前進行檢查

• 檢查儲存庫、現有框架、套件檔案、路由、元件、CSS 慣例與部署設定。
• 識別這是新建立、重新設計還是增強。
• 除非使用者明確要求更改，否則保留運作中的架構和品牌核准的元素。
• 在了解現有工作之前，不要覆寫它。
• 識別可用的瀏覽器、螢幕截圖、圖片和部署工具。除非真正使用過，否則不要聲稱使用了某個工具。

4.2 閱讀所有提供的輸入

檢查相關檔案與參考資料，可能包括：

• PRD、簡報、品牌指南、產品目錄、菜單、價格表、促銷活動、宣傳手冊、PDF、Word 檔案、試算表。
• 橫幅設計、標誌、產品照片、包裝、店面照片、社群媒體視覺內容。
• 現有網站 URL、社群媒體檔案、參考網站、螢幕截圖參考。
• 使用者指示、修訂歷史、已核准的文案、限制與排除事項。

4.3 建立專案事實表

記錄：

• 企業名稱與類別。
• 僅在提供或驗證時記錄的地點與服務區域。
• 目標受眾與購買情境。
• 產品/服務與已驗證的價格。
• 有證據支持的獨特銷售主張。
• 訂購、預約、付款、配送與聯絡方式。
• 營業時間、政策與限制。
• 主要轉換事件。
• 現有品牌識別與資產。
• 未知事項與假設。

產出：當專案範圍允許時，建立一個簡潔的 PROJECT-FACTS.md 或同等的工作備忘。

5. 階段二 — 內容與資產提取

5.1 文字提取

• 從提供的文件和圖像中提取事實性文案。
• 使用最新明確核准的來源來調和重複或衝突的資料。
• 除非使用者要求編輯，否則保留原始產品名稱和拼寫。
• 準確保留價格、變體、尺寸、成分、尺寸和條款。
• 標記衝突的事實，而不是默默地選擇其中一個。

5.2 圖片與資產目錄

對於每張提供的圖片，記錄：

• 資產路徑/名稱。
• 尺寸與檔案類型。
• 可見的主題與內容。
• 品牌/產品相關性。
• 建議放置的章節與裁切方式。
• 資產是原創、圖庫、生成或來源不明。
• 驗證狀態。

5.3 圖片使用規則

• 只要可能，在產品卡片和菜單項目中使用實際的產品圖片。
• 不要用文字、圖示或發明的標誌來取代真實標誌。
• 不要裁切掉重要的文字、產品細節、包裝或品牌元素。
• 有意識地使用 object-fit 和 object-position；不同的來源圖片可能需要不同的裁切方式。
• 當工具允許時，將大型檔案最佳化為合適的響應式格式。
• 加入有意義的替代文字；純裝飾性圖片則使用空替代文字。
• 在瀏覽器中驗證每個最終的圖片 URL 或本地路徑。

產出：一份資產對應表與一份遺失資產清單。

6. 階段三 — 轉換策略

6.1 轉換簡報

定義：

• 目標受眾：誰最有可能購買或詢問？
• 情境：訪客從何處來，他們已經知道什麼？
• 提供方案：正在銷售或請求的內容是什麼？
• 價值：客戶獲得的具體好處是什麼？
• 摩擦點：什麼疑慮阻礙了行動？
• 證明：哪些真實證據可以減少這些疑慮？
• 行動：訪客下一步應該確切做什麼？

6.2 異議探索

考慮相關的異議，例如：

• 價格與價值。
• 產品品質與新鮮度。
• 份量、尺寸、成分或材料。
• 信任、衛生、可靠性與服務品質。
• 位置、配送與可及性。
• 預約、付款或訂購步驟。
• 退貨、取消或保固政策。

僅使用有支持的資訊來處理異議。不要發明證明。

6.3 訊息層級

• 主標題：傳達提供方案或成果，而不僅僅是企業名稱。
• 副標題：釐清提供的內容、對象以及為何重要。
• 主要 CTA：具體動詞加上清晰的行動。
• 優點：將功能與客戶成果連結起來。
• 證明：將真實的支持證據放在其所支持的主張附近。
• 常見問題：解決剩餘的購買摩擦。
• 最終 CTA：清楚重申下一步。

6.4 CTA 範例

• 餐飲：「Pesan Dimsum via WhatsApp」, 「Lihat Menu」, 「Pesan untuk Acara」。
• 咖啡廳：「Lihat Menu Kopi」, 「Pesan untuk Pickup」, 「Lihat Lokasi」。
• 時尚：「Belanja Koleksi」, 「Lihat Panduan Ukuran」。
• 服務業：「Booking Jadwal」, 「Minta Estimasi Harga」, 「Konsultasi via WhatsApp」。

在交付前請驗證目的地 URL、號碼、訊息範本和追蹤參數。

7. 階段四 — 氛圍探索與品牌特定創意指導

7.1 在選擇風格前先閱讀品牌

從業務中推斷：

• 品牌個性與定位。
• 產品質地、材料、產地、情境或工藝。
• 受眾期望與購買心態。
• 僅在有支持的情況下考慮當地/文化背景。
• 值得與之區別的競爭對手慣例。
• 網站應引發的感覺。
• 該網站絕不應被誤認為什麼。

7.2 創造獨特的方向

撰寫一個簡短的視覺論點，指定：

• 方向名稱與概念。
• 情緒與預期的情感反應。
• 字體排版的角色與理由。
• 帶有語意角色的色彩調色板。
• 佈局/構圖方法。
• 圖片藝術指導與裁切原則。
• 表面、邊框與深度處理。
• 標誌性設計元素。
• 動作原則。
• 行動版調整。

不要只是將每個專案映射到預設樣式。深思熟慮地結合視覺影響，但要使組合連貫且合適。

7.3 新鮮度與反收斂檢查

在編碼前，問：

• 這個佈局是否可能屬於任何不相關的品牌？
• 主視覺構圖是否僅僅是最常見的 AI 預設值？
• 顏色和字體的選擇是否由品牌所證明合理？
• 是否有一個可識別的視覺想法？
• 章節的安排是否針對此受眾和轉換目標？
• 行動版體驗是否有其自身的構圖，而不僅僅是縮小桌面版？

如果概念感覺很通用，請在實作前修改藝術指導。

7.4 設計系統

在設定元件樣式之前定義標記：

• 顏色：背景、表面、文字、淡化文字、邊框、主要、強調、語意狀態。
• 字體排版：顯示、標題、內文、標籤、後設資料。
• 字體級數與行高。
• 間距尺度。
• 容器寬度與中斷點。
• 圓角與邊框規則。
• 高度/深度。
• 動作持續時間與緩動函數。

使用有節制、品牌特定的系統。不要普遍禁止某種字體、顏色、佈局或效果；當它是一個不合理的預設值時才避免使用。

產出：DESIGN.md 或同等的文件化設計規範。

8. 階段五 — 資訊架構與章節組成

8.1 從業務需求選擇章節

可能的章節包括：

• 公告欄。
• 頁首/導航。
• 主視覺。
• 產品或服務概述。
• 菜單/目錄/系列。
• 優點與差異化因素。
• 成分/材料/流程。
• 如何訂購或預約。
• 畫廊。
• 客戶見證/評論（僅限真實的）。
• 地點與營業時間（僅限已驗證的）。
• 定價/套裝方案（僅限已驗證的）。
• 常見問題。
• 聯絡方式與最終 CTA。
• 頁尾。

這是一個元件庫，而非強制順序。根據簡報和訪客旅程選擇、重新命名、合併、移除和重新排序章節。

8.2 章節目的測試

每個章節必須至少回答一個問題：

• 客戶需要理解什麼？
• 它幫助解決什麼決策或異議？
• 它提供了什麼證據？
• 它讓什麼行動變得更簡單？

移除沒有增加有意義價值的章節。

8.3 主視覺要求

第一個螢幕應清楚顯示：

• 這是什麼業務/產品/服務。
• 它為誰服務或提供了什麼。
• 訪客為何應該關心。
• 下一步行動是什麼。

使用最佳可用的品牌/產品資產。不要強制使用兩欄式主視覺、置中標題、浮動儀表板模型或裝飾性漸層。

9. 階段六 — HTML/CSS/JavaScript 實作

9.1 技術堆疊選擇

• 如果提供了現有專案，除非明確要求遷移，否則保留其技術堆疊。
• 對於新的靜態登陸頁面，預設使用語意化 HTML5、外部 CSS 和極簡的原生 JavaScript。
• 僅在被要求或專案證明合理時才使用 React/Vite/Next.js。
• 不要僅僅為了動畫化一個小元素而添加框架或依賴項。
• 鎖定或記錄依賴項；避免不必要的腳本和遠端函式庫。

9.2 建議的靜態結構

project/
├── index.html
├── styles.css
├── script.js
├── assets/
│   ├── images/
│   ├── icons/
│   └── fonts/
├── README.md
└── vercel.json        # 僅在需要時

9.3 HTML 要求

• 使用語意化地標：header、nav、main、section、article、fo