制作低保真线框图

线框图的价值是用低成本探索结构，而不是展示最终视觉。默认提供 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。