SenseNova-Skills 信息图样式解析：ui-wireframe 灰度界面线框风格从定义到实战

• AI 技能
• 人工智能
• 深度研究
• 数据分析
• 媒体生成

ui-wireframe 是 SenseNova-Skills 仓库中sn-infographic技能所内置的 66 种信息图视觉风格之一，专门用于呈现产品设计、界面讲解、App 概念与用户流程图等"软件类"内容。本文以该样式定义文档为骨架，结合 sn-infographic 主文档 的生成流水线与 提示词写作规则，逐项拆解其配色、视觉元素、字体规范与适用场景，并给出可直接复用的完整中文提示词示例，帮助你写出风格统一、可被图像模型稳定还原的"线框风"信息图。

一、样式文档定位：66 种风格中的"软件蓝图"

在sn-infographic技能中，视觉风格并非硬编码，而是以 Markdown 文档形式维护在 references/styles/ 目录下，共 66 个风格文件（另有 87 个布局文件 对应references/layouts/，见 SKILL.md References 小节）。每个文件描述一种可被图像模型理解的"风格规格"，ui-wireframe 正是其中之一。

ui-wireframe.md 全文采用统一的五段式结构，与其他风格文件（如 material-design、technical-diagram、corporate-memphis）完全同构：

这段结构本身就是一个完整的"风格契约"：当该风格被选中后，文件全文会被拼进图像提示词的系统提示词中（详见下文第四节），图像模型据此理解"这应该是一张灰阶线框图，而不是成品 UI 或照片"。

二、Color Palette：灰阶为主、蓝色点睛的克制配色

ui-wireframe 文档给出的配色规格如下：

• 主色（Grays）：浅灰#E5E5E5、中灰#9CA3AF、深炭灰#374151
• 背景（Background）：纯白#FFFFFF、浅灰
• 强调色（Accents）：交互蓝#3B82F6、警示红（red）

这套配色模拟的是产品原型工具（如 Figma、Sketch）的默认画布观感：灰阶承载 90% 以上的信息层级，仅用少量蓝色标记"可交互元素"，红色标记"警告/异常"。在信息图语境下可以这样理解与使用：

一个关键注意点：样式文档本身用十六进制色值做"规格定义"，但真正写图像生成提示词时，必须遵守 prompt-writing-rules.md 的 Color Avoidance 规则——禁止输出#RRGGBB，必须改用描述性色名（例如用deep slate gray替代#2D3748）。因此上表右侧给出了可直接写入提示词的色名建议，这也是"文档是规格、提示词是执行"的典型分层。

三、Visual Elements：六类元件打造"原型图"质感

ui-wireframe 最核心的辨识度来自它规定了六类视觉元件，信息图中应当全部或大部分出现：

1. Wireframe boxes and placeholders（线框盒子与占位框）：所有内容区域以矩形线框呈现，内部留白或放占位内容，而不是"画好的成品"。落地写法："用浅灰细线描边的矩形线框表示头部导航区、内容卡片区，内部留白"。
2. X marks for image placeholders（图片占位的 X 标记）：模拟设计工具中未填充图片的占位符，用交叉线X填充图片区域。落地写法："右上角图片区域以交叉线 X 填充，表示待替换图片"。
3. Simple line icons（简洁线性图标）：图标一律为单色、单一线宽描边，不用填充色块或拟物细节。
4. Grid-based layout（网格化布局）：版式建立在可见的网格或栅格系统上，呼应前端 8pt/12 栏栅格习惯。
5. Annotation callouts（标注气泡/引线标注）：用引线 + 短文本对界面元素做解释性标注，模拟设计评审时的批注。
6. Redline specifications（红线规格标注）：用红色标线标出间距、尺寸、对齐关系，例如两个组件之间的 16px 间距标注——这是设计交付物中"给开发看"的经典符号。

把这些元素写成提示词时，建议同时遵守 提示词写作规则的其余条款：所有要出现在图里的文字用英文双引号包裹（Text Citation）；尽量少用箭头，必须用时指明起点与终点（Arrow Minimalism）；每个图标都要有语义对应（Semantic Correspondence）。例如：

