管理後台預覽

Plug-in 外掛開發助手管理後台:內容、素材、部署、權限與驗證集中管理

這個後台入口讓管理者確認第一階段外掛、第二階段網站、第三階段會員權限、第四階段金流權益、送審與維運規劃是否都有來源、狀態、證據與交付包。實際登入、付款與正式資料仍需部署後用各自證據層確認。

第一階段

外掛與 MCP 交付

需求、工具、Skill、Logo、專案 ZIP、MCP 與部署交接要能被第二階段讀取。

第二階段

網站前後端交付

首頁、方案、文件、後台、API 摘要、素材、Next.js/React/Tailwind 來源與網站 ZIP 要一起交付。

後續階段

登入、付款、送審、維運

未完成階段要標清楚下一步與本人授權邊界,不得假裝已完成。

內容

網站內容管理

調整首頁、服務介紹、方案、文件與客服頁,避免不同頁面重複或混入其他專案文案。

素材

圖片素材管理

管理 Logo、主視覺、背景圖、替代文字與公開網址,部署前不得顯示未授權品牌素材。

部署

上線部署追蹤

分清本機、GitHub、Render、網站網址、Health、MCP 與 ChatGPT 實測,不用單一狀態混充完成。

權限

角色與權限

管理者、內容管理者、技術維護者與一般使用者權限分層,避免測試帳號污染正式資料。

驗證

驗證證據

保存建置、視覺截圖、內容守門、跨產業壓測與部署驗證,讓下一個 AI 可接續。

污染守門

專案內容隔離

開發助手自建網站內容只能用於本體驗證;未來不同產業網站不得混入開發助手商業邏輯或其他客戶內容。

稽核時間線

每次重產網站都要留下來源、修復、驗證與部署證據

  1. 讀取第一階段專案與對話紀錄。
  2. 建立頁面內容責任,避免導覽頁重複。
  3. 套用 UI 可見強化與動效舒適守門。
  4. 產生 ZIP、截圖、測試報告與部署驗證。

介面再分析強化層

56 個介面候選都要能被第二階段分析、安排與驗證

第二階段不再只說「已整合」。產生網站後會再讀一次頁面目的、行銷目標、使用者引導、色彩對比、動效舒適度與污染清單,然後把介面效果對應到首頁、方案、文件、後台、串接與素材頁。旋轉眩暈類不預設啟用,但仍以安全替代方案納入能力。

首頁

立體深度+重點總覽+動態標題

首頁負責讓訪客快速理解整個專案,不只講單一功能;適合重點標記、卡片總覽、立體卡片、打字效果與文字切換。

方案

動態邊框與主要按鈕

方案頁要把價格、階段、權益與不可承諾的邊界放在同一張可比較的視覺裡。

文件

追蹤線與終端面板

測試文件要看得懂驗證路線,適合進度追蹤線、測試面板、鍵盤提示與驗證分層表。

後台

側欄、頁籤、表格與稽核時間線

後台用側邊選單、分頁、狀態卡與管理資料表,讓管理者知道目前狀態與下一步。

素材

3D 圖片牆與上傳狀態

素材頁負責標誌、主視覺、網站壓縮檔、替換槽與公開網址證據,不再只有文字說明。

主要可見運用|48 個

