用途:生成一张清晰的低保真灰盒(greybox / blueprint)线框图页面,重点表达信息层级与布局结构,而非视觉皮肤。所有内容均为占位:文字用灰色 lorem 条,图片用带对角 X 的矩形,数字用大号实心块,页面唯一颜色是留给等宽注释的红色标注色。
主要能力:按顺序布局仪表盘结构,每块带独立 data-od-id——应用栏(logo 灰盒、导航 lorem 条、右侧头像圆)、侧边导航(图标方块加 lorem 标签,一项标记为激活)、KPI 行(四个灰盒,小标签条加大号数字条)、图表面板(内联 SVG 灰盒,坐标轴加灰色柱或示意线,无真实数据)、列表/表格面板(表头加约 5 行 lorem 条,其中一列为带对角 X 的图片占位框)、注释(一两条等宽红色标注,如 01 · 12-col grid, max-width 1280)。
使用方式:使用干净的系统无衬线字体(Inter / system-ui)塑造形状,等宽字体(IBM Plex Mono / JetBrains Mono)仅用于红色标注;不使用手绘字体和品牌色。调色板为浅中性页面(#f7f7f8)、中灰块(#e3e3e6)、清晰边框(#c9c9cf 柔和边缘、#1c1b1a 强调),仅一个强调色承载所有等宽注释,对比度需保证缩略图可读。输出一个自包含 HTML 文档(<!doctype html> 到 </html>),CSS 内联,无外部 JS 或图片,SVG 与 CSS 绘制全部占位;使用 max-width 容器加媒体查询,在约 1000px 以下折叠列。
输出契约:在 <artifact> 标签内输出,格式为 <artifact identifier="wireframe-slug" type="text/html" title="Wireframe — Title">,artifact 前一句话,之后无内容。
限制:刻意保持低保真,忽略任何推动成品 UI 的 DESIGN.md;自检要求缩略图尺寸下读作蓝图——灰块、X 交叉图片框、lorem 条、等宽红色标注仅一个强调色;若灰盒缺失、页面出现彩色或缩略图变空白,需修正。资料未提供收费、平台与效果信息。