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 対応