Community影像github.com

範本品牌重塑

將 Next.js App Router 專案(及其 NestJS API,如果有的話)重塑為新品牌(名稱與文字商標、顏色、標誌與圖示檔案、各語系文案、元資料與 SEO 標題、電子郵件、種子資料),然後確認舊名稱已完全移除且所有建置皆通過。當被要求為新業務重新品牌、白標或重新命名範本、起手式或應用程式時使用。

範本品牌重塑 是什麼?

這個技能提供一個逐步的自動化流程,將基於 Next.js App Router 與 NestJS 的專案完整重塑品牌。它涵蓋了從收集新舊品牌資訊(名稱、顏色、標誌檔案、語調)開始,到最終建置驗證的所有步驟。其核心是一個檢查腳本,用於驗證每一步驟是否成功完成,確保舊品牌元素(如名稱、顏色、文案、元資料、電子郵件等)被徹底取代,且所有建置皆通過。此技能支援 Claude Code、Cursor 等開發者工具,並透過嚴格的檢查機制防止遺漏任何品牌元素。它特別設計用於安全地更名範本或應用程式,避免中斷現有安裝或資料。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/aniq-ui-pro/agent-skills/tree/HEAD/skills/template-rebrand

Installed? Explore more 影像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

重塑 Next.js(及 NestJS)專案品牌

依序執行各步驟。每個步驟結束時都有一個檢查:執行它,修正發現的問題,然後才能繼續。CHECK 表示以下命令,從專案根目錄執行:

node ${CLAUDE_SKILL_DIR}/scripts/rebrand-check.mjs check \
  --old "舊名稱" --old "其他腳本中的每個舊名稱" \
  --new "新名稱" --new "其他腳本中的每個新名稱"

當舊名稱是常見詞彙(如 STORE)時,加上 --case;對於刻意保留舊名稱的檔案,加上 --allow <路徑>。切勿執行盲目的搜尋取代。

0. 簡報、對應與基準

  1. 記錄專案使用的每種形式的舊名稱(各語言、slug、電子郵件網域)以及每種語言的新名稱、品牌顏色、標誌檔案和語調。如果請求中遺漏了某項,請選擇一個合理的值,繼續進行,並在報告中列出該選擇。
  2. 執行 node ${CLAUDE_SKILL_DIR}/scripts/rebrand-check.mjs map。
  3. 在進行任何編輯之前,先根據對應執行每個應用的建置命令一次。

檢查:你擁有對應、一個可以逐步減少的 CHECK 命中數,以及每個建置的結果。已失敗的建置應標記為非品牌重塑所導致。

1. 名稱與文字商標

品牌設定檔、標誌元件、網頁應用程式清單,以及種子寫入的任何設定列(電子郵件寄件者名稱通常在此處)。除非被要求,否則保留套件名稱、環境變數名稱、資料庫名稱、Docker 磁碟區與儲存前綴:重新命名它們會中斷安裝和現有資料。

檢查:CHECK 在「brand config」下顯示 0 個命中。你保留的基礎架構命中必須寫入報告。

2. 顏色

對應中列出的主題檔案中的品牌令牌(淺色與深色),以及清單或視口中瀏覽器的主題顏色。元件中不應直接寫入顏色。

檢查:針對每個舊品牌顏色使用 --old "#舊十六進位" 執行的 CHECK 顯示 0 個命中,且新顏色上的文字在兩個主題中均保持 4.5:1 的對比度。

3. 標誌與圖示檔案

更換對應中列出的文字商標、標記、favicon、應用程式圖示與分享圖片。保留檔案名稱與大小,或更新所有引用。開啟每個新檔案並檢查它。

檢查:CHECK 報告在 public/ 中沒有遺失的圖片路徑,且沒有檔案或資料夾名稱包含舊名稱,除非你刻意保留。

4. 各語系文案

重寫,而不僅僅是重新命名:首屏、關於、頁尾、法律、支援、SEO,以及任何描述舊業務的句子。每個語系中使用相同的鍵,每種語言都使用本地語言撰寫。

檢查:CHECK 在「messages」下顯示 0 個命中,且沒有語系或訊息檔案在一個語言中出現新名稱而在另一個語言中沒有。

5. 元資料與 SEO

根與頁面佈局、generateMetadata、標題範本、Open Graph 與 Twitter 欄位、JSON-LD、sitemap、robots、清單的 name 與 short_name。

檢查:CHECK 在「metadata and SEO」下顯示 0 個命中。

6. 電子郵件

API 發送的每種語言的寄件者名稱、主旨、頁首與頁尾、連結。寄件者地址與網域來自環境變數:在報告中列出它們。

檢查:CHECK 在「emails」下顯示 0 個命中。

7. 種子與模擬資料

種子程式、fixtures 與模擬目錄:產品、類別、設定列、示範帳號電子郵件網域、圖片路徑。API 種子與任何前端模擬資料必須一致。

檢查:CHECK 在「seed data」下顯示 0 個命中。

8. 建置與最終檢查

再次執行每個應用的建置命令。修正錯誤直到每個都通過。除非被要求,否則不要啟動開發或生產伺服器。

檢查:每個建置都以退出碼 0 結束,然後 CHECK 列印 Result: PASS。

報告

每個步驟修改的檔案、為簡報中遺漏的事項所做的選擇、每個允許的命中及其原因、建置結果,以及留給人員處理的事項:網域、DNS、電子郵件寄件者、法律文字。

相關技能