mcpField
P
prototype-html

prototype-html

github.com/vagerentDesign & UI12162 installsUpdated 23w ago
Repository

About prototype-html

prototype-html is a skill for generating runnable, single-file HTML product prototypes from requirements. It specifies a split interface-and-documentation layout, interactive SVG connectors, and mobile behavior for design and development work.

Key features

  1. 01Generate runnable single-file HTML prototypes
  2. 02Split interface and documentation into columns
  3. 03Connect features with labeled SVG lines
  4. 04Highlight related elements on hover
  5. 05Adapt to mobile with stacked views

Use cases

  1. 01Create interface prototypes from product requirements
  2. 02Show how interface elements map to feature notes
  3. 03Preview prototypes and switch views on mobile

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/vagerent/prototype-html --skill prototype-html

After installing, type/prototype-htmlin Claude Code to confirm it loaded.

Bundled filesassets/example.html

Details

From the project README

交互式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样式内联在<style>标签中
    • JavaScript代码内联在<script>标签中
    • 所有代码整合在一个HTML文件中，无需外部资源

样式与视觉规范

配色方案
  • 如果用户指定了色系则用用户指定的色系，否则用下面默认的色系
  • 主色调：蓝色 #165DFF
  • 辅助色：浅灰色 #F5F7FA、深灰色 #333333
  • 强调色：绿色 #00B42A（成功状态）、红色 #F53F3F（错误状态）
其他样式要求
  • 右侧的功能说明区要用琥珀色系，跟左侧内容区区分开！
  • 字体：系统默认无衬线字体
  • 间距：以 8px 为基本单位，保持一致的间距系统
  • 阴影：适当使用轻微阴影增强层次感
  • 整体风格：简洁、现代、专业的产品原型风格

输出要求

  1. 输出完整的HTML文件代码
  2. 代码开头添加简短说明，介绍原型的功能和使用方法
  3. 确保所有连线的起始和指向位置完全正确
  4. 确保在不同屏幕尺寸下都能正常显示和交互

注意事项

  • 连线计算必须在DOM渲染完成后执行，使用 DOMContentLoaded 和 resize 事件重新计算
  • 确保SVG的 pointer-events-none 不会阻挡下方元素的交互
  • 移动端切换视图时，需要平滑过渡动画
  • 所有元素ID和数据属性命名要清晰，便于连线脚本定位

参考内容

  • 生成的HTML文件要参考 assets/example.html

Comments

Markdown supported