メニュー
小程序页面设计与代码生成工作流。 触发场景：用户提到"修改页面"、"更新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コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？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