理髮廳著陸頁技能

明確啟動

主要觸發指令：

/LANDINGPAGE

別名：

/LANDINGBARBERIA

指令不區分大小寫。

範例：

/LANDINGPAGE
/LANDINGBARBERIA
/LANDINGPAGE 我想要一個在基多的頂級理髮廳網站
/LANDINGBARBERIA 店名: Black Crown

當其中一個指令被呼叫時：

立即啟動此技能。
進入探索訪談模式。
首先閱讀使用者當前的訊息與對話上下文。
僅詢問遺漏的資訊。
在關鍵的商業簡報足夠完整之前，不要開始實作。
一旦簡報完成，自動繼續執行，無需詢問「你想讓我開始嗎？」。

捆綁的主藍圖 — 強制執行

此技能包含完整的原始設計/轉換藍圖，位於：

references/master-barbershop-landing-prompt.md

在規劃或實作著陸頁之前，請先閱讀該檔案。

將其視為以下各方面的權威基礎藍圖：

頁面架構
CRO 結構
AIDA
TOFU / MOFU / BOFU
內容推進
主視覺區
服務
藝廊
經驗
方案
前/後對比
團隊
推薦
Instagram/社群證明
地點
常見問題
最終行動呼籲
預約流程
WhatsApp
頁尾
響應式行為
動畫
效能
無障礙設計
在地 SEO
推薦技術
攝影指導
文案語調
行動呼籲分佈

當有真實商業資訊可用時，請勿盲目重複使用藍圖中的虛構佔位元。

藍圖是一個結構化系統，而非虛假商業事實的來源。

配套設計技能

此技能為協調者。

在視覺設計/實作之前，請確認以下配套技能是否已可用：

Impeccable
Taste Skill / design-taste-frontend

如果缺少且可以執行 shell，請從專案根目錄安裝：

npx impeccable install
npx skills add Leonxlnx/taste-skill

如果已存在，請勿重新安裝。

如果安裝需要核准，僅請求環境所需的核准。

如果無法執行 shell：

繼續使用此技能
手動套用相同原則
切勿聲稱已安裝這些技能

角色分工

此技能負責

探索
商業理解
商業真實性
提案
轉換策略
頁面架構
AIDA
TOFU/MOFU/BOFU
CRO
文案
行動呼籲邏輯
內容層級
資產策略
實作需求
SEO
效能
無障礙設計
QA

Taste Skill 協助

高階視覺方向
非一般化的版面決策
字體比例
間距節奏
組件個性
動態語言
前端品味

Impeccable 協助

UI 評論
精煉
層級
間距
打磨
一致性
響應式品質
以無障礙為導向的呈現

配套技能可以改善呈現，但不得覆蓋：

使用者的真實商業資訊
品牌限制
轉換目標
法律/道德限制
關鍵預約內容

探索訪談模式

訪談應讓使用者感到簡單，即使內部系統很先進。

當資訊很少時，提出一個精簡的分組問卷。

除非只有一個關鍵事實缺失，否則不要逐個問題詢問。

不要重複已回答的問題。

A. 商業身份

詢問：

理髮廳名稱
城市/鄰近地區
完整地址
Google Maps 連結（如有）
營業時間
WhatsApp/電話
電子郵件（如有相關）
Instagram
TikTok
其他社群檔案

B. 服務與定價

詢問：

提供哪些服務
每項服務的準確價格
大約所需時間
哪項服務應最強力推廣
套餐/組合
會員方案
首次來訪促銷
季節性優惠

當業務是真實的時，切勿自行發明價格。

C. 預約與轉換

詢問：

客戶目前如何預約
WhatsApp/電話/表單/預約平台/直接上門
僅限預約、僅限直接上門、或兩者皆可
主要行動呼籲
次要行動呼籲
當沒有後端時，使用者是否想要一個功能性的模擬預約流程

D. 受眾與定位

詢問：

理想客戶
年齡/族群（如有相關）
高階 / 都會 / 經典 / 奢華 / 街頭風格 / 老派 / 家庭 / 現代定位
這家理髮廳與眾不同的地方
客戶選擇它的原因
常見的異議
停車方便性
服務體驗
任何保證或安心措施

E. 品牌識別

詢問：

標誌
顏色
字體
標語
視覺符號
紋理
標誌性細節
品牌個性
期望氛圍

範例：

高階
陽剛
編輯風格
電影感
工業風
經典
簡約
奢華
都會

F. 真實視覺資產

要求使用者在可用時分享：

