軟體開發-原型生成器（html）
📖 技能介紹
name: prototype-html description: 生成可互動的高保真 HTML 原型頁面，用於在正式開發前與使用者對齊需求。 當用戶提到"原型"、"高保真"、"先出個頁面看看"、"畫個草圖"、"對齊需求"、 "預覽一下"、"demo"、"mockup"、"wireframe"、"先做個靜態頁面"、 "看看效果"、"確認一下佈局"、"APP原型"、"網頁原型"、"頁面原型"、 "產品原型"、"互動原型"、"MVP原型"、"Landing Page"、"概念驗證"時觸發。 也適用於使用者想要快速驗證 UI/UX 設計、頁面流程、互動邏輯、產品想法視覺化的場景。 生成單個 HTML 檔案，包含所有頁面檢視，支援點選跳轉，使用 Tailwind CSS 美化。 必須確保原型是可點選、可互動的，而不是靜態圖片或純文本描述。 即使未明確提及'原型'，只要使用者想快速做一個產品頁面/介面/Demo，也應觸發此 skill。 compatibility: | 無特殊依賴，生成純 HTML/CSS/JS 單檔案，可直接在瀏覽器中開啟。
高保真 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>
頁面實現要求
每個頁面是一個 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 繪製圖標
- 所有文字使用中文，除非特定場景需要英文
小蔥技能站7w4.net每天更新，海量AI技能等你發現。
- 保持程式碼整潔，適當添加註釋標明頁面區域
- 如果頁面較多（>5個），考慮新增簡單的頁面導航索引在檔案頂部註釋中
- 原型不需要響應式，APP 固定 375px，網頁固定 1024px 以上即可
- 不要實現真實的資料儲存或後端邏輯，用假資料和模擬跳轉
🤖 AI 評測
這個 Skill 質量不錯，能幫助快速生成專業的互動式 HTML 原型頁面。它最大的亮點是內建了 16 個行業的視覺設計規範，生成的原型不是千篇一律的模板風格，而是根據不同行業（如電商、金融、餐飲等）採用不同的配色、佈局和動效。文件流程清晰，檢查清單也很實用。不足是測試用例偏少，文件內容較多稍顯冗長。整體而言，這是一個實用性較強的設計輔助工具。
