高保真 HTML 原型生成器

目標

幫助使用者在正式開發前，快速生成互動式 HTML 原型，用於：

• 與使用者/客戶對齊頁面佈局和視覺風格
• 驗證頁面流程和互動邏輯
• 確認功能模組的擺放位置
• 快速將產品想法視覺化為可互動頁面

核心原則

1. 行業驅動設計 — 每個行業有獨特的視覺基因，嚴格遵循行業設計規範而非套用通用模板
2. 高保真交付 — 不是線框圖，而是接近真實產品的互動原型，包含動效、狀態切換、Mock 資料
3. 單檔案交付 — 所有樣式、邏輯、資料內聯於一個 HTML 檔案，零依賴、零構建，直接瀏覽器開啟
4. 真實可互動 — 按鈕可點選、表單可填寫、頁面可跳轉，不是靜態佔位符
5. Show, Don't Tell — 通過可互動的原型讓使用者直觀感受產品，而非文字描述

工作流程

Phase 1: 檢測模式

首先判斷使用者的輸入情況：

Mode A: 有明確行業資訊

• 使用者描述了產品背景（如"外賣 App""銀行理財頁面""線上教育平臺"）
• 直接推斷行業，進入 Phase 2

Mode B: 有產品描述但行業不明顯

• 使用者描述了功能需求但無法確定行業
• 通過 AskUserQuestion 詢問行業/應用場景

Mode C: 僅有模糊想法

• 使用者只說了"幫我做個原型"之類的話
• 通過 AskUserQuestion 收集關鍵資訊（行業、產品型別、核心功能、目標使用者）

Phase 2: 推斷行業

根據使用者提供的背景資訊，推斷所處行業。當無法推斷時，主動向使用者詢問。

常見行業關鍵詞對映：

• 科技/網際網路 → SaaS、工具類、平臺、API、開發者、雲端計算
• 金融/銀行 → 銀行、理財、貸款、保險、支付、股票
• 電商/零售 → 商城、購物、商品、訂單、促銷、零售
• 餐飲/美食 → 外賣、餐廳、美食、選單、點餐
• 醫療/健康 → 醫院、診所、健康、問診、藥品
• 教育/培訓 → 課程、培訓、學習、題庫、考試
• 美妝/時尚 → 護膚、化妝品、穿搭、潮流
• 房地產/家居 → 樓盤、裝修、傢俱、物業
• 遊戲/娛樂 → 遊戲、直播、短影片、音樂
• 汽車/工業 → 汽車、製造、工廠、裝置
• 法律/諮詢 → 律所、諮詢、會計、審計
• 旅遊/出行 → 酒店、機票、景區、出行、打車
• 公益/環保 → 環保、公益、慈善、碳中和
• 企業官網 → 公司官網、品牌展示、企業門戶

Phase 3: 選擇視覺設計

推斷行業後，從 references/industry-design-specs.md 載入該行業的完整視覺規範。規範包含：

• 配色方案 — 主色調、輔助色、中性色
• 視覺風格 — 字型排版、容器與邊角、互動動效、佈局與空間

關鍵設計約束（不可違反）

1. 禁止藍紫漸變 — 嚴禁使用任何形式的藍色到紫色漸變（如 from-blue-500 to-purple-500）
2. 禁止預設 Tailwind 藍色 — 避免直接使用 blue-500 作為主色，根據行業規範選擇合適的色調
3. 禁止通用 AI 美學 — 拒絕千篇一律的漸變背景 + 居中標題 + 三列卡片的 AI 風格佈局
4. 行業一致性 — 每個設計決策都應能追溯到行業規範，而非隨意選擇

Phase 4: 建立原型

技術棧

• HTML5 — 語義化標籤
• TailwindCSS — 通過 CDN 引入，Utility-First
• Vanilla JavaScript (ES6+) — 互動邏輯
• Lucide Icons — 通過 CDN 引入圖示庫
• Mock Data — 內聯 JavaScript 陣列/物件，模擬真實業務資料

CDN 依賴

在 HTML <head> 中引入：

<!-- TailwindCSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<!-- Google Fonts（按行業需求選擇） -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">

原型結構

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[產品名稱] - 原型</title>
  <!-- CDN Dependencies -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <!-- Tailwind Config -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: { /* 行業主色調 */ },
            secondary: { /* 行業輔助色 */ },
          },
          fontFamily: {
            sans: ['Noto Sans SC', 'sans-serif'],
          }
        }
      }
    }
  </script>
  <style>
    /* 頁面切換動畫 */
    .page { display: none; animation: fadeIn 0.3s ease; }
    .page.active { display: block; }
    @keyframes fadeIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

    /* APP 模式：移動端居中 */
    .app-container { max-width: 375px; margin: 0 auto; min-height: 100vh; position: relative; }

    /* 網頁模式：全寬 */
    .web-container { width: 100%; min-height: 100vh; }

    /* 自定義動畫、捲軸、行業特殊樣式 */
  </style>