標誌
外部照片
內部照片
理髮師/團隊照片
客戶照片
理髮照片
鬍鬚作品
前/後對比照
產品照片
服務照片
獎項/認證

優先使用真實資產，而非素材庫或生成的影像。

切勿將生成的人物/室內空間呈現為真實員工、客戶或實際場所。

G. 推薦與證明

要求提供：

評論截圖
Google 評論
推薦
星級評分
評論數量
新聞報導
社群證明
客戶引言

在建立真實商業頁面時，切勿捏造看起來真實的推薦。

如果沒有真實評論，且使用者只想要一個原型：

在內部將其明確標記為佔位元
為日後替換做好結構安排
不要將其呈現為經過驗證的真實評論

H. 視覺參考 — 強制性問題

詢問：

你有沒有喜歡的理髮廳或網站視覺參考？

使用者可以提供：

網站
Pinterest 圖片
Behance
Dribbble
Instagram 參考
螢幕截圖
情緒板
設計畫廊照片
實體理髮廳照片
其他品牌參考

當有用時，詢問他們喜歡每個參考的哪一點：

主視覺區
字體
調色盤
攝影
選單
服務卡片
定價
藝廊
動態
行動呼籲
氛圍
整體感覺

參考規則

使用參考來提取：

構圖
層級
視覺節奏
空間密度
字型關係
攝影處理
組件模式
動態想法
色彩關係
編輯方向

請勿逐字複製第三方網站。

請勿重現第三方標誌、專有文案、獨特品牌資產或獨特的藝術作品，除非使用者擁有這些或已獲得許可。

漸進式完成

在每次使用者回應後：

在內部標記已知欄位
僅詢問遺漏的關鍵資訊
不要重新開始問卷
不要重複已回答的問題

當有足夠資訊時，自動繼續執行。

內部商業 + 品牌簡報

在設計之前，建立一個結構化的內部簡報：

business:
  name:
  category: barbershop
  city:
  neighborhood:
  address:
  maps_url:
  hours:
  phone:
  whatsapp:
  email:
  social:

conversion:
  primary_goal: booking
  primary_cta:
  secondary_cta:
  booking_channel:

audience:
  ideal_customer:
  positioning:
  objections:

brand:
  logo:
  colors:
  typography:
  slogan:
  visual_signatures:
  personality:

services:
  - name:
    description:
    price:
    duration:
    priority:

offers:
  packages:
  memberships:
  promotions:

assets:
  local_photos:
  team_photos:
  client_photos:
  haircut_photos:
  before_after:
  reviews:

references:
  - source:
    liked_for:

technical:
  current_stack:
  booking_backend:
  analytics:

這是內部的，除非使用者要求查看。

藍圖調整

在商業簡報準備好之後：

閱讀 references/master-barbershop-landing-prompt.md。
提取完整的策略/頁面系統。
將所有虛構值替換為可用的真實使用者資料。
移除不相關的區段。
在有用時添加遺漏的特定商業區段。
保留轉換旅程：
- 衝擊
- 價值主張
- 服務
- 作品證明
- 利益
- 經驗
- 定價
- 推薦
- 團隊
- 地點
- 異議
- 預約
不要在 UI 中暴露 AIDA/TOFU/MOFU/BOFU 標籤。

預設漏斗

TOFU / 注意力

典型：

頁首
主視覺區
視覺證明
關鍵差異化因素
第一個行動呼籲

MOFU / 興趣 + 渴望

典型：

服務
藝廊
經驗
差異化
團隊
定價
前/後對比
社群證明

BOFU / 行動

典型：

評論
地點
常見問題
預約
WhatsApp
最終行動呼籲

當商業需求或參考證明有更好的順序時，調整此順序。

文案寫作

語調：

自信
陽剛
直接
優雅
高階

偏好：

簡短標題
具體的服務語言
在地關聯性
證明
真實差異化
強烈的動詞

避免：

通用的 AI 文案
模糊的奢華陳腔濫調
「歡迎來到我們的理髮廳」
無根據的最高級
長段落

視覺方向

基礎視覺方向來自捆綁的藍圖：

高階
陽剛
編輯風格
現代
都會
精緻
電影感
簡約
獨特而不做作

但使用者的真實品牌和參考優先。

避免：

SaaS 模板美學
藍色/紫色科技漸層
過多的圓角卡片
卡通插圖
過多的圖示
廉價的理髮廳陳腔濫調
視覺混亂

資產策略

優先順序：

使用者提供的真實商業資產。
使用者擁有的品牌資產。
使用者提供的參考作為靈感。
生成的裝飾/概念資產。
僅在必要時使用素材庫資產。

