Hypelink Rich Brand Page

Skill：打造內容豐富的品牌頁

把品牌頁從「一排連結」升級成有分頁、有多元模組、有設計感連結按鈕的完整品牌大廳。 本 skill 是「怎麼組得豐富」的實戰手冊；工具的完整參數見 hypelink-brand-page-mcp。

何時使用

• 「幫我把品牌頁做豐富一點 / 模組多加一點」
• 「照 XX 場景（偶像 / 餐飲 / 個人品牌…）把整頁內容填好」
• 「加一些漂亮的連結按鈕，連到我的 Spotify / IG / 訂位」
• 想參考現成範例：@start_idol_demo、@start_cafe_demo、@start_pro_demo（實際上線的範例品牌）

心法：豐富 = 分頁 × 多元模組 × 設計感連結 × 命名/標籤

1. 分頁（folders）：2–3 個分頁把內容分群（例：關於／作品／聯絡），比一長串更好逛。
2. 多元模組（page modules）：每個分頁放 3–5 個不同模組，開場資訊 → 行動/會員 → 社群/聯絡。
3. 連結按鈕：用漸層或圖片背景的大按鈕連到相關網站，質感立刻拉高。
4. 命名 + 標籤：好名字讓人記得、好標籤讓人在「品牌探索」找到你。

---

建置流程（每一步都先 dry_run 再正式）

1. 開場先讀 homeinfo.get_overview 看現況。
2. 規劃分頁 folders.create / folders.update：依場景命名（如「關於 & 菜單」「行程 & 作品」「預約諮詢」）。至少保留一個分頁。
3. 每個分頁放模組 modules.add {folderId, moduleId, data}：見下方「模組選型速查」。data 形狀隨 moduleId 變，不確定就先 modules.list 看既有模組或查 tools/list。
4. 加連結按鈕 links.create（+ links.set_image 設圖片封面）。漸層背景見「連結按鈕」一節（MCP 有限制）。
5. 命名 + 標籤 profile.update（name/description）＋ discovery 設 tags。
6. 發布 + 複查：profile.update { isPublic:true }，再 homeinfo.get_overview 檢查。

---

模組選型速查（moduleId → data 形狀 → 重點）

A. 內容直接存 data（可用 modules.add 直接建，最常用）

| moduleId | data 重點 | 備註 / 坑 | |---|---|---| | richtext | { content } | content 是 HTML（`//），**不是 markdown**（## 會原樣顯示） | | bio | 自我介紹 | 簡短開場 | | text-btn | { text, url, style } | style: primary/… 單一行動按鈕 | | faq | { title, items:[{q,a}] } | 折疊問答 | | testimonial | { title, items:[{quote,author,role,avatarUrl,rating}] } | 客戶好評；rating 0–5 | | countdown | { title, subtitle, targetAt, ctaText, ctaUrl, accentColor, endedMessage } | **targetAt 必須是未來時間**（ISO，如 2026-12-15T20:00:00+08:00），否則顯示已結束 | | member-recruit | { title, description, perks, ctaText } | perks 每行一項權益 | | tour-schedule | { title, showsText, layout, hidePast, accentColor } | showsText 每行：日期 \| 城市 \| 場地 \| 購票連結 \| 狀態(onsale/soldout/upcoming) | | album-wall | { title, albumsText, layout, spinOnHover, accentColor } | albumsText 每行：標題 \| 封面URL \| 連結URL（需公開圖片 URL） | | image-carousel | { title, images, captions, autoplay, interval } | images / captions 用換行分隔；需公開圖片 URL | | store-map | { title, address, hours, mapUrl } | mapUrl 留空會**用 address 自動產生 Google Map**，最省事 | | line-add-friend | { title, description, lineId, url, showQr } | 在地觸點；showQr:true 顯示 QR | | social-card | { title, instagram, facebook, youtube, tiktok, threads, x } | 填帳號 handle | | marquee | { text, bgColor, textColor, speed, layout } | speed: slow/normal/fast；layout: full/half | | resume-experience | { title, items:[{company,position,location,startDate,endDate,description}] } | 個人品牌經歷 | | resume-education | { title, items:[{school,department,degree,startYear,endYear}] } | degree: high_school/associate/bachelor/master/phd/other | | resume-skills | { title, items:[{name,level}] } | 技能 + 熟練度 | | portfolio-case | { cover, title, client, role, year, summary, highlights, url } | cover 需公開圖片 URL；highlights 換行分隔 | | save-contact | { name, title, org, phone, email, website, avatarUrl, buttonText, hint } | 一鍵存通訊錄 | | divider` | — | 分隔留白 |

B. 需要「後端先有資料」才會顯示（先建資料，再放模組；否則空白 / 不顯示）

brand-services（服務目錄）、mall-products（商城商品）、mall-reviews（買家評價）、news-list（最新消息）、articles-list（專欄）、course-list（Mini 課程）、coupon-claim（需先建優惠券）、reservation（需先設預約）、event-list / event-timeline（需先建活動）。

> 這類模組拉取其他系統的資料。想用它們，先透過對應功能（商城 / 課程 / 活動 / 優惠券…）建立資料，模組才有東西可顯示。純展示用途時，改用 A 類（richtext 手寫菜單/服務也可以）。

---

連結按鈕（漸層 / 圖片背景）

連結卡（links.create）欄位：

• backgroundType: color | gradient | image
• backgroundColor（hex）、backgroundGradient（完整 CSS gradient 字串）、backgroundAssetId（圖片，先上傳取得）
• buttonSize: small | medium | large（large ≈ 160px 高，最像 hero 按鈕）
• textPosition: top-left/top-right/bottom-left/bottom-right/center

