軟體開發-原型生成器（html）
💻 開發程式設計
免費
📖 技能介紹
高保真 HTML 原型生成器
目標
幫助使用者在正式開發前，快速生成互動式 HTML 原型，用於：
- 與使用者/客戶對齊頁面佈局和視覺風格
- 驗證頁面流程和互動邏輯
- 確認功能模組的擺放位置
- 快速將產品想法視覺化為可互動頁面
核心原則
- 行業驅動設計 — 每個行業有獨特的視覺基因，嚴格遵循行業設計規範而非套用通用模板
- 高保真交付 — 不是線框圖，而是接近真實產品的互動原型，包含動效、狀態切換、Mock 資料
- 單檔案交付 — 所有樣式、邏輯、資料內聯於一個 HTML 檔案，零依賴、零構建，直接瀏覽器開啟
- 真實可互動 — 按鈕可點選、表單可填寫、頁面可跳轉，不是靜態佔位符
- 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 載入該行業的完整視覺規範。規範包含：
- 配色方案 — 主色調、輔助色、中性色
- 視覺風格 — 字型排版、容器與邊角、互動動效、佈局與空間
關鍵設計約束（不可違反）
- 禁止藍紫漸變 — 嚴禁使用任何形式的藍色到紫色漸變（如
from-blue-500 to-purple-500） - 禁止預設 Tailwind 藍色 — 避免直接使用
blue-500作為主色，根據行業規範選擇合適的色調 - 禁止通用 AI 美學 — 拒絕千篇一律的漸變背景 + 居中標題 + 三列卡片的 AI 風格佈局
- 行業一致性 — 每個設計決策都應能追溯到行業規範，而非隨意選擇
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: 交付與迭代
- 將生成的
.html檔案儲存到使用者指定目錄（預設為專案根目錄或當前工作目錄） - 告知使用者檔案路徑，可直接在瀏覽器中開啟
- 主動詢問使用者是否需要調整：
- 整體風格方向
- 具體頁面的佈局
- 互動細節
- 新增頁面或功能模組
常見頁面模板
登入/註冊頁
- 頂部 Logo 或產品名
- 表單：手機號/郵箱、密碼、驗證碼
- 主操作按鈕（全寬）
- 底部：切換登入/註冊、第三方登入圖示
首頁/儀表盤
- 頂部搜尋欄或標題
- 資料卡片（統計數字）
- 功能入口網格（圖示 + 文字）
- 列表內容（新聞、訂單、訊息等）
列表頁
- 頂部篩選/搜尋
- 卡片式列表（圖片 + 標題 + 描述 + 價格/狀態）
- 下拉重新整理提示（靜態展示）
- 底部載入更多
詳情頁
- 頂部返回按鈕 + 標題
- 大圖/主內容區
- 詳細資訊區塊
- 底部操作欄（收藏、分享、立即操作）
個人中心
- 頂部使用者資訊（頭像、暱稱）
- 資料概覽（積分、訂單數等）
- 功能列表（設定、訊息、收藏等）
- 退出登入按鈕
注意事項
- 不要使用外部圖片資源，用佔位符或 CSS 繪製圖標
- 所有文字使用中文，除非特定場景需要英文
- 保持程式碼整潔，適當添加註釋標明頁面區域
- 如果頁面較多（>5個），考慮新增簡單的頁面導航索引在檔案頂部註釋中
- 原型不需要響應式，APP 固定 375px，網頁固定 1024px 以上即可
- 不要實現真實的資料儲存或後端邏輯，用假資料和模擬跳轉
🤖 AI 評測
這個 Skill 質量不錯，能幫助快速生成專業的互動式 HTML 原型頁面。它最大的亮點是內建了 16 個行業的視覺設計規範，生成的原型不是千篇一律的模板風格，而是根據不同行業（如電商、金融、餐飲等）採用不同的配色、佈局和動效。文件流程清晰，檢查清單也很實用。不足是測試用例偏少，文件內容較多稍顯冗長。整體而言，這是一個實用性較強的設計輔助工具。
📊 多維度評分
適應性4.3
規範性4.2
有效性4.7
可靠性3.9
可信度4.9
📁 包含檔案 (3 個)
📄 SKILL.md
9.8 KB
📄 evals/evals.json
2.7 KB
📄 references/industry-design-specs.md
6.1 KB
