AI Product Marketing Designer PRO 是一個專為行銷人員與產品經理打造的智慧化視覺生產力工具。
基於 Google 最新一代的 Gemini 2.5 Flash (推理與視覺) 與 Gemini 3 Pro Image (圖像生成) 模型，它能扮演您的「AI 創意總監」與「社群內容規劃師」，從單張產品圖出發，自動拆解品牌 DNA，並生成包含廣告主圖與社群 Stories 的完整銷售漏斗素材包。
免部署，點擊下方連結填入您自己的，已正確開啟付費及授權的 Gemini API Key，即可立即體驗 https://designer.icareu.tw/
若希望自行部署，請參考下方 GitHub/Cloudflare Pages的部署指南！
- 產品視覺分析: 自動識別產品材質、光影與設計語言。
- 品牌背景識別: 支援輸入品牌官網或品牌故事，AI 會自動過濾雜訊，提取核心品牌精神與 Tone & Manner。
- 競品/文案參考: 可貼上參考文案或競品資訊，AI 將拆解其「說服邏輯」與「敘事結構」並應用於您的企劃中。
- 三路並進: AI 總監會根據產品屬性，構思三條截然不同的視覺行銷路線 (Routes)。
- 差異化標準: 確保三條路線在目標客群、訴求方式、視覺風格、情感調性至少三個維度上不同。
- 品質保證: 遵循專業廣告海報標準（構圖、光影、文字排版、品牌一致性）。
- 目標客群明確: 每條路線明確指出目標客群（年齡、性別、職業、興趣、使用場景）。
- 視覺元素具體: 詳細描述色彩方案、字體風格、構圖方式、材質質感、氛圍營造。
- 概念預覽: 為每條路線生成 3 張高質感的廣告海報概念圖，協助您定調視覺風格。
- 比例選擇: 支援 3:4（直式）、4:3（橫式）、9:16（直式長圖）、16:9（橫式長圖）比例選擇。
- 圖片放大檢視: 生成後可點擊放大檢視，並支援下載。
- 參考圖上傳: 支援為每張概念圖單獨上傳參考圖片（Logo/風格）。
- 中英雙語摘要: 提供繁體中文的風格解說與畫面構成摘要。
一旦選定策略，AI 將自動規劃一套 8 張圖的完整社群行銷素材包：
- A. 方形主視覺 (Square 1:1):
- 包含標準電商白底圖 (Main White) 與情境廣告圖 (Main Lifestyle)。
- B. 社群長圖漏斗 (Stories 9:16 或 16:9):
- 自動規劃 6 張連貫的銷售故事：封面 (Hook) → 痛點 (Problem) → 解法 (Solution) → 細節 (Features) → 信任 (Trust) → 行動 (CTA)。
- 比例選擇: 支援 9:16（直式）或 16:9（橫式）比例選擇。
- 敘事連貫性: 確保 6 張圖在視覺元素、文案邏輯、故事節奏上完美銜接。
- 視覺一致性: 8 張圖統一色彩方案、字體系統、設計元素、品牌識別。
v1.02 引入了專業的廣告製作流程：
- 腳本審閱模式 (Script Review): 在生成圖片前，您可以完全掌控並編輯每一張圖的文案 (Copy) 與 AI 繪圖提示詞 (Prompt)。
- 精細化控圖 (Reference Control): 支援為企劃中的每一張圖單獨上傳參考圖片 (例如：最後一張 CTA 圖需要放上特定的 Logo，或第一張圖需要參考特定配色)。
- 一鍵量產: 確認無誤後，切換至製作模式即可快速生成高品質素材。
- 圖片放大檢視: 所有生成的圖片都支援放大檢視功能，方便檢查細節。
- 一鍵下載所有圖檔: 批次下載功能，支援 ZIP 打包，採用英文關鍵字命名規則，方便後續網頁建置自動化。
- 報告下載功能: 每個 Phase 完成後可下載分析報告（Phase 1: 視覺策略報告、Phase 3: 市場分析報告、Phase 4: 內容策略報告）。
- 深度市場洞察: 基於 Phase 1 選定的視覺策略，生成完整的市場分析報告
- 產品核心價值分析: 主要特色、核心優勢、解決的痛點
- 目標市場定位: 文化洞察、消費習慣、語言特性、搜尋趨勢
- 競爭對手分析: 自動識別 3 個主要競爭對手，分析其行銷策略、優勢與劣勢
- 買家人物誌: 生成 3 個詳細的潛在客戶描繪，包含基本資料、興趣、痛點、搜尋關鍵字
- 內容主題規劃: 為每個主題生成標題、描述、主要關鍵字、長尾關鍵字
- SEO 優化指導: 關鍵字密度建議、語意關鍵字、內外部連結策略
- 互動元素建議: 2-3 個互動元素建議（問卷調查、互動式圖表、產品比較工具等）
- 行動呼籲文案: 3 個自然且具說服力的 CTA 文案建議
- 網頁生成提示詞:
- AI Studio 版本: 適用於 Google AI Studio，生成 React + Tailwind CSS 網頁（500-800 字詳細提示詞）
- Gamma.app 版本: 適用於 Gamma.app，生成簡報/網頁結構（400-600 字詳細提示詞）
- 圖片自動引用: 如果 Phase 2 已生成圖片，提示詞會自動引用對應的圖片檔名
- 一鍵複製與開啟: 複製提示詞後自動開啟對應的生成平台
- 階段一優化:
- 差異化標準具體化（四個維度差異要求）
- 品質標準定義（構圖、光影、文字排版、品牌一致性）
- 目標客群明確化（新增目標客群描述欄位）
- 視覺元素具體化（新增視覺元素描述欄位）
- 品牌資訊處理深度（提取方法、雜訊過濾）
- 競爭差異化分析
- 輸出格式驗證
- 階段二優化:
- 敘事連貫性要求（轉場邏輯、視覺一致性、文案銜接）
- 視覺一致性要求（8 張圖統一風格）
- 文案長度規範（明確字數限制）
- CTA 設計具體化（動詞選擇、緊迫感、行動指示）
- 參考文案分析深度（結構分析、說服技巧、情感訴求）
- AIDA 模型應用（明確對應關係）
- 痛點挖掘深度（功能、情感、社交痛點）
- 信任背書多樣性（數據、證言、認證、品牌故事）
- 產品特點呈現（優先級、視覺化、術語轉譯）
- 階段銜接一致性（延續階段一的視覺風格）
- 輸出格式驗證（完整的格式檢查要求）
本應用程式使用 Google Gemini API 進行 AI 分析與圖像生成。為了確保安全與隱私，所有 API 調用都使用您自己的 API Key。
- 本地儲存: API Key 僅儲存在瀏覽器的
localStorage中，不會上傳至任何伺服器。 - 隱私保護: 所有 API 調用都在您的瀏覽器中直接執行，資料不會經過第三方伺服器。
- 隨時更換: 您可以隨時在應用程式中更換 API Key，無需重新載入頁面。
- 前往 Google AI Studio
- 登入您的 Google 帳號
- 點擊「Create API Key」建立新的 API Key
- 複製 API Key 並貼到應用程式的設定中
- 首次使用時，應用程式會自動彈出 API Key 設定視窗
- 輸入您的 Gemini API Key 並點擊「儲存」
- 之後即可正常使用所有功能
- 如需更換 API Key，點擊右上角的「更換 API Key」按鈕
- API Key 請妥善保管，不要分享給他人
- 建議定期檢查 API 使用量，避免超出配額
- 如遇到 API 錯誤，請檢查 API Key 是否正確或是否已啟用相關服務
- 在您的 GitHub 儲存庫中，建立資料夾路徑：
.github/workflows/ - 在該資料夾內建立一個檔案
deploy.yml - 複製以下內容貼上：
name: Deploy to GitHub Pages
on:
push:
branches: [ main ] # 或是 master，請確認您的主分支名稱
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Set up Node
uses: actions/setup-node@v4
with:
node-version: 20
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./dist
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
needs: build
runs-on: ubuntu-latest
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4- 進入 GitHub 儲存庫的 Settings > Pages
- 在 Build and deployment > Source 選項中，選擇 GitHub Actions (不要選 Deploy from a branch)
- 推送程式碼更新，等待 Actions 跑完 (約 1-2 分鐘)，您的網站就會正常顯示了！
如果您的網站部署在子路徑下（例如 https://username.github.io/repo-name/），需要在 vite.config.ts 中設定 base：
export default defineConfig({
base: '/repo-name/', // 替換為您的儲存庫名稱
// ... 其他設定
})- 登入 Cloudflare Dashboard
- 前往 Workers & Pages > Create application > Pages > Connect to Git
- 選擇您的 GitHub 帳號並授權
- 選擇要部署的儲存庫
- Project name: 輸入專案名稱
- Production branch: 設定為
main或master - Build command:
npm run build - Build output directory:
dist - Root directory:
/(預設)
如果需要設定環境變數，可以在 Settings > Environment variables 中新增：
NODE_VERSION:20(確保使用正確的 Node.js 版本)
- 點擊 Save and Deploy
- Cloudflare 會自動開始建置和部署
- 部署完成後，您會獲得一個
*.pages.dev的網址 - 可以設定自訂網域（在 Custom domains 中設定）
之後每次推送到 GitHub 的 main 分支，Cloudflare Pages 會自動重新建置和部署。
- Frontend: React 18, TypeScript, Tailwind CSS
- AI Models:
- Gemini 2.5 Flash: 負責多模態視覺分析、品牌語意理解、行銷策略規劃 (Thinking Budget Enabled)。
- Gemini 3 Pro Image Preview: 負責執行高解析度的廣告圖像生成 (支援 1:1、3:4、4:3、9:16、16:9 構圖)。
- Build Tool: Vite
- 狀態管理: React Hooks (useState, useEffect)
- 儲存: localStorage (API Key 本地儲存)
如有任何問題、建議或需要技術支援，歡迎加入 FlyPig 專屬 LINE 群組：
我們會在這裡提供：
- 技術支援與問題解答
- 功能更新與使用教學
- 社群討論與經驗分享
- 最新功能預覽與測試
如果您對 AI 視覺行銷工具感興趣，歡迎同步參考以下相關專案：
- AI Digital Portrait Studio - 專為電商設計 AI 人像圖片生成工具，免去繁複的手動輸入提示詞，整合 Gemini 影像模型與 Firebase，一鍵生成多視角專業人像商品圖，支援自訂風格、背景、姿態等參數。
- EC SEO SA - 電商 SEO 與內容行銷工具
如果這個專案對您有幫助，歡迎請我喝杯咖啡：
您的支持是我持續開發的動力！
若需協助委外部署或客製化選項開發（例如新增場景、人物姿態），歡迎聯絡 FlyPig AI：
- Email: flypig@icareu.tw
- LINE ID: icareuec
詳細的更新日誌請參閱 CHANGELOG.md
Open sourced by FlyPig AI
Copyright (c) 2025 AI Product Marketing Designer PRO