线框图原型工具包
ReactWireframePrototype设计用户体验更新于 2026-08-14
使用场景： 在设计前快速原型：线框化界面、梳理流程，并分享可点击的低保真原型收集反馈。
安装
npx skills add wireframe-prototype-kit克隆
git clone https://github.com/skillhub-community/wireframe-prototype-kit.git描述
线框与低保真原型工具。Canvas：方格纸工作区+区块面板（文字、按钮、输入、图片占位、卡片、导航栏、弹窗）拖到画布；区块拖拽调大小、吸附参考线对齐、草图/手绘或清晰轮廓模式。多屏：组织框架（手机/桌面/平板尺寸）并画连接线或点区块 → 「链接到框架」。
ClickablePrototype：运行模式点链接区块在框架间导航——用户测试的标准低保真走查。注释层：便利贴与评论标记用于反馈。导出：画布 PNG 或可分享交互原型链接（状态序列化）。包含 1-2-3 列线框布局指引与「内容优先」提示层（提醒填真实文案）。常用操作快捷键（复制、方向键微移、删除）。
AI Hub
跑 Skill 需要模型接口？
AI Hub 提供 OpenAI 兼容接口，给 Cursor / Claude Code / Agent 用。
打开 AI Hub元数据
作者@dataviz_team
许可证MIT
版本1.0.0
依赖1