高保真 HTML 原型生成器

解决的具体问题

在正式开发前，团队通常需要与用户或客户对齐页面布局、视觉风格以及交互逻辑。传统的线框图或静态占位符往往缺乏直观性，难以让用户直接感受产品的真实体验。该技能旨在快速生成高保真、可交互的 HTML 原型，通过“Show, Don't Tell”的方式，将模糊的产品想法直接可视化为可点击、可填写、可跳转的页面，从而有效确认功能模块的摆放位置和核心业务流。

核心能力与关键步骤

该技能的工作流围绕行业驱动设计和单文件交付展开：

• 推断行业与加载规范：根据用户描述的背景（如外卖、金融、SaaS），自动推断行业并加载对应的视觉规范（配色、字体、圆角等），严格避免“蓝紫渐变”等通用 AI 美学风格。
• 高保真与真实交互：原型不是静态的线框图，而是包含动效、状态切换和 Mock 数据的可交互页面。支持 onclick 页面跳转、真实表单输入、按钮悬停反馈以及基于固定定位 div 的模态框实现。
• 零依赖单文件：技术栈采用 HTML5、TailwindCSS (CDN)、Vanilla JavaScript 和 Lucide Icons。所有样式、逻辑和数据内联于一个 HTML 文件中，无需构建，直接浏览器打开即可运行。
• 质量检查：交付前会校验行业一致性、交互完整性、Mock 数据真实感（拒绝 Lorem Ipsum）以及状态覆盖（空状态、加载态、成功/失败反馈）。

适用边界与注意点

• 仅限原型演示：不包含真实的数据存储或后端逻辑，完全依赖内联的 Mock 数据。
• 视觉资产限制：不使用外部图片资源，图标和视觉元素主要通过 CSS 绘制或 Lucide 图标库实现。
• 响应式要求较低：原型侧重于固定视口展示（APP 模式固定 375px，网页模式 1024px 以上），不强制要求全场景响应式适配。
• 代码结构：页面较多（>5个）时，建议在文件顶部注释中维护简单的页面导航索引，以保持代码整洁。