前言¶

拿到设计稿截图后，要把按钮、间距、字号、配色一点点还原成微信小程序的 WXML、WXSS 和组件结构，手工量尺寸、切图、写样式，既慢又容易和设计稿走样。下面介绍的这个 Skill 解决的就是这一步：输入一张设计稿截图，输出对应的微信小程序页面代码。

这是什么¶

「设计稿截图转小程序代码」是一个基于通用 SKILL.md 格式的 Agent Skill，坐标 @user_92725383/miniapp-ui-screenshot，版本 1.0.0，由社区作者 user_92725383 发布，来源标注为 community，属于 dev-programming 分类。

它解决的问题很明确：设计稿截图 → 微信小程序页面代码。

注意它不是腾讯官方出品，使用前要按社区工具的标准去核对生成结果。

核心功能¶

已核实的能力只有一条：

• 输入设计稿截图，输出微信小程序页面代码。

资料里没有列出更细的能力清单，比如是否支持多页面、是否生成组件拆分、是否处理切图资源，因此这里不做展开。

安装与启用¶

已抓取资料中没有给出官方安装命令或目录约定，因此不在这里编造。请打开官方页面获取当前的安装方式：

https://api.skillhub.cn/user_92725383/miniapp-ui-screenshot

页面信息：

名称: 设计稿截图转小程序代码
版本: 1.0.0
分类: dev-programming
标签: requires_api_key=false

requires_api_key=false 表示该 Skill 不需要额外申请 API Key，启用门槛较低。

典型用法¶

官方简介只给了输入输出：

设计稿截图 → 微信小程序页面代码

资料中没有提供可复现的示例命令或调用参数，所以这里不写具体用法。使用时按页面说明把设计稿截图交给 Agent，由 Skill 生成小程序页面代码，再在开发者工具里打开项目核对。

适用场景与注意¶

适合：手上有设计稿截图、需要快速产出微信小程序页面代码结构和样式的开发者。

需要注意：

• 来源是 community，不是官方发布，生成代码要先过一遍再合入项目。
• 生成结果只是页面代码，图片资源、接口请求、数据绑定仍需自己接入。
• 页面上的评分、下载等数据会随时间变化。已抓取资料记录的是评分 100000、下载 1271、安装 0；另有线索给出的是评分 99223、下载 1149，两者不一致，以页面实时显示为准。

结尾¶

这个 Skill 的价值在于省掉从设计稿截图手工还原页面的那一步，直接拿到小程序页面代码作为起点，再按项目实际调整。

官方地址：https://api.skillhub.cn/user_92725383/miniapp-ui-screenshot
SkillHub 页面：https://www.skillhub.cn/skills/user_92725383/miniapp-ui-screenshot