在"登录页"线框下方放置一个引线标注气泡，文字为"输入框占位文案：请输入邮箱地址"，用一条从气泡指向输入框的细引线连接；在"登录按钮"右侧用红色标注线标出按钮宽度 320px 的对齐规格。

四、Typography：系统字体 + UI 标签 + Lorem ipsum

文档对字体的规定非常"原型工具化"：

• System fonts（系统字体）：不使用花哨的艺术字体，回到最通用的无衬线系统字体栈；
• Placeholder "Lorem ipsum"（占位文本）：正文/说明区域可用经典的 Lorem ipsum 占位段落，表示"此处为示例文案"；
• UI label style（UI 标签风格）：标签短小精炼、字号层级分明，模拟界面上的按钮文字、导航文字、状态文字；
• Sans-serif throughout（全篇无衬线）：与灰阶线框气质统一。

对中文场景，可把 "Lorem ipsum" 替换为中文占位，如"此处为示例文本"或"占位标题/占位描述"，并统一使用黑体类无衬线。文字层级的落地建议：主标题用深炭灰加粗，模块标题用中灰常规体，正文用浅灰小号字——灰阶本身就是最好的层级编码。

五、Best For：什么内容适合 ui-wireframe

文档给出的最佳场景是：Product designs（产品设计）、UI explanations（界面讲解）、App concepts（App 概念）、User flow diagrams（用户流程示意图）。

从仓库的布局与样式选择规则看，ui-wireframe在两类语境中被列为替代风格（match_score=0.7）：

也就是说，当用户内容被分析为"软件/产品/技术"类信息时，ui-wireframe 会以较高概率进入候选池参与加权随机抽样。它适合的信息结构包括：功能清单、页面结构说明、登录/注册流程、App 导航架构、产品交互示意图、前后端调用关系图等。

布局搭配建议（根据 analysis-framework.md 内容类型映射表 推断）：Feature List/Catalog类可配modular-repetition或bento-grid，Process类可配linear-progression或swimlane，Report/Long-form类可配header-body或f-pattern，Marketing/CTA类可配z-pattern。若拿不准，技能会在选择失败时自动回退到hub-spoke+corporate-memphis（见 SKILL.md Step 2.1）。

六、调用链深挖：样式文档如何进入最终提示词

在sn-infographic的 Worker 流水线中，样式文档参与链路如下（完整流程见 SKILL.md）：

1. Step 2.0 内容分析：调用sn-text-optimize产出analysis.json，其中tone、data_type、audience是后续选择的输入。
2. Step 2.1 名称级加权随机选择：按 layout-style-selection.md 的抽样算法 从候选池抽名——首选 ×10 份、替代 ×9 份、再从全量文件列表随机取 3 个 ×1 份，洗牌后取第一个。选择只看名字不看内容，这是刻意的随机化设计，避免每次结果雷同。
3. Step 2.3 系统提示词拼接：把 prompts-expand-system.md、被选中的layouts/<layout>.md、被选中的styles/ui-wireframe.md、base-prompt.md 四个文件直接cat拼接成扩写提示词（见 SKILL.md Step 2.3 拼接代码），随后调用sn-text-optimize产出expanded_prompt。
4. Step 3 图像生成：expanded_prompt原样传给sn-image-generate（底层参数见 api_spec.md），配合--image-size、--aspect-ratio、--save-path生成图片。
5. （可选）多轮评审：当max_rounds > 1时，由 VLM 按 prompts-critic-system.md 的九条红线规则逐轮评审，按违规数升序排序返回最佳结果。

结论：你不需要手动把 ui-wireframe 的规格"翻译"进最终提示词——只要内容被判定为软件/产品语境且风格被抽中，样式文档全文就会自动成为扩写模型的设计约束。如果你想提高它被选中的概率，可在原始需求里用文字表达"线框/原型图/灰阶/界面稿"等倾向，这些信号会被 analysis-framework.md 的 design_instructions 字段 捕获并传递。

七、相近风格横向对比：何时选 ui-wireframe

仓库中与 ui-wireframe 最易混淆的是material-design与flat-design，其次是technical-diagram系列。对比表如下（依据各风格文件原文）：

一句话选型：要"给开发/评审看的原型稿"选 ui-wireframe，要"给用户看的上线效果"选 material-design 或 flat-design。

八、实战：ui-wireframe 风格用户流程信息图提示词

