miniapp-design

Mini Program Design Workflow Skill

Overview

This Skill defines the Obsidian + AI direct code generation standard operating procedure, replacing the traditional Figma design workflow.

Core Files

File	Path	Purpose
Page design document	`apps/teamventure/docs/design/miniapp-pages-obsidian.md`	Structured description of all pages
Design Tokens	`apps/teamventure/design/tokens/*.json`	Style variables such as colors, spacing, fonts
Mini program code	`apps/teamventure/src/frontend/miniapp/pages/`	WXML/WXSS/JS source code

Standard Operating Procedure (SOP)

Phase 1: Clarify Requirements

Confirm the page to modify (login/index/myplans/comparison/detail/profile/home)
Confirm the modification type:
- Layout adjustment
- Add component
- Interaction change
- Style modification

Phase 2: Update Design Document

Read the miniapp-pages-obsidian.md section for the corresponding page
Update the layout structure using ASCII diagrams
Update interaction details or state transitions
If new fields are involved, update the data structure

Example: Add component

### 布局结构
\`\`\`
┌─────────────────────────────┐
│   [🔐 微信一键登录]        │
│                             │
│        先逛逛 →             │  ← 新增：游客入口
│                             │
└─────────────────────────────┘
\`\`\`

### 状态流转
6. **点击"先逛逛"** → 以游客模式进入首页  ← 新增

Phase 3: Generate Code

Based on the updated design description, modify three files:

3.1 WXML (structure)

<!-- 根据布局图添加元素 -->
<view class="guest-entry" bindtap="handleGuestMode">
  <text class="guest-text">先逛逛</text>
  <text class="guest-arrow">→</text>
</view>

3.2 WXSS (styles)

/* 参考 design/tokens/ 中的变量 */
.guest-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32rpx;  /* spacing.scale.4 */
}

.guest-text {
  font-size: 28rpx;   /* typography.fontSize.base */
  color: rgba(255, 255, 255, 0.8);
}

3.3 JS (logic)

handleGuestMode() {
  // 根据状态流转描述实现逻辑
  app.globalData.isGuestMode = true
  wx.switchTab({ url: '/pages/index/index' })
}

Phase 4: Verification

Preview the effect in WeChat DevTools
Confirm that the visuals and interactions match the design description
If there are discrepancies, update the design document to keep it in sync

Page List and Bounded Contexts

Page	BC	Aggregate	Design document anchor
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 + read model	`[[profile]]`
home	Presentation layer	-	`[[home]]`

Design Tokens Quick Reference

Colors

--primary: #1890FF
--success: #52C41A
--warning: #FAAD14
--error: #FF4D4F
--text-primary: #262626
--text-secondary: #8C8C8C

Spacing

8rpx / 16rpx / 24rpx / 32rpx / 48rpx

Border radius

8rpx (按钮) / 12rpx (输入框) / 16rpx (卡片) / 40rpx (胶囊)

Shadows

0 2rpx 12rpx rgba(0,0,0,0.05)  /* 轻 */
0 4rpx 12rpx rgba(0,0,0,0.08)  /* 中 */

Usage Examples

Example 1: Modify an existing page

用户: 给登录页添加一个游客入口

Claude:
1. [读取设计文档 [[login]] section]
2. [更新布局图，添加"先逛逛"入口]
3. [更新状态流转，添加游客模式流程]
4. [修改 login.wxml 添加 guest-entry 元素]
5. [修改 login.wxss 添加样式]
6. [修改 login.js 添加 handleGuestMode 方法]

Example 2: Add a component

用户: 在方案详情页添加分享按钮

Claude:
1. [读取设计文档 [[detail]] section]
2. [在底部操作栏布局中添加分享按钮]
3. [添加交互说明：点击分享 → 调用微信分享 API]
4. [修改 detail.wxml/wxss/js]

Example 3: Style adjustment

用户: 把卡片圆角改成更圆润的

Claude:
1. [查看 tokens/radius.json]
2. [确认当前使用 16rpx，改为 24rpx]
3. [更新设计文档中的 Design Tokens section]
4. [批量修改相关 wxss 文件]

Notes

Update the document first, then change the code - Keep the design document and code in sync
Use Design Tokens - Do not hardcode values such as colors and spacing
Follow bounded contexts - Put new features in the correct BC
Keep ASCII diagrams concise - For quick understanding, pixel-level precision is not required

Related Resources

Design document:apps/teamventure/docs/design/miniapp-pages-obsidian.md
Design Tokens：apps/teamventure/design/tokens/
DDD design:apps/teamventure/docs/design/strategy-and-ddd.md