关于 prototype-html
prototype-html 是根据产品需求生成单文件 HTML 交互原型的技能，面向需要快速呈现界面与功能说明对应关系的产品设计和开发工作。它规定了分栏布局、SVG 连线交互及移动端适配方式。
主要功能
- 01生成可运行的单文件 HTML 原型
- 02左右分栏展示界面和说明
- 03使用 SVG 连线标注对应功能
- 04支持悬停高亮交互
- 05适配手机端上下布局与视图切换
适用场景
- 01根据产品需求制作界面原型
- 02展示界面元素与功能说明的对应关系
- 03在手机屏幕预览并切换原型视图
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/prototype-html确认已加载。
附带文件assets/example.html
详细介绍
来自项目 README交互式HTML产品原型生成
根据产品需求，生成完整的、可直接运行的单文件HTML产品原型。
核心工作流程
- 理解需求 - 明确用户需要展示的产品功能和界面元素
- 设计布局 - 规划左侧界面元素与右侧说明文档的对应关系
- 编写代码 - 生成符合所有技术规范的完整HTML文件
- 验证检查 - 确保所有连线正确、交互完整、响应式正常
布局规范（严格执行）
整体结构
- 左右分栏布局
- 左侧：占页面宽度的80%-85%，展示产品主体界面内容
- 右侧：占页面宽度的15%-20%，展示对应功能的详细说明文档
- 分隔线：左右两栏之间有清晰的垂直分隔线
- 滚动同步：左右两栏各自独立滚动，互不影响
连线功能（必须严格执行）
使用SVG技术绘制连线，确保连线清晰可见且不遮挡内容。
连线规则：
- 选择左侧界面中2-4个重要元素增加连线指向右侧对应的功能说明
- 连线的起始点必须精确连接到左侧元素的右侧边缘中点
- 连线的结束点必须精确连接到右侧对应说明文字的左侧边缘中点
- 连线采用平滑的贝塞尔曲线，避免生硬的直角转弯
- 连线线条粗细为 2px
交互效果：
- 当鼠标悬停在左侧元素上时，对应的连线加粗并高亮显示
- 当鼠标悬停在右侧说明文字上时，对应的连线和左侧元素也会高亮显示
连线标注：
- 每条连线旁边添加小的数字编号，与右侧说明的编号对应
响应式设计规范
PC端
- 保持上述左右分栏布局
手机端
- 自动切换为上下布局
- 上方展示产品主体界面，下方展示功能说明
- 连线功能自动隐藏
- 在每个元素下方直接显示简短说明
- 提供"切换视图"按钮，允许用户在"仅界面"和"界面+说明"之间切换
技术栈要求
- 纯前端实现：使用纯HTML、CSS和原生JavaScript，不依赖任何外部框架
- 样式：使用Tailwind CSS v3，通过CDN引入
- 图标：使用Font Awesome图标库，通过CDN引入
- 代码结构：
- HTML结构语义化，使用适当的标签
- CSS样式内联在
<style>标签中 - JavaScript代码内联在
<script>标签中 - 所有代码整合在一个HTML文件中，无需外部资源
样式与视觉规范
配色方案
- 如果用户指定了色系则用用户指定的色系，否则用下面默认的色系
- 主色调：蓝色
#165DFF - 辅助色：浅灰色
#F5F7FA、深灰色#333333 - 强调色：绿色
#00B42A（成功状态）、红色#F53F3F（错误状态）
其他样式要求
- 右侧的功能说明区要用琥珀色系，跟左侧内容区区分开！
- 字体：系统默认无衬线字体
- 间距：以 8px 为基本单位，保持一致的间距系统
- 阴影：适当使用轻微阴影增强层次感
- 整体风格：简洁、现代、专业的产品原型风格
输出要求
- 输出完整的HTML文件代码
- 代码开头添加简短说明，介绍原型的功能和使用方法
- 确保所有连线的起始和指向位置完全正确
- 确保在不同屏幕尺寸下都能正常显示和交互
注意事项
- 连线计算必须在DOM渲染完成后执行，使用
DOMContentLoaded和resize事件重新计算 - 确保SVG的
pointer-events-none不会阻挡下方元素的交互 - 移动端切换视图时，需要平滑过渡动画
- 所有元素ID和数据属性命名要清晰，便于连线脚本定位
参考内容
- 生成的HTML文件要参考 assets/example.html
评论
支持 Markdown