全部技能 分类浏览
← 返回
未分类

prototype-html

生成交互式HTML产品原型的专家技能。当用户需要创建产品原型、UI界面原型、 可交互的HTML演示页面、产品功能展示页面，或提到"原型"、"prototype"、 "产品界面"、"UI原型"、"交互原型"、"演示页面"等时使用。
>prototype-html 是一个专门面向产品经理的 AI Skill，它的核心能力很简单：你描述产品需求，它直接生成一个可交互的单文件 HTML 原型页面。原型页面采用左右分栏布局，通过交互式连线将界面元素与文档说明动态关联，实现一体化展示。 用法： 1.把skill目录下载下来，交给你的agent去安装 2.生成需求：用brainstorming出精确和完整的需求描述 3.生成原型：使用 prototype-html 技能帮我生成以下需求的原型：后面跟着需求描述 4.调整原型：跟agent对话，不断调整你的原型，直到符合要求；同时要调整右侧的原型说明 5.生成prd：让agent根据你的原型直接出prd文档 6.手动调整prd文档，收工喝一杯！
user_d5a027ad
未分类 community v1.0.0 1 版本 100000 Key: 无需
★ 5
Stars
📥 129
下载
💾 0
安装
1
版本
#latest

概述

交互式HTML产品原型生成

根据产品需求，生成完整的、可直接运行的单文件HTML产品原型。

核心工作流程

  1. 理解需求 - 明确用户需要展示的产品功能和界面元素
  2. 设计布局 - 规划左侧界面元素与右侧说明文档的对应关系
  3. 编写代码 - 生成符合所有技术规范的完整HTML文件
  4. 验证检查 - 确保所有连线正确、交互完整、响应式正常

布局规范（严格执行）

整体结构

  • 左右分栏布局
  • 左侧：占页面宽度的80%-85%，展示产品主体界面内容
  • 右侧：占页面宽度的15%-20%，展示对应功能的详细说明文档
  • 分隔线：左右两栏之间有清晰的垂直分隔线
  • 滚动同步：左右两栏各自独立滚动，互不影响

连线功能（必须严格执行）

使用SVG技术绘制连线，确保连线清晰可见且不遮挡内容。

连线规则：

  • 选择左侧界面中2-4个重要元素增加连线指向右侧对应的功能说明
  • 连线的起始点必须精确连接到左侧元素的右侧边缘中点
  • 连线的结束点必须精确连接到右侧对应说明文字的左侧边缘中点
  • 连线采用平滑的贝塞尔曲线，避免生硬的直角转弯
  • 连线线条粗细为 2px

交互效果：

  • 当鼠标悬停在左侧元素上时，对应的连线加粗并高亮显示
  • 当鼠标悬停在右侧说明文字上时，对应的连线和左侧元素也会高亮显示

连线标注：

  • 每条连线旁边添加小的数字编号，与右侧说明的编号对应

响应式设计规范

PC端

  • 保持上述左右分栏布局

手机端

  • 自动切换为上下布局
  • 上方展示产品主体界面，下方展示功能说明
  • 连线功能自动隐藏
  • 在每个元素下方直接显示简短说明
  • 提供"切换视图"按钮，允许用户在"仅界面"和"界面+说明"之间切换

技术栈要求

  1. 纯前端实现：使用纯HTML、CSS和原生JavaScript，不依赖任何外部框架
  2. 样式：使用Tailwind CSS v3，通过CDN引入
  3. 图标：使用Font Awesome图标库，通过CDN引入
  4. 代码结构：
    • HTML结构语义化，使用适当的标签
    • CSS样式内联在