業主登陸頁

一個讓經紀人可以發送（或在開發拜訪時展示）給業主看的網頁，讓業主親眼看到自己的房子如何被精美呈現並順利銷售。單頁設計、輕量無須伺服器，一分鐘內即可免費發布。

檔案

檔案	說明
`plantilla/index.html`	頁面本身（設計、樣式與組裝）。每個物件不需編輯。
`plantilla/datos.js`	所有會變動的內容：品牌、房屋、文案。只需填寫這個檔案。
`plantilla/plano3d.css`	3D 區塊的樣式（僅在有平面圖時使用）。
`ejemplo/`	使用虛擬資料的完整登陸頁（「照片」為插圖）。開啟以查看成果。
`referencia/marca-primera-vez.md`	首次使用時的品牌問題、色票與字型。
`referencia/desde-un-portal.md`	如何從 Idealista 或其他入口網站的連結取得資料與照片。
`referencia/publicar.md`	在電腦上預覽並免費發布（Vercel 或 Netlify）的逐步指南。

步驟 0 · 經紀人的品牌（僅第一次）

讀取 ~/.claude/mi-marca-inmobiliaria.md。

如果存在：直接使用，不再詢問。只有當經紀人要求變更時才改（「換我的顏色」、「新照片」、「換字型」）。
如果不存在：執行本集合中的技能 mi-marca，並在檔案建立後繼續。如果 mi-marca 未安裝，請參照 referencia/marca-primera-vez.md，該文件總結了三種方式（手動、從3種示意圖中選擇、從經紀人的 Instagram 或網站抓取），並以相同格式儲存檔案。

檔案中的 estilo 欄位決定頁面的視覺變體：elegante（預設）、moderno、minimalista 或 calido。如果帶有其他值，請使用這四種中最接近的。

步驟 1 · 房屋資料

根據經紀人提供的內容：

入口網站連結：遵循 referencia/desde-un-portal.md（資料、照片及平面圖）。
照片 + 資料：要求提供照片（資料夾或拖曳到對話中）以及基本資訊：區域、平方公尺、臥室數、衛浴數、樓層、特色、建議售價（選填）和業主姓名。只問缺少的資訊，集中在一個訊息內。未知的欄位留空，頁面上不會顯示。

關於入口網站照片的提醒：這些照片通常帶有廣告主的版權。僅在此私人提案中向業主展示時使用（頁面帶有 noindex）。實際刊登廣告時，請使用自己的照片。使用時請告知經紀人。

步驟 2 · 建立資料夾

<工作目錄>/landing-<街道或區域>/
  index.html        ← 從 plantilla/index.html 複製
  datos.js          ← 從 plantilla/datos.js 複製，並填入資料
  fotos/            ← 01.jpg, 02.jpg…（最明亮的一張排第一；建議寬度 1600-2000 px）
  marca/            ← 從品牌檔案的路徑複製經紀人的 Logo 和照片
  (若有平面圖) plano3d.css, plano3d.js, plano-data.js

過大的照片（超過 1 MB）：在 Mac 上使用 sips -Z 2000 foto.jpg 縮減後再使用。
如果要發布，資料夾名稱不應包含業主的個人資料。

步驟 3 · 3D 平面圖（僅在有平面圖時）

使用技能 plano-3d（在本集合中）來繪製 plano-data.js。將 plano-3d/motor/plano3d.js 和 plantilla/plano3d.css 複製到資料夾，並在 datos.js 中設定 plano3d: true。在行銷計畫中加入一個支柱 { icono: 'cubo', t: 'Plano en 3D', … }。沒有平面圖時，登陸頁僅靠照片就能完整呈現：不要虛構平面圖。

步驟 4 · 在 `datos.js` 中撰寫文案

語氣：使用品牌檔案中的 tono 欄位。以「你」稱呼業主，用簡短具體的句子描述他的房子。

標題：房屋名稱加上明確的承諾。例如：「你在 Ruzafa 的房子，以它應有的方式呈現。」
亮點（3 或 6 個）：買家會重視的特色（採光、屋況、地段、格局、配備），每個都要說明原因。
行銷計畫：以模板中的支柱為基礎，針對房屋調整（例如：僅對空房間或舊房間進行虛擬裝潢）。
手機版廣告：入口網站的標題、社群媒體的吸引點，以及簡短的看房邀請文案。
30-60-90 天日曆 和 每週報告：根據經紀人的工作方式調整。報告中的數字為示意性質，頁面上會註明（「範例資料」）。
經紀人簡介：真實的經歷。絕不虛構年資、成交數、評價或獎項：如果經紀人未提供，設定 cifras: []。
不要承諾售價或保證成交時間。如果有價格，請標示為「僅供參考」。

步驟 5 · AI 渲染（選用）

僅在經紀人已有自己的 AI 工具來裝飾照片時使用。這些照片可以作為額外照片加入藝廊，並標示「虛擬裝潢（僅供參考）」。登陸頁的設計在沒有這些照片時依然完美。

步驟 6 · 審查（務必在交付前執行）

使用 npx serve <資料夾> 啟動服務，並在整合瀏覽器中開啟：

以電腦尺寸和 375 px 寬度檢視：所有內容不超出邊界（無水平捲動），文字在封面照片上清晰可讀，且 WhatsApp/撥號按鈕在手機版頁面底部出現。
藝廊：每張照片都可以放大，並使用箭頭切換。
如果有平面圖：3D 模型載入，牆壁立起，且北歐和現代風格可進行佈置。
WhatsApp 按鈕：使用經紀人的號碼和訊息開啟 wa.me。撥號按鈕：正確的 tel: 連結。
主控台無錯誤。沒有遺漏任何以方括號 [] 標記的未填文字。接著用簡單的詞彙向經紀人說明如何預覽與發布（referencia/publicar.md）。

應避免的錯誤

深色 Logo 放在封面上：選單會疊在照片上；請使用淺色版本的 Logo（或不用 Logo，只放名稱）。
品牌顏色對比不足：color_principal 應為深色，color_secundario 應為淺色。如果經紀人的顏色順序相反，頁面會校正文字顏色，但建議提議交換兩者。
資料不一致：如果平面圖的平方公尺或臥室數與廣告不符，請提醒經紀人。
個人資料出現在 URL 中：業主姓名應放在頁面內，絕不能出現在發布的專案名稱中。

在 Claude 應用程式中（無終端機時）

如果不存在 ~/.claude/mi-marca-inmobiliaria.md（例如在 Claude 應用程式中），請在專案知識庫或附加到對話的檔案中尋找 mi-marca-inmobiliaria.md 並同樣使用。如果仍未找到，則執行 mi-marca。始終以可下載的檔案形式（HTML、圖片）交付結果，並解釋如何使用 Netlify Drop 發布：前往 app.netlify.com/drop 並將資料夾拖曳進去。如果您無法開啟入口網站的連結，請要求提供照片並貼上廣告的文案文字。

房源業主專屬登陸頁生成器