软件开发-原型生成器（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 绘制图标
- 所有文字使用中文，除非特定场景需要英文
- 保持代码整洁，适当添加注释标明页面区域
- 如果页面较多（>5个），考虑添加简单的页面导航索引在文件顶部注释中
- 原型不需要响应式，APP 固定 375px，网页固定 1024px 以上即可
- 不要实现真实的数据存储或后端逻辑，用假数据和模拟跳转
🤖 AI 评测
这个 Skill 质量不错，能帮助快速生成专业的交互式 HTML 原型页面。它最大的亮点是内置了 16 个行业的视觉设计规范，生成的原型不是千篇一律的模板风格，而是根据不同行业（如电商、金融、餐饮等）采用不同的配色、布局和动效。文档流程清晰，检查清单也很实用。不足是测试用例偏少，文档内容较多稍显冗长。整体而言，这是一个实用性较强的设计辅助工具。
