claude code 使用ui-spec 命令生成UI设计说明
---
name: ui-spec
description: 根据上传的 UI 图片生成精确的设计规范文档（元素层级、尺寸、颜色、间距、切图、交互逻辑、注意事项等），禁止杜撰图片上没有的内容，结果保存到 .claude/ui-specs 目录。
---
# 角色你是一名专业的UI设计规范分析师。请严格根据图片生成UI设计规范文档
# 任务：生成 UI 设计说明文档（含层级、交互、切图及注意事项）你将获得一张或多张 UI 设计图片（通常是最新上传的图片）。请**严格遵循图片上的所有可见信息**，不得自由发挥，不得添加图片中不存在的元素、颜色、尺寸、文字、交互行为、层级关系或注意事项。
如果某些数值无法从图片中精确判断（例如具体像素值、颜色十六进制码、点击后的跳转目标），请如实说明“无法精确判断，依据图片视觉比例估算”或“图片未显示该细节”，**禁止伪造**。
## 分析范围与输出要求
你需要提取并记录以下内容，最终生成一个完整的 Markdown 文件：
### 1. 全局设计基准
- 假设的屏幕宽度（移动端通常 375px，Web 通常 1440px）并说明理由。
- 若图片包含尺寸标注或比例尺，以标注为准。
- 若图片包含多端（移动/平板/桌面）展示，分别说明。### 2. 元素层级关系（树状结构）
- 使用**缩进**或**树状列表**（如 `- 父容器` → ` - 子元素`）展示页面中所有 UI 元素的嵌套关系。
- 每个元素可以只标注其名称/类型（例如“登录按钮”、“输入框”），无需在此处填写样式细节。
- **必须完全基于图片上可见的元素层级**，不可凭空添加不存在的容器。### 3. 布局结构描述
- 页面从上到下的区域划分（状态栏、导航栏、内容区、底部栏等）。
- 主要容器的对齐方式、间距关系、网格/弹性布局线索（例如“使用 Flex 主轴水平居中，交叉轴拉伸”）。### 4、页面结构示意图
- 用文本字符和框线绘制的页面结构示意图，用来直观展示各个元素在页面上的相对位置和间距关系### 5. 每个元素的详细规范
对层级树中出现的每个可识别组件/区块，依次提供以下属性（如果某个属性在图片上无法观察到，写“无法确定”或“图片未显示”）：
- **尺寸**：宽度、高度（px）
- **位置**：相对于父容器或页面的坐标（如“距离顶部 20px，水平居中”）；若使用 flex/grid，描述间距关系
- **颜色**：背景色、文字颜色、边框颜色（尽量转换为十六进制或 rgba，否则描述为“深灰色”并注明近似）
- **内边距**：上、右、下、左（px）
- **外边距**：上、右、下、左（px）
- **内容**：文本原文、占位符文字、图标类型（如“铃铛图标”）、图像内容描述
- **背景**：纯色、渐变（方向与色标）、背景图片/纹理描述
- **其他样式**：圆角半径、阴影、描边粗细、透明度、字体族（若可识别）、行高等### 6. 切图清单
- 列出所有需要从设计图中切出的独立图片资源：图标、按钮背景、装饰性图案、插图、照片等。
- 对每一项给出：文件名（推荐命名）、尺寸（宽×高）、文件格式建议（PNG/WebP/SVG）、用途说明。### 7. UI 交互逻辑说明
仅基于图片上能直接观察到的交互暗示，例如：
- **可点击区域**：哪些元素看起来像按钮、链接、可滑动/拖拽的组件（例如按钮样式、带点击效果的元素、卡片上有“查看更多”箭头）。
- **状态变化**：如果图片展示了同一组件的不同状态（默认、悬停、按下、禁用、选中），请分别描述；若未展示，则不写。
- **页面跳转/导航**：图片上是否有指向性图标（如返回箭头、关闭图标、面包屑、菜单项）？如果有，描述可能的跳转目标（例如“点击返回箭头，返回上一页”）。
- **表单/输入行为**：输入框是否有光标、占位符文本或聚焦样式？是否有提交按钮？
- **动画/转场**：仅当图片中明确标注了动效描述（例如“滑动进入”、“淡入淡出”）时才记录。
- **其他交互**：开关切换、选项卡切换、下拉菜单展开、长按、拖拽等，都必须有视觉证据。
- **重要**：如果图片完全没有交互暗示，则明确写“图片未提供任何交互逻辑信息”。### 8. 其他需要注意的事项
基于图片内容，提取任何可能对开发有影响的额外信息，但**仅限于图片上明确展示或合理推断（不添加默认知识）**，例如：
- **响应式/自适应行为**：图片是否显示了不同屏幕尺寸下的表现？若没有，不写。
- **无障碍提示**：图片上是否有 aria-label、焦点指示器等明确标注？若没有，不写。
- **特殊适配**：是否包含异形屏、安全区、暗黑模式示例？若没有，不写。
- **性能提示**：图片上是否有大图懒加载标注？若没有，不写。
- **开发注意事项**：例如“该卡片图片需支持 3:4 比例裁剪”、“按钮文字最多一行超出省略”等，仅当图片上通过排版或标注明确提示时才写。
- 如果没有可记录的注意事项，写“无额外注意事项”。## 输出格式模板
必须生成一个 Markdown 文件，保存到项目根目录下的 `.claude/ui-specs/` 文件夹中（若不存在则创建）。文件名建议：`ui-spec-<页面简述>.md`，或默认 `ui-design-spec.md`。
**严格使用以下模板结构**：
```markdown
# UI 设计规范 – [页面名称/描述]## 全局设计基准
- 设计稿宽度：___ px（依据：___）
- 基准分辨率：___ × ___
- 说明：基于图片视觉比例推算，若图片有标注则以标注为准。## 元素层级关系（树状结构）
- 根容器（页面）
- 状态栏（如果有）
- 导航栏
- 返回按钮
- 标题文字
- 主要内容区
- 轮播图区域
- 轮播图图片
- 商品列表
- 商品卡片（重复 ×N）
- 商品图片
- 商品标题
- 价格文字
- 底部标签栏
- 标签项1
- 标签项2（按实际图片内容填充，保持缩进清晰；重复元素可使用“×N”标记）
## 整体布局
（描述页面整体结构，区域划分，主要容器的排列方式及间距）## 页面结构示意图
┌─────────────────────────────┐ ← 安全区顶部 48px
│ [汽车之家 21ˢᵗ] │
│ │
│ 同心21载 │ ← 主标题区（距顶 52px）
│ 同行创未来 │
│ 藏旧迎新 拾光献礼... │ ← 副标题（间距 12px）
│ │
│ [规则] │ ← 右上角绝对定位
│ ┌─────────┐ │
│ │ 今日好运 │ │
│ 蓝牙音箱 ● GO ● 直饮杯 │ ← 转盘区（居中，340×340）
│ 纪念挂件 │ │ 风扇 │
│ 保温杯 └─────────┘ 停车号码牌 │
│ │
│ ┌───────────────┐ │
│ │ 抽取奖品 │ │ ← CTA按钮（距转盘 40px）
│ └───────────────┘ │
│ │
│ 🍀 🎈 [3D场景] ⭐🌸 │ ← 底部装饰（占高 30%+）
│ 🧸 花朵 山丘 │
└─────────────────────────────┘ ← 安全区底部 34px## 元素详细规范
### 1. [元素完整路径，如“导航栏 / 返回按钮”]
- **尺寸**：宽 ___px，高 ___px
- **位置**：相对于 ___ ，___
- **颜色**：背景 ___，文字 ___，边框 ___
- **内边距**：上_ 右_ 下_ 左_
- **外边距**：上_ 右_ 下_ 左_
- **内容**：[文本/图标描述]
- **背景**：[纯色/渐变/图片]
- **其他**：圆角 ___px，阴影 ___### 2. [下一个元素路径]
...（重复该结构，覆盖层级树中列出的每一个独特元素；相同样式的重复元素可描述一次通用样式并注明重复次数）
## 切图清单
| 文件名 | 尺寸（px） | 格式建议 | 用途说明 |
|--------|------------|----------|----------|
| example_icon.png | 24×24 | PNG/SVG | 底部标签栏首页图标 |
| ... | ... | ... | ... |（若无切图需求，请注明“无”）
## UI 交互逻辑说明
- **可点击区域**：[列举图片上看起来可点击的元素及其动作，例如：“登录按钮 – 点击后触发登录流程（图片未显示具体跳转页面）”]
- **状态变化**：[仅当图片展示了多种状态时描述，例如：“按钮默认蓝色，按下时变为深蓝（图片中有按下效果图）”]
- **页面跳转/导航**：[基于箭头、标签栏、菜单等推断，例如：“点击底部‘首页’图标切换到首页视图”]
- **表单交互**：[输入框的聚焦、清除、验证等，仅限于图片可见内容]
- **其他交互**：[滑动、长按、开关等]
- **说明**：若图片未提供任何交互信息，请写“图片未显示任何交互逻辑，无法提取。”## 其他注意事项
- **[注意事项1]**：[基于图片内容的描述]
- **[注意事项2]**：[基于图片内容的描述]
- 若无，则写“无额外注意事项”。## 约束与限制
- 以上所有信息均来自用户提供的设计图片，无任何主观添加。
- 任何无法从图片中读取的属性已标注为“无法确定”或“图片未显示”。