> ⚠️ MCP 限制：MCP 的 links.create / links.update 目前只開放基本欄位（name/url/size/type/description/redirectType）。 > 漸層與 buttonSize/textPosition 未在 MCP 開放 → 漸層按鈕請走 dashboard（或後端 REST）。 > 圖片封面可用 MCP links.set_image（吃公開 URL，後端 re-host）。

可直接抄的漸層配方（backgroundType=gradient）：

Spotify   linear-gradient(135deg,#1DB954 0%,#191414 100%)
Instagram linear-gradient(135deg,#F58529 0%,#DD2A7B 50%,#8134AF 100%)
YouTube   linear-gradient(135deg,#FF0000 0%,#7A0000 100%)
LINE      linear-gradient(135deg,#06C755 0%,#048C3E 100%)
LinkedIn  linear-gradient(135deg,#0A66C2 0%,#004182 100%)
品牌紫    linear-gradient(135deg,#7C3AED 0%,#4C1D95 100%)
粉→紫     linear-gradient(135deg,#FF5C9A 0%,#7C3AED 100%)
暖橙→棕   linear-gradient(135deg,#F59E0B 0%,#7C2D12 100%)

連去哪：Spotify / Apple Music、IG / YouTube / TikTok、官網、線上訂位（inline / EZTABLE）、Google Maps、預約（cal.com / Calendly）、電子報（Substack）、KKTIX 等 —— 挑與品牌相關的即可。 圖片背景：用一張有氛圍的照片（商品 / 空間 / 作品）當背景、文字放 bottom-left，比純色更吸睛。

---

命名 & 標籤（決定被記得 / 被找到）

• 名稱：品牌/人名 + 定位，例「星野 STARLIGHT · 應援基地」「小巷咖啡 Lane Coffee」「陳品睿 · 品牌顧問」。中英並列利於搜尋與打卡。
• handle：用跨平台一致的英文名，Email 簽名 / 名片 / bio 都放同一個。
• 標籤（discovery tags）：用「受眾會搜的詞」，決定你出現在「品牌探索」的哪一區。例：偶像→偶像/應援/K-Pop；餐飲→咖啡廳/餐廳/台北；顧問→個人品牌/顧問/講師。

---

進階：變現模組怎麼嵌

• Mini 商城：先在商城建商品（mall.* 或 dashboard），再放 mall-products 模組；適合周邊 / 伴手禮 / 電子書。
• Mini 課程：先建課程/章節/單元，再放 course-list。
• 會員：member-recruit 招募 + 會員等級綁權益 / 會員價。
• 名單神器：投廣落地頁（lead_pages.*）搭配活動導流。

> 金流敏感操作（結帳 / 退款 / 出金）走 dashboard，見 hypelink-commerce-mcp。

---

常見坑（務必避開）

1. richtext 用 HTML 不是 markdown —— ## 標題 會原樣顯示，請用 ``。
2. countdown 的 targetAt 要未來時間 —— 過去會顯示「已結束」。
3. 圖片類模組/連結需要「公開可存取的圖片 URL」 —— album-wall / carousel / portfolio 的圖、圖片背景連結；MCP 用 *.set_image（吃公開 URL）或走上傳流程；別留 example.com 佔位。
4. 用 company 範本建立會附帶佔位連結（example.com 的「公司官網」等）—— 記得刪掉再放自己的內容。
5. 模組上限：Free 12 / Pro 30 / Max 50；分頁至少保留一個。
6. 每個模組要正確 folderId；模組是「整包覆寫」語意，改動前先 modules.list 取現況、只改必要部分。
7. 寫入前先 dry_run；destructive 走兩階段 confirmToken；缺 scope 回 SCOPE_DENIED。

---

範例藍圖（可直接當範本改）

用「分頁 → 模組 → 連結」三層規劃。以下是三個實際上線範例的組成：

偶像應援 @start_idol_demo

• 分頁：應援基地 / 行程 & 作品 / 加入我們
• 模組：richtext(關於)、countdown(生日應援倒數)、member-recruit、marquee ｜ tour-schedule、album-wall(封面圖) ｜ line-add-friend、social-card、faq、save-contact
• 連結：Spotify、KKTIX、YouTube、Instagram（漸層）＋限定周邊（圖片背景）

餐飲 @start_cafe_demo

• 分頁：關於 & 菜單 / 訂位 & 環境 / 聯絡我們
• 模組：richtext(關於)、richtext(菜單)、text-btn(訂位)、member-recruit(熟客) ｜ image-carousel(環境照)、store-map、faq ｜ line-add-friend、testimonial、save-contact
• 連結：inline 訂位（暖橙漸層）、週末甜點（圖片背景）、Google Maps、IG、foodpanda

個人品牌 @start_pro_demo

• 分頁：關於 & 服務 / 經歷 & 作品 / 預約諮詢
• 模組：richtext(關於)、richtext(服務)、text-btn(預約)、testimonial ｜ resume-experience、resume-skills、resume-education、portfolio-case×2(封面圖) ｜ faq、social-card、inquiry-form、save-contact
• 連結：cal.com 預約、品牌指南、LinkedIn、演講回顧（圖片背景）、電子報

---

與其他 skill 的關係

• 工具完整參數與 scope：hypelink-brand-page-mcp
• 商城 / 課程 / 聯盟 / 名單：hypelink-commerce-mcp
• 活動：hypelink-event-mcp

> 名稱 / 分頁 / 模組 / 連結的任何寫入都與 dashboard 同一條 pipeline、立即反映公開頁，並寫 mcp_audit_log。

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: HypeLinkOfficial
• Source: HypeLinkOfficial/hypelinkclaude_skill
• License: MIT

Install and usage instructions live in the source repository linked above.