大家好，我是【考拉搞AI】，热衷于 VibeCoding 实战 & AI 工程化 与 热点 AI 新闻 与 AI 风向分享。
最近在做各类页面时候【集中移动端uniapp/uniappX以及 移动端H5 等】，发觉 我最需要的是一个个鲜活的页面，至于内部主题/样式统一/对齐/图片啥的，其他的都是其次。这些页面涵盖了我们的业务场景，即与我们移动端项目的实际业务息息相关。
比如订单模块： 我的订单/订单列表/订单详情/购物车；
比如商城模块：商品列表/商品详情/其他列表详情；
再比如：各类卡片列表模块/标签模块/个人中心模块；
或者说：自定义头部菜单/底部菜单 等等；
这些具体的页面几乎涵盖了 大部分移动端业务模块。简单来说，只要掌握了这些页面的 通用写法，就几乎能写出任何业务的页面。
前面 推出了 列表模块 ，这次博主推出了 详情页面，同样是六种风格，六大场景【商城方向】，提供给小伙伴们使用。
与直接让AI 手搓相比，用技能来写这些页面有这些方面的优势：
-
1 风格统一：便于统一调整，避免AI 放飞自我 -
2 节省Token：省去AI 自我思考时间 -
3 技能矩阵：结合多个相关技能，效果嘎嘎的【主题系统提供统一主题、样式系统提供样式对齐、图片&icon系统能自动抓取或生产图片icon】
小伙伴们其实可以直接将这些技能看做一个 规范、整洁且闭环的提示词模板库，也可以看做一个个具体的组件，相互配合起来，效果嘎嘎的。
这也是后期博主创作的主要方向：更多关注与业务页面息息相关的技能创作，同时将之前的技能全部柔和到一起，形成一整套闭环的技能矩阵，让小伙伴们开发移动端页面时候，速度与效率齐飞！
当然，如果有原型页面，则需要按照原型页面来搞，可能无法使用具体的组件，但是可以使用base-card，来抽象出原型页面中公共、重复的部分。
开整。
一、AI 未来的主题——Token
先说一句爆论：token，是未来 AI 编程的核心命题。
现在用 Claude、Cursor、Windsurf 写代码，看起来很快，但每一次对话都在消耗 token。
如果每次做一个页面都要从头描述布局、颜色、圆角、间距、图标位置，那token就像流水一样哗哗掉。
uniapp-base-skill 的设计初衷之一就是：把高频页面抽象成固定模板，一次沉淀，反复调用。
童鞋们只要说：
/uniapp-base-skill 做一个商品详情页
模型就知道要的是：轮播图 + 标题价格 + 规格配送 + 底部操作栏。不需要再解释一遍 “顶部放图、中间放字、底部放按钮”。
省下来的 token，可以用来做更有价值的事：业务逻辑、交互细节、数据流转。
这不仅仅是省钱，更是让 AI 的输出更稳定、更可预期。
二、本次迭代——六大类详情页卡片
打开任意一个小程序，详情页几乎逃不出这 6 种结构：
┌─────────────────────────┐
│ 商品详情 │ ← 轮播图+标题价格+规格+底部操作
├─────────────────────────┤
│ 活动详情 │ ← 大图+状态角标+时间地点+报名按钮
├─────────────────────────┤
│ 帖子详情 │ ← 作者+大图+正文+互动评论
├─────────────────────────┤
│ 个人中心 │ ← 渐变头部+统计+VIP+功能网格
├─────────────────────────┤
│ 钱包详情 │ ← 渐变余额+交易明细
├─────────────────────────┤
│ 结果页 │ ← 状态图标+文案+操作+推荐
└─────────────────────────┘
80% 的详情页都是这 6 种骨架的变体。 咱们用 base-card 把它们全部抽象出来。
1. 商品详情 —— product-detail
特点：轮播大图 + 标题价格 + 规格配送 + 服务保障 + 详情参数 + 底部操作栏
┌─────────────────────────────────────┐
│ [商品大图轮播] │
├─────────────────────────────────────┤
│ ¥132.0 象形·太湖石 │
│ 热情奔放的骑士红... │
├─────────────────────────────────────┤
│ [包裹图标] 已选 05号 高山流水 › │
│ [卡车图标] 配送 物流配送 › │
│ [问号图标] 保障 7天无理由退货 › │
├─────────────────────────────────────┤
│ [对勾图标] 正品保障 [对勾图标] 极速退款 [对勾图标] 全场包邮│
├─────────────────────────────────────┤
│ [客服] [收藏] [加入购物车] [立即购买]│
└─────────────────────────────────────┘
参数：
-
圆角： var(--radius-lg)= 24rpx -
间距： var(--space-3)= 12rpx -
价格色： var(--color-price) -
主色图标： var(--color-primary)
适用场景：商品详情、服务详情、课程详情
2. 活动详情 —— activity-detail
特点：顶部大图带状态角标 + 标题价格 + 时间地点信息列表 + 底部报名栏
┌─────────────────────────────────────┐
│ [活动大图] 进行中 │
│ 当前参与 21/48 [评论图标] 6778 │
├─────────────────────────────────────┤
│ ¥132.00 格尔木昆仑山大峡谷-寻石之旅│
│ 5天4夜，自驾... │
├─────────────────────────────────────┤
│ [时钟图标] 活动报名时间 2025-08-20 至... │
│ [时钟图标] 活动开始时间 2025-10-21 至... │
│ [定位图标] 活动地点 广东省-深圳市... │
│ [信息图标] 退出条件 活动开始前一周 │
├─────────────────────────────────────┤
│ 合计：¥132.00 [立即报名] │
└─────────────────────────────────────┘
参数：
-
圆角： var(--radius-lg)= 24rpx -
状态角标：absolute 定位 -
信息列表：图标 + 标题 + 内容
适用场景：活动详情、线路详情、课程详情、报名页
3. 帖子详情 —— post-detail
特点：作者信息卡片 + 大图 + 正文 + 互动数据 + 评论区 + 底部评论栏
┌─────────────────────────────────────┐
│ [头像] 宝石助手 [关注] │
├─────────────────────────────────────┤
│ 广东｜竟然有属于自己的奇石你们知道吗？│
│ [帖子大图] │
│ 文章包括各种文体的著作... │
│ [定位图标] 湖南 永州 │
├─────────────────────────────────────┤
│ [心形图标] 2718 [星形图标] 1242 [分享图标] 分享 │
├─────────────────────────────────────┤
│ 评论 1242 │
│ [头像] 石友9527 3小时前 │
│ 都不知道广东也有那么漂亮的石头！ │
├─────────────────────────────────────┤
│ [说点什么...] [心形图标]2718 [星形图标]1242 │
└─────────────────────────────────────┘
参数：
-
圆角： var(--radius-lg)= 24rpx -
头像： var(--radius-full)圆形 -
互动项：图标 + 数字
适用场景：帖子详情、日记详情、文章详情、动态详情
4. 个人中心 —— profile-detail
特点：渐变用户信息头部 + 数据统计 + VIP 会员卡 + 订单入口 + 功能网格
┌─────────────────────────────────────┐
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ ← 渐变头部
│ [头像] Jisom26823 │
│ 宝石ID: ST283918391 │
├─────────────────────────────────────┤
│ 123 293 762 │
│ 获赞 粉丝 关注 │
├─────────────────────────────────────┤
│ 宝石会员 VIP 了解更多>>│
│ [皇冠图标]会员日 [皇冠图标]奖励翻倍 [皇冠图标]商品折扣... │
├─────────────────────────────────────┤
│ 我的订单 查看详情>> │
│ 待付款 待发货 待收货 已完成 售后 │
├─────────────────────────────────────┤
│ [宝石图标]钱包 [星星图标]宝石库 [记录图标]记录 [需求图标]需求 │
│ [活动图标]活动 [反馈图标]反馈 [客服图标]客服 [设置图标]设置 │
└─────────────────────────────────────┘
参数：
-
头部圆角： 0 0 var(--radius-lg) var(--radius-lg) -
渐变： linear-gradient(135deg, ...) -
功能网格： grid-template-columns: repeat(4, 1fr)
适用场景：个人中心、创作者中心、会员中心、我的页面
5. 钱包详情 —— wallet-detail
特点：渐变余额卡片 + 交易明细列表
┌─────────────────────────────────────┐
│ 我的宝石币 ? │
│ 2,839.00 立即赚取>> │
│ 约等于2839.00RMB │
├─────────────────────────────────────┤
│ 交易明细 全部 › │
├─────────────────────────────────────┤
│ [礼物图标] 任务奖励 +300.00 │
│ [购物车图标] 兑换中心消费 -99.00 │
│ [礼物图标] 任务奖励 +300.00 │
└─────────────────────────────────────┘
参数：
-
余额卡片：蓝紫渐变背景 -
收入： var(--color-income)绿色 -
支出： var(--color-expense)红色 -
列表项：图标 + 名称/时间 + 金额
适用场景：钱包、资产中心、积分明细、交易记录
6. 结果页 —— result-detail
特点：状态图标 + 文案 + 操作按钮 + 推荐内容
┌─────────────────────────────────────┐
│ │
│ [对勾图标] 支付成功 │
│ 您的订单已支付成功... │
│ [返回首页] [查看订单] │
│ │
├─────────────────────────────────────┤
│ 推荐商品 查看更多>> │
│ [图]象形·太湖石 [图]象形·灵璧石 │
│ ¥132.0 ¥132.0 │
└─────────────────────────────────────┘
参数：
-
状态图标：圆形背景 + 白色图标 -
成功：绿色，失败：红色，空状态：灰色 -
推荐内容：双列网格卡片
适用场景：支付结果、提交成功、404、空状态、无网络
三、技能矩阵
这 6 套详情页模板不是孤立的。uniapp-base-skill 现在被明确定位为 uniapp 技能矩阵的核心入口，每次生成页面时，默认和下面 5 个技能协同工作：
|
|
|
|
|---|---|---|
| uniapp-theme-skill |
|
var(--*)，禁止写死 |
| uniapp-style-skill |
|
|
| frontend-style-harmonizer-skill |
|
|
| image-catch-skill |
|
|
| icon-catch-skill |
|
|
| image-forge-skill |
|
|
一句话：**uniapp-base-skill 负责骨架，其他技能负责让骨架合法、好看、能跑在生产环境。**
1. 主题技能 uniapp-theme-skill
所有模板都使用主题变量，而不是写死颜色：
<base-card
:radius="'var(--radius-lg)'"
:margin="'var(--space-3)'"
:shadow="'var(--shadow-sm)'"
:background="'var(--color-bg-surface)'"
>
<!-- 内容 -->
</base-card>
这样做的好处：
-
换主题只改变量：从蓝色系换成绿色系，改一个 --color-primary就行，6 个详情页全部同步变。 -
AI 输出更稳定：模型不需要每次都猜颜色，它只需要说 “用主题主色”。 -
token 更少： var(--color-primary)比 “#4a90e2，一种偏亮的蓝色” 短得多。
比如商品详情页的价格色、活动详情页的状态角标、个人中心的功能图标，全部跟随主题变量走。想换风格？一行 CSS 变量搞定。
2. 图片抓取技能 image-catch-skill
详情页最怕的就是大图空白。一个商品详情页，商品图一白，整个页面都垮了。
这次 demo 里的所有配图，都是用 image-catch-skill 抓的真实图片：
-
商品图： static/images/product1.jpg -
活动头图： static/images/activity1.jpg -
用户头像： static/images/avatar1.jpg
实际项目中，你只需要把关键词换成自己的业务词：
/image-catch-skill 给我抓 5 张太湖石商品图，300x300
/image-catch-skill 给首页 banner 抓一张山水风景图，375x200
图片会自动落到 static/images/ 目录，demo 直接引用即可。
3. 图标抓取技能 icon-catch-skill
之前的 demo 里，博主偷懒用了 emoji 占位，结果被吐槽”大空白多丑”。这次全部换成了 icon-catch-skill 抓的 lucide SVG 图标：
-
返回箭头： arrow-left.svg -
分享： share-2.svg -
收藏： star.svg -
客服： phone.svg -
时间： clock.svg -
定位： map-pin.svg
这些图标都是 currentColor，可以通过 CSS 颜色控制，和主题色完美配合。
.info-icon .icon { color: var(--color-primary); }
想换一套图标风格？重新抓一套，改路径前缀就行，页面结构完全不用动。
4. 样式规范技能 uniapp-style-skill
模板生成出来的只是骨架，要让它符合项目设计系统，还需要 uniapp-style-skill 做审查：
-
Typography：标题、正文、辅助文字是否用了正确层级 -
组件 Token：按钮、卡片、输入框是否引用 $btn-height-normal、$card-radius等变量 -
页面布局：Page Gutter、模块间距是否统一 -
动画预设：进出场动画是否走全局预设 -
设计审计：扫描 D01-D34 红线违规
比如它会发现你某个页面偷偷写了 border-radius: 12rpx，然后提示你收敛到 var(--radius-md)。这一步不做，项目页面一多，样式就散了。
5. 样式一致性治理 frontend-style-harmonizer-skill
如果说 uniapp-style-skill 是设计规范审查，那 frontend-style-harmonizer-skill 就是跨页面治理：
-
发现 5 个页面写了同样的 .section样式 → 抽取公共 class -
发现按钮高度有 64/72/80rpx 三种 → 收敛到统一规格 -
发现散落的 #4a90e2 → 收敛为var(--color-primary)
存量项目接入时尤其重要，它能把你之前生成的页面和新的 uniapp-base-skill 模板拉到同一套视觉体系里。
6. 图标/图片后处理 image-forge-skill
有时候远程抓不到合适的图标或图片，或者抓到的图尺寸太大、格式不对，这时用 image-forge-skill 兜底：
-
把 SVG path 批量渲染成主题色 PNG 图标 -
压缩、裁剪、转 webp -
多图合成 banner 或水印
它是素材链路的后处理节点，保证抓到的素材能直接落地到项目里。
童鞋们 一定要提前安装好这些技能，这样才能确保新页面与老页面融合统一，方便细节修改。同时，图片&icon技能能让生成的页面避免emoji和空白背景，后期可以自行修改图片或icon。
四、完整工作流
一个详情页从 0 到 1，现在的流程变成：
1. /uniapp-base-skill 选择模板，生成页面骨架
2. /uniapp-theme-skill 确认主题色、圆角、间距变量
3. /icon-catch-skill 抓取所需图标
4. /image-catch-skill 抓取所需图片
5. /image-forge-skill 生成/压缩/裁剪素材（按需）
6. /uniapp-style-skill 审查设计系统合规性
7. /frontend-style-harmonizer-skill 审查跨页面样式一致性
8. 组合输出，微调业务字段
每一步都是独立的技能，但组合起来就是一个完整的页面生产线。
而且因为模板固定，第二次做同类型页面时，token 消耗会大幅下降。你不需要再解释 “商品详情页长什么样”，只需要说 “商品详情，换成翡翠的数据”。
五、提示词案例
# 商品详情
/uniapp-base-skill 做一个商品详情页，顶部轮播图，标题价格，规格配送，底部购买按钮
# 活动详情
/uniapp-base-skill 做一个活动详情页，顶部大图带状态角标，时间地点信息，底部报名按钮
# 帖子详情
/uniapp-base-skill 做一个帖子详情页，作者信息，大图正文，点赞评论互动
# 个人中心
/uniapp-base-skill 做一个个人中心，渐变头部，数据统计，VIP卡片，功能网格
# 钱包详情
/uniapp-base-skill 做一个钱包详情页，渐变余额卡片，交易明细列表
# 结果页
/uniapp-base-skill 做一个支付成功结果页，状态图标，操作按钮，推荐商品
关键
这次新增的 6 类详情页模板，加上之前的 6 类列表页模板，uniapp-base-skill 已经覆盖了小程序里 80% 的常见页面骨架。
核心思想一直没变：一切皆卡片，组合出页面。
但比思想更重要的是：这套技能的设计初衷就是省 token。
在 AI 编程时代，token 就是钱，就是效率，就是你能不能把项目跑起来的关键。固定模板、固定结构、固定调用方式，让模型少猜、少写、少出错，童鞋们的 token 就能花在真正值得的地方，比如更为模糊且复杂的业务，以及一些自己不熟悉的异常、问题等。
而要让这些模板真正好用，别忘了五个黄金搭档：
-
uniapp-theme-skill —— 统一样式变量，换风格一行搞定 -
icon-catch-skill —— 抓专业图标，拒绝丑 emoji -
image-catch-skill —— 抓真实图片，拒绝大白块 -
uniapp-style-skill —— 设计系统审查，保证单页面合规 -
frontend-style-harmonizer-skill —— 跨页面样式治理，保证项目整体一致
image-forge-skill 作为素材后处理兜底，负责生成缺失图标、压缩裁剪图片。
五者配合，uniapp-base-skill 才能从”一个页面模板”变成”一条能直接跑在生产环境的页面生产线”。
后续还会继续迭代更多模板，敬请期待！
当然 后续还会推出更多：VibeCoding开发实战，如小游戏、具体项目、视频创作如remotion、提示词、Agent开发 等多方面的内容技能！
仓库地址：https://github.com/jiushiwon/wg-skills/tree/main/uniapp-base-skill
喜欢的童鞋一定要点赞收藏转发！关注点赞不迷路！
我是【考拉搞AI】，我们下期再见！
微信赞赏
支付宝扫码领红包