如果存在原生圖片生成功能：

在有用時將其用於裝飾性或概念性的輔助圖像
請勿捏造真實的客戶、團隊成員、評論或真實場所

技術實作

動態前端需求

此技能必須建立一個真實的互動前端，而非靜態模型。

首選實作順序：

如果現有專案已使用 Next.js
- 保留 Next.js
- 在合理範圍內保留當前架構
- 在現有專案內建立著陸頁
如果現有專案已使用 React
- 在無需遷移時保留 React
- 保留路由/建置慣例
- 將著陸頁添加為可供生產環境使用的 React 組件
如果不存在前端專案
- 使用以下技術建立新的 Next.js 專案：
  - Next.js
  - React
  - TypeScript
  - Tailwind CSS
- 除非專案上下文另有要求，否則使用 App Router。

有用的預設輔助函式庫：

Framer Motion：用於高階動態/互動
Lucide React：用於克制的 UI 圖示

不要在沒有明確目的的情況下添加依賴。

所需的互動性

頁面應包含相關的真實互動行為，例如：

黏性/半透明導覽
全螢幕或動態行動選單覆蓋層
流暢的區段導覽
藝廊/燈箱
前/後對比
推薦輪播/滑動行為
常見問題手風琴
預約模態框/抽屜
多步驟預約介面
響應式行動黏性行動呼籲
懸停/焦點狀態
減少動態支援

不要實作看起來可點擊但沒有任何作用的假互動。

元件架構

清晰地元件化。典型的元件：

Navbar
MobileMenu
Hero
ValueProposition
Services
Gallery
Experience
Pricing
BeforeAfter
Barbers
Testimonials
SocialProof
Location
FAQ
BookingModal
FloatingWhatsApp
MobileStickyCTA
Footer

根據實際業務調整元件。不要僅僅因為參考藍圖中存在就建立未使用的區段。

專案檢查

在編碼之前：

檢查專案根目錄
偵測套件管理器
檢查 package.json
偵測 Next.js/React/Tailwind 慣例
識別現有的設計系統/組件
保留有用的慣例
避免破壞性重寫

如果專案是空的，則初始化前端，而不是僅產生 HTML 片段。

預約系統

如果沒有後端：

建立一個功能性的模擬預約 UI
支援服務選擇
理髮師選擇
日期
時間
客戶詳細資料
確認狀態

如果沒有後端，切勿虛假宣稱預約已遠端儲存。

如果存在真實的後端/整合：

使用現有架構
保留真實的可用性邏輯
驗證成功/失敗狀態

如果使用 WhatsApp：

建立清晰的預約行動呼籲
在適當情況下預填有用的訊息
針對行動裝置最佳化
不要捏造電話號碼

地圖

當存在地圖 URL/地址時：

顯示真實地址
連結至路線
在合適時嵌入地圖

在地 SEO

盡可能包含：

結構化資料 (JSON-LD LocalBusiness)
營業時間
地址
電話
地圖整合
在地相關文案
連結至 Google 個人檔案（如有）
響應式設計
效能最佳化
無障礙合規
社交連結

無障礙設計

實作：

語意化 HTML
標題層級
aria 標籤
焦點管理
鍵盤導覽
顏色對比度
減少動態支援
表單無障礙設計
圖片的替代文字

效能

優先考量：

快速首次繪製
有意義的內容
圖片最佳化
程式碼分割
延遲載入
最小化版面變動
無障礙

QA

交付後執行：

標題/敘述檢查
連結驗證
地址/電話/WhatsApp 驗證
預約流程測試
多裝置響應式測試
關鍵互動驗證
圖片載入檢查
在地 SEO 驗證
無障礙標準檢查

當發現問題時：

清楚溝通
不要隱藏錯誤
提出明確的解決方案
獲得使用者批准後修正
不要假設一切都正常

交付格式

在開發伺服器中預覽中提供實時結果。

付款與整合

如果環境有付款或預約 API：

詢問使用者是否要整合
不要未經明確要求即強制使用
當未經使用者同意即新增時，提供明確的取消/移除方法

輸出格式

一般輸出

始終使用使用者的語言溝通。

`/LANDINGPAGE` 輸出

當通過 /LANDINGPAGE 呼叫時：

如果資訊不足，進入探索模式。
否則，建立頁面。
始終產生生產就緒的組件。
在開發伺服器中提供即時結果。

`/LANDINGBARBERIA` 輸出

與 /LANDINGPAGE 相同。

在你喜歡的 AI 中提問

說明文件