wireframer

用途：根据用户描述生成网页 UI 的线框、mockup 或低保真可点击原型，输出类似 Balsamiq 的手绘风格，让用户能在多个屏幕间导航，重点放在内容而非精细视觉设计。\n\n主要能力：以单页应用方式组织多个“页面”，用原生 JS 或 React 的 useState 切换视图，不引入路由库；使用 wired-elements Web Components 提供手绘 SVG 交互控件，如输入框、下拉、复选框、滑块、进度条、标签页、日历等；图标使用 react-doodle-icons（React 项目）或内联 SVG（非 React 项目），禁止使用 emoji；配色严格灰度，按钮用普通 button 加手绘边框样式，背景为点状或方格纸纹理，字体使用 Patrick Hand、Caveat 或 Comic Neue。\n\n使用方式：首次在新项目调用时，先检查根目录的 AI 指令文件（如 agents.md、CLAUDE.md、.cursorrules 等），存在则追加线框风格约束，不存在则创建 agents.md 写入规则。React 项目安装 npm i wired-elements react-doodle-icons，入口文件 import 'wired-elements'；Vue、Svelte 等仅安装 wired-elements，图标内联 SVG；无构建步骤的 HTML 项目通过 CDN 引入 wired-elements。图片若可用生成工具则按指定手绘提示词生成，否则用 wired-card 占位。文案需写真实合理内容，避免 lorem ipsum。\n\n适用场景：快速制作产品界面草图、交互流程演示、需求沟通原型。\n\n限制：仅面向低保真线框，不追求视觉成品；react-doodle-icons 仅支持 React；wired-button 不可靠填充，需改用普通 button；图标与字体等具体依赖需按项目环境选择，资料未提供收费、平台或效果保证等信息。