miniapp-design

name miniapp-design description 小程序页面设计与代码生成工作流。 触发场景：用户提到"修改页面"、"更新UI"、"添加组件"、"调整布局"、"生成代码"、"小程序设计"。 适用于：TeamVenture 小程序的页面设计迭代、UI 组件开发、样式调整。 小程序设计工作流 Skill 概述 此 Skill 定义了 Obsidian + AI 直接生成代码 的标准操作流程，替代传统的 Figma 设计流程。 核心文件 文件 路径 用途 页面设计文档 apps/teamventure/docs/design/miniapp-pages-obsidian.md 所有页面的结构化描述 Design Tokens apps/teamventure/design/tokens/*.json 颜色、间距、字体等样式变量 小程序代码 apps/teamventure/src/frontend/miniapp/pages/ WXML/WXSS/JS 源码 标准操作流程 (SOP) Phase 1: 明确需求 确认要修改的页面（login/index/myplans/comparison/detail/profile/home） 确认修改类型： 布局调整 新增组件 交互变更 样式修改 Phase 2: 更新设计文档 读取 miniapp-pages-obsidian.md 中对应页面的 section 使用 ASCII 图更新布局结构 更新交互细节或状态流转 如涉及新字段，更新数据结构 示例：添加组件 ### 布局结构 \ `\` \` ┌─────────────────────────────┐ │ [🔐 微信一键登录] │ │ │ │ 先逛逛 → │ ← 新增：游客入口 │ │ └─────────────────────────────┘ \ `\` \` ### 状态流转 6. **点击"先逛逛"** → 以游客模式进入首页 ← 新增 Phase 3: 生成代码 根据更新后的设计描述，修改三个文件： 3.1 WXML（结构） <!-- 根据布局图添加元素 --> < view class = "guest-entry" bindtap = "handleGuestMode" > < text class = "guest-text" > 先逛逛 </ text > < text class = "guest-arrow" > → </ text > </ view > 3.2 WXSS（样式） /* 参考 design/tokens/ 中的变量 */ .guest-entry { display : flex; align-items : center; justify-content : center; margin-top : 32 rpx; /* spacing.scale.4 */ } .guest-text { font-size : 28 rpx; /* typography.fontSize.base */ color : rgba ( 255 , 255 , 255 , 0.8 ); } 3.3 JS（逻辑） handleGuestMode ( ) { // 根据状态流转描述实现逻辑 app. globalData . isGuestMode = true wx. switchTab ({ url : '/pages/index/index' }) } Phase 4: 验证 在微信开发者工具中预览效果 确认视觉和交互符合设计描述 如有差异，更新设计文档保持同步 页面清单与限界上下文 页面 BC 聚合 设计文档锚点 login Identity & Session User [[login]] index Planning PlanRequest [[index]] myplans Planning Plan [[myplans]] comparison Planning Plan [[comparison]] detail Planning Plan, SupplierContactLog [[detail]] profile Identity + Planning User + 读模型 [[profile]] home 展示层 - [[home]] Design Tokens 速查 颜色 --primary: #1890FF --success: #52C41A --warning: #FAAD14 --error: #FF4D4F --text-primary: #262626 --text-secondary: #8C8C8C 间距 8rpx / 16rpx / 24rpx / 32rpx / 48rpx 圆角 8rpx (按钮) / 12rpx (输入框) / 16rpx (卡片) / 40rpx (胶囊) 阴影 0 2rpx 12rpx rgba(0,0,0,0.05) /* 轻 */ 0 4rpx 12rpx rgba(0,0,0,0.08) /* 中 */ 使用示例 示例 1：修改现有页面 用户: 给登录页添加一个游客入口 Claude: 1. [读取设计文档 [[login]] section] 2. [更新布局图，添加"先逛逛"入口] 3. [更新状态流转，添加游客模式流程] 4. [修改 login.wxml 添加 guest-entry 元素] 5. [修改 login.wxss 添加样式] 6. [修改 login.js 添加 handleGuestMode 方法] 示例 2：新增组件 用户: 在方案详情页添加分享按钮 Claude: 1. [读取设计文档 [[detail]] section] 2. [在底部操作栏布局中添加分享按钮] 3. [添加交互说明：点击分享 → 调用微信分享 API] 4. [修改 detail.wxml/wxss/js] 示例 3：样式调整 用户: 把卡片圆角改成更圆润的 Claude: 1. [查看 tokens/radius.json] 2. [确认当前使用 16rpx，改为 24rpx] 3. [更新设计文档中的 Design Tokens section] 4. [批量修改相关 wxss 文件] 注意事项 先更新文档，再改代码 - 保持设计文档与代码同步 使用 Design Tokens - 不要硬编码颜色、间距等值 遵循限界上下文 - 新功能放到正确的 BC 中 保持 ASCII 图简洁 - 用于快速理解，不需要像素级精确 相关资源 设计文档： apps/teamventure/docs/design/miniapp-pages-obsidian.md Design Tokens： apps/teamventure/design/tokens/ DDD 设计： apps/teamventure/docs/design/strategy-and-ddd.md