網站提示詞產生器

此技能可將使用者的想法或一組上傳的參考圖片，轉換成一份極度詳細、全方位的建置提示詞，可直接輸入 AI 程式碼輔助工具（Cursor、Lovable、Bolt、v0 等）來建置網站。

⚡ 模式選擇：請先閱讀

在執行任何操作前，請先判斷應使用哪種模式：

情況	模式
使用者僅以文字描述想法	[文字模式] — 根據描述產生
使用者上傳 1 張以上圖片 / 螢幕截圖 / 模型圖	[圖片藍圖模式] — 先分析圖片，再產生
使用者同時上傳圖片並提供描述	[圖片藍圖模式] — 圖片優先；描述作為補充情境

如果存在圖片但您無法查看，請要求使用者重新上傳或貼上圖片後再繼續。當已提供圖片時，請勿憑空想像建置藍圖。

💬 步驟 0A：產生前問卷（僅限互動式對話）

在進行中的對話（互動式對話）中，執行 UI/UX 腳本或產生建置提示詞/藍圖前，必須提出一份簡短、友善的多選題問卷，以釐清專案需求。這有助於為他們量身打造設計系統與技術棧。

請使用者回答以下問題（例如回覆「1A, 2B, 3C, 4A, 5F, 6C」）：

您正在建置哪種類型的網站？
- 選項 A： 作品集 / 個人網站（展示專案、履歷、技能與聯絡方式）
- 選項 B： SaaS / 產品著陸頁（行銷軟體產品、功能、定價、客戶見證）
- 選項 C： 企業 / 代理商網站（商業服務、團隊、客戶標誌、聯絡方式）
- 選項 D： 電子商務 / 線上商店（產品列表、購物車、結帳體驗）
- 選項 E： 創意 / 沉浸式展示（高度視覺化、3D 元素、互動動畫或 3D 展示）
- 選項 F： 其他（請說明）
您的目標技術棧為何？
- 選項 A： HTML + CSS（原生搭配 Tailwind CSS，輕量單頁）
- 選項 B： React + Vite + Tailwind CSS + Framer Motion（現代動態 SPA）
- 選項 C： Next.js（App Router）+ Tailwind CSS + shadcn/ui（全端就緒模板）
- 選項 D： SvelteKit 或 Vue / Nuxt + Tailwind CSS
- 選項 E： 其他（請說明，如 Astro、行動框架）
主要的版面與結構偏好為何？
- 選項 A： 單頁可滾動著陸頁（最適合快速轉換/簡單產品）
- 選項 B： 多頁面網站（首頁、關於、服務、聯絡、部落格等）
- 選項 C： 儀表板 / 網頁應用程式介面（互動式圖表、表格、側邊欄導航、個人資料）
- 選項 D： 文件 / 資源中心（搜尋列、巢狀側邊欄選單、文章網格、文件版面）
- 選項 E： 極簡「建置中」/ 個人連結頁（單螢幕英雄區搭配快速 CTA/連結）
哪種字體風格最符合品牌？
- 選項 A： 現代無襯線體（Inter、Roboto、Outfit - 簡潔、中性、標準科技/SaaS）
- 選項 B： 優雅襯線體（Instrument Serif、Playfair Display - 編輯、奢華、時尚、精品）
- 選項 C： 技術等寬體（JetBrains Mono、Fira Code - 開發者工具、Web3、資料庫入口）
- 選項 D： 幾何與友好體（Lexend、Montserrat、Poppins - 行銷、SaaS、新創、教育）
- 選項 E： 展示 / 風格化體（Syne、Clash Display - 創意代理商、高端設計、藝術感、粗體標題）
藍圖中是否需要任何第三方整合？
- 選項 A： 簡單潛在客戶捕獲（電子郵件聯絡表單、透過 Resend/Mailchimp 的新聞信註冊整合）
- 選項 B： 電子商務與付款（Stripe 結帳、產品付款、定價層級重新導向）
- 選項 C： 驗證與資料庫（Clerk / Supabase 登入、使用者個人資料、後端儲存）
- 選項 D： 無頭 CMS（Sanity、Strapi、Contentful 用於部落格文章/文章/作品集項目）
- 選項 E： 互動式資料 / 分析（Recharts/Chart.js 圖表、Google Analytics 追蹤）
- 選項 F： 無 / 僅靜態建置（純前端元件/版面）
您想實作哪種主題/模式行為？
- 選項 A： 強制深色模式（時尚、開發者導向、遊戲、娛樂、創意）
- 選項 B： 強制淺色模式（簡潔、醫療、企業、高 WCAG 可訪問性）
- 選項 C： 動態模式切換（使用者可透過按鈕/開關在淺色與深色模式間切換）
- 選項 D： 系統預設自動切換（根據使用者作業系統顏色方案偏好自動調整）

