--- name: ascii-design-ux description: Create professional ASCII UI wireframes, mockups, and prototypes for software, web, and mobile interfaces. Supports various styles including standard, modular, and compact dashboard views. Includes comprehensive rules for web and mobile components like drawers, alert dialogs, dropdowns, radio buttons, and cascading selects. Use when users need to visualize interface layouts, create design mockups, generate wireframes from requirements, or prototype UI designs using ASCII art. --- # ASCII Design UX 专业的 ASCII 界面原型设计工具，能够根据需求描述或字段列表，快速生成软件界面、安装向导、网页布局及移动端 App 线框图。 ## 核心特性 - **自动保存设计稿**：自动保存到项目根目录的 `ascii-ui-design/` 文件夹 - **多种界面风格**：支持标准、模块化、紧凑仪表板视图等多种布局模式 - **完整组件库**：涵盖抽屉、确认消息框、下拉、单选、级联选择、复选框、标签页等常用 UI 组件 - **多平台支持**：支持软件界面、Web 页面、移动端 App、安装向导等多种界面类型 - **响应式设计**：区分 Web 端和移动端的布局差异，适配不同屏幕尺寸 - **设计文档**：提供完整的设计说明、布局思路和交互元素标注 ## 工作流程 本技能遵循以下工作流程： ``` 用户需求 → 生成 ASCII 设计稿 → 自动保存到 ascii-ui-design/ → 输出设计说明 ``` ### 1. 需求分析 根据用户描述或字段列表，理解界面类型、功能需求和风格偏好： - 确定界面类型（软件界面、Web 页面、移动端 App、安装向导等） - 识别功能模块和关键元素 - 理解布局需求和风格偏好 ### 2. 设计生成 使用 ASCII 字符绘制界面线框图，遵循设计原则和组件规范： - **字符选择**：优先使用标准 ASCII 字符（`|`, `-`, `+`, `=`, `#`, `*`, `:`, `.` 等），必要时使用 Unicode 边框字符（`┌─┐│└─┘`）增强视觉效果 - **布局原则**：保持布局清晰、层次分明，合理使用空白和缩进 - **组件标注**：明确标注关键元素和功能区域，使用注释说明交互行为 - **风格适配**：根据需求选择合适的风格（标准布局、模块化设计、紧凑仪表板视图） - **平台差异**：区分 Web 端和移动端的设计差异，移动端考虑触摸交互和屏幕限制 ### 3. 自动保存 **重要：** 每次生成设计稿后，必须自动保存到项目根目录的 `ascii-ui-design/` 文件夹。 **文件命名规则：** - `{页面名称}_{时间戳}.txt`（例如：`login_page_20250112.txt`） - 或 `{页面名称}_v{版本号}.txt`（例如：`ticket_detail_v1.txt`） **保存步骤：** 1. 检查项目根目录是否存在 `ascii-ui-design/` 文件夹 2. 如果不存在，先创建文件夹 3. 使用适当的文件名保存 ASCII 设计稿 4. 确保文件编码为 UTF-8 可以使用 `scripts/save_design.py` 脚本来自动处理保存操作。 ### 4. 设计说明 提供设计思路、关键元素、风格选择等说明文字： - 设计理念和布局思路 - 关键功能区域说明 - 交互元素标注 - 风格选择理由 ## 设计原则 ### ASCII 字符使用规范 - **边框和分隔线：** 使用 `|`, `-`, `+` 创建清晰的边界 - **标题和强调：** 使用 `=`, `#`, `*` 突出重要内容 - **内容区域：** 使用空格和缩进创建层次结构 - **图标和符号：** 使用 `:`, `.`, `o`, `*` 等表示交互元素 ### 布局模式 **标准布局：** - 清晰的顶部导航 - 主要内容区域 - 侧边栏（如需要） - 底部信息栏 **模块化设计：** - 功能模块清晰划分 - 模块间用分隔线区分 - 每个模块独立且完整 **紧凑仪表板视图：** - 信息密度高 - 使用表格和网格布局 - 最小化空白区域 ### UI 组件规范 #### 抽屉（Drawer） 抽屉是移动端常用的交互组件，从屏幕侧边或底部滑出，用于显示详细内容、设置选项或表单。抽屉更适合移动端，因为它符合手势操作习惯，且不会完全遮挡主内容。 **移动端抽屉（从右侧滑出）：** ``` ┌─────────────────────┐ │ 主内容区域 │ │ │ │ │ │ [背景遮罩层] │ │ │ │ │ │ │ ┌───────────────┐ │ │ │ 抽屉标题 [X] │ │ │ ├───────────────┤ │ │ │ │ │ │ │ 抽屉内容 │ │ │ │ │ │ │ │ 表单/设置 │ │ │ │ │ │ │ ├───────────────┤ │ │ │ [取消] [保存] │ │ │ └───────────────┘ └─────────────────────┘ ``` **移动端抽屉（从底部滑出）：** ``` ┌─────────────────────┐ │ 主内容区域 │ │ │ │ [背景遮罩层] │ │ │ │ │ │ ┌─────────────────┐│ │ │ ─────────────── ││ ← 拖拽指示条 │ │ 抽屉标题 [X] ││ │ ├─────────────────┤│ │ │ ││ │ │ 抽屉内容 ││ │ │ ││ │ │ 表单/列表 ││ │ │ ││ │ ├─────────────────┤│ │ │ [取消] [确认] ││ │ └─────────────────┘│ └─────────────────────┘ ``` **设计要点：** - 抽屉从屏幕边缘滑出，通常从右侧或底部 - 背景遮罩层使用 `#` 或 `.` 填充，表示半透明效果 - 底部抽屉通常有拖拽指示条（用 `─────` 表示） - 抽屉标题栏右侧标注关闭按钮 `[X]` 或 `[×]` - 抽屉内容区域可以包含表单、列表、设置项等 - 底部操作按钮区域使用分隔线区分 - 抽屉通常占据屏幕 60-90% 的宽度或高度 #### 确认消息框（Alert/Dialog） 确认消息框用于显示重要提示信息、确认用户操作或警告。适用于 Web 端和移动端，通常居中显示，内容简洁。 **Web 端确认消息框：** ``` ┌─────────────────────────────────────┐ │ [背景遮罩层，使用 `#` 或 `.` 表示] │ │ │ │ ┌───────────────────────┐ │ │ │ 确认删除 │ │ │ ├───────────────────────┤ │ │ │ │ │ │ │ 确定要删除此项吗？ │ │ │ │ │ │ │ ├───────────────────────┤ │ │ │ [取消] [确认] │ │ │ └───────────────────────┘ │ │ │ └─────────────────────────────────────┘ ``` **移动端确认消息框：** ``` ┌─────────────────────┐ │ [背景遮罩层] │ │ │ │ ┌───────────────┐ │ │ │ 确认删除 │ │ │ ├───────────────┤ │ │ │ │ │ │ │ 确定要删除此项 │ │ │ │ 吗？ │ │ │ ├───────────────┤ │ │ │ [取消] [确认] │ │ │ └───────────────┘ │ │ │ └─────────────────────┘ ``` **设计要点：** - 确认消息框通常居中显示，尺寸较小 - 背景遮罩层使用 `#` 或 `.` 填充，表示半透明效果 - 内容简洁明了，通常只有标题和提示文字 - 操作按钮通常只有 2 个：取消和确认 - 移动端确认框可以稍大一些，便于阅读和操作 - 警告类消息框可以使用 `⚠` 或 `!` 图标强调 #### 下拉选择框（Dropdown/Select） 下拉选择框用于从多个选项中选择一个值。 **展开状态表示：** ``` ┌──────────────────────┐ │ 请选择选项 ▼ │ ← 选择框（未展开） └──────────────────────┘ ┌──────────────────────┐ │ 请选择选项 ▲ │ ← 选择框（展开状态） ├──────────────────────┤ │ > 选项一 │ ← 选项列表 │ 选项二 │ │ 选项三 │ │ 选项四 │ └──────────────────────┘ ``` **设计要点：** - 使用 `▼` 或 `v` 表示未展开状态，`▲` 或 `^` 表示展开状态 - 选项列表使用 `>` 或 `*` 表示当前选中项 - 选项列表用边框包围，与选择框对齐 - 移动端下拉框通常占据更大宽度，选项高度适中 - 支持搜索的下拉框，在列表顶部显示搜索输入框 #### 单选按钮（Radio Button） 单选按钮用于从一组互斥选项中选择一个。 **单选按钮组表示：** ``` 选择支付方式： ( ) 支付宝 ( ) 微信支付 (•) 银行卡 ← 选中状态 ( ) 现金 ``` **设计要点：** - 使用 `( )` 表示未选中状态 - 使用 `(•)` 或 `(*)` 表示选中状态 - 选项垂直排列，每个选项前有单选按钮 - 选项文本与按钮之间保持适当间距 - 移动端单选按钮可以更大，便于点击 - 可以水平排列（适用于选项较少的情况） #### 级联选择（Cascading Select） 级联选择用于多级关联数据的选择，常见于地区选择、分类选择等场景。 **级联选择表示：** ``` 选择地区： ┌──────────┐ ┌──────────┐ ┌──────────┐ │ 省份 ▼ │ │ 城市 ▼ │ │ 区县 ▼ │ ├──────────┤ ├──────────┤ ├──────────┤ │ 北京市 │ │ 北京市 │ │ 东城区 │ │ 上海市 │ │ 朝阳区 │ │ 西城区 │ │ 广东省 │ │ 海淀区 │ │ 丰台区 │ └──────────┘ └──────────┘ └──────────┘ ``` **设计要点：** - 多个下拉框水平排列，表示级联关系 - 使用箭头 `→` 或 `>` 表示级联方向（可选） - 每个下拉框独立显示，但视觉上形成关联 - 后级选择框的选项根据前级选择动态变化 - 移动端可以垂直堆叠，节省横向空间 - 可以标注"请先选择省份"等提示文字 **移动端级联选择（垂直布局）：** ``` 选择地区： ┌──────────────────────┐ │ 省份 ▼ │ ├──────────────────────┤ │ > 北京市 │ │ 上海市 │ └──────────────────────┘ ┌──────────────────────┐ │ 城市 ▼ │ ├──────────────────────┤ │ > 北京市 │ │ 朝阳区 │ └──────────────────────┘ ┌──────────────────────┐ │ 区县 ▼ │ ├──────────────────────┤ │ > 东城区 │ │ 西城区 │ └──────────────────────┘ ``` #### 其他常用组件 **复选框（Checkbox）：** ``` 选择兴趣： [ ] 阅读 [x] 运动 ← 选中状态 [ ] 音乐 [x] 旅行 ← 选中状态 ``` **标签页（Tabs）：** ``` ┌──────┬──────┬──────┐ │ 全部 │ 待办 │ 已完成│ ← 当前标签可用 ===== 下划线表示 └──────┴──────┴──────┘ ``` **分页器（Pagination）：** ``` < 上一页 1 2 [3] 4 5 下一页 > ← [3] 表示当前页 ``` ## 使用示例 ### 示例 1：登录页面 用户需求："创建一个登录页面，包含用户名、密码输入框和登录按钮" 生成的设计稿应包含： - 页面标题 - 用户名输入框（ASCII 表示） - 密码输入框（ASCII 表示） - 登录按钮 - 可选：记住我、忘记密码等链接 ### 示例 2：数据表格界面 用户需求："创建一个数据表格界面，显示用户列表" 生成的设计稿应包含： - 表格标题 - 列标题行 - 数据行（示例数据） - 分页控件 - 操作按钮区域 ### 示例 3：移动端 App 界面 用户需求："创建一个移动端的主页界面" 生成的设计稿应包含： - 顶部状态栏 - 主要内容区域（适配移动端宽度） - 底部导航栏 - 移动端特有的交互元素 ### 示例 4：带抽屉和确认消息框的页面 用户需求："创建一个用户编辑页面，点击编辑按钮打开抽屉，点击保存时弹出确认对话框" 生成的设计稿应包含： - 主内容区域（用户信息展示） - 编辑按钮 - 抽屉设计（从右侧或底部滑出，包含编辑表单） - 确认消息框（保存时的确认对话框，包含取消和确认按钮） - 背景遮罩层表示 ### 示例 5：级联选择表单 用户需求："创建一个地址选择表单，包含省市区三级联动" 生成的设计稿应包含： - 三个级联下拉选择框（省份、城市、区县） - 级联关系标注 - 表单其他字段（详细地址输入框等） - 提交按钮 ### 示例 6：带下拉和单选的设置页面 用户需求："创建一个系统设置页面，包含主题选择（下拉）和通知方式（单选）" 生成的设计稿应包含： - 主题选择下拉框（展开/收起状态） - 通知方式单选按钮组 - 其他设置项 - 保存设置按钮 ## 资源 ### scripts/save_design.py 自动保存设计稿的脚本。使用方法： ```python python scripts/save_design.py "设计内容" "页面名称" [版本号或时间戳] ``` 脚本会自动： - 检查并创建 `ascii-ui-design/` 文件夹（如果不存在） - 根据命名规则生成文件名 - 保存设计稿为 UTF-8 编码的文本文件 ## 响应式设计考虑 ### Web 端设计特点 - **宽屏布局**：充分利用横向空间，支持多列布局 - **鼠标交互**：悬停效果、精确点击区域 - **导航系统**：顶部导航栏、侧边栏、面包屑导航 - **信息密度**：可以显示更多信息，支持复杂的数据表格 ### 移动端设计特点 - **窄屏布局**：单列布局为主，垂直滚动 - **触摸交互**：按钮和交互元素需要足够大的点击区域（建议最小 44x44 像素） - **导航系统**：底部标签栏、抽屉式导航、手势操作 - **信息密度**：精简信息展示，重要内容优先 - **抽屉设计**：从侧边或底部滑出的抽屉更符合移动端手势操作习惯 ### 设计适配建议 - 移动端组件通常比 Web 端更大，便于触摸操作 - 移动端表单字段垂直堆叠，避免横向排列 - 移动端优先使用抽屉而非居中弹窗，抽屉从侧边或底部滑出 - 移动端级联选择建议垂直布局，避免横向空间不足 - 确认消息框适用于 Web 和移动端，内容简洁，居中显示 ## 最佳实践 1. **保持一致性**：同一项目中的组件表示方式应保持一致 2. **清晰标注**：使用注释说明交互行为和状态变化 3. **层次分明**：通过边框、分隔线和缩进建立清晰的视觉层次 4. **完整展示**：包含所有关键交互元素，不遗漏重要功能 5. **平台适配**：根据目标平台调整布局和组件尺寸 6. **可读性优先**：确保 ASCII 设计稿易于阅读和理解 ## 什么时候使用此技能 在以下场景中使用此技能： - 用户要求创建界面设计、线框图或原型 - 需要根据字段列表生成界面布局 - 需要可视化软件界面结构 - 需要快速生成设计稿用于讨论和迭代 - 用户提到"界面设计"、"线框图"、"原型"、"mockup"、"wireframe"等关键词 - 需要为 Web 应用、移动应用或桌面软件创建界面设计 - 需要设计包含抽屉、确认消息框、下拉、单选、级联选择等复杂组件的界面 - 需要区分 Web 端和移动端的界面设计差异