Ui Wireframe

UI Wireframe 线稿生成技能

核心目标

将用户的界面需求（文字描述 或 上传图片）转化为标准化 SVG 线稿，风格保持一致：

• 灰阶配色，无装饰色彩
• 图片区域用叉叉占位框表示
• 文字用真实内容填写（非 Lorem ipsum）
• 虚线引出标注，说明各区域功能
• 支持移动端（手机外框）和桌面端（浏览器外框）两种尺寸

---

输入处理规则

模式 A：文字描述 → 线稿

用户描述 App 或页面的功能结构，Claude 自行推断合理的 UI 布局。

处理步骤：

1. 判断是移动端还是桌面端（默认移动端）
2. 识别页面包含哪些区域（导航、列表、卡片、表单、底栏等）
3. 按照下方"布局规范"生成对应 SVG

示例触发：

• "帮我画一个外卖点餐 App 的首页线稿"
• "做一个后台管理系统的用户列表页 Wireframe"
• "画个登录页面的线框图"

---

模式 B：上传图片 → 线稿转化

用户上传截图、草图或设计稿，Claude 将其还原为标准线稿风格（去除颜色和装饰，保留结构）。

处理步骤：

1. 识别图片中的 UI 区域和层次结构
2. 提取真实文本内容（保留，不替换为占位符）
3. 将彩色元素转换为灰阶线稿（图片区域改为叉叉占位框）
4. 添加功能标注（虚线 + 文字说明）

支持图片类型：

• App 截图、设计稿（Figma 截图等）
• 手绘草图
• 竞品界面截图

---

SVG 生成规范

画布尺寸

| 类型 | viewBox | 说明 | |------|---------|------| | 移动端（带外框） | 0 0 680 580 | 手机框宽约 280px，居中 | | 桌面端 | 0 0 680 460 | 浏览器框占满宽度 | | 仅页面内容 | 0 0 680 H | H 根据内容自适应 |

颜色规则（严格使用 CSS 变量，支持明暗模式）

| 用途 | 变量 | |------|------| | 背景 | var(--surface-0) / var(--surface-1) | | 卡片/面板 | var(--surface-1) / var(--surface-2) | | 文字（主） | var(--text-primary) | | 文字（次） | var(--text-secondary) | | 标注文字 | var(--text-muted) | | 边框 | var(--border) / var(--border-strong) | | 选中态 | var(--fill-accent) + var(--on-accent) |

禁止使用硬编码颜色（如 #333、rgb(200,200,200)）

字体类

| class | 说明 | |-------|------| | class="th" | 14px 中粗，用于标题、重要标签 | | class="t" | 14px 正常，用于正文 | | class="ts" | 12px 次要，用于标注、描述、占位文字 |

图片占位框

图片区域使用叉叉占位框（灰色矩形 + 对角线）：

标注规则

每个主要区域从左侧用虚线引出标注：

[区域名称]

标注统一放在画布左侧（x ≤ 150），避免与内容重叠。

---

常用 UI 组件 SVG 模板

导航栏（顶部）

[页面标题]

搜索框

搜索...

分类标签组（选中第一个）

[标签]

[标签]

列表行

[主标题]
[副标题]
[右侧信息]

主按钮

[按钮文字]

底部导航（4 个 Tab）

[Tab名]

[Tab名]

---

手机外框模板

当生成移动端线稿时，内容放在手机外框内部：

9:41

内容区域：x: 200~480, y: 52~510

---

输出质量检查（生成前必检）

• [ ] 所有颜色使用 CSS 变量，无硬编码 hex
• [ ] 图片区域使用叉叉占位框
• [ ] 主要区域有虚线标注（左侧）
• [ ] 文字不超出所在矩形边界
• [ ] viewBox 高度 = 最低元素底部 + 40px
• [ ] 标注全部在 x ≤ 150 区域（左侧留白）
• [ ] 手机外框内容不超出 x: 200~480 范围

---

注意事项

• 输出只有 SVG，不包含解释文字（解释在对话中说明）
• 优先还原用户描述的真实内容，不用 "Lorem ipsum" 或"文字文字"
• 如用户提供图片，优先保留图片中的真实文案
• 若需求复杂（如多个页面），可分多次生成，每次一个页面
• 标注语言跟随用户语言（中文需求 → 中文标注）

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: eijiakgnahz-oss
• Source: eijiakgnahz-oss/claude-ui-wireframe-skill
• License: MIT

Install and usage instructions live in the source repository linked above.