# Ui Wireframe

> UI 界面线稿（Wireframe）生成技能。当用户说"帮我画线稿"、"生成 Wireframe"、"画个 UI 草图"、"设计界面线框图"、"画个 App 界面"，或者描述一个 App/网页的结构需求时，立即使用此技能。支持两种输入方式：用户用文字描述界面需求，或上传已有设计图/草图让 Claude 转化为标准线稿。输出为 SVG 格式，风格统一、标注清晰、适合设计评审和原型沟通。

- **Type:** Skill
- **Install:** `agentstack add skill-eijiakgnahz-oss-claude-ui-wireframe-skill-claude-ui-wireframe-skill`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [eijiakgnahz-oss](https://agentstack.voostack.com/s/eijiakgnahz-oss)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [eijiakgnahz-oss](https://github.com/eijiakgnahz-oss)
- **Source:** https://github.com/eijiakgnahz-oss/claude-ui-wireframe-skill

## Install

```sh
agentstack add skill-eijiakgnahz-oss-claude-ui-wireframe-skill-claude-ui-wireframe-skill
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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 次要，用于标注、描述、占位文字 |

### 图片占位框

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

```svg

```

### 标注规则

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

```svg

[区域名称]
```

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

---

## 常用 UI 组件 SVG 模板

### 导航栏（顶部）

```svg

[页面标题]
```

### 搜索框

```svg

搜索...
```

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

```svg

[标签]

[标签]
```

### 列表行

```svg

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

### 主按钮

```svg

[按钮文字]
```

### 底部导航（4 个 Tab）

```svg

[Tab名]

[Tab名]
```

---

## 手机外框模板

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

```svg

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](https://github.com/eijiakgnahz-oss)
- **Source:** [eijiakgnahz-oss/claude-ui-wireframe-skill](https://github.com/eijiakgnahz-oss/claude-ui-wireframe-skill)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-eijiakgnahz-oss-claude-ui-wireframe-skill-claude-ui-wireframe-skill
- Seller: https://agentstack.voostack.com/s/eijiakgnahz-oss
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.