# Wireframe

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

- Skill: `onevium/wireframe` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add onevium/wireframe`
- Raw SKILL.md: https://api.skillmd.com/api/skills/onevium/wireframe/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT. See LICENSE.txt for full terms.
- Author: Onevium (https://skillmd.com/u/onevium)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/onevium/wireframe

---


# 制作低保真线框图

线框图的价值是用低成本探索结构，而不是展示最终视觉。默认提供 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](https://github.com/Trystan-SA/claude-design-system-prompt) 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布，详见 [LICENSE.txt](./LICENSE.txt)。