Frame0 Wireframing 是一个用于驱动 Frame0 MCP 服务器生成低保真线框图与线流的技能。Frame0 是手绘（草图）风格的线框图工具（类似 Balsamiq），其粗糙外观是刻意设计：向利益相关者传达“这是思考产物，不是最终设计”，使反馈集中在结构和流程上，而不是像素配色。该技能的目标是把对某个屏幕或流程的描述，一次性转换为参数正确的 Frame0 工具调用。
用途与适用场景
适用：把单个屏幕（登录、仪表盘、设置、结账等）画成由方框和标签组成的线框图；用连接线 and 可点击 set_link 热点勾画多屏用户流程/线流；在任何视觉设计出现之前粗略规划布局与信息层级；以低成本构建低保真原型，验证导航与核心假设；将页面或形状导出为图片以便分享反馈。
不适用：高保真视觉设计、品牌识别、配色方案、真实字体排版（应转向 web-design-expert / Figma）；生产环境 UI 代码（React/SwiftUI 等，应使用前端技能）；对现有产品做深度 UX 启发式评审；不含界面的纯数据或架构图。
保真度原则
保持灰阶（#FFFFFF 填充， #000000/#777777 描边）。颜色与真实字体属于 mockup 范畴，过早进入高保真被视为最大的线框图失误：它会把评审从“流程是否正确”变成“我不喜欢那个蓝色”。若需求确实是视觉设计，应转向 Figma 等设计环节，而不是在线框图中伪造。
元素到工具调用的映射
每个屏幕是一个 frame，frame 内的一切元素都通过 parentId: <frameId> 归属该 frame 并随之移动；每次创建调用返回的 id 都要记录，因为连接线、链接、分组、对齐和移动都按 ID 引用形状。屏幕用 create_frame（frameType 可选 phone/tablet/desktop/browser/watch/tv，且必须先 add_page）；按钮用 create_rectangle（corners:[6,6,6,6]）加居中的 create_text（type:"label"）；输入框用细矩形加占位文字（fontColor #999999）；卡片用圆角矩形容器加标题与正文文字；导航栏用全宽短矩形加品牌文字与右对齐图标；列表行用矩形加前后图标与文字，并可用 duplicate_shape 重复；头像用 create_ellipse 或 create_icon "user"；图标必须先 search_icons 得到有效名称再 create_icon（size 枚举 small/medium/large/extra-large）；弹窗用覆盖全屏的灰色半透明矩形加较小面板；空状态用居中大图标加标题、说明文字和 CTA 按钮；分隔线用 create_line；标签栏用文字行加活动项下划线；屏幕之间的箭头用 create_connector（startId/endId 指向两个 frame 或热点 ID，endArrowhead:"arrow"）；可点击热点用按钮或行矩形上的 set_link（linkType:"page"，pageId 指向目标页面）。
构建顺序
- add_page（没有页面就无法创建 frame，新页面会成为当前页）；2) create_frame 选择设备并保存返回的 frameId；3) 自上而下添加子元素，每个都带 parentId: frameId 并保存 id；4) 用 align_shapes 对齐、用 move_shape 以相对 dx/dy 微调，而不是重新创建；5) 用 create_connector 连接 frame，用 set_link 设置可点击原型；6) export_page_as_image 导出并展示给用户。
常见反模式
在线框图里跳到高保真（加品牌色、真实字体、阴影、精确间距）；手工绝对定位一切而不用 frame 加对齐（且 move_shape 接受的是增量 dx/dy 而非绝对坐标）；猜测工具参数（用编造的图标名调用 create_icon，或在 create_text 中写入字面 \n 或 HTML）；在形状存在之前连接屏幕（连接器或链接因未知 ID 报错）。text 应使用真实换行符（0x0A），段落需通过 update_shape 设置宽度以自动换行，文本自动调整尺寸后再用 move_shape 微调。注意 create_icon 的 schema 文本提到 get_available_icons，但 MCP 实际暴露的发现工具是 search_icons。
质量检查与参考资料
质量检查包括：每屏一个 frame 且所有子形状都设了 parentId；仅灰度；图标名来自 search_icons；文本使用真实换行且段落有宽度；用 align_shapes 对齐、move_shape 增量微调；多屏时先创建页面再 set_link 连线；需要时用 linkType "action:backward" 提供返回入口；导出图片供评审；若需求实为视觉设计则转交设计环节。技能附带参考资料：01 工具参数契约（会话首次构建或调用报错时阅读）、02 线框图模式手册（按钮、输入、卡片、导航、列表、弹窗、空状态、标签栏的配方与 8pt 布局纪律）、03 流程与原型的制作方法（连接器、set_link、多页导航、线框→mockup→原型的推进与导出）、04 保真度决策指南，以及 INDEX 路由表和登录流程的完整示例配方（登录 + 首页 + 连接线 + 链接 + 导出）。产品收费、价格与平台支持等细节暂未提供。