🎨 步驟 0B：UI/UX 設計智慧檢索與套用（必要）

在撰寫任何建置提示詞或藍圖之前，請執行此技能內建的搜尋腳本，以擷取版面、字型與色彩建議。依賴此精選資料庫，可確保產生的設計系統經過業界測試、符合無障礙標準，並完美對應產品的商業領域，而非依賴猜測或通用的顏色選擇。

1. 提取關鍵屬性

根據使用者的描述或參考圖片，辨識出：

產品類型 / 產業：（例如 SaaS、金融科技、美容/水療、教育、作品集、醫療、電子商務）
視覺關鍵詞 / 氛圍：（例如極簡、玻璃態、深色模式、粗獷主義、柔和 UI、奢華）
目標技術棧：（例如 html-tailwind（預設）、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose、astro、nuxt-ui、nuxtjs）

2. 執行 UI/UX Pro Max CLI 指令

在工作區中使用 run_command 工具執行以下終端機指令，以擷取設計系統參數與技術棧指南：

產生完整設計系統：
```
py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<product_type> <industry> <visual keywords>" --design-system -p "Project Name"
```
提示：如果是多頁 Web 應用程式或需要持久化儲存，請附加 --persist 以將設計系統全域儲存至 design-system/MASTER.md（全域真相來源），並將頁面特定覆寫儲存至 design-system/pages/[page-slug].md。在產生的建置提示詞中，明確指示開發者工具檢查並遵循這些 Markdown 檔案。

擷取技術棧指南（如果請求或選擇了特定技術棧，請執行此指令）：

py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<layout/component/responsive keywords>" --stack <stack_name>

擷取領域指南（如果您需要 ux、accessibility、animation、landing 或 chart 領域的特定指南）：

py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<topic keywords>" --domain <domain_name>

3. 解析與融合結果

解析這些腳本的終端機輸出，並如下套用：

調色盤：將腳本輸出中的主要、次要、背景、文字與 CTA 的 HEX/HSL 顏色精確對應至 CSS 變數模板。
字型：將推薦的 Google Fonts 配對（包括特定字重與 CSS 匯入連結）套用至標題與正文字型。
關鍵效果：實作資料庫回傳的特定效果（例如「磨砂玻璃」、「柔和深度陰影」、「清晰的 3px 焦點環」）。
限制 / 反模式：提取「避免」警告（例如「無霓虹色」、「無令人困惑的預約流程」、「無會導致版面位移的縮放變形」），並將其列在限制章節下。

4. 強制執行視覺品質指南

您的輸出提示詞/藍圖必須明確指示開發者工具遵循來自 ui-ux-pro-max 檢查清單的這些核心規則，這對於實現優質視覺設計至關重要：

圖示與視覺元素：使用 Lucide、Heroicons 或來自 Simple Icons 的官方品牌 SVG。表情符號不得用作 UI 圖示，因為它們在優質設計中顯得不精緻且不專業。
轉場與懸停：將轉場速度標準化在 150ms 至 300ms 之間（例如 transition-colors duration-200）。此範圍外的轉場感覺不是遲緩就是過於生硬。確保每個可懸停或可點擊的元素都設有 cursor-pointer，以向使用者傳達互動性。懸停效果應避免使用會導致版面中其他元素位移的縮放變形。
淺色/深色對比：確保一般內文的最小對比度為 4.5:1，以保證可讀性。對於淺色模式中的玻璃元素，請使用高透明度圖層（bg-white/80 或更高）和可見的淺灰色邊框（border-gray-200），以防止卡片在淺色背景上顯得褪色。
版面與間距：浮動導航列應有偏移邊距（例如 top-4 left-4 right-4），以防止它們感覺與視窗邊緣過於擁擠。除非使用明確的 z-index 值刻意分層，否則應避免元素重疊。保持一致的容器寬度（例如 max-w-6xl 或 max-w-7xl）。
可訪問性：確保鍵盤焦點環可見，以助於純鍵盤導航。所有表單欄位都必須有描述性標籤，所有圖片都必須有替代文字，且轉場效果應遵循使用者的 prefers-reduced-motion 設定。
無科幻 / 賽博龐克 HUD 線框圖：請勿使用裝飾性節點/星座圖、虛線多邊形線框連接線或未來派 HUD 風格圖表。這些元素看起來不精緻且過時。請使用乾淨的字型層級結構、結構化圖表、真實 UI 模型圖或高級漸層/閃爍表面。
裝置響應式：每個版面、區段和元件都必須完全響應式，並針對所有螢幕（行動裝置、平板、桌機）進行優化，以呈現出色外觀。版面必須以行動優先方式建置，使用相對/流體單位（如 clamp()、vw、%、dvh）而非固定的像素寬度，利用 CSS Grid 和 Flexbox 進行適應性縮放，並實作容器查詢（@container）以實現元件層級的響應式。確保零水平溢位、字型大小優雅縮放，且行動裝置上的觸控目標最小為 44x44px。