01Dotted Glow Background讓主視覺或卡片有科技感與層次,避免只用平面色塊。home、templates
03Apple Cards Carousel展示案例、服務、課程、商品或作品集。home、marketing
04Lamp讓首頁主張更聚焦、更有高級感。home
05Background Beams強化註冊、等待名單、諮詢或主要 主要行動區 區。home、templates
07Background Beams With Collision強化活動頁、產品亮點與高衝擊主張。home、templates
08Aurora Background適合 AI、SaaS、科技、創意類網站營造現代感。home、templates
09Meteors讓方案卡、特色卡或促銷區更有記憶點。home、templates
10Glowing Stars Card強化功能、版本、方案與服務亮點。home、marketing
11Shooting Stars + Stars Background建立科技、教育、顧問、AI 產品的場景感。home、templates
14Spotlight引導使用者注意標題、重點或下一步。home、templates
15Spotlight New適合深色科技風與重要內容聚焦。home、templates
17SVG Mask Effect強化 before/after 或價值揭示,但不得藏必要資訊。home、marketing
18Tracing Beam說明流程、教學、階段交付與驗證脈絡。docs、guide
19Grid Background適合工具型、SaaS、資料型網站建立秩序感。home、templates
20Glowing Effect提升功能卡片互動與可掃讀性。home、marketing
21Google Gemini Effect展示資料流、服務流程或階段串接;公版需去品牌化。docs、guide
22Keyboard適合開發工具、快捷鍵、教學與操作提示。docs、admin
23Terminal展示部署、安裝、測試與開發流程。docs
24Tooltip Card補充角色、名詞、風險或服務商說明。privacy、terms
273D Card讓商品、服務、案例或方案卡更有立體層次。home、marketing
28Evervault Card適合資安、隱私、資料保護與信任證據。docs、privacy
29Card Stack展示評價、證言、案例、FAQ 或不同角色觀點。home、marketing
30Card Hover Effect提升功能列表與服務項目的探索感。home、marketing
31Wobble Card適合年輕、創意、娛樂類品牌;需避免過度干擾。home、marketing
32Card Spotlight適合權限、安全、步驟、注意事項與驗證清單。connect、docs
33Infinite Moving Cards展示客戶評價、品牌牆、成果或案例摘要。home、marketing
34Canvas Text強化關鍵字視覺記憶與主標語重點。home、marketing
35Encrypted Text適合 AI、資安、開發工具呈現資料處理感。home、marketing
36Layout Text Flip展示多產業、多服務或多價值主張。home、marketing
37Colourful Text凸顯標語中的核心價值或產業關鍵字。home、marketing
38Squiggly Text適合活潑品牌或活動頁,但正式產業需節制。home、marketing
39Typewriter Effect適合 AI 助手、搜尋、提示詞或導覽輸入情境。home、marketing
40Container Text Flip展示多種服務結果、產業類型或價值選項。home、marketing
41Hero Highlight讓核心句、承諾或差異化重點更清楚。home、marketing
42Text Reveal Card呈現 before/after、痛點到解法或隱藏風險提醒。home、marketing
43Text Flipping Board適合數據、狀態、活動訊息或進度公告。home、marketing
44Magnetic Button提升主要行動按鈕的點擊感與注意力。home、pricing
45Noise Background讓 主要行動區 更有質感與邊界,不只普通按鈕。home、pricing
46Moving Border適合購買、送出、預約、方案選擇等關鍵動作。pricing
47Sidebar讓 Dashboard、管理後台、會員中心有清楚功能分區。admin
48Floating Dock提供工具入口、快速操作或作品集瀏覽捷徑。admin、home
49Tabs整理方案、功能、文件、分類與後台頁籤。admin、templates
50Placeholders And Vanish Input引導使用者輸入搜尋、AI 指令或需求描述。home、guide
51File Upload收集素材、資料、文件、Logo 或參考檔案。assets、admin
52Animated Tooltip展示團隊、角色、客服、講師或服務人員資訊。privacy、terms
53Link Preview讓資源、文件、外部服務或案例連結更容易理解。privacy、terms
54Bento Grid整理首頁功能總覽、方案亮點、服務比較與證據卡。home
553D Marquee展示作品集、素材牆、案例牆或多頁面成果。assets、home

條件式也要能用|8 個

02Dither Shader依產業素材、品牌調性與效能預算放入素材頁或專案案例牆,不能讓文字閱讀性下降。assets、admin
06Wavy Background依產業素材、品牌調性與效能預算放入素材頁或專案案例牆,不能讓文字閱讀性下降。home、templates
12Vortex只在使用者明確要求高衝擊視覺且通過動態舒適度檢查時啟用;不得成為預設背景。docs、assets
13Chromatic Image依產業素材、品牌調性與效能預算放入素材頁或專案案例牆,不能讓文字閱讀性下降。assets、admin
16Canvas Reveal Effect依產業素材、品牌調性與效能預算放入素材頁或專案案例牆,不能讓文字閱讀性下降。home、marketing
25Ascii Art依產業素材、品牌調性與效能預算放入素材頁或專案案例牆,不能讓文字閱讀性下降。assets、admin
26Pixelated Canvas依產業素材、品牌調性與效能預算放入素材頁或專案案例牆,不能讓文字閱讀性下降。assets、admin
56Shape Blur可作品牌背景、形狀模糊或高級主視覺;必須通過授權聲明、靜態備援、效能上限與 降低動態效果 檢查,且不得轉售元件庫本身。home、assets