</head>
<body class="bg-gray-100">
  <div id="app" class="app-container bg-white shadow-2xl">
    <!-- 頁面內容 -->
  </div>
  <script>
    // Mock 資料
    // 互動邏輯
    // 頁面路由邏輯
    function showPage(pageId) {
      document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
      document.getElementById(pageId).classList.add('active');
      window.scrollTo(0, 0);
    }
    // Lucide Icons 初始化
    lucide.createIcons();
    // 預設顯示首頁
    showPage('home');
  </script>
</body>
</html>

頁面實現要求

小蔥技能7w4.net有完整的技能分類。

每個頁面是一個 div.page，包含：

• 清晰的頁面標題/導航欄
• 核心內容區域：使用真實的中文文案，拒絕 lorem ipsum
• 底部導航欄（APP 模式）：固定在底部，有 active 狀態高亮
• 互動元素：按鈕、輸入框、卡片等都要有 hover/active 狀態樣式

互動實現要求

• 頁面跳轉：onclick="showPage('pageId')"
• 表單輸入：真實 <input>、<select> 元素，有 placeholder
• 按鈕狀態：hover 時改變透明度或顏色，點選時有反饋
• 列表/卡片：有真實的示例資料（至少 3-5 條）
• 彈窗/模態框：用固定定位的 div 實現，可點選關閉

設計質量檢查清單

每個原型交付前，檢查以下要素：

• 行業一致性 — 配色、字型、圓角、陰影均符合行業規範
• 互動完整性 — 關鍵路徑（核心業務流）可完整走通
• Mock 資料真實感 — 資料內容貼合行業場景，非 Lorem Ipsum
• 狀態覆蓋 — 包含空狀態、載入狀態、成功/失敗反饋
• 響應式 — 至少在移動端和桌面端可用
• 微互動 — 按鈕懸停、頁面切換、列表載入等有適當的動效反饋
• 視覺層次 — 資訊層級清晰，使用者能快速理解頁面結構
• 無藍紫漸變 — 檢查確認無 from-blue-* to-purple-* 類

Phase 5: 交付與迭代

1. 將生成的 .html 檔案儲存到使用者指定目錄（預設為專案根目錄或當前工作目錄）
2. 告知使用者檔案路徑，可直接在瀏覽器中開啟
3. 主動詢問使用者是否需要調整：
   • 整體風格方向
   • 具體頁面的佈局
   • 互動細節
   • 新增頁面或功能模組

常見頁面模板

登入/註冊頁

• 頂部 Logo 或產品名
• 表單：手機號/郵箱、密碼、驗證碼
• 主操作按鈕（全寬）
• 底部：切換登入/註冊、第三方登入圖示

首頁/儀表盤

• 頂部搜尋欄或標題
• 資料卡片（統計數字）
• 功能入口網格（圖示 + 文字）
• 列表內容（新聞、訂單、訊息等）

列表頁

• 頂部篩選/搜尋
• 卡片式列表（圖片 + 標題 + 描述 + 價格/狀態）
• 下拉重新整理提示（靜態展示）
• 底部載入更多

詳情頁

• 頂部返回按鈕 + 標題
• 大圖/主內容區
• 詳細資訊區塊
• 底部操作欄（收藏、分享、立即操作）

個人中心

• 頂部使用者資訊（頭像、暱稱）
• 資料概覽（積分、訂單數等）
• 功能列表（設定、訊息、收藏等）
• 退出登入按鈕

注意事項

• 不要使用外部圖片資源，用佔位符或 CSS 繪製圖標
• 所有文字使用中文，除非特定場景需要英文
• 保持程式碼整潔，適當添加註釋標明頁面區域
• 如果頁面較多（>5個），考慮新增簡單的頁面導航索引在檔案頂部註釋中
• 原型不需要響應式，APP 固定 375px，網頁固定 1024px 以上即可
• 不要實現真實的資料儲存或後端邏輯，用假資料和模擬跳轉

這個 Skill 質量不錯，能幫助快速生成專業的互動式 HTML 原型頁面。它最大的亮點是內建了 16 個行業的視覺設計規範，生成的原型不是千篇一律的模板風格，而是根據不同行業（如電商、金融、餐飲等）採用不同的配色、佈局和動效。文件流程清晰，檢查清單也很實用。不足是測試用例偏少，文件內容較多稍顯冗長。整體而言，這是一個實用性較強的設計輔助工具。