القائمة
小程序页面设计与代码生成工作流。 触发场景：用户提到"修改页面"、"更新UI"、"添加组件"、"调整布局"、"生成代码"、"小程序设计"。 适用于：TeamVenture 小程序的页面设计迭代、UI 组件开发、样式调整。
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
استنادا إلى تصنيف SOC المهني
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/muzhicaomingwang/ai-ideas --skill miniapp-designيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
Extract Xiaohongshu (小红书) noteId from shared note text or URLs, including xhslink.com short links and xiaohongshu.com/discovery/item/<noteId> links. Use when the user asks for “noteId/笔记ID”, provides a 小红书 share message, or pastes an xhslink short URL that needs redirect expansion.
Use when refactoring TeamVenture domains/architecture; enforces migration order (Planning→Authorization→Identity→Infrastructure) and preferred steps (split classes before moving packages).
自动发布每日科技早报播客到小宇宙平台。 触发场景：用户提到"发布播客"、"小宇宙播客"、"自动发布"、"播客上传"、"RSS发布"。 适用于：将生成的播客音频自动发布到RSS.com，并通过RSS订阅同步到小宇宙，同时发送飞书通知。
| name | miniapp-design |
| description | 小程序页面设计与代码生成工作流。 触发场景：用户提到"修改页面"、"更新UI"、"添加组件"、"调整布局"、"生成代码"、"小程序设计"。 适用于：TeamVenture 小程序的页面设计迭代、UI 组件开发、样式调整。 |
此 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 源码 |
miniapp-pages-obsidian.md 中对应页面的 section示例：添加组件
### 布局结构
\`\`\`
┌─────────────────────────────┐
│ [🔐 微信一键登录] │
│ │
│ 先逛逛 → │ ← 新增：游客入口
│ │
└─────────────────────────────┘
\`\`\`
### 状态流转
6. **点击"先逛逛"** → 以游客模式进入首页 ← 新增
根据更新后的设计描述，修改三个文件：
<!-- 根据布局图添加元素 -->
<view class="guest-entry" bindtap="handleGuestMode">
<text class="guest-text">先逛逛</text>
<text class="guest-arrow">→</text>
</view>
/* 参考 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);
}
handleGuestMode() {
// 根据状态流转描述实现逻辑
app.globalData.isGuestMode = true
wx.switchTab({ url: '/pages/index/index' })
}
| 页面 | 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]] |
--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) /* 中 */
用户: 给登录页添加一个游客入口
Claude:
1. [读取设计文档 [[login]] section]
2. [更新布局图，添加"先逛逛"入口]
3. [更新状态流转，添加游客模式流程]
4. [修改 login.wxml 添加 guest-entry 元素]
5. [修改 login.wxss 添加样式]
6. [修改 login.js 添加 handleGuestMode 方法]
用户: 在方案详情页添加分享按钮
Claude:
1. [读取设计文档 [[detail]] section]
2. [在底部操作栏布局中添加分享按钮]
3. [添加交互说明：点击分享 → 调用微信分享 API]
4. [修改 detail.wxml/wxss/js]
用户: 把卡片圆角改成更圆润的
Claude:
1. [查看 tokens/radius.json]
2. [确认当前使用 16rpx，改为 24rpx]
3. [更新设计文档中的 Design Tokens section]
4. [批量修改相关 wxss 文件]
apps/teamventure/docs/design/miniapp-pages-obsidian.mdapps/teamventure/design/tokens/apps/teamventure/docs/design/strategy-and-ddd.md