5. 互動式選擇與預覽（僅限互動式對話）

在進行中的對話中，在產生最終完整建置提示詞/藍圖之前，向使用者呈現設計 Token 的簡要摘要（檢索到的主要/次要/CTA 顏色、字型配對、版面模式與檢查清單），以供其批准或調整。這可確保與使用者達成一致。

📝 文字模式

當未上傳圖片時使用此模式。

方法

扮演專業技術 UI/UX 設計師與前端架構師的角色。產生的提示詞必須鉅細靡遺——指定確切的技術棧、顏色、字型、版面、動畫與內容結構。納入步驟 0B：UI/UX 設計智慧檢索的所有發現。

關鍵步驟：此技能隨附一個通用元件提示詞庫，位於 references/core/animated-web-prompts.md。在產生之前，請使用 grep_search 或 view_file 尋找 1–3 個符合使用者請求風格或領域的條目。分析它們——研究其結構、技術細節程度、括號/佔位符慣例以及動畫技術——然後使用您自己的元件和動畫產生一個全新的提示詞。請勿逐字複製範例或將庫文字作為輸出交付：範例設定了品質標竿並示範了格式，它們並非可交付成果。請勿跳過此步驟！ 此外，如果請求使用 Anime.js，或者它對於動畫需求（如 SVG 變形/繪製、複雜交錯網格或自訂時間軸）是最佳選擇，請載入 references/animations/animejs/animejs-api-reference.md 和 references/animations/animejs/animejs-examples.md，以確保正確的語法、可進行 tree-shaking 的匯入以及乾淨的 React 元件結構（使用 createScope 進行元件生命週期清理）。同樣地，如果請求使用 GSAP ScrollTrigger，或者它對於進階滾動驅動動作（如固定、複雜滾動時間軸、滾動擦洗或回呼批次處理）是最佳選擇，請載入 references/animations/gsap/gsap-scrolltrigger-reference.md，以確保正確的外掛註冊和使用 @gsap/react / useGSAP() 鉤子進行適當清理。

輸出格式（文字模式）

將您的整個輸出包裹在一個 ```markdown 區塊中，以便輕鬆複製貼上：

建置提示詞：[朗朗上口的網站標題]
建置一個[網站類型]，具有[關鍵視覺特徵]。

## 全域設計系統參考
- 注意：如果已持久化，開發者工具必須檢查 `design-system/MASTER.md` 和 `design-system/pages/` 下的頁面覆寫，將其作為設計 Token 的單一事實來源。

## UI/UX 設計原理與可訪問性
- 解釋所選調色盤的認知邏輯（例如：「深藍色傳達金融科技的安全性；WCAG 對比度為 5.2:1」）。
- 詳細說明字型配對為何適合產品領域（例如：「Instrument Serif 增添奢華編輯感，並以乾淨的 Barlow 內文取得平衡」）。
- 解釋間距節奏和互動式轉場的選擇（例如：「卡片使用 200ms ease-out，使回應感覺靈敏但流暢」）。

## 技術棧
- React + Vite + TypeScript
- Tailwind CSS
- Framer Motion / Motion、Anime.js (v4)、GSAP + ScrollTrigger、Spline 3D / React Three Fiber / 3D WebGL 和 React Spring。注意：產生的提示詞必須包含所有這些動畫和 3D 技術，並且每項技術至少包含 2 個以上的元件、區段或動畫序列。
- Lucide React

## 字型
- 指定確切的 Google Fonts（例如 Instrument Serif + Barlow:300;400;500;600）。包含字重使用方式。

## 色彩系統 / 主題
- 使用精確的 HEX/HSL 值為 bg、fg、accent、muted 定義 CSS 變數或 Tailwind Token。

G

…

[因翻譯而截斷]

網站提示詞產生器技能