# UniApp UI - 设计稿到 UniApp 代码生成器 ## 概述这个 skill 可以将设计稿（文本描述、HTML/CSS）自动转换为 UniApp + UnoCSS + Wot Design Uni 的生产就绪代码。通过智能组件映射和页面模板系统，快速生成跨平台兼容的移动应用页面。 ### 核心功能 1. **智能组件映射** \- 自动识别 HTML/CSS 并映射到 WotUI 组件或自定义组件 2. **页面模板系统** \- 6 种基础模板（表单、列表、详情、Tab、搜索、网格） 3. **自定义组件分析** \- 自动扫描项目组件并优先使用 4. **跨平台兼容** \- 生成的代码支持 H5、微信小程序、App 5. **最佳实践内置** \- 自动应用 Vue3、UnoCSS、UniApp 最佳实践 ## 前置要求确保已安装 Python 3.8+： python3 --version 如未安装，请按以下方式安装： **macOS:** brew install python3 **Ubuntu/Linux:** sudo apt-get update && sudo apt-get install python3 python3-pip **Windows:** 下载并安装 Python from ## 使用流程 ### 7 步工作流 #### Step 1: 分析设计输入 **输入方式:** * 文本描述（如："创建一个登录页面，包含用户名、密码输入框和登录按钮"） * HTML/CSS 代码片段 * 设计要求文档 **分析内容:** * 页面类型（form/list/detail/tab/search/grid） * 所需组件（button/input/cell/etc） * 布局结构 * 交互需求 **示例:** 用户: 我需要一个商品列表页，包含搜索框、商品卡片（图片、标题、价格），支持下拉刷新和上拉加载更多。 #### Step 2: 选择页面模板使用搜索引擎匹配最合适的模板： python3 scripts/search.py "list refresh load-more" --domain template **6 个可用模板:** 1. **form-page** \- 表单页（登录、注册、设置、反馈） 2. **list-page** \- 列表页（新闻、订单、商品、聊天） 3. **detail-page** \- 详情页（商品详情、文章、用户资料） 4. **tab-page** \- Tab 页（首页、分类） 5. **search-page** \- 搜索页（搜索结果、筛选） 6. **grid-page** \- 网格页（分类网格、相册） #### Step 3: 映射组件 **优先级系统:** 1. **自定义组件** (Priority 1) - 项目中的自定义组件 2. **WotUI 组件** (Priority 2) - Wot Design Uni 组件库 3. **UniApp 内置组件** (Priority 3) - view/text/image 等 4. **直接实现** (Fallback) - 使用 UnoCSS + 基础组件 **搜索命令:** # 搜索自定义组件（如果已运行 analyze_components.py） python3 scripts/search.py "product card" --domain custom # 搜索 WotUI 组件 python3 scripts/search.py "button primary" --domain wotui python3 scripts/search.py "input text field" --domain wotui python3 scripts/search.py "list cell" --domain wotui # 搜索 UnoCSS 样式模式 python3 scripts/search.py "card container" --domain unocss # 搜索最佳实践 python3 scripts/search.py "navigation" --domain best-practice #### Step 4: 生成代码基于选定的模板和组件映射生成完整的 .vue 文件： **生成内容包括:** * 完整的 Vue3 SFC 结构（`

统一应用程序用户界面

包含技能