Wireframe 是一个负责结构布局规划的 AI 技能，其核心产物是 WIREFRAME.md——一份供设计消费的结构布局计划。该文件的 YAML frontmatter 保存区域树（region tree），markdown 正文则用屏幕地图（screen map）和每个界面的理由（per-surface rationale）来叙述这份计划。基于这份计划，技能可以绘制低保真线框图：灰度、内容盲，正是视觉设计之前手绘草图的那种形态。
核心理念
布局安排与视觉识别是正交的：同一份计划在任何设计下都成立。因此该技能只规划结构——信息架构、区域布局和屏幕流程——从不涉及颜色、字体或设计令牌。
快速开始
技能提供三种操作：
- create：从对话中撰写或修补布局计划（界面、区块、形状、流程）。详见 create.md。
- render：将计划绘制为低保真线框图——HTML 页面或 ASCII 草图——或 Mermaid 屏幕流程图。详见 render.md。
- validate：检查线框图或计划的一致性，并在需要变更时用自然语言调和计划。详见 validate.md。
发现流程
discovery.md 在每次操作之前运行——从不跳过，也从不被直接调用。它检查已有上下文（已有的 WIREFRAME.md、对话内容、用户提供的任何简报），并按意图路由——撰写计划、绘制计划或检查计划。
产物
技能产出并拥有 docs/design/WIREFRAME.md 及其绘制视图 docs/design/wireframe.html——一份低保真线框图。frontmatter 中的区域树是渲染所依据的计划；正文则供人阅读。渲染是生成式的：它读取计划并运用判断力绘制页面，由内置的符号套件（assets/wireframe.css）和评分标准（drawing.md）引导，使各次运行在风格上保持一致——并非逐字节完全一致的投影。完整模板和形状词汇表位于 create.md。
register 与 surface
在安排布局之前需设定两个轴：
- register——姿态：brand（界面用于传达——落地页、活动页、作品集）或 product（界面用于服务任务——仪表盘、表单、设置）。它影响布局倾向，但从不作为硬性门槛。需先阅读匹配的 brand.md / product.md。
- surface——按上下文命名的细粒度类型。一个 surface 隶属于某个 register；surface 来自对话，而非固定集合。店铺类界面横跨两者——营销外壳属于 brand，结账/账户流程属于 product。
输入
从对话中规划。除此之外，唯一的输入是用户提供的内容——简报、PRD、描述、参考 URL，或用户指向的现有材料；不会自动加载任何内容。如果用户提供了现有内容或先前的计划，则据此安排；否则从意图出发规划。
准则
- 只规划结构——绝不嵌入视觉决策（颜色、字体、间距、令牌）、文案字符串或需求编号（fr-1、m1、j1、us-3）。
- 从对话中推导 surface 和主题；没有固定的项目类型。
- 为每个 surface 命名 register（brand 或 product）；它影响布局倾向，但从不限制形状。
- 为每个 surface 规划真实条件下的表现——窄视口下的重排及其内容量（无/典型/大量）——作为叙述中的结构意图，而非像素或断点。
- 绘制低保真线框图——用符号代替内容；计划保持灰度和内容盲，以便在任何设计下都成立。
- 先修补 frontmatter 区域树，再修补叙述它的正文，使两者保持同步。
适用场景
适用于在视觉设计之前先确定页面骨架、信息架构与屏幕流程的场景，例如为落地页、仪表盘、表单、设置页等规划结构。限制：不处理视觉设计（颜色、字体、间距、令牌），不生成文案，不涉及需求编号；输入完全依赖用户提供的内容，不自动加载外部资料。