用途:生成单张扁平、低保真的落地页线框图,并附带 redline 规格说明。核心是“结构 + 交接备注,而非像素”,灰色块承载布局,编号标记标注区域,右侧规格面板把每个标记转成简短的工程/UX 备注。
主要能力:采用两栏结构,左侧为浏览器外框内的灰色块页面画布,右侧为窄的“ANNOTATIONS / SPEC”面板。画布自上而下包含:顶部导航(logo 灰块、导航条、主按钮块,标记①)、Hero(标题条、副标题、两个 CTA 按钮块、右侧带对角 X 的图片占位,标记②)、Logo 条(5 个合作方灰块,标记③)、功能网格(3 张卡片,各含图标方块、标题条、2 条文本条,标记④)、页脚(多列链接条,标记⑤)。每个标记在规格面板中对应一行,格式为强调色圆圈编号加简短备注,例如“① Sticky nav, 64px, condenses on scroll”。
使用方式:仅松散遵循字体令牌,标签用 Inter/system-ui 等无衬线,规格备注与编号用 IBM Plex Mono 等等宽字体;使用中灰填充与较深边框,避免近白对白导致空白。只选一种强调色(珊瑚或蓝),仅用于编号标记与对应规格编号,其余保持灰阶。面板与每行需标记 data-od-id。输出时在 <artifact> 标签内生成 HTML,artifact 前一句话,之后无内容。
适用场景:需要快速表达页面结构、向工程或 UX 交接布局意图时。
限制:明确要求低保真灰块外观,不得像素级精细或手绘涂鸦;自检要求每个编号标记恰好对应一行规格,强调色仅出现在标记与规格编号上,缩略图尺寸下仍清晰可读。资料未提供安装命令、收费、价格或平台信息。