Wireframe

为页面、流程、导航、信息层级或交互模型制作低保真灰阶线框图或 storyboard,在进入高保真前快速比较多个结构方向。用户要求“画线框图”“先草拟”“探索几个布局”“wireframe”或问题仍开放、不适合直接做高保真时使用;精确复刻或视觉方向已经确定时不要强制生成多版。

Onevium 2729d09 2 files · 3.7 KB Updated

File contents

制作低保真线框图

线框图的价值是用低成本探索结构,而不是展示最终视觉。默认提供 3 个方向;用户指定数量或只需要一个流程时尊重其要求。

1. 明确探索目标

确认对象、用户目标、设备、既有约束、不可缺少内容、方案数量和主要变化轴,例如布局、密度、步骤、导航或 CTA 位置。需求过于开放时先给出 2–3 个可选探索轴。

2. 统一低保真语言

  • 只用黑、白和少量灰阶,不引入品牌色。
  • 使用系统无衬线字体,不让用户过早讨论字体个性。
  • 内容区用带标签的方框表示,图像使用条纹或明确尺寸占位符。
  • 文案只保留结构所需长度,不假装已经完成最终内容。
  • 可以使用矩形、线条和简单图标等低保真 SVG,但所有元素应保持同一抽象层级。

3. 制作有实质差异的方案

各方案应在布局、信息密度、流程结构、CTA、导航或交互模型上不同。先写明每版的核心假设,再绘制,避免三版收敛成近似布局。

单屏方案放在一个并排画布中;流程方案用每版 3–5 屏的 storyboard。通常从稳妥到大胆排序。

4. 就地标注取舍

每版旁边放 2–4 条短注释,说明优势、代价和需要验证的问题。注释与图同处一个文件,不另建难以对应的说明文档。

5. 捕获决定

用户选择后记录采用的方向或混合方案、喜欢与拒绝的具体原因,以及新出现的约束。将这些决定作为高保真或原型阶段的简报,不在线框图上继续做无意义视觉抛光。

示例

输入:“先给结账页画三个线框方向。”

**输出:**在一个灰阶画布中展示单栏线性、双栏固定订单摘要和折叠式分步流程三版,每版附带 2–4 条取舍说明,并建议选定方向后再制作交互原型。

来源与许可

本 Skill 基于 Trystan Sarrade 的 claude-design-system-prompt 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布,详见 LICENSE.txt

Onevium/skills/tree/main/skills/design/wireframe commit 2729d09107

Frequently asked questions

npx skillmds@latest add onevium/wireframe