不想手动抠图？试试这个让 AI 帮你切图的 Skill

你有没有遇到过类似的问题？用 ChatGPT 生成了一套漂亮的设计稿，满心期待地交给 Agent 还原，结果页面做出来后，却总觉得差点意思。尤其是复杂的背景图和 Icon，Agent 往往会自由发挥：布局大致对了，设计稿里的视觉感觉却没了。

这时候，继续强调「严格按照设计稿还原」，效果也未必好。因为有些细节，本来就不适合仅靠代码重现。更有效的做法是，先把复杂的背景、插画和 Icon 拆成独立素材，再交给 Agent 用于开发。

我在开发古诗词小程序时，将这套流程整理成了一个可复用的 Skill：ui-assets-skill。它可以帮助 AI 分析设计图、拆解素材、检查呈现效果，并完成素材打包与交付。

这样，后续就能把整理好的素材交给 Agent，让它编写代码、还原页面。人工只需要在关键环节做判断，不必每一页都重复解释切图要求。

这其实也是传统 UI 开发中很常见的流程：设计师完成设计稿，切出复杂的图案和图标，再交给前端使用。现在换成 AI 协作，这一步依然有价值。

Github 地址: https://github.com/aicookcode/ui-assets-skill

下面就以这次古诗词小程序为例，看看 ui-assets-skill 是怎么工作的，以及拆出素材后，页面的还原效果发生了什么变化。

先看看实际效果

直接看效果会更直观。

这里我用一张实际的 UI 设计图做了一次简单的开发测试：先通过 Skill 提取可用于前端开发的图片素材，再将这些素材用于页面开发，看看最终的还原效果。

左边是原始设计稿，右边是使用 Skill 提取的素材搭建的 H5 页面。

页面中的背景、图标和复杂装饰等，都得到了较好的还原。不过，AI 生成的内容不能保证百分之百正确，仍然需要人工检查和确认。

如何安装和使用？

1. 安装

把下面这段内容发送给 ChatGPT，让它安装 Skill 并准备运行依赖：

帮我安装 skill：https://github.com/aicookcode/ui-assets-skill

请实际执行以下步骤：
1. 下载并检查仓库，将 skill 安装到当前客户端支持的用户技能目录，名称为 ui-assets-skill。确认 SKILL.md、scripts/、references/ 和 requirements.txt 完整；已有安装时保留用户配置和任务数据。
2. 检查可用的 Python 3.10+，已有则复用；没有则根据当前系统，通过官方来源或可信系统包管理器安装，优先使用用户级安装。
3. 在 skill 目录创建或复用 .venv，使用其中的 Python 按 requirements.txt 安装依赖，包括 Pillow、NumPy，不修改全局 Python 包。
4. 验证依赖可正常导入，并使用该环境运行 scripts/studio.py --help。后续执行 skill 脚本也使用这个 Python。
5. 检查当前会话是否有图片查看、生图和编辑工具；不生成测试图片，不自动配置或调用付费 API。工具缺失时说明受影响的功能。
6. 完成后报告 skill 安装路径、Python 路径与版本、验证结果和调用方式。

需要系统授权时按环境的授权流程处理，其余步骤继续执行。遇到权限、网络、私有仓库访问或客户端能力限制时，说明具体阻碍及需要我完成的最小操作；未验证成功时不要宣称安装完成，也不要要求我在聊天中发送密钥。

2. 使用

安装完成后，在对话中调用 Skill，并上传需要处理的 UI 设计图。

例如，直接告诉 AI：

帮我提取这张图中的元素

第 1 步：确定提取范围

如上图所示，一张图片中可能包含多个页面的设计，需要先告诉 AI 要处理哪些页面或区域。这次我只选择首页，让它分析首页中的背景、图标和装饰。

第 2 步：选择需要导出的素材

AI 会根据选定的范围列出素材清单。你可以按编号选择需要的素材，也可以提出拆分、合并或修改要求，确认清单后再开始提取和处理。

第 3 步：导出素材

处理完成后，先集中查看素材效果。如有问题，可以提出修改要求；调整并确认后，再导出独立素材文件和 ZIP 压缩包，交给 Agent 用于页面开发。

写在最后

这个项目目前还处于比较早期的阶段。核心流程已经初步实现，但距离真正稳定、好用，还有不少细节需要继续完善。

如果你也在使用 AI 生成 UI，或者经常遇到设计图好看、实际开发却很难还原的问题，欢迎试试这个 Skill。

使用过程中遇到任何问题，或者觉得哪些地方可以做得更好，都欢迎在评论区留言，或者通过 GitHub Issue 提出建议。不管是功能需求、使用体验，还是实际处理效果的反馈，对我都很有价值。

我会根据大家的使用反馈继续打磨和优化，让这个 Skill 真正成为一个实用的 AI UI 开发辅助工具。

如果觉得这个项目对你有帮助，也欢迎在 GitHub 上点个 Star 支持一下。

项目还在持续完善中，期待大家一起把它打磨得更好。