下面是一个可直接运行的完整示例——把"登录注册流程"做成 ui-wireframe 风格信息图，严格遵循 base-prompt.md 模板 的规范（无十六进制色值、图中文字加引号、箭头指明起止、图标语义对应、数据原样保留）：

这张信息图的标题是"登录注册流程说明"，采用灰度界面线框风格。整体布局为横向 16:9 的网格化版式，背景为白色，带浅灰色网格线。画面由三个主要线框模块组成：左列"注册流程"、中列"登录流程"、右列"找回密码流程"，三个模块之间用一条从左侧指向右侧的细引线连接，表示流程递进关系。 每个模块内部用浅灰色细线描边的矩形线框表示界面区域，线框左上角标注模块名。注册流程包含四个纵向排列的线框步骤，每一步对应一个界面占位框： 1. 框内上方用交叉线 X 填充的图片占位区，表示头像上传； 2. 下方排列两个输入框线框，内部以浅灰占位文字标注"手机号"和"验证码"； 3. 一个深炭灰填充的圆形按钮线框，内嵌白色文字"注册"； 4. 按钮右侧用一个红色引线标注气泡，文字为"已同意用户协议"，并有一条红色标线标出按钮与输入框之间的 16px 间距规格。 登录流程模块包含三个线框步骤：输入框"账号"、输入框"密码"、以及一个交互蓝描边的圆形按钮线框，内部文字为"登录"。按钮下方放置一个简洁的线性图标——锁与钥匙的组合，旁边标注文字"忘记密码？"，用一条从该图标指向右列模块的细引线连接。 找回密码流程模块包含两个线框步骤：输入框"邮箱地址"与深炭灰按钮"发送重置链接"。模块底部放置一段浅灰色小号系统字体占位文字"此处为找回密码说明示例文本"。 所有图标均为单一线宽、灰阶描边的简洁线性图标：手机、短信、锁、钥匙、邮箱各一个。主标题"登录注册流程说明"用深炭灰加粗无衬线字体，置于顶部中央；各模块标题用中灰常规字体；正文与占位文字统一使用系统无衬线字体。全图以浅灰、中灰、深炭灰三档灰阶表达信息层级，仅用交互蓝标记可点击元素、红色标记警示与规格标注，无其他颜色。

写作要点拆解：

• 落实了样式文档的六类元件：线框盒（界面框）、X 占位、线性图标、网格布局（16:9 网格版式）、标注气泡、红线规格（16px 间距标注）全部出现；
• 落实了配色三层级：灰阶三档 + 白色底 + 交互蓝/警示红点缀；
• 落实了文字规则：所有图中文字均带引号、字体统一系统无衬线、占位文字明确标注；
• 遵守了提示词写作规则：未出现任何十六进制色值、箭头仅有 1 条且指明了起点与终点、图标与相邻文字语义对应。

尺寸与比例建议：根据 runtime-parameters.md 的推断规则，横版讲解图默认16:9；如果是手机 App 概念（竖屏卡片），可主动给出9:16或4:5；Dashboard/课堂图表类建议4:3。image_size默认2k，仅在明确要求且模型支持时才用4k（如sensenova-u1.5-lite，见 api_spec.md 参数说明）。

九、小结与深入阅读

ui-wireframe 是sn-infographic风格体系中"软件蓝图"的一极：它以灰阶线框、X 占位、标注气泡与红线规格，把"尚未上线的产品原型"压缩成一张可解释、可评审、可交付的信息图。理解它的关键，在于同时掌握三层：风格文档的规格内容（本文二至五节）、它在生成流水线中的注入机制（第六节）、以及写提示词时的执行纪律（第七、八节）。

推荐继续阅读仓库内以下文件：

• sn-infographic 主文档——完整流水线与参数表
• 布局与样式选择规则——加权随机抽样算法
• 提示词写作规则——八条铁律（含色值禁令）
• 基础提示词模板——最终提示词骨架
• 结构化内容模板——内容→设计的三阶段转化
• sn-image-base API 规格——sn-image-generate/sn-text-optimize参数与鉴权
• 案例库——近 100 个真实生成案例与其 Prompt

• AI 技能
• 人工智能
• 深度研究
• 数据分析
• 媒体生成