三阶线框图

解决什么问题

工程师拿到设计稿时，最常见的情况是：屏幕上有哪些区块、每个区块在什么状态下变化、窄屏时哪里折叠，这些信息散落在 Figma 图层里、聊天记录里和口头约定里。结果就是反复确认、漏掉空状态和错误态，以及不同端实现不一致。

这个技能要解决的问题很具体：让智能体在纯文本环境下产出一份能当实现依据的线框规格。它不生成图片，而是输出 ASCII/制表符绘制的布局图，外加一份结构化的组件清单与标注。

核心能力

支持三档精度，按当前问题需要选择：

• low-fi：只画内容区块与层级关系，用 [Hero Image]、[Product Grid 3×2] 这类标签占位，不涉及像素值。
• mid-fi：填入代表性内容，明确组件类型（下拉框还是单选、input 还是 textarea），给出列数与大致间距，如"卡片间 16px 间隔"。
• high-fi：输出精确尺寸、字号行高、颜色 token、圆角与阴影，并对每个可交互元素写清 hover、focus、点击动作、校验规则和错误文案。

每次产出都包含三部分：组件清单（表格列出内容需求与交互行为）、交互标注、响应式行为（分别描述 <640px、640-1023px、≥1024px 三个断点下的折叠与重排方式）。

工作方式

流程分六步：先明确屏幕用途与它在用户流程中的位置，再列出组件清单作为"物料表"，然后从 low-fi 布局起步，逐步提升到 mid-fi，最后按需追加 high-fi 规格与响应式说明。

适用边界

• 产出物是文本规格，不是渲染图。需要像素级视觉稿时，请把它交给设计工具。
• 依赖你提供的信息：屏幕名称、目标平台、是否有既有设计 token 或组件库。信息不足时技能会自行假设，但假设不等于你的需求。
• 建议从最低够用精度开始。布局还没定就给像素值，只会提高后续推翻的成本。
• 对无限滚动、用户生成内容长度不可预测、多角色权限、弱网与无障碍等场景，需要额外声明约束，否则标注会缺项。